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

ComboBox / TreeView in ComboBox

Destination:
select


  • This example shows how to embed RadTreeView in a RadComboBox template.

    The example also shows how to set the Text of the ComboBox upon clicking on a TreeNode. Additionally, the Text is stored in the Value of the only ComboBox Item between trackChanges and commitChanges calls, so that it persists across postbacks. On ComboBox load the Text is restored from the Item's Value. 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 hodling the RTV 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 RTV postbacks, e.g. in the NodeClicking client-side event handler of the RTV:

        function nodeClicking(sender, args)
        {
            ...
    
            comboBox.hideDropDown();
            comboBox.attachDropDown();
        }
    

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Examples.TreeView.TreeViewComboBox.DefaultCS"
        Language="c#" %>

    <!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">
            html.rfdButton a.rfdSkinnedButton
         {
         vertical-align: middle;
         margin: 0 0 0 5px;
         }
         div.RadComboBoxDropDown .rcbItem
         {
         margin: 0;
         padding: 0;
         }
            </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
            <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" ControlsToSkip="Scrollbars"></telerik:RadFormDecorator>
            <script type="text/javascript">        
                function nodeClicking(sender, args)
                {
                    var comboBox = $find("<%= RadComboBox1.ClientID %>");

                    var node = args.get_node()

                    comboBox.set_text(node.get_text());

                    comboBox.trackChanges();
                    comboBox.get_items().getItem(0).set_text(node.get_text());
                    comboBox.commitChanges();

                    comboBox.hideDropDown();

                    // Call comboBox.attachDropDown if:
                    // 1) The RadComboBox is inside an AJAX panel.
                    // 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.
                    // Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.

                    //comboBox.attachDropDown();
                }

                function StopPropagation(e)
                {
                    if(!e)
                    {
                        e = window.event;
                    }

                    e.cancelBubble = true;
                }
                
                function OnClientDropDownOpenedHandler(sender, eventArgs)
                {
                    var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
                    var selectedNode = tree.get_selectedNode();
                    if (selectedNode)
                    {
                        selectedNode.scrollIntoView();
                    }
                }
            </script>

            <div style="background: url(Img/bg.gif) no-repeat; padding: 135px 0 0 20px; font-size: 14px;
                height: 130px; margin-left: 60px; margin-top: 30px;">
                Destination:
                <telerik:RadComboBox 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 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">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Cairo">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="South Africa">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Cape Town">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Kenya">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Nairobi" Value="1999">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Australia">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="South East Australia">
                                                <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">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Bejing">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="India">
                                                <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">
                                                <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">
                                                <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>
                                            <telerik:RadTreeNode runat="server" Text="France">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Paris">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Cannes">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Nice">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Germany">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Bonn">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Berlin">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Frankfurt">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="North America" Expanded="true">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="USA">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="New York">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Los Angeles">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Boston">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Canada">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Toronto">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Ottawa">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Vancouver">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Mexico">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Mexico City">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Cancun">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="South America" Expanded="true">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Brazil">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="New Brazil">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Rio de Janeiro">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Argentina">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Buenos Aires">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Chile">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Santiago">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeView>
                        </div>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadComboBoxItem Text="" />
                    </Items>
                </telerik:RadComboBox>

                <script type="text/javascript">
                    var div1 = document.getElementById("div1");
                    div1.onclick = StopPropagation;
                </script>

                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ErrorMessage="Choose a destination first"
    ControlToValidate="RadComboBox1" />

                <br />
    <asp:Label ID="Label1" runat="server" Style="display: block; color: #3b9400; margin: 7px 0 30px 0;
    width: 700px; font-weight: bold; font-size: 11px;"></asp:Label></div>

            <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