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 - CheckBox Support

Tri-state checkboxes (CheckChildren=True)
  • Software
    • Business & Office
    • Database
    • Networking
    • Presentation
    • Project Management
    • Reports
    • Spreadsheet
    • Word Processing
  • Books
  • Music
  • Movies



You have selected the following items: 

Check the nodes Server side: Post Back On Check



You have selected the following items: 

RadTreeView fully supports checkboxes, which are displayed next to the TreeNodes. You can enable the checkboxes mode by setting the treeview's CheckBoxes property to "True".

    <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" ... />

All TreeNodes will display checkboxes if the CheckBoxes property has been enabled. You can, however, disable a checkbox for a particular TreeNode by settings its Checkable property to "False". By default checking a node will not check the child nodes. You can enable this behavior by setting the CheckChildNodes property to "True"

You can enable tri-state checkboxes by setting the TriStateCheckBoxes property to "True".

You can retrieve all checked TreeNodes upon a postback to the server-side by using the CheckedNodes property, which returns an ArrayList collection of the TreeNodes that have been checked in the browser.

You do not have to set any property to make the treeview postback upon checking a node. If you simply hook on the NodeCheck server event, the treeview will postback upon checking. If you need to disable the postback for certain nodes, you can use the OnClientNodeChecking event and call the set_cancel(true) method of the event argumentrs

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.CheckBoxes.DefaultCS"Language="c#"  %>

<%@ 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">
    <title>ASP.NET TreeView Demo - CheckBox Support</title>
    <style type="text/css">
        .tree-panel {
            margin: 0 20px;
        }
        .tree-title {
            padding: 10px 20px;
            color: #4888A3;
        }
    </style>
</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:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Panel2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:Panel runat="server" ID="Panel1" Style="float: left; width: 373px; border-right: 1px solid #B1D8EB;">
        <div class="tree-title">
            Tri-state checkboxes (CheckChildren=True)
        </div>
        <div class="tree-panel">
            <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" Height="280px"
                TriStateCheckBoxes="true" CheckChildNodes="true">
                <Nodes>
                    <telerik:RadTreeNode Text="Software" Expanded="true">
                        <Nodes>
                            <telerik:RadTreeNode Text="Business &amp;amp; Office">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Database">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Networking">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Presentation">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Project Management">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Reports">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Spreadsheet">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Word Processing">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Books">
                        <Nodes>
                            <telerik:RadTreeNode Text="Arts">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Biographies">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Children's Books">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Computers &amp;amp; Internet">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Cooking">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="History">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Fiction">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Mystery">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Nonfiction">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Romance">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Science Fiction ">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Travel">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Music">
                        <Nodes>
                            <telerik:RadTreeNode Text="Alternative">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Blues">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Children's Music">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Classical">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Country">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Dance">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Folk ">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Hard Rock">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Jazz">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Soundtracks">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Movies">
                        <Nodes>
                            <telerik:RadTreeNode Text="Action">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Animation">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Classics">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Comedy">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Documentary">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Drama">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Horror">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Musicals">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Mystery">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Westerns">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
            <br />
            <asp:Button ID="Button1" runat="server" CssClass="qsfButtonBigger" OnClick="Button1_Click"
                Text="More Info On Selected Nodes"></asp:Button><br />
            <br />
            <div class="module">
                <strong>You have selected the following items:</strong>&nbsp;<br />
                <br />
                <asp:Label ID="nodesClientside" runat="server" BorderStyle="None" CssClass="text"></asp:Label></div>
        </div>
    </asp:Panel>
    <asp:Panel runat="server" ID="Panel2" Style="width: 374px; float: right;">
        <div class="tree-title">
            Check the nodes Server side: Post Back On Check
        </div>
        <div class="tree-panel">
            <telerik:RadTreeView ID="RadTreeView2" runat="server" CheckBoxes="True" Height="280px"
                OnNodeCheck="RadTreeView2_NodeCheck">
                <Nodes>
                    <telerik:RadTreeNode Text="Software" Expanded="true">
                        <Nodes>
                            <telerik:RadTreeNode Text="Business &amp;amp; Office">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Database">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Networking">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Presentation">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Project Management">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Reports">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Spreadsheet">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Word Processing">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Books">
                        <Nodes>
                            <telerik:RadTreeNode Text="Arts">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Biographies">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Children's Books">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Computers &amp;amp; Internet">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Cooking">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="History">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Fiction">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Mystery">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Nonfiction">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Romance">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Science Fiction ">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Travel">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Music">
                        <Nodes>
                            <telerik:RadTreeNode Text="Alternative">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Blues">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Children's Music">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Classical">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Country">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Dance">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Folk ">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Hard Rock">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Jazz">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Soundtracks">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Movies">
                        <Nodes>
                            <telerik:RadTreeNode Text="Action">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Animation">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Classics">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Comedy">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Documentary">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Drama">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Horror">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Musicals">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Mystery">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Westerns">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
            <br />
            <asp:Button ID="Button2" runat="server" CssClass="qsfButtonBigger" OnClick="Button2_Click"
                Text="More Info On Selected Nodes"></asp:Button><br />
            <br />
            <div class="module">
                <strong>You have selected the following items:</strong>&nbsp;<br />
                <br />
                <asp:Label ID="nodesServerside" runat="server" BorderStyle="None" CssClass="text"></asp:Label></div>
        </div>
    </asp:Panel>
    <div style="clear: both">
    </div>
    <!-- content end -->
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here