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

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

我可以看到那里似乎有一种方法可用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); 
    } 
}

来源

2017-02-22 markblandford

您可以添加网格组结构吗？这将更容易帮助 – mast3rd3mon

@ mast3rd3mon我已经用网格更新了这个问题。 – markblandford

去你的代码，你只有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()); 
    } 
}

来源

2017-02-23 12:30:17 mast3rd3mon

谢谢。这确实会破坏前五个团体。但是，我可以有n个组（也可以嵌套），因此通过'this.grid.data'来执行递归循环来折叠所有内容并不实际。 – markblandford

此外，如果有寻呼，一切似乎都搞砸了。例如，我有10页，每页500行。我共有六个小组，只有三个小组出现在第一页上。当我“全部折叠”时，有些页面会变成空白，而且看起来只有前三组实际上已折叠。 – markblandford

对不起，我不能帮助进一步恐怕。随时加入Kendo UI松弛：https：//kendouiangular2.slack.com/ incase你想要更多的帮助，或者你可以发布修复，如果当你得到一个 – mast3rd3mon

+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

来源

2017-07-23 14:21:16 cmartin

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

回答

相关问题