This is a migrated thread and some comments may be shown as answers.

RadTreeView inside RadComboBox Expand collapse problem.

1 Answer 79 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Fenil
Top achievements
Rank 1
Fenil asked on 09 May 2013, 01:33 PM
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">
                    <ItemTemplate>
                    
                        <telerik:RadTreeView runat="server" ID="tvTree" OnClientNodeClicking="nodeClicking"
                            CssClass="NormalText12Combo" Width="100%" Height="340px" OnNodeClick="tv_NodeClick"
                            OnDataBound="tvTree_DataBound" />
                           
                    </ItemTemplate>
                    <Items>
                        <telerik:RadComboBoxItem Text="" />
                    </Items>
                </telerik:RadComboBox> 



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") {
            args.set_cancel(true);
            node.toggle();
            comboBox.attachDropDown();
            comboBox.expand();
        }
        else {
            comboBox.set_text(node.get_text());

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

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

            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("tvTree");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode) {
            selectedNode.scrollIntoView();
        }
    }


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.

1 Answer, 1 is accepted

Sort by
0
msigman
Top achievements
Rank 2
answered on 10 May 2013, 04:41 PM
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:
<ItemTemplate>
     <div onclick="StopPropagation(event)">
           <telerik:RadTreeView runat="server" ID="tvTree" OnClientNodeClicking="nodeClicking"
                             CssClass="NormalText12Combo" Width="100%" Height="340px" OnNodeClick="tv_NodeClick"
                             OnDataBound="tvTree_DataBound" />
    </div>
</ItemTemplate>

Then you need to cancel it:
function StopPropagation(e){
    e.cancelBubble=true;
    if(e.stopPropagation){
        e.stopPropagation()
    }
}


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

Thanks,
Matt
Tags
ComboBox
Asked by
Fenil
Top achievements
Rank 1
Answers by
msigman
Top achievements
Rank 2
Share this question
or