How to remove all rows from a Kendo grid

Question

I am using Kendo grid.

I want to remove all rows from Kendo grid using JavaScript.

I removed them using a for loop but I want to find the best way to remove all rows.

Solution 1

try following the code.

var grid = $("#Grid").data('kendoGrid');           

grid.dataSource.data([]); 
grid.setDataSource([]);

for demo click here

Update: Fixed sorting issue... Thanks @Windle

Solution 2

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 data
dataSource.data(result.Data);//add new data
grid.setDataSource(result.Data);//set the new data as the grids new datasource
dataSource.sync();//refresh grid

Solution 3

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

 $scope.gridData.data([]);

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

Solution 4

This worked fine for me.

var grid = $("#Grid").data("kendoGrid");
var newDataSource = new kendo.data.DataSource({
    data: []
});
grid.setDataSource(newDataSource);

View more solutions