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

Question

I am having 2 Json files ie Products.json and Promotions.json . Both are having the same structure ie 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?)

Answer 1

setDataSource（）方法效果很好，但是如果列中的数据源也不同，则会发生错误，原因是找不到“ xxxNewDataSourceColumn”列...是否有一种方法也可以刷新列？

Answer 2

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