Using the example from http://www.telerik.com/help/aspnet-ajax/listbox-client-templates.html, I was able to set up my ListBox using javascript to add items and attributes. When the item is added to my listbox, the text property is displayed but the other attributes are not. When I view the rendered HTML, I can see that the attributes have been successfully added to my item. I would think that based on the ClientItemTemplate I have created, those values should show in the ListBox by the text, but they do not.
My end goal is to have the listbox display each attribute in table format. Everything must be done clientside. Any help is appreciated!
Rendered HTML:
< li class="rlbItem" id="selectMarketControl_RadListBox1_i0" Highlighted="False" StateCode="XY" City="Z" DataKey="123">
<span class="rlbText">
Text - Test Market
Javascript:
ClientItemTemplate:
My end goal is to have the listbox display each attribute in table format. Everything must be done clientside. Any help is appreciated!
Rendered HTML:
< li class="rlbItem" id="selectMarketControl_RadListBox1_i0" Highlighted="False" StateCode="XY" City="Z" DataKey="123">
<span class="rlbText">
Text - Test Market
Javascript:
//Get properties to add to the list boxvar nodeText = "Test Market"; var dataKey = "123"; var city = "Z"; var stateCode = "XY"; var highlighted = "False";
//Create ListBox Item var listbox = $find("<%= RadListBox1.ClientID %>"); var item = new Telerik.Web.UI.RadListBoxItem(); item.set_text(nodeText); item.set_value(dataKey);
//Set the list box item's custom attributes var attributes = item.get_attributes(); attributes.setAttribute("DataKey", dataKey); attributes.setAttribute("City", city); attributes.setAttribute("StateCode", stateCode); attributes.setAttribute("Highlighted", highlighted);
//Add item to the Listbox
listbox.trackChanges(); listbox.get_items().add(item); item.bindTemplate(); listbox.commitChanges();
ClientItemTemplate:
<ClientItemTemplate> <table cellpadding="0" border="1" cellspacing="0" id="tblSelectedItems1"> <tr style="height: 18px;"> <td class="selectedMarketsGridColumnHospital"> #= Text # </td> <td class="selectedMarketsGridColumnCity"> #= Attributes.City # </td> <td class="selectedMarketsGridColumnState"> #= Attributes.StateCode # </td> <td style="text-align: center;" class="selectedMarketsGridColumnHighlighted"> <asp:CheckBox ID="Highlighted" runat="server" Checked=' #= Attributes.Highlighted #' ToolTip="Click to Highlight" Visible="true" /> </td> <td class="selectedMarketsGridColumnDelete"> <asp:ImageButton ID="btnRemove" AlternateText="Remove" Visible="true" Width="20px" runat="server" ImageUrl="../../Images/Buttons/btnGridRemove.gif" CommandName="Delete" CommandArgument='#= Attributes.DataKey #' ToolTip="Click to Remove" /> </td> </tr> </table> </ClientItemTemplate>