Back to Devexpress

DxListBox<TData, TValue>.ValuesChanged Event

blazor-devexpress-dot-blazor-dot-dxlistbox-2-9d131028.md

latest5.0 KB
Original Source

DxListBox<TData, TValue>.ValuesChanged Event

Fires after a collection of selected values changes.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Parameters

TypeDescription
IEnumerable<TValue>

A collection of selected values.

|

Remarks

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).

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

DxListBox<TData, TValue> Members

DevExpress.Blazor Namespace