Unable to get the dropdown selection from RADTREEVIEW inside a RADCOMBOBOX

[Sumedh]

Hi,

I'm unable to see a thread I'd posted on quite a while ago about this same problem.

We've a RADTREEVIEW inside a RADCOMBOBOX. We use the clientnodeclicking to handle the dropdown selection and follow the code mentioned in the control documentation.

However, the selection does not happen when we click for the first time. The selection triggers a partial postback which would populate a dropdownlist based on the value selected from radtreeview. The selection only happens when we re-open the radtreeview and select the same node.

function nodeClicking(sender, args) {

 

var senderComboBoxName = sender._uniqueId.replace('$i0$RadTreeViewCategory', '');

senderComboBoxName = senderComboBoxName.replace(

 

'$', '_');

senderComboBoxName = senderComboBoxName.replace(

 

'$', '_');

senderComboBoxName = senderComboBoxName.replace(

 

'$', '_');

 

var comboBox = $find(senderComboBoxName);

 

var node = args.get_node()

 

var nodeValue = node.get_value();

 

if (EndsWithString(nodeValue, "5")) {

comboBox.set_text(node.get_text());

comboBox.trackChanges();

comboBox.get_items().getItem(0).set_value(node.get_value());

comboBox.commitChanges();

comboBox.hideDropDown();

comboBox.postback();

}

}

Please help us with the problem.

[Abhishek]

Hello Sumedh,

Please have look over this code it may help you.

<script type="text/javascript">

 

            

   //when tree node is clicked, set the text and value for the item in the combobox and commit the changes 
            function nodeClicking(sender, args) {
                //get the id of the employeesCombo in the edited row (passed from the server in the ItemDataBound event handler) 
                //var comboBox = $find(window['comboId']);
                var comboBox = $find("<%= rcbParent.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.get_items().getItem(0).set_value(node.get_value());
                comboBox.commitChanges();


                comboBox.hideDropDown();


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

</script>

<Telerik:RadComboBox ID="rcbParent" runat="server" Width="300px" ShowToggleImage="True"
                                    Style="vertical-align: middle;" EmptyMessage="Choose a designation" ExpandAnimation-Type="None"
                                    CollapseAnimation-Type="InOutExpo" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
                                    Height="210px" ExpandDirection="Down" EnableTheming="false" TabIndex="2" AutoPostBack="True">
                                    <ItemTemplate>
                                        <%----%>
                                        <div id="div2" onclick="StopPropagation(event)">
                                            <Telerik:RadTreeView ID="rtvParent" DataTextField="DesignationName" DataValueField="RoleDesignation_ID"
                                                DataFieldParentID="Parent_ID" EnableTheming="false" DataFieldID="RoleDesignation_ID"
                                                runat="server" OnClientNodeClicking="nodeClicking" Width="100%">
                                                <Nodes>
                                                    <Telerik:RadTreeNode Text="">
                                                    </Telerik:RadTreeNode>
                                                </Nodes>
                                            </Telerik:RadTreeView>
                                        </div>
                                    </ItemTemplate>
                                    <Items>
                                        <Telerik:RadComboBoxItem Text="" />
                                    </Items>
                                </Telerik:RadComboBox>

Also have look on : http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/treeviewcombobox/defaultcs.aspx


Thanks,
Abhishek K

[Sumedh]

Hi Abhishek,

Thanks for the reply. As per your reply, if i replace the comboBox.postback with comboBox.attachDropdown, i don't get any postback upon selecting the node. The value gets selected but there is no postback. I tried keeping both the lines but it does not work either.

[Abhishek]

Hello sumedh, Please remove comboBox.attachDropdown from javascript, and for post back problem please go through this link http://www.telerik.com/community/forums/aspnet-ajax/treeview/radtreeview-radcombobox-and-postback.aspx. Thanks, Abhishek K

[Sumedh]

Hey Abhishek,

Thanks for the prompt and continuous support. That link did not address the postback issue that I'm facing. I've already used track/commit changes for persisting the selected node value and text as you would see in the first post.
I tried using the OnClientLoad but to no avail.

I use the Autopostback="true" on the radcombobox and .postback() in the javascript.
I even referenced the dropdown control(which is supposed to get populated upon the node selection from radcombobox-radtreeview) in the UpdatedControls section of the radajaxmanager but it remains blank on the first node click.

Sumedh

[Abhishek]

Hello Sumedh,

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="500px" ShowToggleImage="True"
        Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
        AfterClientCheck="AfterCheckHandler" EmptyMessage="Choose a destination" ExpandAnimation-Type="None"
        CollapseAnimation-Type="None">
        <ItemTemplate>
            <div id="div1">
                <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeChecked="nodeChecked" OnClientNodeClicked="nodeClicked"
                    CheckBoxes="true" Width="100%" Height="140px" TriStateCheckBoxes="true">
                    <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>
                    </Nodes>
                </telerik:RadTreeView>
            </div>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem Text="" />
        </Items>
    </telerik:RadComboBox>

Javascript:

<script type="text/javascript">
        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();
            }
        }

        function nodeClicked(sender, args) {
            var node = args.get_node();
            if (node.get_checked()) {
                node.uncheck();
            } else {
                node.check();
            }
            nodeChecked(sender, args)

        }

        function nodeChecked(sender, args) {
            var comboBox = $find("<%= RadComboBox1.ClientID %>");

            //check if 'Select All' node has been checked/unchecked
            var tempNode = args.get_node();
            if (tempNode.get_text().toString() == "(Select All)") {
                // check or uncheck all the nodes
            } else {
                var nodes = new Array();
                nodes = sender.get_checkedNodes();
                var vals = "";
                var i = 0;

                for (i = 0; i < nodes.length; i++) {
                    var n = nodes[i];
                    var nodeText = n.get_text().toString();
                    if (nodeText != "(Select All)") {
                        vals = vals + n.get_text().toString() + ",";
                    }
                }

                //prevent  combo from closing
                supressDropDownClosing = true;
                comboBox.set_text(vals);
            }
        }
    </script>

 Try This Code. Let me know if any query and don't add AutoPostBack in RadComboBox.

Thanks,
Abhishek K

[Sumedh]

Hi Abhishek,

Thanks for the continued responses. I tried the approach below but our requirement is not to have multiple selection of values from the radtreeview using checkboxes. Despite that, as mentioned by you, the autopostback was removed and though the node selection shows up the selected node name in the 'empty message' area, it does not trigger a postback to populate another radcombobox based on the value of the selected node. I mixed the code with trackChanges(), commitChanges() and postback() on the javascript side but it won't trigger the postback to get me the data I need after selecting the value.

Sumedh