DxListBox<TData, TValue>.ValueChanged Event

Allows you to respond to the List Box’s selected value changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Parameters

Type	Description
TValue	A value type.

Remarks

The ValueChanged event event fires in the following cases:

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

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

The following example shows how to handle the ValueChanged event:

Razor

<DxListBox Data="Data" 
           Value="@Value" 
           TextFieldName="@nameof(Person.Text)"
           ValueChanged="@((Person value) => ValueChanged(value))" />

Selected Id: @Value.Id

@code{
    IEnumerable<Person> Data;
    Person Value;
    protected override async Task OnInitializedAsync() {
        Data = Staff.DataSource;
        Value = Data.First();
    }
    void ValueChanged(Person value) {
        Value = value;
    }
}

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

The code below demonstrates a sample implementation of the Person class.

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

If your List Box supports multiple selection, handle the ValuesChanged event instead.

You can validate the List Box’s Value if the component is in the standard EditForm. When you validate user input in the ValueChanged event handler and cannot use two-way data binding, use the ValueExpression property to identify the value passed to the event.