Adding new items from client to listbox with a template

4 posts, 0 answers
  1. Al
    Al avatar
    19 posts
    Member since:
    Oct 2012

    Posted 27 Dec 2012 Link to this post

    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>


  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 02 Jan 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rosemary
    Rosemary avatar
    4 posts
    Member since:
    Jun 2013

    Posted 10 Sep 2013 Link to this post

    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>


  5. Rosemary
    Rosemary avatar
    4 posts
    Member since:
    Jun 2013

    Posted 11 Sep 2013 Link to this post

    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.
Back to Top