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

Question

查看我准备的 stackblitz here。

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

找出当前可见的列。
使用 string[] 列的名称，我想以编程方式 show/hide 列。

目标是最终将这些值作为 json 存储在某个服务器中，然后根据用户的设置加载它们。我已经阅读了文档 (grid and column chooser)，但到目前为止我得到的只是一个 all 列的列表，不知道哪些是可见的，哪些是不可见的。理想情况下，我希望您使用我在上面描述的功能来完成我在 stackblitz logVisible 和 loadFromArray 中留空的功能。

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

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

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

对于以后对此感兴趣的任何人，事实证明 ColumnChooserComponent 所做的只是设置网格中每个 ColumnBase 元素的 hidden 属性 .这些是从 grid.columnList 访问的（假设 grid 是 GridComponent 引用）。使用 forEach 迭代和 toArray 如果你只想将它们全部放在内存中。这意味着如果您不喜欢默认的 ColumnChooserComponent，您可以在 UI 中挂接任何类型的自定义解决方案。有用的知识。

Answer 1

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

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>

A stackblitz example can be seen here.

更新：

那么你可以使用 hidden 属性 of 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>

A grid example with hide button can be seen here.

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

An work example with kendo-grid-column-chooser at stackblitz can be seen here.

Answer 2

比用户 StepUp 提议的方法稍微好一点。他们的解决方案访问 ColumnList class 的私有属性，这是不好的做法。我找到了一种只使用可公开访问的属性的方法。

在上面的stackblitz中，我完成了函数logVisible和loadFromArray如下：

  // Use this function to console.log currently visible columns.
  public logVisible = () => {
    const visible = this.grid.columnList
      .filter(c => c.hidden !== true)
      .map(c => c.title);
    console.log(visible);
  };

  // Use this function to load columns from a string[].
  public loadFromArray = () => {
    const testCols: string[] = ["ID", "Name", "Discontinued"];
    this.grid.columnList.forEach(c => {
      if(!testCols.includes(c.title)) {
        c.hidden =  true;
      }
    })
  };

新的 stackblitz：https://stackblitz.com/edit/angular-hbekff-hhgqes

重要说明： 在尝试查找可见列时，我强烈建议使用检查 c.hidden !== true，因为默认情况下 hidden [=32= ColumnBase 的 ] 是 undefined，而不是 false！这花了我一段时间才弄明白；我正在检查 !c.hidden 得到错误的结果，无法弄清楚发生了什么。

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

Load columns with code in kendo grid using kendo's column chooser

kendo-grid

kendo-ui-angular2

angular