Question

我开始为Angular 2 Grid使用新的Kendo UI，我想知道在分组数据时是否可以默认折叠所有组？

我可以看到似乎有一种可用的方法collapseGroup()但是目前还不清楚如何使用它，也不清楚是否只有一个选项可以让所有组默认崩溃。

更新根据要求，这是我当前的网格设置。目前只有一个groupby，但这可能会改为五个组级别。

@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到mast3rd3mon。（this.programs是我应用于网格的数据数组）您可以通过添加take和skip变量来计算可能存在哪些行，从而确定迭代顶级组的次数。这将确保它折叠屏幕上可见的所有内容，但它仍然是不精确的，因为它将超出它所需的范围。（但它不会导致错误）如果可用于折叠的行数较少，则可以计算应循环的次数，如下所示。

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

    });
}

Kendo UI Angular 2 - 网格默认折叠所有组

3 个答案: