【问题标题】:Kendo UI for Angular2 - Grid How to Add Columns DynamicallyKendo UI for Angular2 - Grid 如何动态添加列
【发布时间】:2016-09-21 02:50:00
【问题描述】:

对于 Grid 组件,如果我已经在 html 中预定义了几列,但结果集可以在预定义的列之上有各种附加列,我如何动态添加这些列?

在我检索数据之前无法知道这些额外的列是什么?在使用 ViewChild 指令获取数据后,我可以访问网格组件,但是查看网格的列数组,如对象,我看不到以编程方式动态添加列的方法。

【问题讨论】:

    标签: angular kendo-ui-angular2


    【解决方案1】:

    您可以使用 ngFor 创建可变数量的列:

        <kendo-grid [data]="gridData">
          <ng-template ngFor [ngForOf]="columns" let-column>
            <kendo-grid-column field="{{column}}"></kendo-grid-column>
          </ng-template>
        </kendo-grid>
    

    如果您想尝试一下,请参阅文档中的“显示和隐藏列”演示(在columns examples 中向下滚动)。

    【讨论】:

    • 你好..,我不能用 'data' 替换 'kendoGridBinding' 请建议我如何实现它。
    • @shambhuyadav 没有必要替换您的绑定指令以使这种方法起作用。上面示例的重点是使用ngFor 指令来动态创建列。
    • 如果您升级到最新的剑道 angular ui,您可以利用自动生成的列telerik.com/kendo-angular-ui/components/grid/columns/…
    • 如何使用这种方法为列使用页眉/单元格/页脚模板?
    【解决方案2】:

     <kendo-grid [data]="gridData">
     </kendo-grid>

    您可以直接添加“gridData”,无需列名。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-17
      相关资源
      最近更新 更多