title: Kendo UI Angular 2 - Grid All Groups Collapsed by Default
body: <p>I'm beginning to use the new Kendo UI for Angular 2 Grid and I was wondering if it is possible, when grouping data, to have all the groups collapsed by default?</p>
  
  <p>I can see there appears to be a method available <code>collapseGroup()</code> but it is unclear how to use this nor if there is just an option to have all groups collapsed by default.</p>
  
  <p><strong>Update</strong>
  As requested, here is my current grid setup. There is currently only a single groupby but this will change to potentially five group levels.</p>
  
  <pre><code>@Component({
  selector: "sector-treegrid",
  template: `
      &lt;ccyPicker&gt;&lt;/ccyPicker&gt;
      &lt;kendo-grid *ngIf="data.length &gt; 0"
          [data]="gridData"
          [skip]="state.skip"
          [pageSize]="state.take"
          [pageable]="true"
          [scrollable]="'scrollable'"
          [height]="680"
          [group]="state.group"
          [sortable]="false"
          [groupable]="false"
          [selectable]="true"
          (dataStateChange)="dataStateChange($event)"
      &gt;
      &lt;kendo-grid-column field="AssetId" title="Asset ID" [width]="120"&gt;
          &lt;template kendoGridGroupHeaderTemplatе&gt;
          &lt;/template&gt;
      &lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="Description" title="Description" [width]="230"&gt;&lt;/kendo-grid-column&gt;
      &lt;kendo-grid-column field="Nominal" title="Nominal" [width]="230"&gt;
          &lt;template kendoGridCellTemplate let-dataItem&gt;
            {{dataItem.Nominal | number:'1.0-0'}}
          &lt;/template&gt;
          &lt;template 
              kendoGridGroupFooterTemplate 
                  let-group="group" 
                  let-aggregates&gt;{{aggregates["Nominal"].sum | number:'1.0-0'}}&lt;/template&gt;
          &lt;template 
              kendoGridFooterTemplate 
                  let-column="column"&gt;Total {{column.title}}: {{total["Nominal"].sum | number:'1.0-0'}}&lt;/template&gt;
      &lt;/kendo-grid-column&gt;
  `
  })
  
  export class SectorTreeGridComponent implements OnChanges {
  
      @Input() data: Constituent[] = [];
  
      private gridData: GridDataResult;
      private total: any;
  
      selectedItem: Constituent;
      popupVisible: boolean = false;
  
      private aggregates: any[] = [{ field: 'Nominal', aggregate: 'sum' }];
  
      private state: State = {
          skip: 0,
          take: 500,
          group: [{ field: 'Level2', aggregates: this.aggregates }]
      };
  
      ngOnChanges(changes: SimpleChanges) {  
          if (changes.data.currentValue.length &gt; 0) {
              if (this.data.length &gt; 0) {
                  this.gridData = process(this.data, this.state);
                  this.total = aggregateBy(this.data, this.aggregates);
              }
          }
      }
  
      protected dataStateChange(state: DataStateChangeEvent): void {
          state.group.map(
              group =&gt; group.aggregates = this.aggregates);
  
          this.state = state;
  
          this.gridData = process(this.data, this.state);
      }
  }
  </code></pre>