时间戳

首页 > 解决方案 > 使用 kendo 的列选择器在 kendo 网格中加载带有代码的列

angular - 使用 kendo 的列选择器在 kendo 网格中加载带有代码的列

问题描述

看看我在这里准备的 stackblitz 。

使用ColumnChooserComponent如上所示，我想实现两件事：

  1. 找出当前可见的列。
  2. 使用string[]带有列名的 a ，我想以编程方式显示/隐藏列。

目标是最终将这些值存储在服务器中的某个json位置，然后根据用户的设置加载它们。我已经阅读了文档（网格和列选择器），但到目前为止我所得到的只是所有列的列表，不知道哪些是可见的，哪些是不可见的。理想情况下，我希望您完成我在 stackblitz 中留空的功能，logVisible并且loadFromArray使用我上面描述的功能。

任何帮助将不胜感激。提前致谢。

更新：我正在寻找的答案是用户StepUp的更新 1。

更新 2 和澄清：我最终使用的解决方案看起来像我下面的答案。

对于将来对此感兴趣的任何人，事实证明所做的ColumnChooserComponent只是设置网格hidden中每个ColumnBase元素的属性。这些是从grid.columnList（假设grid是GridComponent参考）访问的。用于forEach迭代，toArray如果您只想将它​​们全部存储在内存中。这意味着如果您不喜欢默认的ColumnChooserComponent. 知道有用。

标签： angularkendo-gridkendo-ui-angular2

解决方案

可以创建所需列的字符串数组，并在加载网格时显示它们：

testCols: string[] = ['ProductID', 'ProductName', 'QuantityPerUnit'];

和html：

<kendo-grid #grid [data]="gridData" [height]="410">
    <ng-template ngFor [ngForOf]="testCols" let-column>
        <kendo-grid-column field="{{column}}">
            <ng-template kendoGridHeaderTemplate let-dataItem>
                {{dataItem.field}}
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>
                <p> {{ dataItem[column] | json }} </p>
            </ng-template>    
        </kendo-grid-column>
    </ng-template>
</kendo-grid>

可以在这里看到一个 stackblitz 示例。

更新：

然后你可以使用hidden.kendo-grid-column

因此，您可以创建一个数组，hiddenColumns然后只需推送应该隐藏的列。

然后在保存用户设置后，您可以将隐藏的列推送到hiddenColumns.

打字稿：

public hiddenColumns: string[] = [];

HTML：

<kendo-grid [data]="gridData" style="height:400px">
    <ng-template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column
            field="{{column}}"
            [hidden]="hiddenColumns.indexOf(column) > -1"
         >
         <ng-template kendoGridHeaderTemplate let-dataItem>
            {{dataItem.field}}
             <button
               (click)="hideColumn(dataItem.field)"
                class="k-button k-primary"
                style="float: right;"
             >
             Hide
             </button>
          </ng-template>
       </kendo-grid-column>
   </ng-template>
</kendo-grid>

可以在此处看到带有隐藏按钮的网格示例。

更新 1：

您可以创建一个数组choosenColumns：

choosenColumns: any[] = [];

// Use this function to console.log currently visible columns.
public logVisible = (grid) => {
    if (this.choosenColumns.length == 0) {
    this.choosenColumns = grid.columnList.columns._results
        .filter(f => f.isVisible)
        .map(s=> s.field);        
    }
}

 // Use this function to load columns from a string[].
 public loadFromArray = () => {      
    this.grid.columnList.columns._results.forEach(c => {
        if (!this.choosenColumns.includes(c.field)) {          
           c.hidden = false;
          console.log(c.field, c.hidden);
        } 
    })    
 }

可以在此处查看 stackblitz 中使用 kendo-grid-column-chooser 的工作示例。

推荐阅读