CODEWITHSUNDEEP
javascriptmvvmkendo-uikendo-grid
Hardik
Hardik

Reputation: 283

Kendo UI: Dynamically change dataSource of grid on button click event

I am having 2 Json files i.e. Products.json and Promotions.json. Both are having the same structure i.e. fields are same just the values are different.

When the page gets loaded the grid is bound with the data in Products.json as follows: 

<!--dataSource gets the Products.json data -->
<div data-role="grid" data-columns="[{field:'code',title:'Code'} .... data-bind="source: dataSource"></div>

after which on button click I want to clear the current records of grid and add data of Promotions.json

<div data-role="grid" data-columns="[{field:'code',title:'Code'} .... data-bind="source: applyPromotionsDataSource"></div>

I am able to read both the dataSources successfully, also I am successfully able to get the "click" event as well..

Questions

  1. How shall I clear the existing dataSource of the grid?

  2. How shall I bind the new dataSource to the grid? (using what method?)

Upvotes: 1

Views: 4858

Answers (2)

Teo
Teo

Reputation: 125

the method setDataSource() works well, but if datasource is different also in columns it goes on error cause it can't find the column "xxxNewDataSourceColumn"... There is a method to refresh also the columns?

Upvotes: 2

Hardik
Hardik

Reputation: 283

I got the solution for the above issue.

I went through the documentation of grid and came across the setDataSource() method and added it on the button click event.

That worked well.

Those looking into this issue, Thanks!! :)

-Hardik

Upvotes: 0

Related Questions