Client API adding 300 nodes/ bulkUpdateWith didn't help

[Asaf]

Hi,

I am adding 300 nodes to a treeview using the client side API.
And get this notorious message from Internet Explorer: 

A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become
unresponsive.

I even tried using bulkUpdateWith, but it didn't help and I still get the same message.
Is there anything that can be done about it?

I am using version 2011.3.1305.35

Here is my AddNode function :

function AddNode(nodesColl, member, memberIdx, members) {
    var node = new Telerik.Web.UI.RadTreeNode()

    node.set_value(member.Id)
    node.set_text(member.Tx)

    if (IsMemberHasChildMembers(memberIdx, member, members)) {
        node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSideCallBack)
    }
    else {
        node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ClientSide)
    }

    if (member.Sl) {
        node.check()
    }

    node.get_attributes().setAttribute("MemberIdx", memberIdx)

    nodesColl.add(node)
}

function IsMemberHasChildMembers(memberIdx, member, members) {
    if (members.length == memberIdx + 1) {
        return false
    }

    var nextMember = members[memberIdx + 1]
    var hasChildren = nextMember.Lv > member.Lv

    return hasChildren
}

Thanks,
Michael

[Asaf]

Hmm... so does anyone has a clue?
It can't be I'm the first to add 300 nodes using the client side API..

[Zhong]

The same problem

[Asaf]

I wonder how bulkUpdateWith works.. I didn't notice any speed up after adding it.

[Bozhidar]

Hi Asaf,

The bulkUpdateWith function is designed to bulk update operations over the current TreeView instance, executed in the passed function. bulkUpdateWith allows the users to perform multiple changes in the TreeView instance (add/remove/expand/collapse/select/unselect/check/uncheck nodes and so on) as a single update over the inner state representation. It's focus is to combine and speed up a set of different operations, rather than the insert operation alone. 

The function that you need to use when inserting large amount of nodes to a TreeView is addNodesTo. You can find a detailed explanation of it in the following help article:
http://www.telerik.com/community/code-library/aspnet-ajax/treeview/radtreeview-s-addnodesto-method-as-best-performing-solution-for-creating-new-or-moving-existing-nodes-on-the-client-side.aspx 

However please keep in mind that there's nothing we can do to improve the performance in IE, since the script machine of IE is much slower when a large amount of javascript and HTML is generated. The only way to get around this issue is to break the insert into smaller chunks.
 
Regards,
Bozhidar
the Telerik team

[Asaf]

Hi Bozhidar,

Thanks for suggesting addNodesTo.
It actually did help and I no longer get that warning from Internet Explorer. 
Though I have yet to test this with more nodes than just 300.

Another question is how should I approach the case when I create a hierarchy of nodes (not just a flat array)?

Thanks,
Michael

[Bozhidar]

Hi Asaf,

This really depends on the exact scenario at hand (How do you get the data for the nodes? In what format is the data? How are the parent-child relations represented in your data? Do you want to do this only on the client and so on). Generally the best method is to use one of our LoadOnDemand modes.

However if you create the tree solely on the client, you can implement your own version of Load On Demand, where you initially load only the root level nodes. Then on the OnClientNodeExpanding event you can add the direct children of the node that you are expanding and so on. 
 
Regards,
Bozhidar
the Telerik team

[Asaf]

Hi Bozhidar,

That's exactly what I'm doing (adding nodes only on the client) and addNodesTo currently solved my problem for expanding a single node.
However my other use case is to search my tree-structured data (on the client) and display the results as an expanded tree, using RadTreeView. I think that I can use addNodesTo in order to build this tree as well but I think I better ask what is the best practice before implementing it.

What do you think?

Thanks,
Michael

[Bozhidar]

Hi Asaf,

If you need to build the whole tree at once this is the best approach. However, please keep in mind that there still might be issues with IE if the tree is too big.

You can also try a different approach. Build the whole tree once at the beginning, and then when you search the data, instead of creating the tree, just hide the nodes that shouldn't be shown. You can use the following example as a reference:
http://www.telerik.com/community/code-library/aspnet-ajax/treeview/treeview-filtering.aspx 

The performance of both approaches depends highly on the data that you are working with.Try both approaches and see which one works best in your case.
 
Greetings,
Bozhidar
the Telerik team