New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add/Remove/Disable Nodes

  • Personal Folders
    • Deleted Items
    • Drafts
    • Inbox
      • Invoices
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders
  • Demo Configurator
Toggle / Check
Enable / Disable
Add / Delete

RadTreeView provides a flexible client-side API. You can easily interact with the treeview in the browser using the treeview client-side object.



  1. Getting the RadTreeView client-side object. RadTreeView creates a client-side object with the ClientID of the treeview. You can obtain the reference using the following javascript code:

    var treeView = $find("<%=RadTreeView1.ClientID%>"); 

  2. Once you get the client-side object of RadTreeView, you can use the get_selectedNode() method to get an instance of the selected node:

    var selectedNode = treeView.get_selectedNode();

  3. When you get the instance of the selected node, you can call the toggle()/set_enabled()/set_checked()/ etc. methods:  

            function toggleSelectedNode()
        {
           var treeView = $find("<%=RadTreeView1.ClientID%>")
           var selectedNode = treeView.get_selectedNode();
           selectedNode.toggle();
           
        }
        
    
        function disableSelectedNode()
        {
           var treeView = $find("<%=RadTreeView1.ClientID%>")
           var selectedNode = treeView.get_selectedNode();
           if(selectedNode.get_enabled())
              selectedNode.set_enabled(false);
           
        }
        
    
        function checkSelectedNode()
        {
           var treeView = $find("<%=RadTreeView1.ClientID%>")
           var selectedNode = treeView.get_selectedNode();
           if(!selectedNode.get_checked())
              selectedNode.set_checked(true);
           
        }
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="TreeView.Examples.Programming.ClientSideApi.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript" src="scripts.js"></script>
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function() {
                demo.treeView = $find("<%= RadTreeView1.ClientID %>");
                demo.textBox = $find("<%= RadTextBox1.ClientID %>");
            });
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <div class="demo-container size-thin">

        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"  Width="285px" Height="290px"
            CheckBoxes="True">
            <Nodes>
                <telerik:RadTreeNode Text="Personal Folders" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Deleted Items">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Drafts">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Inbox" Expanded="True">
                            <Nodes>
                                <telerik:RadTreeNode Text="Invoices">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Junk E-mail">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Outbox">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Sent Items">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Search Folders" Selected="true">
                            <Nodes>
                                <telerik:RadTreeNode Text="Form Follow Up">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Large Mail">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Unread Mail">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Toggle / Check" Size="Narrow">
                    <ul class="fb-group">

                        <li>
                            <qsf:Button ID="Button6" AutoPostBack="false" OnClientClicked="toggleNode"
                                Text="Toggle Selected Node" runat="server">
                            </qsf:Button>
                        </li>
                        <li>
                            <qsf:Button ID="Button5" AutoPostBack="false" OnClientClicked="checkNode"
                                Text="Check Selected Node" runat="server">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow" Title="Enable / Disable">
                    <ul class="fb-group">

                        <li>
                            <qsf:Button ID="Button4" AutoPostBack="false" OnClientClicked="disableNode"
                                Text="Disable Selected Node" runat="server">
                            </qsf:Button>
                        </li>
                        <li>
                            <qsf:Button ID="Button7" AutoPostBack="false" OnClientClicked="enableAllNodes"
                                Text="Enable All Nodes" runat="server">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Add / Delete">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="Button3" AutoPostBack="false" OnClientClicked="deleteNode"
                                Text="Delete Selected Node" runat="server">
                            </qsf:Button>
                        </li>
                        <li>
                            <qsf:TextBox runat="server" ID="RadTextBox1" Text="New Node" Size="Medium">
                            </qsf:TextBox>
                            <qsf:Button ID="Button1" AutoPostBack="false" OnClientClicked="addNode"
                                Text="Add Node" runat="server" Size="Medium">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance