如何以编程方式折叠分组的 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是行的位置。

Answer 2

我不得不逐行折叠：

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