I went back and forth between my code and various Telerik and Stack Overflow demos of how the Kendo grid is supposed to refresh its datasource without reloading the entire grid. Finally, Telerik sent me a code example that included a function that’s not in their API documentation, but darn well should be. So, if you’re having the same issue I did, where you want to call read() on your grid’s datasource, but it simply isn’t working, here’s an example from Telerik that may help you.
The function: getKendoGrid()
Now, I keep my createDataSource() function around so I can swap out the data I’m paging. Their example uses some sample data, but you could simply use their example of creating a datasource to call your back-end JsonResult action in MVC and things can still work magically.
I hope this helps others
<body>
<div id="grid" />
<script>
function createDataSource() {
return new kendo.data.DataSource({
transport: {
read: {
url: "/echo",
dataType: "json",
method: "POST",
// Simulate response
data: {
"json": JSON.stringify([{
firstName: "John",
lastName: "Smith",
age: 25
}])
}
}
},
pageSize: 10
});
}
var ds = createDataSource();
$("#grid").kendoGrid({
dataSource: ds,
autobind: false,
scrollable: false,
columns: ["firstName", "lastName", "age"]
});
$("#grid").getKendoGrid().dataSource.read();
</script>
</body>
</html>
And here’s a colorized version: