2

I want to refresh the Kendo UI grid's contents every 60 seconds with up-to-the-minute data.

EDIT: Here's how the dataSource is being assigned at initial configuration:

parsedData = $.parseJSON(data);

var dataSource = new kendo.data.DataSource({
    data: parsedData
});

$("#grid").kendoGrid({
    dataSource: dataSource, 
    . . .

Can the grid's dataSource simply be reassigned in one fell swoop? Or would it be better to remove the items in the dataSource.data individually, or by clearing the array, and then injecting new items or replacing the array in its entirety? Does the implementation of observe pattern in the Kendo dataSource indicate one approach over another?

I haven't embarked on this yet, but in my experience with grids, going way back to the early days of Visual Basic, changing a grid's datasource has always had undesirable side-effects and I have no reason to expect this will be any smoother sailing. Hope I'm wrong.

ANOTHER EDIT# (26 April 2013): if there is an approach to refreshing the grid's underlying data with a new set of rows having the same structure as previously, an approach that would preserve the expanded/collapsed state of the grid's groupings, that would be ideally suited to our purposes.

sonyisda1
  • 422
  • 1
  • 8
  • 21
Tim
  • 8,669
  • 31
  • 105
  • 183

4 Answers4

7

We are using Kendo 2012.3.1315.340 version and for us it works this way:

$("#YourGridNameHere").data("kendoGrid").dataSource.read();

Like that you are telling the datasource to read data once more. We usually do it on the requestEnd event handler.

I hope this helps some one.

Jportelas
  • 646
  • 10
  • 21
  • thanks for the suggestion: If we make the grid responsible for fetching its data (i.e. for executing the XHR which populates its dataSource) what happens to rows in the grid that were present in the dataset fetched at 10:00AM but which are no longer there in the dataset fetched at 10:01AM, or which have changed? Are such rows removed from the grid? Let's say the grid is grouped on Status column and the status of a particular row changes from "In PaintShop" to "InShipping"; does the read() cause the row to move to correct group? Or is the grid un-grouped when read() is performed? – Tim Apr 26 '13 at 14:39
  • Thanks, but this gives "TypeError: $(...).data(...) is undefined" error. I also looked on many pages and tried different variations of this solution but still get the same error. Any idea? – Jack Dec 05 '15 at 15:37
2

To update the data source of the grid use the data method:

$("#grid").data("kendoGrid").dataSource.data(parsedData);
Atanas Korchev
  • 30,562
  • 8
  • 59
  • 93
1

From your bit of sample code, it looks like your DataSource is using local data, not fetching remote data?

If it were fetching remote data, you could simply call:

$("#grid").data("kendoGrid").dataSource.sync();

And it would re-fetch from the server, as well as perform any outstanding updates or deletes, if your grid is not read-only.

For refreshing local data, you can just set the .data property on the DaaSource:

$("#grid").data("kendoGrid").dataSource.data(parsedData);

I don't have a working example in front of me to try it, but if your grid rows don't refresh after the dataSource.data() function is called, then you may also need to call refresh on the grid:

function updateGridData (parsedData) {
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.data(parsedData);
    grid.refresh();
}
CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138
  • My grid doesn't really know how it's getting the data; at grid-instantiation, I already have a Kendo dataSource object fully populated which is assigned to the grid's dataSource property. So I have followed your suggestion to replace the contents of grid.dataSource.data in one fell swoop: `grid.dataSource.data(parsedData)`. The only disadvantage to this simple and easy approach, and for us it is a significant disadvantage, is that the grid does not retain any memory of the expanded-collapsed state of groupings. – Tim Apr 26 '13 at 14:20
  • If we make the grid responsible for fetching its own data, and use sync() method to refresh the grid with new remote data, are groupings persisted, or does sync() cause a basic rebinding that causes the grid to revert to an un-grouped state? Are read(), sync(), data( new data) all simply synonymous ways to invoke the same underlying behavior? – Tim Apr 26 '13 at 14:43
  • `.read()` fetches new data from the server. `.sync()` pushes any pending updates made on the client to the server (not sure if it reads new data too). `.data()` replaces the data with whatever you get it, without hitting the server. – CodingWithSpike Apr 28 '13 at 13:41
  • My answer to this question might help you with retaining the expanded/collapsed state during refresh: http://stackoverflow.com/questions/13953278/telerik-kendo-ui-grid-grouping-and-sorting-survive-grid-refresh-but-collapsed – CodingWithSpike Apr 28 '13 at 13:43
  • Yes, that answer's starting point is the assumption that the groups are not persisted, but I was wondering if there were any method available that did not destroy the groupings in the first place. Also, I think the UIDs are not persistent when data(newData) is used. – Tim Apr 28 '13 at 18:41
0

To update the grid you need to handle the change event on your dataSource.

change: function() {
    var grid = $(YouGridSelector).data("kendoGrid");
    grid.refresh();
}

This should update your grid when you change your dataSource's data.

NunoCarmo
  • 5,479
  • 2
  • 19
  • 15
  • but my question is, what is the best way to change the data of the dataSource? do I create a new dataSource object? replace the data array of the existing dataSource object? remove items from the existing data array one at a time (e.g. pop()) and then insert new items one at a time? – Tim Dec 15 '12 at 14:08