DxListBox<TData, TValue>.DataAsync Property

Specifies an asynchronous function that returns List Box data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Func<CancellationToken, Task<IEnumerable<TData>>> DataAsync { get; set; }

Property Value

Type	Description
Func<CancellationToken, Task<IEnumerable<TData>>>	A function that returns List Box data.

Remarks

Use the DataAsync property to bind the List Box to a strongly typed collection that is loaded asynchronously (for instance, from an HTTP request). This property allows you to prevent the page with the List Box from excessive re-rendering.

This property specifies an asynchronous function that returns a Task<IEnumerable<T>> object and accepts a CancellationToken object as a parameter. An exception occurs if you declare the function with an incorrect signature.

CancellationToken

@using System.Threading;
@using System.Threading.Tasks;

<DxListBox DataAsync="@GetForecastAsync"
           TextFieldName="@nameof(WeatherForecast.Summary)"
           @bind-Values="values"/>

@code {
    private IEnumerable<WeatherForecast> forecasts;
    private IEnumerable<WeatherForecast> values;

    Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken cancellationToken) {
        return ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
    }
}

If you bind the List Box to a data collection that stores custom objects (IEnumerable<CustomType>), override the object’s Equals and GetHashCode() methods. Otherwise, the List Box items are populated with CustomType.ToString() values.

Razor

@using BlazorApp.Data

<DxListBox DataAsync="@Staff.GetDataAsync"
           @bind-Values="@Values"
           TextFieldName="@nameof(Person.Text)">
</DxListBox>

@code {
    IEnumerable<Person> Values { get; set; } = Staff.DataSource.Take(2);
}

Person

namespace BlazorApp.Data {
    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.)";
    }

    public enum Department { Motors, Electronics, Software }

    public override bool Equals(object obj) {
        if (obj is Person typedObj) {
            return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName) 
            && (this.Department == typedObj.Department);
        }
        return base.Equals(obj);
    }

    public override int GetHashCode() {
            return HashCode.Combine(Id, FirstName, LastName);
    }
}

Staff

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

namespace BlazorApp.Data {
    public static class Staff {
        public static Task<IEnumerable<Person>> GetDataAsync(CancellationToken ct = default) {
            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 Task.FromResult(dataSource.AsEnumerable());
        }
    }
}

Use the Data property if a strongly typed collection is loaded synchronously. Use the CustomData property if your data is stored on a remote service and is loaded through a Web API.

Implements

DevExpress.Blazor.IListEditorBase<TData, TValue>.DataAsync