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.

回答1:

You can use

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

回答2:

I never do refresh .

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

alone works for me all the time.

回答3:

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

回答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.

回答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))

回答6:

What you have to do is just add an event .Events(events => events.Sync("KendoGridRefresh")) in your kendoGrid binding code.No need to write the refresh code in ajax result.

@(Html.Kendo().Grid<Models.DocumentDetail>().Name("document")     .DataSource(dataSource => dataSource     .Ajax()     .PageSize(20)     .Model(model => model.Id(m => m.Id))             .Events(events => events.Sync("KendoGridRefresh"))         )       .Columns(columns =>       {           columns.Bound(c => c.Id).Hidden();                         columns.Bound(c => c.UserName).Title(@Resources.Resource.lblAddedBy);                                  }).Events(e => e.DataBound("onRowBound"))           .ToolBar(toolbar => toolbar.Create().Text(@Resources.Resource.lblNewDocument))           .Sortable()                     .HtmlAttributes(new { style = "height:260px" })             )

And you can add the following Global function in any of your .js file. so, you can call it for all the kendo grids in your project to refresh the kendoGrid.

function KendoGridRefresh() {     var grid = $('#document').data('kendoGrid');     grid.dataSource.read(); }

回答7:

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

回答8:

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: