This is a migrated thread and some comments may be shown as answers.

Grid - Real-Time Data updates

7 Answers 259 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gajendra
Top achievements
Rank 1
Gajendra asked on 25 Feb 2013, 07:06 PM
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.

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 26 Feb 2013, 09:12 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gajendra
Top achievements
Rank 1
answered on 26 Feb 2013, 07:56 PM
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",
} ]
});
0
Daniel
Telerik team
answered on 27 Feb 2013, 09:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gajendra
Top achievements
Rank 1
answered on 01 Mar 2013, 08:52 AM

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

0
Daniel
Telerik team
answered on 01 Mar 2013, 02:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
OMER
Top achievements
Rank 1
answered on 05 Mar 2014, 10:10 AM
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?
0
Daniel
Telerik team
answered on 07 Mar 2014, 10:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Gajendra
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Gajendra
Top achievements
Rank 1
OMER
Top achievements
Rank 1
Share this question
or