Telerik RadComboBox javascript API problem - asp.net

Question

I've been having a problem using the javascript API of the RadComboBox from Telerik. And no I don't have the power to switch over from Telerik to jQuery or another framework.. Suffice to say I have hardly any hair left on my head now :P
In a nutshell I want to grab the selected index of one RadComboBox, and update another RadComboBox to this index. Eg. selecting a value in the first RCB automatically updates the second on the client side. My problem really is that I can't find a way to set the index on the second RCB, even though the docs says there is an easy way to do it .. (you heard that one before right :)
I've followed the API docs at this page (telerik docs), and also used the javascript debugger in IE8 and the excellent FireBug in Firefox. I'm using Telerik.Web.UI assembly version 2009.2.826.20
I don't need full source for a solution, but a nudge in the right direction would be much appreciated! :)
Here's some example code I cooked together:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">
function masterChanged(item)
{
var detailCB = <%= DetailCB.ClientID %>;
var index = item.get_selectedIndex();
detailCB.SetSelected(index); //method does not exist, but should according to the docs..
}
</script>
<div>
<telerik:RadComboBox ID="MasterCB" runat="server" OnClientSelectedIndexChanged="masterChanged">
<Items>
<telerik:RadComboBoxItem Text="One" Value="1" runat="server" />
<telerik:RadComboBoxItem Text="Two" Value="2" runat="server" />
<telerik:RadComboBoxItem Text="Three" Value="3" runat="server" />
</Items>
</telerik:RadComboBox>
</div>
<div>
<telerik:RadComboBox ID="DetailCB" runat="server">
<Items>
<telerik:RadComboBoxItem Text="One" Value="1" runat="server" />
<telerik:RadComboBoxItem Text="Two" Value="2" runat="server" />
<telerik:RadComboBoxItem Text="Three" Value="3" runat="server" />
</Items>
</telerik:RadComboBox>
</div>
</form>
I don't need full source for a solution, but a kick in the right direction would be much appreciated! :)

Answer 1

Many thanks to Veselin Vasilev and stefpet for their input. After too many hours of js debugging and ditto cups of coffee I did get this to work with IE8 and FF3.5.
The correct javascript event handler for updating parallel RadComboBoxes (responding to the OnClientSelectedIndexChanged event):
function masterChanged(sender, e)
{
var detailCB = $find("<%= DetailCB.ClientID %>");
var item = e.get_item();
var index = item.get_index(); //get selectedIndex in master
var allDetailItems = detailCB.get_items();
var itemAtIndex = allDetailItems.getItem(index); //get item in detailCB
itemAtIndex.select();
}
This can of course be shortened by doing several calls on a single line. I recon there may well be a way to do this with less code, but I tried just about everything and this is the only solution that worked for me.

Answer 2

You are using the client-side API of the "classic" RadComboBox while the version of the combo is for ASP.NET AJAX. Here is how your method should look like:
function masterChanged(item)
{
var detailCB = $find("<%= DetailCB.ClientID %>");
var index = item.get_selectedIndex();
detailCB.set_selectedIndex(index);
}
Here is the proper link in the documentation:
http://www.telerik.com/help/aspnet-ajax/combo_clientsidebasics.html

Answer 3

I have no experience with Telerik, but given what is actually rendered is a standard select list containing option elements you are able to select an option programmatically by setting the option's selected property to true.