This sample shows how to dynamically add and remove nodes for C1TreeExtender at client side.

1. Create a new ASP.NET Web Application.
2. In the Visual Studio Toolbox, double-click on a standard Panel control to add it to the main content of your page.
3. Add the following markup within the <asp:Panel> tags to create the list that will become the tree.

<ul>

            <li><a><span>Folder 1</span></a>

                <ul>

                    <li><a><span>Folder 1.1</span></a></li>

                    <li><a><span>Folder 1.2</span></a></li>

                    <li><a><span>Folder 1.3</span></a></li>

                    <li><a><span>Folder 1.4</span></a></li>

                    <li><a><span>Folder 1.5</span></a></li>

                </ul>

            </li>

        </ul>

4. Use the Panel control's smart tag to open the Extender Wizard by clicking Add Extender.
5. Select the C1TreeExtender from the list and click OK to add it to the application.
6. Add the following script to the first set of <asp:Content> tags. This will allow you to add and remove nodes from the client-side.

<script type="text/javascript">

    function getNode() {

        return $("#<%= Panel1.ClientID %>").wijtree("findNodeByText", "Folder 1"); ;

    }

    function add() {

        var node = getNode();

        if (node != null)

            node.element.wijtreenode("add", 'New node', parseInt($("#addIndex").val()));

    }

    function remove() {

        var node = getNode();

        if (node != null)

            node.element.wijtreenode("remove", parseInt($("#removeIndex").val()));

    }

    </script>

7. Insert the following markup after the closing </ul> tag for the list. This will create the buttons and input areas for the user to add and remove nodes.

<div>

     <input id="addNode" onclick="add();" type="button" value="Add" />

 at index

     <input id="addIndex" type="text" value="0" />

    </div>

    <div>

     <input id="removeNode" onclick="remove();" type="button" value="Remove" />

        at index

     <input id="removeIndex" type="text" value="0" />

    </div>

8. Press F5 to run your application. C1TreeExtender should resemble the following image: