Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

TreeView / Add/Remove/Disable Nodes

  • Personal Folders
    • Deleted Items
    • Drafts
    • Inbox
      • Invoices
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders
Event log:

  • 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);
           
        }

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.TreeView.ClientSideApi.DefaultCS" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        <link rel="stylesheet" href="styles.css" type="text/css" />
    </head>
    <body class="BODY">
        <form id="Form1" runat="server">
            <qsf:Header ID="Header2" runat="server" NavigationLanguage="C#"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

                <script type="text/javascript">
                //<![CDATA[
                    var treeView;
                    var textBox;
                    
                    function pageLoad()
                    {
                        treeView = $find ("<%= RadTreeView1.ClientID %>");
                        textBox = $find("<%= RadTextBox1.ClientID %>");
                    }
                    
                    function addNode()
                    {
                        var nodeText = textBox.get_value();
                        if (!nodeText)
                        {
                            alert("Please specify the text for the new node.");
                            return false;
                        }
                        
                        treeView.trackChanges();
                        
                        //Instantiate a new client node
                        var node = new Telerik.Web.UI.RadTreeNode();
                        //Set its text
                        node.set_text(nodeText);
                        //Add the new node as the child of the selected node or the treeview if no node is selected
                        var parent = treeView.get_selectedNode() || treeView;
                        parent.get_nodes().add(node);
                        //Expand the parent if it is not the treeview
                        if (parent != treeView && !parent.get_expanded())
                            parent.set_expanded(true);
                        
                        treeView.commitChanges();
                        return false;
                    }
                    
                    function deleteNode()
                    {
                        var allNodes = treeView.get_allNodes();
                        if (allNodes.length < 1)
                        {
                            alert("The treeview is empty.");
                            return false;
                        }
                        
                        var selectedNode = treeView.get_selectedNode();
                        if (!selectedNode)
                        {
                            alert("You need to select a node first.");
                            return false;
                        }
                        
                        if (allNodes.length == 1)
                        {
                            if (!confirm("This is the last node in the treeview. Are you sure you want to delete it?"))
                                return false;
                        }
                        
                        treeView.trackChanges();
                        
                        var parent = selectedNode.get_parent();
                        parent.get_nodes().remove(selectedNode);
                        
                        treeView.commitChanges();
                        
                        return false;
                    }
                    
                    function disableNode()
                    {
                        var selectedNode = treeView.get_selectedNode();
                        if (!selectedNode)
                        {
                            alert("You need to select a node first.");
                            return false;
                        }
                        
                        treeView.trackChanges();
                        
                        selectedNode.disable();
                        
                        treeView.commitChanges();
                        
                        return false;
                    }
                    
                    function checkNode()
                    {
                        var selectedNode = treeView.get_selectedNode();
                        if (!selectedNode)
                        {
                            alert("You need to select a node first.");
                            return false;
                        }
                        
                        selectedNode.set_checked(!selectedNode.get_checked());
                        
                        return false;
                    }
                    
                    function toggleNode()
                    {
                        var selectedNode = treeView.get_selectedNode();
                        if (!selectedNode)
                        {
                            alert("You need to select a node first.");
                            return false;
                        }
                        
                        selectedNode.set_expanded(!selectedNode.get_expanded());
                        
                        return false;
                    }
                    
                    function enableAllNodes()
                    {
                        var allNodes = treeView.get_allNodes();
                        for (var i = 0; i < allNodes.length; i++)
                        {
                            allNodes[i].enable();
                        }
                        return false;
                    }
                //]]>
                </script>

            </telerik:RadCodeBlock>
            
            <div style="overflow: hidden;">
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Available actions" Orientation="Vertical" Expanded="true">
                 <ul class="qsfexAvailableActions">
                     <li>
    <asp:Button ID="Button6" CssClass="qsfButtonBig" OnClientClick="return toggleNode()"
    Text="Toggle Selected Node" runat="server" />
                     </li>
                     <li>
    <asp:Button ID="Button5" CssClass="qsfButtonBig" OnClientClick="return checkNode()"
    Text="Check Selected Node" runat="server" />
                     </li>
                     <li>
    <asp:Button ID="Button4" CssClass="qsfButtonBig" OnClientClick="return disableNode()"
    Text="Disable Selected Node" runat="server" />
                     </li>
                     <li>
    <asp:Button ID="Button7" CssClass="qsfButtonBig" OnClientClick="return enableAllNodes()"
    Text="Enable All Nodes" runat="server" />
                     </li>
                     <li>
    <asp:Button ID="Button3" CssClass="qsfButtonBig" OnClientClick="return deleteNode()"
    Text="Delete Selected Node" runat="server" />
                     </li>
                     <li>
                         <telerik:RadTextBox runat="server" ID="RadTextBox1" Text="New Node">
    </telerik:RadTextBox><asp:Button ID="Button1" CssClass="qsfButton" OnClientClick="return addNode()"
    Text="Add New Node" runat="server" />
                     </li>
                     <li>
                         <asp:Button ID="Button2" CssClass="qsfButton" Text="Postback" runat="server" OnClick="Button2_Click">
                         </asp:Button>
                     </li>
                 </ul>
             </qsf:ConfiguratorPanel>
             <telerik:RadTreeView 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 Text="Drafts" />
                             <telerik:RadTreeNode Text="Inbox" Expanded="True">
                                 <Nodes>
                                     <telerik:RadTreeNode Text="Invoices" />
                                 </Nodes>
                             </telerik:RadTreeNode>
                             <telerik:RadTreeNode Text="Junk E-mail" />
                             <telerik:RadTreeNode Text="Outbox" />
                             <telerik:RadTreeNode Text="Sent Items" />
                             <telerik:RadTreeNode Text="Search Folders" Selected="true">
                                 <Nodes>
                                     <telerik:RadTreeNode Text="Form Follow Up" />
                                     <telerik:RadTreeNode Text="Large Mail" />
                                     <telerik:RadTreeNode Text="Unread Mail" />
                                 </Nodes>
                             </telerik:RadTreeNode>
                         </Nodes>
                     </telerik:RadTreeNode>
                 </Nodes>
             </telerik:RadTreeView>
            </div>
            
            <qsf:EventLogConsole runat="server" ID="EventLogConsole1" />
            <qsf:Footer ID="Footer2" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451