Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Peter
125
Looking for an example, of how to build a WebDataTree using the Javascript CSOM.
posted

 

Can someone provide an example of how to build a WebDataTree, several levels deep, using client-side Javascript (Infragistics CSOM)?

I've researched the forums and the CSOM and have not found them helpful enough.

  • 15979
    posted

    Hello pgradsten,

    Let me know if you need further assistance with your question.

  • 15979
    Suggested Answer
    posted
    Hello pgradsten,
    To create a “WebDataTree” from client side only create an empty “.aspx” web page and insert one “WebDataTree” in it:
    <ig:WebDataTree ID="WebDataTree1" runat="server" Height="300px" Width="200px">
                           
    </ig:WebDataTree>
     
    Leave the tree empty. Add one HTML button to your page:
    <input id="Button1" type="button" value="Create Tree" onclick="CreateTree()" />
     
    Add this JavaScript function to your page:
    function CreateTree() {
     
                var tree = $find('<%=WebDataTree1.ClientID %>'); // find the tree
     
                // You can use createNode() function with different parameters to achieve URL navigation on click:
                // createNode(<node text - String>, <navigateUrl> - String, <URL target string> - String, <node value> - String);
     
                // create root nodes
                var root1 = tree.createNode("Root1");
                var root2 = tree.createNode("Root2");
                // create child nodes
                var node1 = tree.createNode("Node1");
                var node2 = tree.createNode("Node2");
                var node3 = tree.createNode("Node3");
                var node4 = tree.createNode("Node4");
     
                // add root nodes to the tree (to null position)
                tree.add(root1, null);
                tree.add(root2, null);
                // add child nodes - "0" - first root, first child; "0.0" - first root, first child first subchild. Same for second root ("1").
                tree.add(node1, "0");
                tree.add(node2, "1");
                tree.add(node3, "0.0");
                tree.add(node4, "1.0");
     
                // disable button after first click
                var button = document.getElementById("Button1");
                button.disabled = true;
       }
     
    Link this JavaScript function to your button “onclick” event or to tree “Initialize” event.
    Click the button and your tree should show up.
    Note! Use ASP.NET controls v.10.3 latest service release (build 2056) before testing the example.
    You can find more examples of client side functionality of the “WebDataTree” here - https://es.infragistics.com/samples/aspnet/data-tree/drag-and-drop-client-events
    Let me know if you need any further assistance with your question or with example.
  • 15979
    posted

    Hello pgradsten,

    I will research your request and will try to provide you with some simple example of client-side tree generation.