RadComboBox set SelectedIndex via JavaScript
4 Answers 1604 Views
Quba
Top achievements
Rank 2
Quba asked on 14 Nov 2008, 03:15 PM
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

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

- by
Wei
Top achievements
Rank 2
on 28 May 2009, 08:25 PM
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
- by
Shinu
Top achievements
Rank 1
on 29 May 2009, 07:15 AM

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?

 

- by
Wei
Top achievements
Rank 2
on 29 May 2009, 05:10 PM
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.
- by
Wei
Top achievements
Rank 2
on 05 Jun 2009, 08:26 PM
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
- by
Alex Therieur
Top achievements
Rank 1
on 08 Feb 2010, 07:31 PM
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.
- by
Simon
Telerik team
on 10 Feb 2010, 01:17 PM
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.
- by
raghavendran
Top achievements
Rank 1
on 20 Jan 2011, 10:49 AM
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.
- by
Simon
Telerik team
on 25 Jan 2011, 05:11 PM
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.
- by
raghavendran
Top achievements
Rank 1
on 31 Jan 2011, 07:10 AM
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...
- by
alonav
Top achievements
Rank 1
on 13 Dec 2011, 05:48 PM
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
- by
Dimitar Terziev
Telerik team
on 19 Dec 2011, 01:06 PM

4 Answers, 1 is accepted

Sort by
0
Alexandre
Top achievements
Rank 1
answered on 16 Nov 2008, 03:04 PM
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 :)


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
- by
Quba
Top achievements
Rank 2
on 17 Nov 2008, 08:40 AM
0
Yana
Telerik team
answered on 17 Nov 2008, 11:53 AM
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.
0
Chandrashekhar
Top achievements
Rank 1
answered on 04 Apr 2009, 07:07 AM
Hello Charlie,

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


Regards,
Chandrashekhar Mahale



0
Fernando
Top achievements
Rank 2
answered on 04 Sep 2015, 12:43 PM

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();

Thanks Fernando!  That worked for me.  

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

- by
Keith
Top achievements
Rank 1
on 28 Jun 2016, 03:52 PM
Thanks Fernando!  
- by
Robert
Top achievements
Rank 1
on 16 Aug 2017, 08:03 PM
Asked by
Quba
Top achievements
Rank 2
Answers by
Alexandre
Top achievements
Rank 1
Yana
Telerik team
Chandrashekhar
Top achievements
Rank 1
Fernando
Top achievements
Rank 2
Share this question
or