ListBox

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadListBox - Telerik's ASP.NET ListBox

Configuration
Source ListBox:
  • select
Destination ListBox:
    
  • Argentina
  • Australia
  • Brazil
  • Canada
  • Chile
  • China
  • Egypt
  • England
  • France
  • Germany
  • India
  • Indonesia
  • Kenya
  • Mexico
  • New Zealand
  • South Africa
  • USA

tlrk.it/15FHUTo To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/15FHUTo

About RadListBox for ASP.NET AJAX

RadListBox is a powerful ASP.NET AJAX control for displaying a list of items. The control’s full support for drag-and-drop functionality enables users to transfer and reorder items, as well as perform multiple selection. RadListBox implements a highly efficient semantic rendering, by using list items and CSS instead of tables. This results in significantly reduced HTML output, which dynamically improves performance. It also has a rich client-side API with a comprehensive set of events, guaranteeing full control over various functions performed on the client.

RadListBox and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular ListBox demo, you can use the following path to find it in the sample website application:
listbox/examples/overview

Key Features

  • Rich client-side functionality
  • Drag and Drop Support
  • Checkboxes
  • Load on Demand
  • Templates
  • Advanced Skinning - The visual appearance of the RadListBox control can be easily customized through skins

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="ListBox.Examples.Overview.DefaultVB" %>
<%@ Register Src="~/ListBox/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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">
    <title>ASP.NET List Control Tutorials | RadListBox for ASP.NET AJAX</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configuration"
            Orientation="Vertical" Expanded="true">
            <span class="title">Source ListBox:</span>
            <ul>
                <li>
                    <asp:CheckBox ID="AllowTransfer" runat="server" AutoPostBack="True" Checked="True"
                        Text="Allow transfer"></asp:CheckBox></li>
                <li class="dependant">
                    <asp:Label runat="server" ID="DDTransferModeLabel" AssociatedControlID="DDTransferMode"
                        Text="Transfer mode:"></asp:Label>
                    <telerik:RadComboBox runat="server" ID="DDTransferMode" AutoPostBack="true" Width="70px">
                        <Items>
                            <telerik:RadComboBoxItem Text="Move" Selected="true"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Copy"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li class="dependant">
                    <asp:CheckBox ID="AllowTransferDuplicates" runat="server" AutoPostBack="True" Text="Allow duplicates in destination">
                    </asp:CheckBox></li>
                <li>
                    <asp:CheckBox ID="AllowReorderSource" runat="server" AutoPostBack="True" Text="Allow reorder">
                    </asp:CheckBox></li>
                <li>
                    <asp:CheckBox ID="AllowMultipleSelection" runat="server" AutoPostBack="True" Text="Allow multiple selection">
                    </asp:CheckBox></li>
            </ul>
            <span class="title">Destination ListBox:</span>
            <ul>
                <li>
                    <asp:CheckBox ID="AllowDelete" runat="server" AutoPostBack="True" Checked="True"
                        Text="Allow delete"></asp:CheckBox></li>
                <li>
                    <asp:CheckBox ID="AllowReorder" runat="server" AutoPostBack="True" Checked="true"
                        Text="Allow reorder"></asp:CheckBox></li>
            </ul>
        </qsf:ConfiguratorPanel>
        <telerik:RadListBox runat="server" ID="RadListBoxSource" Height="200px" Width="200px"
            AllowTransfer="true" TransferToID="RadListBoxDestination">
            <Items>
                <telerik:RadListBoxItem Text="Argentina"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Australia"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Brazil"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Canada"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Chile"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="China"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Egypt"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="England"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="France"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Germany"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="India"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Indonesia"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Kenya"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Mexico"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="New Zealand"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="South Africa"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="USA"></telerik:RadListBoxItem>
            </Items>
        </telerik:RadListBox>
        <telerik:RadListBox runat="server" ID="RadListBoxDestination" Height="200px" Width="200px">
        </telerik:RadListBox>
    </telerik:RadAjaxPanel>

     <hr class="qsf-clear-float" />
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/ListBox.png" AlternateText="tlrk.it/15FHUTo" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/15FHUTo">tlrk.it/15FHUTo</a>
    </div>
    </form>
</body>
</html>