Telerik RadComboBox javascript API problem

Question

Hi all, 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

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.

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

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.