Telerik MVC Grid Inline editing requires page refresh to display changes - asp.net-mvc

Question

I have a Telerik MVC Grid where I am updating the rows inline (updating name column, number column is uneditable)
#Html.Kendo().Grid(Model.Employees)
.Name("EmployeeGrid")
.Columns(col =>
{
col.Bound(o => o.EmployeeNumber);
col.Bound(o => o.Name).Width(250);
col.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Events(e => e.RequestEnd("onGridDataSourceRequestEnd"))
.Model(model =>
{
model.Id(o => o.EmployeeNumber);
model.Field(o => o.EmployeeNumber).Editable(false);
})
.Update(update => update.Action("EditingInline_Update", "EmployeeUpdate"))
.ServerOperation(false)
)
.Render();
function onGridDataSourceRequestEnd(e) {
if (e.type == "update") {
console.log('I am inside Update');
$("#EmployeeGrid").data("kendoGrid").dataSource.read();
}
}
My problem is that above code updates the record by calling action EmployeeUpdate when I click on Update button in the grid. However, that change doesnt immediately reflect in the grid even though I am calling datasource read in JS function. Console shows "I am inside Update" but doesnt refresh grid. If I refresh the page, I do see the update row.
Please let me know what am I missing. Thank you.

Answer 1

You should not have to refresh/reload your grid when doing an update, you just have to return the updated record from the controller and grid-widget will take care of the rest!
Please checkout telerik demo-page
The most common error I do is forgetting to return a datasourceresult:
.ToDataSourceResult(request,ModelState)
Telerik normally returns the same model that are sent in to the update, but I normally returns the same object that the read function returns (if read does something I'll get that on the updated record too).

Answer 2

Probably you should try refreshing the grid with refresh() function:
function onGridDataSourceRequestEnd(e) {
if (e.type == "update") {
console.log('I am inside Update');
$("#EmployeeGrid").data("kendoGrid").dataSource.read();
// add this line
$("#EmployeeGrid").data("kendoGrid").refresh();
}
}
Note that read() function in dataSource only reload data source by request to the server, the grid contents still not changed before using refresh().