or
2 answers
248 views
We have a dynamic web site which uses the Kendo grid to continually update statistics. While leaving a grid displayed and updating and while using aggregates, the grid will eventually consume enough memory to kill the browser window. This is due to the fact that DOM elements are being orphaned when the grid refreshes new data. If a memory snapshot is taken in the developer pane of the browser, you will notice many HTMLDivElements with class "k-grid-footer-wrap" and "k-grid-footer-locked" are still in memory but not attached to the DOM. Each element only takes 92 bytes, but they accumulate over time and are never released. The problem is reproducible and shown in the below code.
Removing the aggregate data and the footer templates from the kendo initialization causes the memory to remain stable.
Please advise. Thanks.
<!DOCTYPE html><html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head> <title>Realtime Table</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.common-office365.min.css" type="text/css"> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.rtl.min.css" type="text/css"> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.default.min.css" type="text/css"> <link rel="stylesheet" href="/OptiRampWeb5/Css/kendo.dataviz.min.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="/OptiRampWeb5/Script/kendo.all.min.js"></script> <script type="text/javascript" src="/OptiRampWeb5/Script/console.js"></script></head><body> <div id="mainbody"> <div style="position:absolute;left:29.0px;top:21.0px;background-color:#FFFFFF;border:1.0px Solid #000000;" selectionoffset="3" oncontextmenu="return false;" objecttype="RealtimeTable" onmousedown="objectOnMouseDown(event)" uniqueid="5113,5117,5121,5114,5118,5122,5115,5119,5123" uniquepath="Системa1.Reference Table Test.Folder #1.Tag #1,Системa1.Reference Table Test.Folder #2.Tag #1,Системa1.Reference Table Test.Folder #3.Tag #1,Системa1.Reference Table Test.Folder #1.Tag #2,Системa1.Reference Table Test.Folder #2.Tag #2,Системa1.Reference Table Test.Folder #3.Tag #2,Системa1.Reference Table Test.Folder #1.Tag #3,Системa1.Reference Table Test.Folder #2.Tag #3,Системa1.Reference Table Test.Folder #3.Tag #3" url="http://TEST-LENOVO:9001/api/RTData"> <div id="object_14-header" style="width:740.0px;text-align:center;color:#000000;font-size:12pt;font-weight:Bold;font-family:Tahoma;background-color:#FFFFFF;" uniqueid="5113,5117,5121,5114,5118,5122,5115,5119,5123" uniquepath="Системa1.Reference Table Test.Folder #1.Tag #1,Системa1.Reference Table Test.Folder #2.Tag #1,Системa1.Reference Table Test.Folder #3.Tag #1,Системa1.Reference Table Test.Folder #1.Tag #2,Системa1.Reference Table Test.Folder #2.Tag #2,Системa1.Reference Table Test.Folder #3.Tag #2,Системa1.Reference Table Test.Folder #1.Tag #3,Системa1.Reference Table Test.Folder #2.Tag #3,Системa1.Reference Table Test.Folder #3.Tag #3" url="http://TEST-LENOVO:9001/api/RTData">This is the title</div> <div id="object_14" style="width:740.0px;height:190.0px;" uniqueid="5113,5117,5121,5114,5118,5122,5115,5119,5123" uniquepath="Системa1.Reference Table Test.Folder #1.Tag #1,Системa1.Reference Table Test.Folder #2.Tag #1,Системa1.Reference Table Test.Folder #3.Tag #1,Системa1.Reference Table Test.Folder #1.Tag #2,Системa1.Reference Table Test.Folder #2.Tag #2,Системa1.Reference Table Test.Folder #3.Tag #2,Системa1.Reference Table Test.Folder #1.Tag #3,Системa1.Reference Table Test.Folder #2.Tag #3,Системa1.Reference Table Test.Folder #3.Tag #3" url="http://TEST-LENOVO:9001/api/RTData"></div> </div> </div> <script>
var object_14data = new kendo.data.ObservableArray([
new kendo.data.ObservableObject({ col0: "Folder #1", folderId: "5110", folderIndex: "1", folderPath: "Системa1.Reference Table Test.Folder #1", col1: "---", col2: "---", col3: "---", col0uid: "-1", col1uid: "5113", col2uid: "5114", col3uid: "5115", col0path: "Системa1.Reference Table Test.Folder #1", col1path: "Системa1.Reference Table Test.Folder #1.Tag #1", col2path: "Системa1.Reference Table Test.Folder #1.Tag #2", col3path: "Системa1.Reference Table Test.Folder #1.Tag #3" }),
new kendo.data.ObservableObject({ col0: "Folder #2", folderId: "5116", folderIndex: "2", folderPath: "Системa1.Reference Table Test.Folder #2", col1: "---", col2: "---", col3: "---", col0uid: "-1", col1uid: "5117", col2uid: "5118", col3uid: "5119", col0path: "Системa1.Reference Table Test.Folder #2", col1path: "Системa1.Reference Table Test.Folder #2.Tag #1", col2path: "Системa1.Reference Table Test.Folder #2.Tag #2", col3path: "Системa1.Reference Table Test.Folder #2.Tag #3" }),
new kendo.data.ObservableObject({ col0: "Folder #3", folderId: "5120", folderIndex: "3", folderPath: "Системa1.Reference Table Test.Folder #3", col1: "---", col2: "---", col3: "---", col0uid: "-1", col1uid: "5121", col2uid: "5122", col3uid: "5123", col0path: "Системa1.Reference Table Test.Folder #3", col1path: "Системa1.Reference Table Test.Folder #3.Tag #1", col2path: "Системa1.Reference Table Test.Folder #3.Tag #2", col3path: "Системa1.Reference Table Test.Folder #3.Tag #3" })
]);
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$.support.cors = true;
if ($("#object_14").data("kendoGrid") == null) {
$("#object_14").kendoGrid({
dataSource: {
data: object_14data,
schema: {
model: {
fields: {
col0: { type: "string" },
col1: { type: "number" },
col2: { type: "number" },
col3: { type: "number" },
}
}
},
aggregate: [
{ field: "col1", aggregate: "sum" },
{ field: "col2", aggregate: "average" },
]
},
groupable: false,
resizable: true,
sortable: false,
pageable: false,
columns: [
{
field: "col0",
locked: true,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'>Tot/Avg:</div>",
title: "Name<br/><div> </div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 419,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col0uid #" uniquepath="#= col0path #" style="text-align:left;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= col0 #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:none;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
{
field: "col1",
locked: false,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'>#=kendo.format('{0:n2}',sum)#</div>",
title: "Tag #1<br/><div></div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 100,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col1uid #" uniquepath="#= col1path #" style="text-align:center;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= (col1 == null) ? "---" : kendo.toString(col1, "0.00") #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:#=(col1 == "---") ? \'inline\' : \'none\' #;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
{
field: "col2",
locked: false,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'>#=kendo.format('{0:n2}',average)#</div>",
title: "Tag #2<br/><div></div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 100,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col2uid #" uniquepath="#= col2path #" style="text-align:center;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= (col2 == null) ? "---" : kendo.toString(col2, "0.00") #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:#=(col2 == "---") ? \'inline\' : \'none\' #;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
{
field: "col3",
locked: false,
footerTemplate: "<div style='text-align:center;font-family: \"Arial\";font-size: 8pt;font-weight: normal;'></div>",
title: "Tag #3<br/><div></div>",
headerAttributes: { "style": "text-transform: none;text-align:center;font-family: \'Arial\';font-size: 8pt;font-weight: normal;" },
width: 100,
template: '<div onmousedown="objectOnMouseDown(event);" istablecell="true" tableid="object_14" uniqueid="#= col3uid #" uniquepath="#= col3path #" style="text-align:center;"><span style="font-family: \'Arial\';font-size: 8pt;font-weight: normal;">#= (col3 == null) ? "---" : kendo.toString(col3, "0.00") #</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-left:5px;display:#=(col3 == "---") ? \'inline\' : \'none\' #;" width="16.0px" height="16.0px"><image width="16px" height="16px" x="0" y="0" xlink:href="http://localhost/OptiRampWeb5/images/warning3.svg"></image></svg></div>'
},
]
});
}
startTimer();
});
function startTimer() {
timerVar = setInterval(changeData, 2000, 0);
}
function changeData() {
var grid = $("#object_14").data("kendoGrid");
grid.dataSource._data.forEach(function (item) {
item.col1 = Math.random() * 100;
item.col2 = Math.random() * 100;
item.col3 = Math.random() * 100;
});
grid.refresh();
grid.dataSource.read();
}
</script>
</body>
</html>
Rosen
Telerik team
answered
on
22 Sep 2016
3 answers
158 views
I have create a simple kendo grid with sample data where i would like to optimize the grid. is there a way to remove or hide the "Quantity" field whenever the my sample data doesn't contain quantity?
Daniel
Telerik team
answered
on
22 Sep 2016
1 answer
1.7K+ views
How do you set the Title using the new predefined kendo alert?
kendo.alert("This is a Kendo UI Alert message.");
Eduardo Serra
Telerik team
answered
on
21 Sep 2016
1 answer
822 views
We display a kendo spreadsheet in a modal kendo window. A common usage pattern among our users is to make changes to a cell, then click an OK button to close the window. Their expectation is that their changes will be saved. But of course they are not, because they are still "pending changes". For example, the user edits are not serialised in the toJSON() method.
Is is possible to expose a property or method that would allow developers to detect and commit such pending changes? Some of us may simply want to detect pending changes, so that we can create our own logic to prompt the user to commit or roll back the pending change
Regards,
Mike Wiese
Stefan
Telerik team
answered
on
21 Sep 2016
1 answer
155 views
In the sample code have a filter button where i would like to bring the selected data to the top of the grid.
example: i have select [1,3,5]
output of the grid view:[1,3,5,2,4]
Boyan Dimitrov
Telerik team
answered
on
21 Sep 2016
4 answers
230 views
The most requested feature for ComboBox was that popup could be another widget. For example Grid and TreeView.
Now the Q3 is out, and I want to use this functionality, but I don't know how. All demos are showing me some popup window example and not DropDownList popup.
I was expecting to do something like Grid in Combobox, Grid in ComboBox 2, TreeView in ComboBox, TreeView in ComboBox 2.
Can you please provide a demo or Dojo example how we can achieve this?
Seyfor
Top achievements
Rank 1
Rank 1
answered
on
21 Sep 2016
1 answer
131 views
Example Dojo: http://dojo.telerik.com/@mharrison/OjITI/2
I'm trying to allow for pinch/zoom gestures on a pdf that I've embedded into a MobileView but nothing I've tried has allowed me to listen for touchstart/touchend on iOS devices. it took alot of trial an error to devise this solution between browsers using the iframe and mobile safari needing the embed tag to allow for scrolling in the pdf. I even tried applying a kendo touch to the embed tag on init of the view but that throws a javascript error. What am I doing wrong?
Stefan
Telerik team
answered
on
21 Sep 2016
2 answers
229 views
Hey guys, I hope everyone is having a great day :)
I am having a couple of issues with the Grid that I can't find a workaround by myself and would like to request your help.
The first one regards exporting to PDF. When I call the grid.saveAsPDF function the grid horizontal scroll will overflow, you can check the picture attached in this thread. I imagine that you overflow it to export the grid's content to the PDF, is there any workaround to hide this behavior though?
The second issue happens when I am grouping a grid with a large dataset.
We GET from the backend a huge arraythat we want to group in a non paginated grid, it has 2000 + objects.
The problem is that when I group the data Kendo creates up to 8 thousand angular Watchers and the page becomes unusable. Is there any workaround here? Bind once? Server side grouping with paging?
Thanks in advance for you help.
Boyan Dimitrov
Telerik team
answered
on
21 Sep 2016
1 answer
352 views
In BlueOpal theme Error text message is not visible, because blue color text on red background, can not be read. (Set theme BlueOpal and click first button)
.k-widget.k-notification.k-notification-error { background-color: #db4240; color: #0099d9; border-color: #c32725;}
Iliana Dyankova
Telerik team
answered
on
21 Sep 2016
1 answer
111 views
Hello.
Class ToolBar has wrong definition for getSelectedFromGroup method:
getSelectedFromGroup(groupName: string): void;expected:
getSelectedFromGroup(groupName: string): JQuery;
Plamen
Telerik team
answered
on
21 Sep 2016
