RadComboBox set SelectedIndex via JavaScript

18 posts, 0 answers
  1. Quba
    Quba avatar
    7 posts
    Member since:
    Jun 2006

    Posted 14 Nov 2008 Link to this post

    Hi,

    Is there any way to set the SelectedIndex of a RadComboBox via javascript?

    I've managed to set the text to blank via this code:

    var combo = $$('.wherecombotown')[0];
    combo.getElementsBySelector('input')[0].value = '';

    However this still keeps the selected index the same; I can't seem to find any way of setting the index back to -1;

    Many thanks,

    Ben
  2. Alexandre
    Alexandre avatar
    13 posts
    Member since:
    Nov 2008

    Posted 16 Nov 2008 Link to this post

    Hi Jon,

    Take a look in your local documentation
    ms-help://telerik.aspnetajax.radcontrols.2008.Q3/telerik.aspnetajax.radcombobox.2008.Q3/client-side-radcombobox.html

    Select a specific element
            var combo = $find("<%= RadComboBox1.ClientID %>");
            var itm = combo.findItemByValue(myItemValue);
             itm.select();

    Clear selection
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.clearSelection();

    Hope this help :)


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Quba
    Quba avatar
    7 posts
    Member since:
    Jun 2006

    Posted 17 Nov 2008 Link to this post

    Thanks for the reply Alexandre.

    Unfortunately I can't get this method to work, it just throws a JavaScript error saying the method is not supported. I'm using the prototype library so am wondering if this is overriding the "Find" and "ClientID" methods/properties. Is there any other way of changing the selected index?

    Many thanks
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Nov 2008 Link to this post

    Hello Jon,

    I suggest you use Telerik.Web.UI.RadComboBox.ComboBoxes array to obtain the client-side instance of  the combobox instead of "Find" method.  Please let us know how it goes.

    Kind regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Chandrashekhar
    Chandrashekhar avatar
    3 posts
    Member since:
    Mar 2009

    Posted 04 Apr 2009 Link to this post

    Hello Charlie,

    Try following solution -
    To set combo box index :
      var itemLocation = comboLocations.findItemByText("Select Location");
      itemLocation.select();


    Regards,
    Chandrashekhar Mahale



  7. Wei
    Wei avatar
    16 posts
    Member since:
    Mar 2009

    Posted 28 May 2009 Link to this post

    Hi,

    I have the same problem as Charlie got. when I try using the clearSelection(), it just throws a JavaScript error saying the method is not supported.  Any clues?

    Wei

  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 May 2009 Link to this post

    Hi Wei,

    It is working as expected when tried clearSelection() method in my end. I guess you are using different version of RadControls. Could you let us know which version of RadControls that you are using? Here is the code that I tried for RadControls for ASP.NET AJAX version (Q1 2009).

    ASPX:
     
    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="300px" AllowCustomText="true" >   
       <Items>   
           <telerik:RadComboBoxItem Text="Text1" Value="Value1"></telerik:RadComboBoxItem>   
           <telerik:RadComboBoxItem Text="Text2" Value="Value2"></telerik:RadComboBoxItem>   
             . . .                        
       </Items>   
    </telerik:RadComboBox>  
    <input id="Button3" type="button" value="Clear"  onclick="ClearCombo();"/> 

    JavaScript:
     
    <script type="text/javascript"
    function ClearCombo() 
        var combo = $find("<%= RadComboBox1.ClientID %>"); 
        combo.clearSelection(); 
    </script> 

    Thanks,
    Shinu
  9. Wei
    Wei avatar
    16 posts
    Member since:
    Mar 2009

    Posted 29 May 2009 Link to this post

    Hi Shinu,

     

    Thanks for the quick response. I tried again and you are right the clearSelection works.

    Now the new issue is, I use the RadCombobox(ddlSearchCity) to build a usercontrol utrlCity and use utrlCity to build another usercontrol utrlAddress. I put utrlAddress in one page and it works, but when I go to another page, which contains utrlCity, it throws an error: ‘null is null or not an object, with the line “ddlSearchCity.clearSelection” highlighted.

    sbClientScript.Append("var ddlSearchCity = $find('" + ddlSearchCity.ClientID + "');" + Environment.NewLine)

    'sbClientScript.Append("var ddlSearchCity = $find('<%= " + ddlSearchCity.ClientID + " %>');" + Environment.NewLine) 'This doesn’t work --'Null' is null or not an object  

     

    sbClientScript.Append("ddlSearchCity.clearSelection();" + Environment.NewLine)

    sbClientScript.Append("ddlSearchCity.set_emptyMessage('" + strEnter + "');" + Environment.NewLine)

     

    Do you happen to have an example illustrates the RadCombobox used in a usercontrol?

     

  10. Wei
    Wei avatar
    16 posts
    Member since:
    Mar 2009

    Posted 05 Jun 2009 Link to this post

    Never Mind as it was sort out. The JavaScript code was called before the control was loaded so it could not "Find" the control, and therefore the method was not supported.
  11. Alex Therieur
    Alex Therieur avatar
    2 posts
    Member since:
    Jan 2010

    Posted 08 Feb 2010 Link to this post

    Hi,

    I have a similar problem when selecting an item via JavaScript.  Why I can't use an item.select()?  I have got an error :
        "Microsoft JScript runtime error: Out of memory"...

    function onClientSelectedIndexChanged(sender, eventArgs) { 
        var item = eventArgs.get_item();
        item.select();
     
        // -- OR -- 
     
        var item = sender.findItemByText(sender.get_text()); 
        if (item) { 
            item.select(); 
        } 

    If I set a break point on JS code, I can see valid item object with their methods, etc.  I can't use
        var combo = $find("<%= RadComboBox1.ClientID %>");
    because the RadCombobox is in an EditItemTemplate.

    Thank you,
    at
  12. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 10 Feb 2010 Link to this post

    Hi Alex Therieur,

    This happens because you are creating an infinite loop, i.e. calling select on the Item triggers the SelectedIndexChanged event, which again calls select on the Item and so on and so forth.

    Please avoid selecting an Item in this event handler.

    All the best,
    Simon
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  13. raghavendran
    raghavendran avatar
    3 posts
    Member since:
    Jan 2011

    Posted 20 Jan 2011 Link to this post

    Hello Team,

    I can select the item through item.select(); but the problem am facing is  that, my combobox has AutoPostback set to true. So when I do  item.select() in javascript, post back is happening, which is not needed. Please help me how to do item.select() without postback.
  14. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 25 Jan 2011 Link to this post

    Hello raghavendran,

    You can avoid the postback in this case with the following code:
    var $RCBP = Telerik.Web.UI.RadComboBox.prototype;
    var postback = $RCBP.postback;
    $RCBP.postback = function () { };
     
    item.select();
     
    $RCBP.postback = postback;

    I hope this helps.

    All the best,
    Simon
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  15. raghavendran
    raghavendran avatar
    3 posts
    Member since:
    Jan 2011

    Posted 31 Jan 2011 Link to this post

    Thanks for the solution.

    Even though the post back can be avoided, the item.Select() fired the CausesValidation event. Some code similar to the one you have mentioned could avoid that.
    I could make that working by a different method.
    radCombo.set_text("aTextFromTheDropDown");
    This happened to be purely client side.(no post back, no validation issues)
    'aTextFromTheDropDown' can be retrieved based on the value using the function get_itemByValue("0").get_text();

    P.S: The Method names are case sensitive and list of methods available can be found using the debugger.
  16. alonav
    alonav avatar
    12 posts
    Member since:
    May 2008

    Posted 13 Dec 2011 Link to this post

    Hi,

    This does not work for an auto complete combo box which get its items from a web service.
    I'm working with version 2011.1.413.40
    I tried several options with no luck...
  17. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 19 Dec 2011 Link to this post

    Hello Alonav,

    It's expected that when you set some text in the input of the RadComboBox and load on demand is used, a request for items is performed. Could you elaborate a bit more on the exact scenario that you want to achieve?

    Best wishes,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  18. Fernando
    Fernando avatar
    6 posts
    Member since:
    Apr 2015

    Posted 04 Sep 2015 Link to this post

    I'm sorry for writing in a post as old, but to help others who come here in the future, I felt obliged to inform a way that I find simpler for set SelectedIndex via JavaScript. Today we can do like this:

    var combo = $find("RadComboBox1");
    combo.trackChanges();
    combo.get_items().getItem(0).select();
    combo.commitChanges();
  19. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 28 Jun in reply to Fernando Link to this post

    Thanks Fernando!  That worked for me.  

    None of the other responses in this thread worked for me but yours did.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017