DxListBox<TData, TValue>.ValuesChanged Event

Fires after a collection of selected values changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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 event fires in the following cases:

• When users change item selection.
• When the Values property is modified in the BeginUpdate() / EndUpdate() code block.

The ValuesChanged event is handled automatically when you use two-way data binding for the Values property (@bind-Values).

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

DataSource

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.