Adding a Child Node with a ButtonClick Event

This topic illustrates adding a Child Node with a ButtonClick() event. To complete this Help, you will create a C1TreeView with child nodes, add a button to the application, and call the ButtonClick() event with jQuery syntax.

Complete the following steps:

Begin in Design View and add a C1TreeView control to your application.
Click the smart tag to open the C1TreeView Tasks menu. Select Edit TreeView.
Create a TreeView structure that resembles the following image:
Add a general Button control to the application and then switch to Source View.
Locate the <asp:Button> tag and add OnClientClick="buttonClick(); return false;" to the tag to allow the button to call the jQuery script you will add. The markup should resemble the following:
```
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="buttonClick(); return false;" />
```

Add the following script above the <asp:Button> tag. This will call the ButtonClick() event.

Script	Copy Code
<script type="text/javascript"> function buttonClick() { var nodes = $("#<%= C1TreeView1.ClientID %>").c1treeview("getSelectedNodes"); //Find all selected nodes (user can use Ctrl/Shift to select multiple) //Add a new node to the first selected node nodes[0].element.c1treeviewnode("add", { text: "Test User 1", value: "user" }); } </script>

Script

Copy Code

<script type="text/javascript">
    function buttonClick() {
        var nodes = $("#<%= C1TreeView1.ClientID %>").c1treeview("getSelectedNodes");
        //Find all selected nodes (user can use Ctrl/Shift to select multiple)     
        //Add a new node to the first selected node      
        nodes[0].element.c1treeviewnode("add", { text: "Test User 1", value: "user" });
    }
 </script>

Press F5 to run your application. Click the button to add a new node to the Tree.