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

Question

请查看我准备的stackblitz 链接。

通过使用上面展示的ColumnChooserComponent，我想实现以下两个目标：

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

目标是最终将这些值存储在服务器中作为json，然后根据用户的设置加载它们。我已经阅读了文档（grid和column chooser），但目前我只得到了所有列的列表，不知道哪些是可见的，哪些是不可见的。理想情况下，我希望您能完成我在stackblitz中留空的logVisible和loadFromArray函数，并实现上述功能。

非常感谢您的任何帮助。谢谢您。

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

更新2和澄清：我最终使用的解决方案如下所示。

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

- igg

Answer 1

比用户StepUp提出的方案稍微好一些。他们的解决方案访问了ColumnList类的私有属性，这是不好的做法。我已经找到了一种只使用公共可访问属性的方法。

在上面的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 ，因为默认情况下 ColumnBase 的 hidden 属性是 undefined ，而不是 false ！这让我花了一些时间才弄清楚；我用!c.hidden 进行检查，得到错误的结果，无法弄清楚发生了什么。

- igg

Answer 2

可以创建一个字符串数组来选择需要显示的列，然后在加载网格时只显示这些列：

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

And 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的示例。

更新:

然后您可以使用kendo-grid-column的hidden属性。

因此，您可以创建一个hiddenColumns数组，然后只需添加需要隐藏的列。

然后在保存用户设置后，您可以将隐藏的列推入hiddenColumns中。

TypeScript:

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

在这里可以看到一个使用kendo-grid-column-chooser的示例工作代码，该代码位于stackblitz上。

- StepUp

---

这不使用列选择器（或任何选择列的方式）。我想在第一次加载后提供选项，以显示/隐藏列并具有保存配置的能力。 - igg

就像我之前说的那样，我希望使用列选择器组件来完成这个任务，而不是自定义解决方案。如果有人告诉我这无法实现，我可能会考虑使用类似于你提供的解决方案。感谢你的努力。 - igg

谢谢，这正是我想要的。我很惊讶kendo没有提供更多“内置”的方法来做到这一点。如果存在的话，我还没有找到它。 - igg