Hi,
I am struggling with the following issue. I will be happy if someone can suggest any idea to solve this performance problem.
With the following piece of code, you will get a TreeGrid with columns. (screenshot attached).
The performance issues starting when the tree includes 3 or more nested children combined with large piece of data.
(Large data for example is when the root containes at least 5 children which each one of them containes at least 5000 children which containes more children).
After the data got rendered, selecting one of the rows (main or nested), freezes the UI for a few seconds.
In my case, the desired root data will contain dozens / hundreds rows with 3 or more children levels, in total ~50K rows.
(When using 2 or less nested children - there are no visual performance issues. You can try it if you delete all the children property in the second loop).
2019-10-06_151900.pdf
tnx!
I am struggling with the following issue. I will be happy if someone can suggest any idea to solve this performance problem.
With the following piece of code, you will get a TreeGrid with columns. (screenshot attached).
The performance issues starting when the tree includes 3 or more nested children combined with large piece of data.
(Large data for example is when the root containes at least 5 children which each one of them containes at least 5000 children which containes more children).
After the data got rendered, selecting one of the rows (main or nested), freezes the UI for a few seconds.
In my case, the desired root data will contain dozens / hundreds rows with 3 or more children levels, in total ~50K rows.
(When using 2 or less nested children - there are no visual performance issues. You can try it if you delete all the children property in the second loop).
Code:
var tree = isc.Tree.create({
modelType: "children",
childrenProperty: "children",
nameProperty: "Name",
root: newData
});
var myTreeGrid = isc.TreeGrid.create({
ID: "TreeGrid",
data: tree,
height: 500,
width: 1000,
fields: [
{ name: "Name" },
{ name: "nodeType" },
{ name: "nodeTypeText" },
{ name: "nodeTitle" },
{ name: "detailsText" },
{ name: "detailsTextForPrint" },
{ name: "productId" },
{ name: "amountToPay" },
{ name: "itemOrPriceModifierId" },
{ name: "itemDetails" }
]
});
for (var i = 0; i < 5; i++) {
var newData = {
EmployeeId: "new",
Name: "new " + i,
children: [{}]
};
for (var j = 0; j < 10000; j++) {
newData.children.push({
Name: "ch" + i + " " + j,
nodeType: "2",
nodeTypeText: "Payment" + i + " " + j,
nodeTitle: "nodeTitle" + i + " " + j,
detailsText: "QQQ" + i + " " + j,
detailsTextForPrint: "EmployeeId" + Math.random(),
productId: Math.random(),
amountToPay: Math.random(),
itemOrPriceModifierId: Math.random(),
itemDetails: "EmployeeId" + i + " " + j,
isFolder: true,
parent: newData,
children: [
{
Name: "www",
nodeTypeText: "www",
children: [
{
Name: "eee",
nodeTypeText: "eee",
children: [
{
Name: "ttt",
nodeTypeText: "ttt"
}
]
}
]
}
]
});
}
myTreeGrid.addData(newData);
}
tnx!
Comment