RadTreeView’s addNodesTo method as best performing solution for creating new or moving existing nodes on the client-side

Thread is closed for posting
4 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 17 Jan 2011 Link to this post



    Q3 2010 SP1



    Visual Studio


    programming language

    JavaScript (only client coding)

    browser support

    all browsers supported by RadControls


    This project illustrates how to use the recently added to the Public API of RadTreeView's client object, method addNodesTo.
    The method resides in the client-side object representation of RadTreeView and accepts 2 parameters:

    1. target - instance of the RadTreeView or a RadTreeNode (already added to a tree);
    2. nodes - array of RadTreeNodes or a RadTreeNodeCollection object (from the same or from different TreeView instance);

    This method's main purpose is to batch the inserting of big amount of nodes to a certain NodeCollection, as well as it is the first way of batched transferring of already created nodes from one NodeCollection to another. And on top of all that, addNodesTo introduces the ability of batched cross-instance transferring of nodes (between different TreeViews).

    Before going into detail about the project, I would like to emphasize on the non-supported cases of usage of this method:

    • You can not mix the adding of new and the transferring of already created nodes;
    • You can not pass an array or NodeCollection with nodes from different TreeView instances;
    • You can not transfer/(add new) hierarchies of already created (already included in a TreeView) nodes - only flat hierarchy is supported - single NodeCollection or array of RadTreeNodes where the nodes doesn't have any children. (We will implement this in future.)

    Lets move on to the project.
    What this sample demonstrates is the basic usage of the addNodesTo method.
    As you can see, when you load the Default.aspx page into the browser, there are 2 TreeView instances and several buttons at the bottom.

    I will try to guide you through the entire functionality this project has to demonstrate with a simple step-by-step procedure:

    1. Load the page in the browser;
    2. Click the "Add 10 Nodes to TreeView1" button (nodes should be added to the first TreeView);
    3. Click the "Add 10 Nodes to TreeView2" button (nodes should be added to the second TreeView);
    4. RightClick one of the nodes in the first TreeView (a menu with 3 options should appear):
      1. Click the "Add 10 nodes" option (nodes should be added to the initially rightclicked node).
    5. Repeat 4. for the second TreeView;
    6. Select the node that you just have populated with 10 nodes using the menu in the first TreeView;
    7. Select a node without children in the second TreeView;
    8. Click the "Move Nodes From Selected Node In TreeView1 To Selected Node In TreeView2" button (nodes should be instantly transferred);
    9. Select the node that you just have populated in the second TreeView (8.);
    10. Select a node without any children in the first TreeView;
    11. Click the "Move Nodes From Selected Node In TreeView2 To Selected Node In TreeView1" button (nodes should be instantly transferred).

    This basically covers the scenarios this project should present which are most of the supported by addNodesTo.

    The project contains a single page with no code-behind. All the event handlers are separated from the "main functions". The code is pretty straight-forward, so just a small amount of comments are included.

    We hope, you will enjoy this feature!

  2. EA769DD2-DB08-4F14-A7DF-29D620781121
    EA769DD2-DB08-4F14-A7DF-29D620781121 avatar
    115 posts
    Member since:
    Aug 2010

    Posted 30 Jan 2012 Link to this post

    Does this support appending nodes to an existing collection of nodes in the treeview ? Means that i have a node having 1000 subnodes, which i have created using the addNodesTo method, going ahead can i also append more data to this existing set of nodes ? 
  3. EA769DD2-DB08-4F14-A7DF-29D620781121
    EA769DD2-DB08-4F14-A7DF-29D620781121 avatar
    115 posts
    Member since:
    Aug 2010

    Posted 04 May 2012 Link to this post

    Can this method be used to insert nodecollections to a particular index instead of adding at the end?
  4. F89349FE-620D-4704-A4E7-93018A1D6EB7
    F89349FE-620D-4704-A4E7-93018A1D6EB7 avatar
    1192 posts
    Member since:
    May 2017

    Posted 07 May 2012 Link to this post

    Hi Mirang,

    The method only appends the nodes to the end of the existing collection.
    Best wishes,
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.