This is a migrated thread and some comments may be shown as answers.

Adding new items from client to listbox with a template

3 Answers 105 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Al asked on 28 Dec 2012, 04:01 AM
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>


3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 02 Jan 2013, 02:26 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Rosemary
Top achievements
Rank 1
answered on 10 Sep 2013, 02:54 PM
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="height18px;">             <td class="selectedMarketsGridColumnHospital">                 #= Text #              </td>              <td class="selectedMarketsGridColumnCity">                  #= Attributes.City #              </td>              <td class="selectedMarketsGridColumnState">                    #= Attributes.StateCode #              </td>              <td style="text-aligncenter;" 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>


0
Rosemary
Top achievements
Rank 1
answered on 11 Sep 2013, 01:20 PM
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.
Tags
ListBox
Asked by
Al
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Rosemary
Top achievements
Rank 1
Share this question
or