Telerik RadComboBox javascript API problem

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

Grubl3r · Accepted Answer · 2009-12-07 00:54:50Z

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.

tster · Accepted Answer · 2010-09-29 14:33:34Z

3

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

edited Sep 29, 2010 at 14:33

tster

18.3k6 gold badges57 silver badges72 bronze badges

answered Dec 6, 2009 at 9:00

Veselin Vasilev

411 bronze badge

2 Comments

Grubl3r Over a year ago

A thousand thanks for the link Veselin, this was indeed the correct docs!

Grubl3r Over a year ago

BTW in my version the "set_selectedIndex()" js function does not exist on RadComboBox objects.

stpe · Accepted Answer · 2009-12-02 13:11:14Z

-2

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.

answered Dec 2, 2009 at 13:11

stpe

3,6283 gold badges35 silver badges39 bronze badges

1 Comment

Grubl3r Over a year ago

I wish it were like that. Unfortunately, since comboboxes are for inputting data as well as selecting it this is not the case RadComboBox outputs a table, lots of divs, and the options like this: <li class="rcbItem ">One</li><li class="rcbItem ">Two</li> etc..

Collectives™ on Stack Overflow

Telerik RadComboBox javascript API problem

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related