Version

Drag and Drop Client Side API

The WebDataTree™ control has many features that are available and easy to use on the Client-side. WebDataTree creates a client-side object with the ClientID of the control. To obtain a reference, use the following code:

var tree = $find('<%= WebDataTree1.ClientID %>');

Once you get the control client-side object you are free to operate with the object. As an example the code bellow will add a new node to the tree object with node name “NewNode”:

var tree = $find('<%= WebDataTree1.ClientID %>');

tree.addText(”NewNode”);

Here is a list of the functions you can use:

  • add (node) - Appends the node to the nodes collection.

  • addText (text) – Creates a new node with the specified text and appends it to the nodes collection. Returns the newly added node.

  • addText (text, navigateUrl) – Creates a new node with the specified text, navigates to the URL and appends the node to the nodes collection. Returns the newly added node.

  • addRange (nodeArray, index) - Adds an array of nodes to the specified index in the nodes collection.

  • remove (node) - Removes an already added node from the collection

  • removeAt (index) – Removes the node at the specified index from the collection, if found.

  • insert (node, index) - Inserts the node at the specified index in the nodes collection. If index is -1 the node is appended last.

All these functions are available for whole tree and each collection of nodes. The difference is that when They are called on the tree we can pass level as argument, but calling them on node collection doesn’t support option to pass level.