Tab
A newer version of this page is available. Switch to the current version.

ASPxListBox Class

A list box control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.2.dll

Declaration

public class ASPxListBox :
    ASPxListEdit,
    IListBoxColumnsOwner,
    IMultiSelectListEdit,
    IControlDesigner,
    IListEditPropertyDescriptorsOwner,
    IListEditServerModeOwner
Public Class ASPxListBox
    Inherits ASPxListEdit
    Implements IListBoxColumnsOwner,
               IMultiSelectListEdit,
               IControlDesigner,
               IListEditPropertyDescriptorsOwner,
               IListEditServerModeOwner

Remarks

The ASPxListBox allows you to display a list of items which can be selected by end-users.

Create a List Box

Design Time

The ASPxListBox control is available on the DX.19.2: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize control settings, or paste the control markup in the page's source code.

<dx:ASPxListBox ID="ASPxListBox1" runat="server" Width="100">
    <Items>
        <dx:ListEditItem Text="Item 1" Value="Item 1" />
        <dx:ListEditItem Text="Item 2" Value="Item 2" />
        <dx:ListEditItem Text="Item 3" Value="Item 3" />
    </Items>
</dx:ASPxListBox>

Run Time

protected void Page_Load(object sender, EventArgs e)
{
    ASPxListBox listBox = new ASPxListBox();
    listBox.ID = "ASPxListBox1";
    form1.Controls.Add(listBox);
    listBox.Items.Add(new ListEditItem("Item 1"));
    listBox.Items.Add(new ListEditItem("Item 2"));
    listBox.Items.Add(new ListEditItem("Item 3"));
}

Client-Side API

The ASPxListBox's client-side API is implemented with JavaScript language and exposed by the ASPxClientListBox object.

Availability

Available by default.

Class name

ASPxClientListBox

Access name

ClientInstanceName

Events

ASPxListBox.ClientSideEvents

<dx:ASPxListBox ID="ASPxListBox1" runat="server" Theme="Office365" ClientInstanceName="listBox">
    <Items>
        <dx:ListEditItem Text="Item1" Value="10" />
        <dx:ListEditItem Text="Item2" Value="20" />
        <dx:ListEditItem Text="Item3" Value="30" />
    </Items>
</dx:ASPxListBox>
<br />
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Get Item's Info" Theme="Office365">
    <ClientSideEvents Click="function(s, e) {
        var item = listBox.GetSelectedItem();
        memo.SetText('Text: ' + item.text + '\n' + 'Value: ' + item.value + '\n' + 'Selected: ' + item.selected + '\n' + 'Index: ' + item.index );  
    }" />
</dx:ASPxButton>
<br /><br />
<dx:ASPxMemo ClientInstanceName="memo" ID="ASPxMemo1" runat="server" Height="71px" Width="170px"></dx:ASPxMemo>

Features

Common Concept

You can populate the ASPxListBox manually or bind it to a data source. The editor stores its items in the ASPxListEdit.Items collection. You can specify the caption text (ListEditItem.Text), associated value (ListEditItem.Value) and display image (ListEditItem.ImageUrl) for an individual item.

NOTE

Each item in the ASPxListEdit.Items collection should be unique. There should not be two or more list items with the same value (ListEditItem.Value).

Data Binding

Use the ASPxListEdit.Da