CODEWITHSUNDEEP
angularkendo-uikendo-gridkendo-ui-angular2
StepUp
StepUp

Reputation: 38209

How to populate rows of kendo-grid dynamically?

My kendo-grid:

<kendo-grid>    
    <ng-template ngFor [ngForOf]="gridColumns" let-column>
        <kendo-grid-column field="{{column}}" title="{{column}}">
            <ng-template kendoGridHeaderTemplate let-dataItem >
                <span title={{column}}>{{column}}</span>                
            </ng-template>
        </kendo-grid-column>
    </ng-template>
</kendo-grid>

I have a JSON response in the following format:

Books: [
{
   BookName: "Hello World!",
   PageCount: 455
},
{
   MagazineName: "Hello World!",
   PageCount: 455
}
],

FirstName: "Jon",
LastName: "Arlington",
City: "London"

and I've managed to populate columns from the JSON like this:

let gridColumns = ["FirstName", "LastName", "BookName", "MagazineName", "PageCount",
                   "MagazineName", "PageCount" ];

And it works okay:
enter image description here

My question is how can I add rows to columns?

Upvotes: 0

Views: 1027

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21475

Just use dataSource's add() method:

var book = {
    MagazineName: "Hello World!",
    PageCount: 455,
    FirstName: "Jon",
    LastName: "Arlington",
    City: "London"
};

grid.dataSource.add(book);

Demo

Upvotes: 1

Related Questions