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 / 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
  • Software
    • Business & Office
    • Database
    • Networking
    • Presentation
    • Project Management
    • Reports
    • Spreadsheet
    • Word Processing
  • Books
  • Music
  • Movies



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

Source Code

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

    <%@ 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 runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
        .tree-panel
        {
            margin:0 20px;
        }
        .tree-title
        {
            padding: 10px 20px;
            color:#4888A3;
        }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="Panel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="Panel2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </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 Text="Database" />
                                    <telerik:RadTreeNode Text="Networking" />
                                    <telerik:RadTreeNode Text="Presentation" />
                                    <telerik:RadTreeNode Text="Project Management" />
                                    <telerik:RadTreeNode Text="Reports" />
                                    <telerik:RadTreeNode Text="Spreadsheet" />
                                    <telerik:RadTreeNode Text="Word Processing" />
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Books">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Arts" />
                                    <telerik:RadTreeNode Text="Biographies" />
                                    <telerik:RadTreeNode Text="Children's Books" />
                                    <telerik:RadTreeNode Text="Computers &amp;amp; Internet" />
                                    <telerik:RadTreeNode Text="Cooking" />
                                    <telerik:RadTreeNode Text="History" />
                                    <telerik:RadTreeNode Text="Fiction" />
                                    <telerik:RadTreeNode Text="Mystery" />
                                    <telerik:RadTreeNode Text="Nonfiction" />
                                    <telerik:RadTreeNode Text="Romance" />
                                    <telerik:RadTreeNode Text="Science Fiction " />
                                    <telerik:RadTreeNode Text="Travel" />
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Music">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Alternative" />
                                    <telerik:RadTreeNode Text="Blues" />
                                    <telerik:RadTreeNode Text="Children's Music" />
                                    <telerik:RadTreeNode Text="Classical" />
                                    <telerik:RadTreeNode Text="Country" />
                                    <telerik:RadTreeNode Text="Dance" />
                                    <telerik:RadTreeNode Text="Folk " />
                                    <telerik:RadTreeNode Text="Hard Rock" />
                                    <telerik:RadTreeNode Text="Jazz" />
                                    <telerik:RadTreeNode Text="Soundtracks" />
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Movies">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Action" />
                                    <telerik:RadTreeNode Text="Animation" />
                                    <telerik:RadTreeNode Text="Classics" />
                                    <telerik:RadTreeNode Text="Comedy" />
                                    <telerik:RadTreeNode Text="Documentary" />
                                    <telerik:RadTreeNode Text="Drama" />
                                    <telerik:RadTreeNode Text="Horror" />
                                    <telerik:RadTreeNode Text="Musicals" />
                                    <telerik:RadTreeNode Text="Mystery" />
                                    <telerik:RadTreeNode Text="Westerns" />
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>
                    <br />
    <asp:Button ID="Button1" runat="server" CssClass="qsfButtonBigger" OnClick="Button1_Click"
    Text="More Info On Selected Nodes" /><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" /></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 Text="Database" />
                                    <telerik:RadTreeNode Text="Networking" />
                                    <telerik:RadTreeNode Text="Presentation" />
                                    <telerik:RadTreeNode Text="Project Management" />
                                    <telerik:RadTreeNode Text="Reports" />
                                    <telerik:RadTreeNode Text="Spreadsheet" />
                                    <telerik:RadTreeNode Text="Word Processing" />
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Books">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Arts" />
                                    <telerik:RadTreeNode Text="Biographies" />
                                    <telerik:RadTreeNode Text="Children's Books" />
                                    <telerik:RadTreeNode Text="Computers &amp;amp; Internet" />
                                    <telerik:RadTreeNode Text="Cooking" />
                                    <telerik:RadTreeNode Text="History" />
                                    <telerik:RadTreeNode Text="Fiction" />
                                    <telerik:RadTreeNode Text="Mystery" />
                                    <telerik:RadTreeNode Text="Nonfiction" />
                                    <telerik:RadTreeNode Text="Romance" />
                                    <telerik:RadTreeNode Text="Science Fiction " />
                                    <telerik:RadTreeNode Text="Travel" />
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Music">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Alternative" />
                                    <telerik:RadTreeNode Text="Blues" />
                                    <telerik:RadTreeNode Text="Children's Music" />
                                    <telerik:RadTreeNode Text="Classical" />
                                    <telerik:RadTreeNode Text="Country" />
                                    <telerik:RadTreeNode Text="Dance" />
                                    <telerik:RadTreeNode Text="Folk " />
                                    <telerik:RadTreeNode Text="Hard Rock" />
                                    <telerik:RadTreeNode Text="Jazz" />
                                    <telerik:RadTreeNode Text="Soundtracks" />
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Movies">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Action" />
                                    <telerik:RadTreeNode Text="Animation" />
                                    <telerik:RadTreeNode Text="Classics" />
                                    <telerik:RadTreeNode Text="Comedy" />
                                    <telerik:RadTreeNode Text="Documentary" />
                                    <telerik:RadTreeNode Text="Drama" />
                                    <telerik:RadTreeNode Text="Horror" />
                                    <telerik:RadTreeNode Text="Musicals" />
                                    <telerik:RadTreeNode Text="Mystery" />
                                    <telerik:RadTreeNode Text="Westerns" />
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>
                    <br />
    <asp:Button ID="Button2" runat="server" CssClass="qsfButtonBigger" OnClick="Button2_Click"
    Text="More Info On Selected Nodes" /><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 -->
            <qsf:Footer runat="server" ID="Footer1"></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