Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ListBox / Add/Remove/Disable items

Available actions
Available actions:
  • Amsterdam
  • Barcelona
  • Bonn
  • Boston
  • Brussels
  • Dallas
  • Denver
  • Dublin
  • Liverpool
  • London
  • Madrid
  • Miami
  • Moscow
  • New York
  • Oslo
  • Paris
  • San Francisco
  • Seattle
  • Sofia
  • St.Paul


Available actions
Available actions:
  • Amsterdam
  • Barcelona
  • Bonn
  • Boston
  • Brussels
  • Dallas
  • Denver
  • Dublin
  • Liverpool
  • London
  • Madrid
  • Miami
  • Moscow
  • New York
  • Oslo
  • Paris
  • San Francisco
  • Seattle
  • Sofia
  • St.Paul

Event log:

  • RadListBox provides rich client-side API for manipulating the items. You can add, remove, disable, reorder and transfer items.

    Insert items 

    var item = new Telerik.Web.UI.RadListBoxItem();
item.set_text("Item Text");
listBox.get_items().add(item);

    Delete items

    var item = listBox.getItem(0);
listBox.get_items().remove(item);

    Reorder items

    var item = listBox.getItem(0);
var index = item.get_index();
listBox.reorderItem(item, index - 1);

    Transfer items 

    //Transfer from source to destination
var item = listBoxSource.getItem(0);
listBoxSource.transferToDestination(item);

//Transfer from destination to source
var item = listBoxDestination.getItem(0);
listBox.transferFromDestination(item);

    Disable items 

    var item = listBox.getItem(0);
item.disable();

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>

    <%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ListBox.AddRemoveItemsClientSide.DefaultCS" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <link rel="stylesheet" href="styles.css" type="text/css" />
    </head>
    <body class="BODY">
    <form id="Form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <qsf:Header ID="Header2" runat="server" NavigationLanguage="C#" />
        
        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                //<![CDATA[
                var listBox;

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

                function addItem() {
                    var itemText = $find("<%= RadTextBox1.ClientID %>").get_value();
                    if (!itemText) {
                        alert("Please specify the text for the new item.");
                        return false;
                    }

                    listBox.trackChanges();
                    //Instantiate a new client item
                    var item = new Telerik.Web.UI.RadListBoxItem();
                    item.set_text(itemText);
                    item.set_selected(true);

                    listBox.get_items().add(item);
                    item.scrollIntoView();
                    listBox.commitChanges();
                    return false;
                }

                function deleteItem() {
                    if (listBox.get_items().get_count() < 1) {
                        alert("The listBox is empty.");
                        return false;
                    }

                    var selectedItem = listBox.get_selectedItem();
                    if (!selectedItem) {
                        alert("You need to select a item first.");
                        return false;
                    }

                    if (listBox.get_items().get_count().length == 1) {
                        if (!confirm("This is the last item in the listBox. Are you sure you want to delete it?"))
                            return false;
                    }

                    listBox.deleteItem(selectedItem);
                    return false;
                }

                function disableItem() {
                    var selectedItem = listBox.get_selectedItem();
                    if (!selectedItem) {
                        alert("You need to select a item first.");
                        return false;
                    }

                    listBox.trackChanges();

                    selectedItem.disable();

                    listBox.commitChanges();

                    return false;
                }

                function enableAllItems() {
                    for (var i = 0; i < listBox.get_items().get_count(); i++) {
                        listBox.get_items().getItem(i).enable();
                    }

                    return false;
                }

                function reorderUp() {
                    if (listBox.get_items().get_count() < 1) {
                        alert("The listBox is empty.");
                        return false;
                    }

                    var selectedItem = listBox.get_selectedItem();
                    if (selectedItem == null) {
                        alert("You need to select a item first.");
                        return false;
                    }
                    
                    var index = selectedItem.get_index();
                    if (index < 1) {
                        alert("Cannot reorder the first item");
                        return false;
                    }

                    listBox.reorderItem(selectedItem, index - 1);
                    return false;
                }

                function reorderDown() {
                    if (listBox.get_items().get_count() < 1) {
                        alert("The listBox is empty.");
                        return false;
                    }

                    var selectedItem = listBox.get_selectedItem();
                    if (selectedItem == null) {
                        alert("You need to select a item first.");
                        return false;
                    }
                    
                    var index = selectedItem.get_index();
                    if (index == listBox.get_items().get_count() - 1) {
                        alert("Cannot reorder the last item");
                        return false;
                    }

                    listBox.reorderItem(selectedItem, index + 1);
                    return false;
                }

                function transferRight() {
                    var listBox2 = $find("<%= RadListBox2.ClientID %>");
                    
                    var selectedItem = listBox2.get_selectedItem();
                    if (selectedItem == null) {
                        alert("You need to select a item first.");
                        return false;
                    }

                    listBox2.transferToDestination(selectedItem);
                    return false;
                }
                
                function transferLeft() {
                    var listBox2 = $find("<%= RadListBox2.ClientID %>");
                    var listBox3 = listBox2.get_transferTo();
                    var selectedItem = listBox3.get_selectedItem();
                    if (selectedItem == null) {
                        alert("You need to select a item first.");
                        return false;
                    }

                    listBox2.transferFromDestination(selectedItem);
                    return false;
                }
                
                //]]>
            </script>

        </telerik:RadCodeBlock>
        
        <div class="topContainer">
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Available actions" Orientation="Vertical" CssClass="qsfRightConfig" Expanded="true">
             <div class="title">Available actions:</div>
                
             <ul class="qsfexAvailableActions">
                 <li>
                     <asp:Button ID="Button5" CssClass="qsfButtonBig" OnClientClick="return reorderUp()" Text="Move Up" runat="server" />
                     <asp:Button ID="Button6" CssClass="qsfButtonBig" OnClientClick="return reorderDown()" Text="Move Down" runat="server" />
                 </li>
                 <li>
                     <asp:Button ID="Button4" CssClass="qsfButtonBig" OnClientClick="return disableItem()" Text="Disable Selected Item" runat="server" />
                     <asp:Button ID="Button7" CssClass="qsfButtonBig" OnClientClick="return enableAllItems()" Text="Enable All Items" runat="server" />
                 </li>
                 <li>
                     <asp:Button ID="Button3" CssClass="qsfButtonBig" OnClientClick="return deleteItem()" Text="Delete Selected Item" runat="server" />
                 </li>
                 <li>
                     <telerik:RadTextBox runat="server" ID="RadTextBox1" Text="New Item" />
                     <asp:Button ID="Button1" CssClass="qsfButton" OnClientClick="return addItem()" Text="Add New Item" runat="server" />
                 </li>
                 <li>
                     <asp:Button ID="Button2" CssClass="qsfButton" Text="Postback" runat="server" OnClick="Button2_Click" />
                 </li>
             </ul>
         </qsf:ConfiguratorPanel>
            <telerik:RadListBox ID="RadListBox1" runat="server" Height="230px" /><br /><br />
        </div>

        <div style="overflow: hidden">
            <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel2" Title="Available actions" Orientation="Vertical" CssClass="qsfRightConfig" Expanded="true">
                 <div class="title">Available actions:</div>
                    
                 <ul class="qsfexAvailableActions" style="clear: both">
                     <li>
                         <asp:Button ID="Button13" CssClass="qsfButtonBig" OnClientClick="return transferRight()" Text="Transfer Right" runat="server" />
                         <asp:Button ID="Button12" CssClass="qsfButtonBig" OnClientClick="return transferLeft()" Text="Transfer Left" runat="server" />
                     </li>
                 </ul>
         </qsf:ConfiguratorPanel>
                        
         <telerik:RadListBox ID="RadListBox2" runat="server" Height="230px" TransferToID="RadListBox3" />
         <telerik:RadListBox ID="RadListBox3" runat="server" Height="230px" /><br />
        </div>

        <qsf:EventLogConsole runat="server" ID="EventLogConsole1" />
        <qsf:Footer ID="Footer2" runat="server" />
    </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451