Kendo UI Treeview append function Performance

Question

It looks like the performance of the following function is really bad.

treeView.append(children, parent);

Here treeView is Kendo UI Treeview, parent is container node for children and children is array of approximately 150 new nodes (my scenario).

And this code executes more than 7 seconds.

I guess the append function is not well implemented for a collection of items, so maybe there are some workarounds with generating html through jQuery, but Kendo UI Treeview should also know about new nodes to process future expand events for new nodes correctly. Is there any way to improve the performance of the code above?

Thank you, Ihor

Answer 1

For those who encounter this problem:

Eventually I investigated Kendo UI source codes and instead of line from original post I used following code:

 treeView.dataItem(parent).children.data(children)

That worked fine in my scenario.

Answer 2

Performance is a pretty relative term. If it takes 7 seconds, of course, it's not a good performance. In my computer append 150 new nodes took about one second but anyway I might suggest you some improvements.

How do you append the nodes, one by one?

for (var i = 0; i < 150; i++) {
    var added = { text:"node" + i };
    tree.append(added, parent);
}

try this instead (build an array with all the nodes to add and then invoke append):

var added = [];
for (var i = 0; i < 150; i++) {
    added.push({ text: "node" + i });
}
tree.append(added, parent);

In my computer it went from 1105ms to 787. Not that much but ...

BUT, this is the time for inserting the nodes not the time that is needed for rendering. Is your problem append or render it on screen?