DxListBox<TData, TValue>.Value Property

Specifies the List Box’s selected value or item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public TValue Value { get; set; }

Property Value

Type	Description
TValue	A List Box value or item.

Remarks

If you allow users to select only one item, you can do the following:

• Use the Value property to access the List Box’s selected item or value from a bound data source.
• Handle the ValueChanged event to respond to selection changes.

If the List Box allows users to select multiple items, use the Values property and ValuesChanged event instead.

The Value property can return the following objects:

• The selected item value if the ValueFieldName is specified.
• The selected item if the ValueFieldName property is unspecified. Note that in this case, the List Box searches for a field named Value in the data source. An exception occurs in the following situations:
  • If the found Value data type differs from the bound Value type.
  • If the data source does not contain a field named Value.

Razor

@using BlazorProject.Data;

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

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

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