如何以編程方式折疊分組的 Kendo Grid-angular 8？

Question

我的 angular 8 應用程序上有以下 Kendo Grid，我在其中實現了分組。 默認情況下，網格會在所有組展開的情況下顯示。

如何以編程方式折疊所有組，以便初始化后的結果如下圖所示？

下面是我的代碼：

 <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>

TS代碼是：

 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; } }

我已經搜索了選項，但沒有成功。 我想知道如何以編程方式執行此操作，以便我的網格最初顯示為折疊狀態。

Answer 1

嘗試：

let i = 0;

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

這里 i 是行的 position。

Answer 2

我不得不逐行折疊：

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