Unable to get the dropdown selection from RADTREEVIEW inside a RADCOMBOBOX

7 posts, 0 answers
  1. Sumedh
    Sumedh avatar
    4 posts
    Member since:
    Nov 2010

    Posted 16 Jan 2012 Link to this post

    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.

  2. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 17 Jan 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sumedh
    Sumedh avatar
    4 posts
    Member since:
    Nov 2010

    Posted 17 Jan 2012 Link to this post

    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.

  5. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 17 Jan 2012 Link to this post

    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
  6. Sumedh
    Sumedh avatar
    4 posts
    Member since:
    Nov 2010

    Posted 19 Jan 2012 Link to this post

    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
  7. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 20 Jan 2012 Link to this post

    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
  8. Sumedh
    Sumedh avatar
    4 posts
    Member since:
    Nov 2010

    Posted 26 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017