How to remove all rows from a Kendo grid

try following code.

$("#Grid").data('kendoGrid').dataSource.data([]);

for demo click here

That doesn't really move the underlying data of the grid, it just clears the rows being displayed. If you sort the "empty" grid, all the rows reappear form the underlying data.

If instead of removing your data as shown like this:

dataSource.data([]);

and instead replace it with a new array of data, say called result.Data.. like this:

dataSource.data(result.Data)

you will see the data swap, but if sort or page, again the original data is shown.

Anyone know how to actually change the data and have the new data replace the source data of the grid?

UPDATE: The answer is to ALSO use the setDataSource method:

var grid = $("#grid").data("kendoGrid");var dataSource = grid.dataSource;dataSource.data([]);//clear out old datadataSource.data(result.Data);//add new datagrid.setDataSource(result.Data);//set the new data as the grids new datasourcedataSource.sync();//refresh grid

If you are working with Angualrjs, then try to follow this code:

 $scope.gridData.data([]);

Where gridData is k-data-source="gridData"