Kendo UI Angular 2-网格默认情况下所有组崩溃

Question

我我开始使用新的kendo ui作为Angular 2网格，我想知道是否有可能，在分组数据时，默认情况下所有组倒数？

我可以看到似乎有一种可用的方法collapseGroup()，但尚不清楚如何使用此方法，也不只是只有一个选项使所有组默认情况下崩溃。

更新根据要求，这是我当前的网格设置。目前只有一个组，但这将变为潜在的五个小组级别。

@Component({
selector: "sector-treegrid",
template: `
    <ccyPicker></ccyPicker>
    <kendo-grid *ngIf="data.length > 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)"
    >
    <kendo-grid-column field="AssetId" title="Asset ID" [width]="120">
        <template kendoGridGroupHeaderTemplatе>
        </template>
    </kendo-grid-column>
    <kendo-grid-column field="Description" title="Description" [width]="230"></kendo-grid-column>
    <kendo-grid-column field="Nominal" title="Nominal" [width]="230">
        <template kendoGridCellTemplate let-dataItem>
          {{dataItem.Nominal | number:'1.0-0'}}
        </template>
        <template 
            kendoGridGroupFooterTemplate 
                let-group="group" 
                let-aggregates>{{aggregates["Nominal"].sum | number:'1.0-0'}}</template>
        <template 
            kendoGridFooterTemplate 
                let-column="column">Total {{column.title}}: {{total["Nominal"].sum | number:'1.0-0'}}</template>
    </kendo-grid-column>
`
})
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 > 0) {
            if (this.data.length > 0) {
                this.gridData = process(this.data, this.state);
                this.total = aggregateBy(this.data, this.aggregates);
            }
        }
    }
    protected dataStateChange(state: DataStateChangeEvent): void {
        state.group.map(
            group => group.aggregates = this.aggregates);
        this.state = state;
        this.gridData = process(this.data, this.state);
    }
}

Answer 1

按照您的代码进行操作，您只有1个groupheaders

使用此导入：

import { GridComponent } from '@progress/kendo-angular-grid';

然后，此代码将关闭前5个顶级标题：

@ViewChild(GridComponent) grid: GridComponent;
close() {
    for (let m = 0; m < 5; m = m + 1) {
        this.grid.collapseGroup(m.toString());
    }
}

Answer 2

1 to mast3rd3mon的基本代码。（此程序是我应用于网格的我的数据阵列）您可以通过添加录取和跳过变量来计算可能的行可能会在最高级组上迭代多少次。这将确保它折叠在屏幕上可见的所有内容，但是它仍然不精确，因为它将发射超出所需的功能。（虽然不会导致错误），如果可用的行更少可折叠，您可以计算应循环的次数，如下所示。

    pageChange(event: PageChangeEvent): void {
        this.state.skip = event.skip;
        this.loadPrograms();
    }
    private loadPrograms(): void {
        this.gridView = process(this.programs, this.state);
        // collapse grid grouping
        let rowCount = this.programs.length;
        let visibleCount = this.state.skip+this.state.take;
        let stopNumber = visibleCount;
        if (rowCount < visibleCount) {
            stopNumber = rowCount;
        }
        for (let m = this.state.skip; m < stopNumber; m = m + 1) {
            this.grid.collapseGroup(m.toString());
        }
    }

这不能解决您的递归问题。据我所知，文档中没有任何网格的属性告诉您是否有子群体或目前可见多少组。您可以通过如何确定递归的深度但是，许多组应用于网格。

this.grid.group.length

Answer 3

只需使用网格实例和网格中使用的数据调用此功能。它也将与分页一起使用（主要ID的位置移动）。

collapseAll(grid: GridComponent, items: any[], parentIdentificator: string = undefined, level: number = 1)
{
    const self = this;
    items.forEach((item, index) => {
        let fixedIndex = level == 1 ? index + grid.skip : index;
        let identificator = parentIdentificator ? (parentIdentificator + "_" + fixedIndex.toString()) : fixedIndex.toString();
        let isAggregate = item["aggregates"] && item["field"] && item["items"];
        if (isAggregate) {
            self.collapseAll(grid, item["items"], identificator);
            grid.collapseGroup(identificator);
        }
    });
}