Invoking Page Refresh from Kendo Grid Update

1
votes

I am using a Kendo-grid with inline editing Let's call this Grid3. The Grid is displaying a list of items from a referenced property of the page's view model. When an item on the grid has been saved, I would like to invoke a complete page refresh (or a refresh two other grids, Grid1 and Grid2 on the page). The reason is that when an items has been updated in the grid, values displayed in other grids are affected.

Any ideas?

2
kendo-uikendo-grid

2 Answers

2
votes

Call datasource.read() at those grids you want to refresh. 

$("#grid3").kendoGrid({
   dataSource : dataSource,
   save: function(e) {
    grid1.dataSource.read();
    grid2.dataSource.read();
    }
  }

Alternatively place the grid.datasource.read() call into your datasource complete.

var dataSource = new kendo.data.DataSource({
                transport: {
                    update: { 
                          complete: function (jqXhr, textStatus) {
                                   grid1.dataSource.read();
                                   grid2.dataSource.read();
                                   } 
                            }
                           }
                          });
0
votes

This can be accomplished using the RequestEnd event.

The Kendo Grid declaration would have something like: 

.DataSource(datasource => datasource
    .Ajax()
    .Model(model => model.Id(fi => fi.Id))
    .Read(read => read.Action("Buildings_ReadForecast", "Plan", new {buildingId                               = Model.BuildingID}))
    .Events(events => events.Error("error_handler"))
    .Events(events => events.RequestEnd("OnRequestEnd_Grid"))

Then create the javascript method like: 

    function OnRequestEnd_Grid(e) {
    if (e.type === "update") {
        var forecastgrid = $('#ForecastGrid').data('kendoGrid');
        var planGrid = $('#PlanGrid').data('kendoGrid');
        planGrid.dataSource.read();
        forecastgrid.dataSource.read();

      }
    }

That's it!