[Javascript] Unable to databind the new items of the combobox clientside (attributes are not shown if provided)

[Michiel]

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

[Schlurk]

I believe the issue here stems from the fact that the DataBinder.Eval(...) expression will only be evaluated when .DataBind() is called on the RadComboBoxItem in the code-behind. If you take a look at the generated HTML that comes out from this expression you will see that it is just plain text. This gets generated when you call .DataBind() on each RadComboBoxItem, like in this documentation article, or when you data bind the RadComboBox.

In your case if you were to take a look at the RadComboBox variable in FireBug you will see that you do indeed have RadComboBox items with these attributes in there. However, only set_text() will go in and modify the HTML to actually display something in the element representing the RadComboBoxItem.

In the case of your custom attributes I believe, if you want to keep all of this client-side, that you will have to manually update the <td> elements using jQuery. Good news is that the RadComboBox renders as as <ul> element with each item being an <li>, which allows for a $.each function to do most of the heavy lifting.

[Michiel]

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

[Michiel]

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