Client API adding 300 nodes/ bulkUpdateWith didn't help

9 posts, 0 answers
  1. Asaf
    Asaf avatar
    11 posts
    Member since:
    Jul 2008

    Posted 14 Mar 2012 Link to this post

    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
  2. Asaf
    Asaf avatar
    11 posts
    Member since:
    Jul 2008

    Posted 15 Mar 2012 Link to this post

    Hmm... so does anyone has a clue?
    It can't be I'm the first to add 300 nodes using the client side API..
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Zhong
    Zhong avatar
    1 posts
    Member since:
    Mar 2012

    Posted 15 Mar 2012 Link to this post

    The same problem
  5. Asaf
    Asaf avatar
    11 posts
    Member since:
    Jul 2008

    Posted 16 Mar 2012 Link to this post

    I wonder how bulkUpdateWith works.. I didn't notice any speed up after adding it.
  6. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 16 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Asaf
    Asaf avatar
    11 posts
    Member since:
    Jul 2008

    Posted 16 Mar 2012 Link to this post

    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
  8. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 19 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Asaf
    Asaf avatar
    11 posts
    Member since:
    Jul 2008

    Posted 19 Mar 2012 Link to this post

    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
  10. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 21 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017