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

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

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" UpdatePanelRenderMode="Inline" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Panel2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel2" UpdatePanelRenderMode="Inline" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-containers">
        <asp:Panel ID="Panel1" runat="server" class="demo-container size-narrow tree-panel">
            <h2>Tri-state checkboxes (CheckChildren=True)</h2>
            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"  CheckBoxes="True" 
                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 />
            <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server"  CssClass="qsfButtonBigger" OnClick="Button1_Click"
                Text="More Info On Selected Nodes"></telerik:RadButton><br />
            <br />
            <div class="module">
                <h2>You have selected the following items:</h2>
                <asp:Label ID="nodesClientside" runat="server" BorderStyle="None" CssClass="text"></asp:Label>
            </div>
        </asp:Panel>
         <asp:Panel ID="Panel2" runat="server" class="demo-container size-narrow tree-panel">
            <h2>Check the nodes Server side: Post Back On Check
            </h2>

            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server"  CheckBoxes="True" 
                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 />
            <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="server"  CssClass="qsfButtonBigger" OnClick="Button2_Click"
                Text="More Info On Selected Nodes"></telerik:RadButton><br />
            <br />
            <div class="module">
                <h2>You have selected the following items:</h2>
                <asp:Label ID="nodesServerside" runat="server" BorderStyle="None" CssClass="text"></asp:Label>
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance