DxListBox<TData, TValue>.ValuesChanged Event

Fires after a collection of selected values changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<IEnumerable<TValue>> ValuesChanged { get; set; }

Parameters

Type	Description
IEnumerable<TValue>	A collection of selected values.

Remarks

The ValuesChanged event fires each time the Values collection changes.

Razor

@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);
    }
}

Person.cs

public enum Department { Motors, Electronics, Software }
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.)";
}

Staff.cs

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; } }
}

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.