我在实现分组功能的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;
}
}
我搜索选项没有成功。我想知道如何以编程方式执行此操作,以使网格最初显示为折叠状态。
尝试:
let i = 0;
this.grid.collapseGroup(i.toString());
这里我是行的位置。
我不得不逐行折叠:
public collapseAll() {
this.gridDataResources.forEach((item, idx) => {
this.topGrid.collapseRow(idx);
});
}