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:

Isolate this demo as a stand-alone application

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

<%@ 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>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" 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>
    <div class="demo-containers">
        <div class="demo-container size-narrow">
            <h2>Tri-state checkboxes (CheckChildren=True)</h2>
            <telerik:RadTreeView 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 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>
        </div>
        <div class="demo-container size-narrow">
            <h2>Check the nodes Server side: Post Back On Check
            </h2>

            <telerik:RadTreeView 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 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>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?