How to programmatically collapse a grouped Kendo Grid- angular 8?

Question

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.

How can I programmatically collapse all groups so that the result looks like the following image after initialization?

Below is my code:

 <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' }" > <kendo-grid-column [width]="100" field="type" title="Type"></kendo-grid-column> <kendo-grid-column [width]="100" field="item" title="Item"></kendo-grid-column> <kendo-grid-column [width]="100" field="shift" title="Shift"></kendo-grid-column> <kendo-grid-column [width]="100" field="plannedCost" title="Planned Cost"> <ng-template kendoGridGroupHeaderColumnTemplate let-aggregates="aggregates" let-group="group"> <span title="Planned Qty"> {{ numberWithCommas(aggregates.plannedCost.sum) }} </span> </ng-template> <ng-template kendoGridGroupFooterTemplate let-aggregates let-group="group"> <span title="Planned Qty"> {{ numberWithCommas(aggregates.plannedCost.sum) }} </span> </ng-template> <ng-template kendoGridFooterTemplate> TOTAL = {{numberWithCommas(sumResourcesPlannedQty)}} </ng-template> </kendo-grid-column> </kendo-grid>

The TS code is:

 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 => { this.gridDataResources = response; this.loadDataResources(); } ); } public dataStateChangeResources(state: DataStateChangeEvent): void { if (state && state.group) { state.group.map(group => 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 > 0) { return aggregateResult.plannedCost.sum; } return 0; } }

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.

Answer 1

Try:

let i = 0;

this.grid.collapseGroup(i.toString());

Here i is the position of row.

Answer 2

I had to collapse row by row:

 public collapseAll() { this.gridDataResources.forEach((item, idx) => { this.topGrid.collapseRow(idx); }); }