Creating dynamically grid in Kendo UI for Angular

Question

Kendo UI for Angular has a grid that can be defined as follows:

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

But what I ned to do is to dynamically build the columns. Something like:

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

Is this possible?

Philipp · Accepted Answer · 2018-07-23 07:01:49Z

5

AFAIK you cannot create a grid like this.

Alternatively you could generate the columns via 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>

answered Jul 23, 2018 at 7:01

Philipp

1,8941 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating dynamically grid in Kendo UI for Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related