Reloading/refreshing Kendo Grid

How to reload or refresh a Kendo Grid using Javascript?

It is often required to reload or refresh a grid after sometime or after a user action.

Solution 1:

You can use

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

Solution 2:

I never do refresh.

$('#GridName').data('kendoGrid').dataSource.read();

alone works for me all the time.

Solution 3:

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

Solution 4:

In a recent project, I had to update the Kendo UI Grid based on some calls, that were happening on some dropdown selects. Here is what I ended up using:

$.ajax({
        url: '/api/....',
        data: { myIDSArray: javascriptArrayOfIDs },
        traditional: true,
        success: function(result) {
            searchResults = result;
        }
    }).done(function() {
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#myKendoGrid').data("kendoGrid");
        dataSource.read();
        grid.setDataSource(dataSource);
    });

Hopefully this will save you some time.