Reloading/refreshing Kendo Grid

Question

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.

Answer 1

You can always use $('#GridName').data('kendoGrid').dataSource.read();. You don't really need to .refresh(); after that, .dataSource.read(); will do the trick.

Now if you want to refresh your grid in a more angular way, you can do:

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>

vm.grid.dataSource.read();`

OR

vm.gridOptions.dataSource.read();

And don't forget to declare your datasource as kendo.data.DataSource type

Answer 2

In my case I had a custom url to go to each time; though the schema of the result would remain the same.
I used the following:

var searchResults = null;
$.ajax({
        url: http://myhost/context/resource,
        dataType: "json",
        success: function (result, textStatus, jqXHR) {
            //massage results and store in searchResults
            searchResults = massageData(result);
        }
    }).done(function() {
        //Kendo grid stuff
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#doc-list-grid').data('kendoGrid');
        dataSource.read();
        grid.setDataSource(dataSource);
    });

Answer 3

Actually, they are different:

• $('#GridName').data('kendoGrid').dataSource.read() refreshes the uid attributes of the table row

• $('#GridName').data('kendoGrid').refresh() leaves the same uid

Answer 4

I never do refresh .

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

alone works for me all the time.

Answer 5

If you do not want to have a reference to the grid in the handler, you can use this code:

 $(".k-pager-refresh").trigger('click');

This will refresh the grid, if there is a refresh button. The button can be enabled like so:

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))

Answer 6

By using following code it automatically called grid's read method and again fill grid

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