RadComboBox set SelectedIndex via JavaScript

[Quba]

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

[Wei]

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

[Shinu]

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

[Wei]

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?

 

[Wei]

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.

[Alex Therieur]

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

[Simon]

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.

[raghavendran]

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.

[Simon]

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

[raghavendran]

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.

[alonav]

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...

[Dimitar Terziev]

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

[Vijay]

Hi Simon, 

var $RCBP = Telerik.Web.UI.RadComboBox.prototype;

var postback = $RCBP.postback;

$RCBP.postback = function () { };

 

item.select();

 

$RCBP.postback = postback;

Post back works perfectly most of the time, after a few page reload, it stops working.

We have a controls 2 places, One on the main page and one on the popup. (both are expected to be in sync)

Step1: 
Say user on the main page selection, 
Option-A : Page  post back's Ok. 

Now user opens the pop up and selects, Option-B, on closing the pop up. We select Option-B in the main window. 

User repeats step1, So main page has option-B selected again. 

Again user selects Option-A and it does not post back. 

looks like post back is not working on previously selected item. 

Not sure how to debug and resolve this. Any suggests would help.  

[Rumen]

Hi Vijay,

The issue you're encountering with the combobox not triggering a postback under certain conditions seems to be related to the state management of the control. Unfortunately, without more information about your code and the specific issue you are facing, it is difficult to provide a definitive solution. However, here are some suggestions that might help:

• Ensure that the RadComboBox controls on the main page and the popup are properly synchronized. You can use the OnClientSelectedIndexChanged event to synchronize the two controls. Ensure that the state of the RadComboBox in the popup and the main page is properly synchronized when the popup closes, you might need to explicitly trigger a state update for the RadComboBox on the main page.
• Check if there are any JavaScript errors in the browser console that might be causing the issue. Open the developer tools in your browser and check the console for any JavaScript errors or warnings. Sometimes, issues with postbacks can be related to JavaScript errors that are occurring elsewhere on the page.
  
• Check the logic that overrides the postback function of $RCBP. There might be conditions under which the original postback function is not properly restored, leading to the observed issue.
• Examine AJAX Requests - use the network tab in the browser's developer tools to monitor AJAX requests. This can give you insights into whether the postback is being triggered but not processed correctly, or if it's not being triggered at all.
• Try using the clearSelection() method before setting the selected index. This method clears the current selection of the RadComboBox.
• Test with a Simplified Scenario - If possible, try to replicate the issue in a simplified version of your page. This could help isolate whether the problem is with the RadComboBox control itself or with the interaction between the control and other elements or scripts on your page.

If you are unable to find the reason for the issue and fix, isolate it in a simple runnable project and send it for examination via a new support ticket.

[Alexandre]

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 :)

[Quba]

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

[Yana]

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.

[Chandrashekhar]

Hello Charlie,

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


Regards,
Chandrashekhar Mahale

[Fernando]

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

[Keith]

Thanks Fernando!  That worked for me.  

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

[Robert]

Thanks Fernando!