Set Selected Text in RadDropDownTree JavaScript

7 posts, 0 answers
  1. Vijay
    Vijay avatar
    4 posts
    Member since:
    Sep 2014

    Posted 29 Sep 2014 Link to this post

    Hi All,

    My question for client side code only using JavaScript.
    I have a RadDropDownTree in my Form. In that DropDown I have some some data.
    Suppose.
    Central
        Middle Central
                Chicago
        Texoma
    ..
    .
    .
    above mention is same data.

    Now What I want is when User Select Chicago then Select text in client area of that dropdown should be anything like 'ABCD' or anything. I just want to set the
    Selected text of that DropDownTree. I tried below mention code but is not working, In my RadDropDownTree, it still showing emptymessage.

    var combo = $find("<%= RadDropDownLocations.ClientID %>");
    combo._selectedText = "Davolio" + ";" + "Leverling";

    Can someone guide me how can I set the text in DropDownTree
     Let me know in case of any more information

    Vijay
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 02 Oct 2014 Link to this post

    Hi Vijay,

    Try to handle the OnClientEntryAdded event: 

    <telerik:RadDropDownTree runat="server" ID="ddt" OnClientEntryAdded="OnClientEntryAdded">
    </telerik:RadDropDownTree>
     
    <script>
     
        function OnClientEntryAdded(sender, args) {
            setTimeout(function () {
                $('.rddtFakeInput').text('ABCD');
            }, 10);
        }
     
    </script>


    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. SALVATORE
    SALVATORE avatar
    6 posts
    Member since:
    May 2016

    Posted 17 Aug 2017 in reply to Hristo Valyavicharski Link to this post

    Hi.

    I have my RadDropDownTree in gridview (one for row): how can find it only one in that row?

    My problem is bigger:

    I need to let choose only one item for each year group in my RadDropDownTree and I want to do this client side.

    I have created this javascript code and do it well, but I do not know how refresh SelectedValue (rddtFakeInput) and his Tooltip how you can see in attached picture.

            function OnClientEntryAdded(sender, args) {
                if (sender.get_entries().get_count() > 1) {
                    var tree = sender.get_embeddedTree();
                    tree.trackChanges();
                    var valueSelected = args.get_entry().get_value();
                    for (i = 0; i < sender.get_entries().get_count() ; i++) {
                        //Check same root to have just one selected for year
                        var valueOther = sender.get_entries().getEntry(i).get_value();
                        if (valueOther.toString().substr(0, 6) == valueSelected.toString().substr(0, 6) &&
                            valueOther != valueSelected) {
                            //alert("founded same year");

                            //Uncheck the other

                            var nodeOther = tree.findNodeByValue(valueOther);
                            nodeOther.uncheck();
                        }
                    }                
                    tree.commitChanges();
                }
            }
    <telerik:RadDropDownTree RenderMode="Lightweight" ID="ddtHvrVolume" runat="server" OnDataBound="ddt_DataBound" OnNodeDataBound="ddt_NodeDataBound" DefaultMessage="Please select volumes for each year..." CheckBoxes="SingleCheck" DataFieldID="ID" DataFieldParentID="ParentID" DataTextField="Text" ButtonSettings-ShowClear="False" DropDownSettings-Width="400px" Width="400px" OnClientEntryAdding="OnClientEntryAdding" OnClientEntryAdded="OnClientEntryAdded" DataValueField="Value" CheckNodeOnClick="True">
        <ButtonSettings ShowCheckAll="false" ShowClear="true" />
        <Localization Clear="Clear All" />
    </telerik:RadDropDownTree>

    Thanks in advance,

    Francesco.

  4. SALVATORE
    SALVATORE avatar
    6 posts
    Member since:
    May 2016

    Posted 18 Aug 2017 in reply to SALVATORE Link to this post

    Hi,

    I have resolved!
    This is javascript code of OnClientEntryAdded function to check only one choise for each year gruop:

            function OnClientEntryAdded(sender, args) {
                if (sender.get_entries().get_count() > 1) {
                    var tree = sender.get_embeddedTree();
                    var valueSelected = args.get_entry().get_value();
                    for (i = 0; i < sender.get_entries().get_count() ; i++) {
                        //Check same root to have just one selected for year
                        var valueOther = sender.get_entries().getEntry(i).get_value();

                        if (valueOther.toString().substr(0, 6) == valueSelected.toString().substr(0, 6) &&
                            valueOther != valueSelected)
                        {
                            var nodeOther = tree.findNodeByValue(valueOther);
                            $telerik.$(nodeOther.get_element()).find('.rtChk').click()
                            nodeOther.select();                        
                        }
                    }

                    var nodeSelected = tree.findNodeByValue(valueSelected);
                    nodeSelected.select();
                }
            }
     To refresh SelectedValue and hi tooltip is very important to call .select for each node (new check and old checked).

  5. SALVATORE
    SALVATORE avatar
    6 posts
    Member since:
    May 2016

    Posted 18 Aug 2017 in reply to SALVATORE Link to this post

    ...last update.
    In function OnClientEntryAdded, it's necessary add this statement:

    nodeOther.uncheck();

    before

    nodeOther.select();

    to view changes server side.

  6. Fernando
    Fernando avatar
    9 posts
    Member since:
    Apr 2015

    Posted 10 May 2018 Link to this post

    I've been looking for a way to concatenate the value of a parent node with the text of a child node in RadDropDownTree with the OnClientEntryAdding event. In my searches by Google the closest I found, was the solution presented in this post, but it did not fully meet me. Mainly because with Jquery presented, the text is redefined on all DropDownTree instances present on the page. So by the browser debug, I could find the following form:

    01.function RadDropDownTree1_OnClientEntryAdding(sender, args) {
    02.    var node = args.get_node();
    03.    var child_node_text = node.get_text();
    04.    var parent_node_value = node.get_parent().get_value();
    05. 
    06.    if (node.get_level() > 0) {
    07.        setTimeout(function () {
    08.            sender._get_inputElement().text(parent_node_value + ' - ' + child_node_text);
    09.        }, 10);
    10.    }
    11.}
  7. David
    David avatar
    318 posts
    Member since:
    Mar 2014

    Posted 20 Sep 2019 in reply to Fernando Link to this post

    I am using the following code to set "selected" as values and not text. It works fine, however fields blinks for a second.

    Is there a better way?

        function RadDropDownTree1_OnClientEntryAdding(sender, args) {     

         setTimeout(function () {
            sender._get_inputElement().text(sender._selectedValue);

         }, 10);
        }

Back to Top