Adding new items from client to listbox with a template

[Al]

I know that I'm missing something, but could someone give me simple example code for this?

So far I have this:

There are two textboxes, a button, and two listboxes on the page, currently I'm only concerned with RadListBox1.  I want to be able to add the values from the textboxes to labels (or text) in a template format in the listbox when the user clicks the button.  I want to be able to set the position and color of the text.  The value portion of the item will be an ID that doesn't need to be displayed.

Currently this all works if I don't use a template and I just concatenate the text from both textboxes.  But I don't know how to do this with a template.  I've put labels in the itemtemplate section below with text="#= Text #" but nothing displays in the listbox.  The item is added and it has the right text and value, but it's just a very narrow row with no text showing.

Relevant code below:

<script type="text/javascript">
            var listBox;

            function pageLoad() {
                listBox = $find("<%= RadListBox1.ClientID %>");
            }

            function addItem() {
                var itemText = $find("<%= RadTextBox1.ClientID %>").get_value();
                //Set a value also to mimic having an ID column in the control.
                var itemValue = 15
                if (!itemText) {
                    alert("Please specify the text for the new item.");
                    return false;
                }

                var itemText2 = $find("<%= RadTextBox2.ClientID %>").get_value();
                if (!itemText2) {
                    alert("Please specify text2 for the new item.");
                    return false;
                }

                var itemFullText = "" + itemText + " ;     Volume: " + itemText2

                listBox.trackChanges();
                //Instantiate a new client item
                var item = new Telerik.Web.UI.RadListBoxItem();
                item.set_text(itemFullText);
                item.set_value(itemValue);
                item.set_selected(true);
                item.bindTemplate();
                listBox.get_items().add(item);
                item.scrollIntoView();
                listBox.commitChanges();
                return false;
            }

        </script>

<telerik:RadTextBox ID="RadTextBox1" Runat="server">
        </telerik:RadTextBox>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <telerik:RadTextBox ID="RadTextBox2" Runat="server">
        </telerik:RadTextBox>
&nbsp;&nbsp;
        <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="False" 
            onclientclicked="addItem" Text="RadButton">
        </telerik:RadButton>
        <br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;
        <telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True" 
            AllowReorder="True" AllowTransfer="True" TransferToID="RadListBox2" Height="150px" Width="300px">
            <ItemTemplate>
        
    </ItemTemplate>

<ButtonSettings TransferButtons="All"></ButtonSettings>
        </telerik:RadListBox>
        <telerik:RadListBox ID="RadListBox2" runat="server"  Height="150px" Width="300px">
            <ButtonSettings TransferButtons="All">
            </ButtonSettings>
        </telerik:RadListBox>

[Bozhidar]

Hello Allen,

When working solely on the client, you have to use ClientTemplates. Please refer to the following demo and help article, which explain in detail how you can use ClientTemplates with RadListBox:
http://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/clienttemplates/defaultvb.aspx
http://www.telerik.com/help/aspnet-ajax/listbox-client-templates.html

 
All the best,
Bozhidar
the Telerik team

[Rosemary]

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.  However I am unable to access the attributes in the ClientItemTemplate.  How do I access the attributes I added in javascript in my ClientItemTemplate?  If I view the rendered HTML, I can see that the attributes have been added to my item yet in my listbox I only see the text property, but no attribute values display.

My end goal is to have the listbox display, in table format, each attribute value. 

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 box
    var 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>

[Rosemary]

This has been resolved. I discovered that I was initiating an AJAX request after applying the ClientItemTemplate.  Since the ClientItemTemplate is as it says, client side, the request was replacing my template with what I assume is a default template.