TreeView - TreeView in ComboBox

This demo showcases how much more easily you can achieve a hierarchical presentation of data in a drop-down by using our specifically designed for this purpose control, RadDropDownTree , opposed to integrating RadTreeView into RadComboBox.

RadTreeView in RadComboBox

RadDropDownTree

  • Africa
    • Egypt
      • Cairo
    • South Africa
      • Cape Town
    • Kenya
      • Nairobi
  • Australia
    • South East Australia
      • Sydney
      • Melbourne
  • Asia
    • China
      • Bejing
    • India
      • New Delhi
      • Bombay
    • Indonesia
      • Jakarta
  • Europa
    • England
      • London
      • Liverpool
      • Manchester
  • South America
    • Brazil
      • New Brazil
      • Rio de Janeiro
 
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example compares Telerik's ASP.NET DropDownTree control to an embedded TreeView in a ComboBox template demonstrating the effort you will save by using RadDropDownTree. The integration between the TreeView and ComboBox shows how to set the Text of the ComboBox upon clicking on a TreeNode. This is achieved via JavaScript.

Note: If you wrap the RadComboBox with an AJAX panel and handle the NodeClick server-side event of the RadTreeView, there will be a postback instead of an AJAX postback. This is caused by the fact that the drop down holding the RadTreeView is detached and is located outside of the wrapping AJAX panel, so it misses the AJAX conversion. You can avoid this limitation by calling comboBox.attachDropDown() right before the RadTreeView postbacks, e.g. in the NodeClicking client-side event handler of the RadTreeView:

    function nodeClicking(sender, args)
    {
        ...

        comboBox.hideDropDown();
        comboBox.attachDropDown();
    }
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.TreeViewComboBox.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info" >
        This demo showcases how much more easily you can achieve a hierarchical 
        presentation of data in a drop-down by using our specifically designed 
        for this purpose control, <a href="http://demos.telerik.com/aspnet-ajax/dropdowntree/examples/overview/defaultcs.aspx">RadDropDownTree</a>
        , opposed to integrating RadTreeView into RadComboBox.
    </qsf:MessageBox>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <div class="demo-container size-narrow">
            <h2>RadTreeView in RadComboBox</h2>
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="250px" ShowToggleImage="True" 
                Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler" 
                EmptyMessage="Choose a destination" ExpandAnimation-Type="None" CollapseAnimation-Type="None">
                <ItemTemplate>
                    <div id="div1">
                        <telerik:RadTreeView RenderMode="Lightweight" runat="server" ID="RadTreeView1" OnClientNodeClicking="nodeClicking"
                            Width="100%" Height="140px">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Africa" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Egypt" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="Cairo">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="South Africa" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="Cape Town">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="Kenya" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="Nairobi" Value="1999">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Australia" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="South East Australia" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="Sydney">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode runat="server" Text="Melbourne">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Asia" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="China" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="Bejing">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="India" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="New Delhi">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode runat="server" Text="Bombay">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode runat="server" Text="Indonesia" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="Jakarta">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Europa" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="England" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="London">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode runat="server" Text="Liverpool">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode runat="server" Text="Manchester">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="South America" Expanded="true">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Brazil" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" Text="New Brazil">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode runat="server" Text="Rio de Janeiro">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeView>
                    </div>
                </ItemTemplate>
                <Items>
                    <telerik:RadComboBoxItem Text=""></telerik:RadComboBoxItem>
                </Items>
            </telerik:RadComboBox>
            <h2>RadDropDownTree</h2>
            <telerik:RadDropDownTree RenderMode="Lightweight" runat="server" ID="RadDropDownTree1" Width="250px" 
                DefaultMessage="Choose a destination" DefaultValue="0"
                DataTextField="Text" DataFieldID="ID" DataFieldParentID="ParentID">
                <DropDownSettings Height="140px" CloseDropDownOnSelection="true" />
            </telerik:RadDropDownTree>
            <asp:CustomValidator runat="server" ControlToValidate="RadDropDownTree1" ForeColor="PaleVioletRed" ValidationGroup="ComboBoxGroup"
                ClientValidationFunction="clientValidationFunction">
            </asp:CustomValidator>
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="server" OnClick="Button1_Click" Text="Submit" ValidationGroup="ComboBoxGroup"></telerik:RadButton>
            <asp:Label ID="Label1" CssClass="label" runat="server"></asp:Label>
            <asp:Label ID="Label2" CssClass="label" runat="server"></asp:Label>
        </div>
    </telerik:RadAjaxPanel>
    <telerik:RadCodeBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript" src="scripts.js"></script>
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function() {
                demo.dropDownTree = $find('<%= RadDropDownTree1.ClientID%>');
                demo.comboBox = $find("<%= RadComboBox1.ClientID %>");
                var div1 = document.getElementById("div1");
                div1.onclick = StopPropagation;
            });
            /* ]]> */
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?