RadComboBox set SelectedIndex via JavaScript

4 Answers 4701 Views
ComboBox
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
Wei
Top achievements
Rank 2
commented on 28 May 2009, 08:25 PM

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
Top achievements
Rank 2
commented on 29 May 2009, 07:15 AM

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
Top achievements
Rank 2
commented on 29 May 2009, 05:10 PM

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
Top achievements
Rank 2
commented on 05 Jun 2009, 08:26 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.
Alex Therieur
Top achievements
Rank 1
commented on 08 Feb 2010, 07:31 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
Simon
Telerik team
commented on 10 Feb 2010, 01:17 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.
raghavendran
Top achievements
Rank 1
commented on 20 Jan 2011, 10:49 AM

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
Telerik team
commented on 25 Jan 2011, 05:11 PM

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.
raghavendran
Top achievements
Rank 1
commented on 31 Jan 2011, 07:10 AM

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
Top achievements
Rank 1
commented on 13 Dec 2011, 05:48 PM

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
Telerik team
commented on 19 Dec 2011, 01:06 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
Vijay
Top achievements
Rank 1
commented on 17 Jan 2024, 10:55 PM | edited

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
Telerik team
commented on 18 Jan 2024, 12:29 PM

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.

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


Quba
Top achievements
Rank 2
commented on 17 Nov 2008, 08:40 AM

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
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();
Keith
Top achievements
Rank 1
commented on 28 Jun 2016, 03:52 PM

Thanks Fernando!  That worked for me.  

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

Robert
Top achievements
Rank 1
commented on 16 Aug 2017, 08:03 PM

Thanks Fernando!  
Tags
ComboBox
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