在Kendo UI中为Angular动态创建网格

时间:2018-07-22 14:06:43

标签: angular kendo-ui kendo-ui-angular2

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

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

这可能吗?

1 个答案:

答案 0 :(得分:3)

不能通过这种方式创建网格。

或者,您可以通过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>