New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add/Remove/Disable items

  • 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
  • Move
  • Enable / Disable
  • Remove item
  • Add item
  • Transfer

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();
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • ListBox.xml
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="ListBox.Examples.ClientSide.AddRemoveDisable.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-medium">
        <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" Height="230px" TransferToID="RadListBox2" Width="300px">
        </telerik:RadListBox>
        <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox2" runat="server" Height="230px" Width="295px">
        </telerik:RadListBox>
    </div>

    <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 selectedItem = listBox.get_selectedItem();
                if (selectedItem == null) {
                    alert("You need to select a item first.");
                    return false;
                }

                listBox.transferToDestination(selectedItem);
                return false;
            }

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

                listBox.transferFromDestination(selectedItem);
                return false;
            }
            
            //]]>
        </script>
    </telerik:RadCodeBlock>




    <qsf:configuratorpanel runat="server" id="ConfigurationPanel1" title="Available actions">
        <Views>
            <qsf:View>

                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Move</span>
                            <qsf:Button runat="server" id="Button5" size="Medium" AutoPostBack="false" OnClientClicked="reorderUp" text="Move Up" />
                            <qsf:Button runat="server" id="Button6" size="Medium" AutoPostBack="false" OnClientClicked="reorderDown" text="Move Down" />
                        </li>
                        <li>
                            <span class="label">Enable / Disable</span>
                            <qsf:Button runat="server" id="Button4" Size="Medium" AutoPostBack="false" OnClientClicked="disableItem" text="Disable Item" />
                            <qsf:Button runat="server" id="Button7" Size="Medium" AutoPostBack="false" OnClientClicked="enableAllItems" text="Enable All" />
                        </li>
                        <li>
                            <span class="label">Remove item</span>
                            <qsf:Button runat="server" id="Button3" Size="Medium" AutoPostBack="false" OnClientClicked="deleteItem" text="Delete Item" />
                        </li>
                        <li>
                            <span class="label">Add item</span>
                            <qsf:TextBox runat="server" id="RadTextBox1" Size="Wide" text="New Item" />
                            <qsf:Button runat="server" id="Button1" Size="Narrow" AutoPostBack="false" OnClientClicked="addItem" text="Add" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Transfer</span>
                            <qsf:Button runat="server" id="Button13" size="Medium" AutoPostBack="false" OnClientClicked="transferRight" text="Transfer Right" />
                            <qsf:Button runat="server" id="Button12" size="Medium" AutoPostBack="false" OnClientClicked="transferLeft" text="Transfer Left" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:configuratorpanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance