RadTreeView inside RadComboBox Expand collapse problem.

2 posts, 0 answers
  1. Fenil
    Fenil avatar
    5 posts
    Member since:
    Nov 2012

    Posted 09 May 2013 Link to this post

    I have radtreeview inside radcombobox.

     <telerik:RadComboBox ID="cbTreeViewSelect" runat="server"  ShowToggleImage="True" Skin="Metro" 
                        Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
                        EmptyMessage="Choose a kit" ExpandAnimation-Type="None" CollapseAnimation-Type="None"
                        Font-Bold="true" AutoPostBack="true" Height="350px" CssClass="NormalText12Combo" OnTextChanged="cbTreeViewSelect_TextChanged">
                            <telerik:RadTreeView runat="server" ID="tvTree" OnClientNodeClicking="nodeClicking"
                                CssClass="NormalText12Combo" Width="100%" Height="340px" OnNodeClick="tv_NodeClick"
                                OnDataBound="tvTree_DataBound" />
                            <telerik:RadComboBoxItem Text="" />

    and scripts as described below.

    function nodeClicking(sender, args) {
            var comboBox = $find("<%=cbTreeViewSelect.ClientID %>");
            var node = args.get_node()

            var g = node.get_value();
            if (g == "0") {
            else {


                $("#<%=hidValue.ClientID %>").val(node.get_value());

            // 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.


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

            e.cancelBubble = true;

        function OnClientDropDownOpenedHandler(sender, eventArgs) {
            var tree = sender.get_items().getItem(0).findControl("tvTree");
            var selectedNode = tree.get_selectedNode();
            if (selectedNode) {

    In IE its working fine but in firefox when i click on hyperlink of top node of treeview it expands the tree but it hides(collapse) dropdown.

    i want to keep that treeview and dropdown expanded.

    Thanks in advance.
  2. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 10 May 2013 Link to this post

    Hi Fenil,

    Don't worry, we will get this working for you.  In order to prevent the dropdown from collapsing, you have to capture the click event and cancel it. 

    First you need to create a container div that will capture the click:
         <div onclick="StopPropagation(event)">
               <telerik:RadTreeView runat="server" ID="tvTree" OnClientNodeClicking="nodeClicking"
                                 CssClass="NormalText12Combo" Width="100%" Height="340px" OnNodeClick="tv_NodeClick"
                                 OnDataBound="tvTree_DataBound" />

    Then you need to cancel it:
    function StopPropagation(e){

    Another option is that I just posted a Custom ASP.NET Server Control that has this exact functionality last week (working source code included).  You can download it and adjust to your liking: http://www.msigman.com/telerik-radcombotree-a-combobox-with-collapsible-items/.

Back to Top