Overview

  • Nancy Davolio (Sales Representative)
  • Andrew Fuller (Vice President, Sales)
  • Janet Leverling (Sales Representative)
  • Margaret Peacock (Sales Representative)
  • Steven Buchanan (Sales Manager)
  • Michael Suyama (Sales Representative)
  • Robert King (Sales Representative)
  • Laura Callahan (Inside Sales Coordinator)
  • Anne Dodsworth (Sales Representative)

Selected item: Nancy Davolio (Sales Representative)

The List Box component allows users to select items from a list of predefined strings. The component can be bound to any IEnumerable data source. The list of selected items can be accessed and/or specified via the Values property. To track selection changes, use the SelectedItemsChanged event or the two-way synchronization as demonstrated in this module.

In this demo, the component allows users to select only one item at a time. Select an item to see the corresponding object's property values.

Multiple Columns

Id
Name
Surname
1 Nancy Davolio
2 Andrew Fuller
3 Janet Leverling
4 Margaret Peacock
5 Steven Buchanan
6 Michael Suyama
7 Robert King
8 Laura Callahan
9 Anne Dodsworth

Selected item: Nancy Davolio (Sales Representative)

The List Box can display data across multiple columns. To create columns, use DxListEditorColumn objects that include the following options for column customization:

  • Caption — Specifies the column caption.
  • FieldName — Specifies the data source field that populates column items.
  • Visible — Specifies the column visibility.
  • VisibleIndex — Specifies the column display order.
  • Width — Specifies the column width.

Multiple Selection

Selected Items:
  • Nancy Davolio (Sales Representative)
  • Andrew Fuller (Vice President, Sales)

To enable multiple selection in the List Box, set the SelectionMode property to ListBoxSelectionMode.Multiple.

  • If the ShowCheckboxes option is enabled, users can click individual items and corresponding checkboxes or hold Shift to select a range of items.
  • If the ShowCheckboxes option is disabled, users can press Ctrl to select individual items or hold Shift to select a range of items.

Item Values

  • Nancy Davolio (Sales Representative)
  • Andrew Fuller (Vice President, Sales)
  • Janet Leverling (Sales Representative)
  • Margaret Peacock (Sales Representative)
  • Steven Buchanan (Sales Manager)
  • Michael Suyama (Sales Representative)
  • Robert King (Sales Representative)
  • Laura Callahan (Inside Sales Coordinator)
  • Anne Dodsworth (Sales Representative)
Selected Values:
  • 1
  • 2

The List Box component provides access to item values. The value is assigned to the editor's value when a user selects an item from the list. To enable this access, set the ValueFieldName property to the name of the data source field that ships with values for the List Box items.

If the ValueFieldName property is not specified, the List Box component searches for a Value field in the data source and uses this field as a value field. Otherwise, values are not assigned to editor items.

To access values of the selected items, use the Values property. To track selection changes, use the ValuesChanged event or two-way synchronization as demonstrated in this module.

Item Template

  • Nancy Davolio (206) 555-9857
  • Andrew Fuller (206) 555-9482
  • Janet Leverling (206) 555-3412
  • Margaret Peacock (206) 555-8122
  • Steven Buchanan (71) 555-4848
  • Michael Suyama (71) 555-7773
  • Robert King (71) 555-5598
  • Laura Callahan (206) 555-1189
  • Anne Dodsworth (71) 555-4444

Use the ItemTemplate property to customize the appearance of individual items displayed within the DevExpress ListBox component. The template's context parameter allows you to access a data object and its fields.

In this demo, the ItemTemplate property is used to display the ListBox's items in a card-like view. Each item shows an employee's first name, last name, photo, and phone number.

Virtual Scrolling

  • Afghanistan
  • Albania
  • Algeria
  • American Samoa
  • Andorra
  • Angola
  • Anguilla
  • Antigua and Barbuda
  • Argentina
  • Armenia

The ListRenderMode property specifies how the List Box renders the item list.

  • Entire — The List Box renders the entire item list. Use this option for small item lists where scrolling should be instantly.
  • Virtual — The List Box renders items only after they appear in the viewport. This approach improves performance when the list contains many items.

In this demo, the ListRenderMode property is set to ListRenderMode.Virtual.