首页 > 解决方案 > 在 Kendo UI 中为 Angular 创建动态网格

问题描述

Angular 的 Kendo UI 有一个网格,可以定义如下:

<kendo-grid [data]="gridData" [height]="410">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80">
            </kendo-grid-column>
</kendo-grid>

但我需要做的是动态构建列。就像是:

var grid = new KendoGrid();
var column = new KendoGridColumn();
grid.add(column);

这可能吗?

标签: angularkendo-uikendo-ui-angular2

解决方案


AFAIK 你不能创建这样的网格。

或者,您可以通过ngFor.

public columns = [
    { field:'ProductID', title:'ID', width:250 },
    { field:'Category.CategoryName', title:'Category' }
];

html

<kendo-grid [data]="gridData" [height]="410">
    <kendo-grid-column
        *ngFor="let column of columns"
        [field]="column.field"
        [title]="column.title"
        [width]="column.width">
    </kendo-grid-column>
</kendo-grid>

推荐阅读