Hello,

Problem:
I've a combobox (A) with some items in it. This combobox is dependant of an another combobox (B). When I select an item B a clientside event is fired which will obtain new items for A. I'm going to process those items and on the end I hit commitChanges(). I see values changed but not the expected result.

Explanation:
In A I make use of a DataBinder which will render my text from custom attributes that I've added in the codebehind. When I call in the codebehind .databind my data of the custom attributes are shown. When my page is loaded and I select an option in B, A must be updated with the new resultset that I've got from my Ajax request. This result set contains objects that have 4 properties (ObjectId, Name, AddressCode, FullLocation) and I'm going to process those items (see the code example below):

    var dropdown = $find($("[id $= 'rbLocation']").attr("id"));
    dropdown.clearSelection();
    dropdown.trackChanges();
    dropdown.clearItems();

    for (var i = 0; i < obj.length; i++) {
        var item = new Telerik.Web.UI.RadComboBoxItem();
        item.set_text(obj[i].AddressCode);
        item.set_value(obj[i].ObjectId);

        item.get_attributes().setAttribute("Name", obj[i].Name);
        item.get_attributes().setAttribute("FullLocation", obj[i].FullLocation);

        dropdown.get_items().add(item);
    }

    dropdown.commitChanges();

It works but it does not give me the expected result. I've set those attributes but the only thing I see is the AddressCode and nothing more. I've decleared the HTML in this way:

                                        <telerik:RadComboBox ID="rbLocation" runat="server" EmptyMessage="Select a location" HighlightTemplatedItems="true" Filter="StartsWith"
                                            Height="200px" Width="142px" DropDownWidth="300px" RegisterWithScriptManager="false" Skin="Default" AutoPostBack="false">
                                            <HeaderTemplate>
                                                <table cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td style="width: 100px;"><asp:Label ID="lblAddressCode" runat="server">AddressCode</asp:Label></td>
                                                        <td style="width: 100px;"><asp:Label ID="lblName" runat="server">Name</asp:Label></td>
                                                        <td style="width: 100px;"><asp:Label ID="lblFullLocation" runat="server">Full Location</asp:Label></td>
                                                    </tr>
                                                </table>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <table cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td style="width: 100px;"><%# DataBinder.Eval(Container, "Text") %></td>
                                                        <td style="width: 100px;"><%# DataBinder.Eval(Container, "Attributes['Name']") %></td>
                                                        <td style="width: 100px;"><%# DataBinder.Eval(Container, "Attributes['FullLocation']")%></td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </telerik:RadComboBox>

So my question is how can I set my custom attributes clientside? Or at least that they will show up in my dropdown in the corresponding column. Or must I add it manually?

Thank you in advance.

Environment:
Visual Studio 2010
Q2 2011
jQuery 1.6.2

If I do it like the way you have suggested. Does it also search in those items? Are those items selectable?

Alright, I was able to fix my own problem. The following code snippit does the trick:

    var dropdown = $find($("[id $= 'rbLocation']").attr("id"));
    dropdown.clearSelection();
    dropdown.trackChanges();
    dropdown.clearItems();

    for (var i = 0; i < obj.length; i++) {
        var item = new Telerik.Web.UI.RadComboBoxItem();
        item.set_text(obj[i].AddressCode);
        item.set_value(obj[i].ObjectId);

        dropdown.get_items().add(item);
    }

    dropdown.commitChanges();

    // Process the html table back into the dropdown
    var listItems = $("[id $= 'rbLocation_DropDown'] ul li");

    for (var i = 0; i < listItems.length; i++) {
        // Obtain the current listitem
        var item = $(listItems[i]);
        // Obtain the currently located text
        var crnText = item.text();
        // Replace the listitem html
        var tableLayout = "<table cellspacing=\"0\" cellpadding=\"0\"><tr><td width=\"100px\"></td><td width=\"100px\"></td><td width=\"100px\"></td></tr></table>";
        item.html(tableLayout);

        // Append the new data to the dropdown
        item.find("td:eq(0)").text(crnText);
        item.find("td:eq(1)").text(obj[i].Name);
        item.find("td:eq(2)").text(obj[i].FullLocation);
    }

That first part needs to be done to bind the items to the dropdown. After that you can manipulate everything you want :).