Grid performance: Slow refresh with large data sets

[Siddhartha]

Hello all,

Scenario:
My web app consists of a Kendo grid bound to Kendo datasource with around 3000 rows. I am pushing updates from the server and updating the datasource, sometimes at the rate of 10 updates/second.

Problem:
Pushing data into the datasource and the resultant grid refresh is taking too much time (pushing data into datasource: 30ms and rendering: 300 ms), much slower than the speed with which updates are being delivered. This makes the UI unresponsive.

Ask:
I have already considered paging, but I want to avoid it. One of the things I want to do is limit grid refreshes to once every 500 ms, as updating the grids any faster will not be of perceptible advantage to the users. So, is there a way to have a datasource-connected grid refresh only at specific times instead of with every update?

If I tweak the refresh() function for Grid class in kendo.web.js, and setTimeout() for 500 ms, then this seems to work, but is that a good way to achieve this "delayed" refresh, or can there be a better and more elegant way of achieving this?
Code follows:

        /**
         * Reloads the data and repaints the grid.
         * @example
         * // get a reference to the grid widget
         * var grid = $("#grid").data("kendoGrid");
         * // refreshes the grid
         * grid.refresh();
         */
        refreshRequestScheduled: false,
        refresh: function(e) {
       
        //if there are requests, return as next refresh will take care of this update
        if (this.refreshRequestScheduled) {
return;
        } else {
        //if there are no more requests, schedule one
        this.refreshRequestScheduled = true;
         var that = this;
        setTimeout(function(e) {

                        ... //original refresh() code

        that.refreshRequestScheduled = false;
        }, 500); //should be triggered in this much time
        }
       }
   });


Thanks,
Siddhartha

[Andrew]

I am in exactly the same boat.
Lots of data arriving very very quickly.

Were you able to solve this?

[Kyle]

I, too, am looking for a similar fix.

I'd like to almost suspend the grid long enough for me to populate the datasource, and then resume the grid.

[Atanas Korchev]

Hi,

Calling e.preventDefault when handling the grid dataBinding event will prevent the refreshing. You can do something like this:

var suspendRefresh = false;

$("#grid").kendoGrid({
  /* other configuration */
 dataBinding: function(e) {
      if (suspendRefresh) { 
         e.preventDefault();
      }
 }
});

Then simply set suspendRefresh to true. After you have finished set it back to false and call the grid refresh method.

suspendRefresh = true;
/* update the grid */
suspendRefresh = false;
var grid = $("#grid").data("kendoGrid");
grid.refresh();

Regards,
Atanas Korchev
Telerik