TreeView

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

TreeView - Add/Remove/Disable Nodes

  • Books
    • Arts
    • Biographies
    • Children's Books
    • Computers & Internet
    • Cooking
    • History
    • Fiction
    • Mystery
    • Nonfiction
    • Romance
    • Science Fiction
    • Travel
  • Music
    • Alternative
    • Blues
    • Children's Music
    • Classical
    • Country
    • Dance
    • Folk
    • Hard Rock
    • Jazz
    • Soundtracks

Select a node and click a button.

With RadTreeView it is easy to add, remove or disable nodes at runtime. This example shows how to add, remove or disable a node upon NodeClick. For this purpose the NodeClick event is wired up.

[C#]
protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs NodeEvent)
{
    RadTreeNode clickedNode = NodeEvent.Node;

    if (!(clickedNode.Owner is RadTreeView))
    {
        switch ( ((RadTreeNode) clickedNode.Owner).Value)
        {
            case "Add":
                RadTreeNode newNode = new RadTreeNode();
                newNode.Text = clickedNode.Text + " (Clone)";
                //Adds the node to the Nodes collection of the clicked node's owner - it might be the treeview itself
                clickedNode.Owner.Nodes.Add(newNode);
                break;
            case "Delete":
                RadTreeNode parent = (RadTreeNode)clickedNode.Parent;
                //Removes the node from the Nodes collection of the clicked node's parent
                parent.Nodes.Remove(clickedNode);
                break;
            case "Disable":
                //Disables the node           
                clickedNode.Enabled = false;
                break;
        }
    }
}

[VB]
Protected Sub RadTreeView1_NodeClick(ByVal sender As Object, ByVal NodeEvent As RadTreeNodeEventArgs) Handles RadTreeView1.NodeClick
    Dim clickedNode As RadTreeNode = NodeEvent.Node

    If Not TypeOf clickedNode.Owner Is RadTreeView Then
        Select Case CType(clickedNode.Owner, RadTreeNode).Value
            Case "Add"                
                Dim newNode As New RadTreeNode()
                newNode.Text = clickedNode.Text + " (Clone)"
                'Adds the node to the Nodes collection of the clicked node's owner - it might be the treeview itself
                clickedNode.Owner.Nodes.Add(newNode)
            Case "Delete"
                'Removes the node from the Nodes collection of the clicked node's parent 
                CType(clickedNode.Parent, RadTreeNode).Nodes.Remove(clickedNode)
            Case "Disable"
                'Disables the node           
                clickedNode.Enabled = False
        End Select
    End If
End Sub
C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Programming.AddRemoveDisable.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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">
    <title>ASP.NET TreeView Demo - Add/Remove/Disable Nodes</title>
     <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
          <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="DisableButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="EnableAllButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="DeleteButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="AddButton">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1">
                         </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
     </telerik:RadAjaxLoadingPanel>
     <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Available actions"
          Orientation="Vertical" Expanded="true">
          <ul class="qsfexAvailableActions">
               <li>
                    <asp:Button ID="DisableButton" runat="server" OnClick="DisableButton_Click"
                         ValidationGroup="DisableRequiresSelection" Text="Disable selected node"></asp:Button>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Select a node first."
                         ControlToValidate="RadTreeView1" Display="Dynamic" ValidationGroup="DisableRequiresSelection"
                         CssClass="validator"></asp:RequiredFieldValidator>
               </li>
               <li>
                    <asp:Button ID="EnableAllButton" runat="server" CausesValidation="False"
                         OnClick="EnableAll_Button" Text="Enable all nodes"></asp:Button>
               </li>
               <li>
                    <asp:Button ID="DeleteButton" runat="server" OnClick="DeleteButton_Click"
                         ValidationGroup="DeleteRequiresSelection" Text="Delete selected node"></asp:Button>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select a node first."
                         Display="Dynamic" ControlToValidate="RadTreeView1" ValidationGroup="DeleteRequiresSelection"
                         CssClass="validator"></asp:RequiredFieldValidator>
               </li>
               <li>
                    <telerik:RadTextBox runat="Server" ID="NodeTextBox" EmptyMessage="Enter node text">
                    </telerik:RadTextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Text is required"
                         Display="Dynamic" ControlToValidate="NodeTextBox" ValidationGroup="TextRequired"
                         CssClass="validator"></asp:RequiredFieldValidator>
               </li>
               <li>
                    <asp:Button ID="AddButton" runat="server" OnClick="AddButton_Click"
                         ValidationGroup="TextRequired" Text="Add new node"></asp:Button>
               </li>
          </ul>
     </qsf:ConfiguratorPanel>
     <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="280px" Width="300px">
     </telerik:RadTreeView>
    </form>
</body>
</html>