DxListBox<T> Class

A List Box component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxListBox<T> :
    DxListBoxBase<T>

Type Parameters

Name Description
T

The data item type.

Remarks

DevExpress List Box for Blazor (<DxListBox>) allows you to display a list of selectable items from a data source.

Blazor-List-Box

NOTE

Online Demo: List Box - Overview

Add List Box to a Project

To add the <DxListBox> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Bind the component to data.

  3. Add the <DxListBox>...</DxListBox> markup to your application.

  4. Configure the component (see the sections below).

Bind to Data

Use the Data property to bind the List Box to an IEnumerable<T> data source synchronously. If the data source is large or requires access to a remote web service over slow networks, use the DataAsync property instead. It allows you to load data asynchronously and await completion without blocking application code execution.

NOTE

The List Box operates in bound mode only. Unbound mode is not supported.

<DxListBox Data="@Cities"></DxListBox>

@code {
  IEnumerable<string> Cities = new List<string>() {
    "London",
    "Berlin",
    "Paris",
  };
}

If a data source stores custom objects (IEnumerable<CustomType>), use the TextFieldName property to specify the field name with item values. Otherwise, the List Box is populated with CustomType.ToString() values.

<DxListBox Data="@DataSource"
           TextFieldName="Text">
</DxListBox>

@code {
    IEnumerable<Person> DataSource;
}

The code below demonstrates a sample implementation of the Person class.

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Department Department { get; set; }

    public string Text => $"{FirstName} {LastName} ({Department} Dept.)";
}

Blazor-List-Box

NOTE

Online Demo: List Box - Overview

To bind the List Box to a data source that is not of the IEnumerable<T> type, assign the data source type to the component's T parameter and use the CustomData property to implement the data load logic.

Item Selection

A user should click a List Box item to select it. To access the selected item in code, use the SelectedItems collection. To handle selection changes, use the SelectedItemsChanged event.

To enable multi selection in List Box, set the SelectionMode property to ListBoxSelectionMode.Multiple. In this mode, a user should click the initial item, hold the Shift key, and select the final item to specify the range of items. To add/remove individual items to/from the selection, a user should click an item with the Ctrl key pressed.

To disable selection in List Box, set the SelectionMode property to ListBoxSelectionMode.None.

NOTE

You can also enable the ShowCheckboxes property to allow users to select items via checkboxes.

The code below demonstrates how to enable multiple selection via checkboxes in List Box.

<DxListBox Data="@Persons.DataSource"
           TextFieldName="Text"
           SelectionMode="ListBoxSelectionMode.Multiple"
           ShowCheckboxes="@ShowCheckboxes"
           @bind-SelectedItems="@SelectedItems">
</DxListBox>

@code {
    IEnumerable<Person> SelectedItems {
        get => selectedItems;
        set { selectedItems = value; InvokeAsync(StateHasChanged); }
    }

    bool showCheckboxes = true;
    bool ShowCheckboxes { 
        get => showCheckboxes;
        set { showCheckboxes = value; InvokeAsync(StateHasChanged); }
    }
}

Blazor_ListBox_ShowCheckboxes

Virtual Scrolling

Set the ListRenderMode property to ListRenderMode.Virtual to enable virtual scrolling. In this mode, the List Box loads data on demand when a user scrolls list items.

<DxListBox Data="@Persons.DataSource"
           ListRenderMode="ListRenderMode.Virtual">
</DxListBox>

Read-Only State

<DxListBox> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxListBox ReadOnly="true"> </DxListBox>
NOTE

Online Demo: List Box - Read-Only Mode

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.ListBoxJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.ListBoxJSInteropProxy>
DxListBoxBase<T>
DxListBox<T>
See Also