blazor-devexpress-dot-blazor-dot-dxlistbox-2-9d131028.md
Fires after a collection of selected values changes.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public EventCallback<IEnumerable<TValue>> ValuesChanged { get; set; }
| Type | Description |
|---|---|
| IEnumerable<TValue> |
A collection of selected values.
|
The ValuesChanged event fires in the following cases:
The ValuesChanged event is handled automatically when you use two-way data binding for the Values property (@bind-Values).
@using Data
<DxListBox Data="@Staff.DataSource"
TextFieldName="@nameof(Person.Text)"
Values="@Values"
ValuesChanged="@((IEnumerable<Person> values) => ValuesChanged(values))">
</DxListBox>
@code {
IEnumerable<Person> Values { get; set; }
void ValuesChanged(IEnumerable<Person> values) {
Values = values;
InvokeAsync(StateHasChanged);
}
}
using System;
using System.Collections.Generic;
namespace BlazorProject.Data {
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 Description => $"{FirstName} {LastName} ({Department} Dept.)";
public override bool Equals(object obj) {
if(obj is Person person) {
if(person.Id != Id)
return false;
return string.Equals(person.FirstName, FirstName) && string.Equals(person.LastName, LastName);
}
return false;
}
public override int GetHashCode() {
return HashCode.Combine(Id, FirstName, LastName);
}
}
}
If your List Box supports single selection, handle the ValueChanged event instead.
You can validate the List Box’s Values if the component is in the standard EditForm. When you validate user input in the ValuesChanged event handler and cannot use two-way data binding, use the ValuesExpression property to identify the value passed to the event.
You can also use the DevExpress.Blazor.DxListBox`2.ValuesChanging event to validate/cancel the newly selected values.
See Also
DxListBox<TData, TValue> Class