Grid - Real-Time Data updates

[Gajendra]

We need to grid to display updates from server. The updates might be up to 1000 per second. We will have grid with virtualization.
I am trying to update the datasource with changes. The page is crashing with in minutes. Could you please let me know how should I do this efficiently.

[Daniel]

Hi,

A problem with this many updates might occur if you are using the set method to update the values. If the item is not in edit mode, the whole grid will be refreshed for each value. If that is the case, I can suggest to set the values directly without the set method and redraw the Grid with its refresh method.
If you adding or removing multiple items then I can suggest to use the DataSource observable array splice method so that the changes are made with a single redraw.
If the problem persists, please provide the code you are using so I can check the exact setup.

Regards,
Daniel
the Telerik team

[Gajendra]

I tried as suggested, looks problem not solved. I am using Chrome. Page crashes in less than 15 mins with just simple grid. CPU cycles on Chrome goes up. 

Here is whole code. I have modified to isolate the problem. If I increase refresh time from 1 to 2 secs, its kind of improved. Here I am updating only 10 rows in each second but in production but II have to update nearly 100 or more.  We will have lot of data in browser, we might display only few rows in grid. we need to sort and filter the data in client without round trip to server. 

Please let me know how I should be fixing this and also please let me know if you need more information.

              function createDataForGrid() {
                  var dataArray = [];
                  for (i = 0; i < 10; i++) {
                    dataArray.push({
                      rowId:i,
                      AGENT_GRP_ID : i,
                      PRIMARY_MEDIA_TYPE_ID : Math.floor((Math.random()*10)+1),
                      DUR_WORK_ACCEPT : Math.floor((Math.random()*100)+1),
                      DUR_WORK_SETUP : Math.floor((Math.random()*100)+1),
                      DUR_INTERACT : Math.floor((Math.random()*100)+1),
                      NUM_INTERACT : Math.floor((Math.random()*10)+1),
                      DUR_HOLD : Math.floor((Math.random()*100)+1),
                      NUM_HOLD : Math.floor((Math.random()*10)+1),
                      DUR_WRAPUP : Math.floor((Math.random()*100)+1),
                      NUM_WRAPUP : Math.floor((Math.random()*10)+1)
                    });
                }
                return dataArray;
              }

      var observableArray = new kendo.data.ObservableArray([{}]);

function handleDataFromServer() {
try {
var data = createDataForGrid();//This will be replaced server call which returns array of Objects
for ( var nCnt = 0; nCnt < data.length; nCnt++) {
 observableArray.splice(parseInt(data[nCnt].rowId),1, data[nCnt]); 
}
                                                                       var gridObj = $("#grid").data("kendoGrid");
                                                                      gridObj.dataSource.data(observableArray);
} catch (ex) {
alert('Exceptions' + ex);
}
}

                                          window.setInterval("handleDataFromServer()", 1000);


var datasources = new kendo.data.DataSource({
schema : {
fields : {
AGENT_GRP_ID : {
type : "int",
editable : false
},
PRIMARY_MEDIA_TYPE_ID : {
type : "string",
editable : false
},
DUR_WORK_ACCEPT : {
type : "string",
editable : false
},
DUR_WORK_SETUP : {
type : "string",
editable : false
},
DUR_INTERACT : {
type : "string",
editable : false
},
NUM_INTERACT : {
type : "string",
editable : false
},
DUR_HOLD : {
type : "string",
editable : false
},
NUM_HOLD : {
type : "string",
editable : false
},
DUR_WRAPUP : {
type : "string",
editable : false
},
NUM_WRAPUP : {
type : "string",
editable : false
},
rowId : {
type : "int",
editable : false
}
}
},
pageSize : 10
});


grid = $("#grid").kendoGrid({
dataSource : datasources,
scrollable : {
virtual : true
},
autoBind : true,
editable:false,
columns : [ {
field : "AGENT_GRP_ID",
title : "Agent Group Id",
width : "12%"
}, {
field : "PRIMARY_MEDIA_TYPE_ID",
title : "Primary Media Type ",
width : "12%"
}, {
field : "DUR_WORK_SETUP",
title : "Work Duration",
width : "20%"
}, {
field : "DUR_INTERACT",
title : "Interaction Duration"
}, {
field : "NUM_INTERACT",
title : "# Interaction",
}, {
field : "DUR_HOLD",
title : "Hold Duration",
}, {
field : "NUM_HOLD",
title : "# Hold",
}, {
field : "DUR_WRAPUP",
title : "Duration Wrap",
}, {
field : "NUM_WRAPUP",
title : "# Wrap",
},{
field : "rowId",
title : "# Row ID",
} ]
});

[Daniel]

Hello again,

The splice method should be used if your are modifying the dataSource underlying ObservableArray. It is not needed to create the a separate observable array and apply the changes to it when setting the entire data through the data method. The dataSource array can be found with the data method without parameters.
I created a small jsBin sample with the code that you provided and the data set directly to the dataSource. I also changed the function to generate one thousand items and left the sample running in Chrome for about thirty minutes. At least on my side there was no increase in memory or CPU usage. Please check it and let me know if I am missing something or if you still observe the problem on your side.

Regards,
Daniel
the Telerik team

[Gajendra]

Hi Daniel

 

Thank you for the solution. I am kind of integrated into my environment. Intensity of issues reduced. I smelling some kind memory leak, let me get back to you when I have clear numbers.

 

I have other issues which as are showed up. We can check them at jsBin sample you posted.

• Scroll bar in grid is behaving totally odd.
• Styles are not getting applied to grid scroll bar.

 

Thank you

[Daniel]

Hi,

Sorry, I missed the problem with the scroll-bar in this case. It occurs because the data is set through the data method and the virtual scroll-bar is not refreshed. Passing the data through the transport instead should resolve this problem. I have updated the sample to show this approach. In the case when the data is coming from the server, you can also configure the transport for remote binding and just read the data again. You could also use server paging so that the data is refreshed only for the current page.
I am not sure if I understand the problem with the styles. At least on my side the Grid is displayed as expected. I attached a screenshot with the Grid on my side. Let me know if I am missing something.
I also attached the recorded memory timeline on my side.

Regards,
Daniel
the Telerik team

[OMER]

Hi,
I know it's a year old, but I have an issue here.
I'm looking at the jsbin sent and modified it a bit:
http://jsbin.com/kexigogo/1/edit
Now it has filters setup.
The problem is, that while receiving data, the grid cannot be filtered by the user.
Is there a solution for this?

[Daniel]

Hello,

The filter model is updated each time the dataSource is changed so I am afraid that if the updates are frequent enough to prevent the user from filtering the data, the only option that I can suggest is to use external inputs and the dataSource filter method.

Regards,
Daniel
Telerik