I have a requirement to create an hierarichal treeview on my page. which has around 1600 parent nodes and each parent nodes may have child node ranging from 2 to 20. So i am dealing with large amount of data. i am able to create a Hierarchical datasource and then binding datasource to treeview taking almost 5 minutes and its slowing down the whole page. Following is the configuration i am using for treeview.
i checked that i can't do paging in treeview. also i have loadonDemand set to true. is treeview able to handle such large chunk of data , if not what other tool i can use to display data in parent-child order? Please let me know
$("#tvLosDiag").kendoTreeView(
{
loadOnDemand: true,
dragAndDrop: false,
dataTextField: ["CategoryDescription", "DescriptionWithCode"],
checkboxes: {
template: "<input type='checkbox' name='checkedNode' #=(item.Checked) # />",
checkChildren: true
},
check: function (e) {
}
});
5 Answers, 1 is accepted
When working with a complex multi-level datasource like the one described, it is expected for the browser to take some time to load all of the nodes as this is a resource heavy operation. The recommended approach is to use the loadOnDemand option (as you have already tried), which significantly reduces the load time.
However, in you case this will not work as efficiently because of the amount of data that needs to be loaded. I have performed some tests with the following Dojo. Indeed it takes some time to load all of the nodes - 10 parents with 5 levels nested (20 children).
What I can suggest is to try loading this complex data in the Grid widget which can be configured to show a hierarchy. You can observe this behavior in the following Grid Hierarchy demo. Additionally, you will be able to use virtualization or paging to reduce load time significantly.
I hope this helps. In case you have any other related questions, please do not hesitate to contact us.
Regards,
Dimitar
Progress Telerik
Rank 1
Hi Dimitar,
i implemented hierarchical grid with selected column and also got the same treeview functionality written in change event of parent and child grids to check and uncheck parent child items etc.I Also implemented paging on both parent and child grid level But still i am getting very slow response and screen is almost freezing in IE. do you have some other recommendation ?
You can try using serverPaging, as in this way the Kendo UI Grid will load smaller chunks of data which will lead to improved performance.
Regarding IE, such performance issues are expected, as the browser's DOM operations are relatively slower than that of other modern browsers. To optimize the performance for IE, you can try decreasing the DataSoucre's pageSize, which will force less DOM elements to be rendered.
Also, I would suggest opening a separate support ticket related to the Grid, where you can provide a runnable example that demonstrates the performance issue. This way, we will be able to examine it locally and provide you with further assistance.
Regards,
Dimitar
Progress Telerik
Rank 1
Iron
may I suggest to look at this sample?
If you use load only parent, and the load children on-demand with the "expand" event, you can keep a good performance.
Look at this dojo, with 1000 paarent items, and 1000 subitems added every time you open a node, it keeps performing well.
Because you need to "check" root that will check subitems, you will need to some tweaks to achieve that, but I think that this method will help.
http://dojo.telerik.com/EWaMer/3
Thank you for sharing the example with the rest of the community. Indeed this technique can improve the performance of the TreeView when a large set of data needs to be loaded.
Regards,
Dimitar
Progress Telerik