Use the SelectionMode property to specify the selection mode: Single (default), Multiple, or None.
Single Selection
The default selection mode is Single. Users can select one List Box item at a time.
Use the Value property to access/specify the selected item in code. To respond to selection changes, handle the ValueChanged event.
Run Demo: List Box - Overview
Multiple Selection
Set the SelectionMode property to ListBoxSelectionMode.Multiple to enable multiple selection in the List Box.
Users can select multiple items in several ways:
- Press Ctrl to select items individually or hold Shift to select a range of items.
- Click individual items or corresponding checkboxes (available if ShowCheckboxes is enabled).
- Click the Select All checkbox (available if both ShowSelectAllCheckbox and ShowCheckboxes are enabled). The Select All checkbox does not affect items hidden by a filter or disabled items.
Use the Values property to access/specify selected items in multiple selection mode. To respond to selection changes, handle the ValuesChanged event.
You can use SelectAllAsync() and DeselectAllAsync() methods to select/deselect all available items in code.
The following code enables multiple selection in the List Box, adds checkboxes to items, and shows the Select All checkbox:
@using StaffData
<DxListBox Data="@Staff.DataSource"
TextFieldName="@nameof(Person.Text)"
SelectionMode="ListBoxSelectionMode.Multiple"
ShowCheckboxes="true"
ShowSelectAllCheckbox="true"
@bind-Values="@Values">
</DxListBox>
@code {
IEnumerable<Person> Values { get; set; }
}
namespace StaffData {
public static class Staff {
private static readonly Lazy<List<Person>> dataSource = new Lazy<List<Person>>(() => {
var dataSource = new List<Person>() {
new Person() { Id= 0 , FirstName="John", LastName="Heart", Department=Department.Electronics },
new Person() { Id= 1 , FirstName="Samantha", LastName="Bright", Department=Department.Motors },
new Person() { Id= 2 , FirstName="Arthur", LastName="Miller", Department=Department.Software },
new Person() { Id= 3 , FirstName="Robert", LastName="Reagan", Department=Department.Electronics },
new Person() { Id= 4 , FirstName="Greta", LastName="Sims", Department=Department.Motors },
new Person() { Id= 5 , FirstName="Brett", LastName="Wade", Department=Department.Software },
new Person() { Id= 6 , FirstName="Sandra", LastName="Johnson", Department=Department.Electronics },
new Person() { Id= 7 , FirstName="Edward", LastName="Holmes", Department=Department.Motors },
new Person() { Id= 8 , FirstName="Barbara", LastName="Banks", Department=Department.Software },
new Person() { Id= 9 , FirstName="Kevin", LastName="Carter", Department=Department.Electronics },
new Person() { Id= 10, FirstName="Cynthia", LastName="Stanwick", Department=Department.Motors },
new Person() { Id= 11, FirstName="Sam", LastName="Hill", Department=Department.Electronics }};
return dataSource;
});
public static List<Person> DataSource { get { return dataSource.Value; } }
}
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.)";
public override bool Equals(object obj) {
if (obj is Person typedObj) {
return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName)
&& (this.Department == typedObj.Department);
}
return base.Equals(obj);
}
}
public enum Department { Motors, Electronics, Software }
}
Run Demo: List Box - Multiple Selection
Disable Selection
Set the SelectionMode property to ListBoxSelectionMode.None to disable selection in the List Box.