title: How to programmatically collapse a grouped Kendo Grid- angular 8?
body: <p>I have the following Kendo Grid on my angular 8 app where I have implemented Grouping. The grid by default appear with all groups expanded.</p>
  
  <p>How can I programmatically collapse all groups so that the result looks like the following image after initialization?</p>
  
  <p><a href="https://i.stack.imgur.com/2JUzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2JUzX.png" alt="enter image description here"></a></p>
  
  <p>Below is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;kendo-grid (dataStateChange)="dataStateChangeResources($event)"
                *ngIf="gridViewResources"
                [data]="gridViewResources"
                [group]="stateResources.group"
                [groupable]="{ showFooter: true }"
                [pageSize]="stateResources.take"
                [pageable]="true"
                [skip]="stateResources.skip"
                [sort]="stateResources.sort"
                [sortable]="{ mode: 'multiple' }"
    &gt;
  
      &lt;kendo-grid-column [width]="100" field="type" title="Type"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column [width]="100" field="item" title="Item"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column [width]="100" field="shift" title="Shift"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column [width]="100" field="plannedCost" title="Planned Cost"&gt;
        &lt;ng-template kendoGridGroupHeaderColumnTemplate let-aggregates="aggregates" let-group="group"&gt;
          &lt;span title="Planned Qty"&gt;
               {{ numberWithCommas(aggregates.plannedCost.sum) }}
          &lt;/span&gt;
        &lt;/ng-template&gt;
        &lt;ng-template kendoGridGroupFooterTemplate let-aggregates let-group="group"&gt;
          &lt;span title="Planned Qty"&gt;
               {{ numberWithCommas(aggregates.plannedCost.sum) }}
          &lt;/span&gt;
        &lt;/ng-template&gt;
        &lt;ng-template kendoGridFooterTemplate&gt;
          TOTAL = {{numberWithCommas(sumResourcesPlannedQty)}}
        &lt;/ng-template&gt;
      &lt;/kendo-grid-column&gt;
  &lt;/kendo-grid&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The TS code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, OnInit} from '@angular/core';
  import {PlanningService} from '../../services/planning.service';
  import {SeriesLabels} from '@progress/kendo-angular-charts';
  import {aggregateBy, DataResult, process, State} from '@progress/kendo-data-query';
  import {DataStateChangeEvent} from '@progress/kendo-angular-grid';
  
  @Component({
    selector: 'app-planning-dashboard',
    templateUrl: './planning-dashboard.component.html',
    styleUrls: ['./planning-dashboard.component.css']
  })
  
  
  export class PlanningDashboardComponent implements OnInit {
    gridDataResources: any[];
    public seriesLabels: SeriesLabels = {
      visible: true,
      padding: 3,
      font: 'bold 14px Arial, sans-serif'
    };
    public gridViewResources: DataResult;
  
    public aggregatesResources: any[] = [{field: 'plannedCost', aggregate: 'sum'}, {field: 'actualCost', aggregate: 'sum'}];
    public stateResources: State = {
      skip: 0,
      take: 15,
      group: [{field: 'type', aggregates: this.aggregatesResources}]
    };
  
    constructor(private service: PlanningService) {}
    
    ngOnInit() {
      this.getAllResources(9269);
    }
  
    getAllResources(workOrderId: number) {
      this.service.getAllResources(workOrderId).subscribe(
        response =&gt; {
          this.gridDataResources = response;
          this.loadDataResources();
        }
      );
    }
  
    public dataStateChangeResources(state: DataStateChangeEvent): void {
      if (state &amp;&amp; state.group) {
        state.group.map(group =&gt; group.aggregates = this.aggregatesResources);
      }
      this.stateResources = state;
      this.gridViewResources = process(this.gridDataResources, this.stateResources);
    }
  
    numberWithCommas(x) {
      return x.toLocaleString('en', {useGrouping: true});
    }
  
    private loadDataResources(): void {
      this.gridViewResources = process(this.gridDataResources, {group: this.stateResources.group});
  
    }
  
    public get sumResourcesPlannedQty() {
      const aggregateResult = aggregateBy(this.gridDataResources, [{aggregate: 'sum', field: 'plannedCost'}]);
      if (this.gridDataResources.length &gt; 0) {
        return aggregateResult.plannedCost.sum;
      }
      return 0;
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have searched for options by with no success. I would like to know how can I do this programmatically so that my grid is initially displayed collapsed.</p>