DxListBox<TData, TValue>.CustomData Property

Specifies an asynchronous function that loads List Box data based on the specified load options.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Func<DataSourceLoadOptionsBase, CancellationToken, Task<LoadResult>> CustomData { get; set; }

Property Value

Type	Description
Func<DevExtreme.AspNet.Data.DataSourceLoadOptionsBase, CancellationToken, Task<DevExtreme.AspNet.Data.ResponseModel.LoadResult>>	A delegate that implements data load logic.

Remarks

To bind the List Box to data that is stored on a remote service and is loaded through a Web API, assign the data type to the component’s T parameter and use the CustomData property to implement data load logic. This property specifies an asynchronous function that accepts two parameters:

• The DataSourceLoadOptionsBase object, which reflects the current List Box state.
• The CancellationToken object, which propagates a cancellation notification.

In this function, you can use the ConvertToGetRequestUri and ConvertToHttpContent extension methods to generate HTTP requests with parameters based on data load options. The function should return a Task<LoadResult> object.

Controller

On the remote service, implement an API controller and create action methods that use the DevExtreme.AspNet.Data library’s DataSourceLoader class to create a LoadResult object based on load options.

If you pass a DataSourceLoadOptions class instance as an argument in controller actions, add a reference to the DevExtreme.AspNet.Mvc namespace available in the DevExtreme.AspNet.Core NuGet package. This namespace is part of DevExpress ASP.NET Core Controls. This product line is included in the following DevExpress Subscriptions: Universal, DXperience, ASP.NET, or DevExtreme. If you do not have any of these subscriptions, create a custom model binder that receives data load options from the client and binds them to the model. You can copy code from this GitHub repository to your project.

Example

Razor

@using DevExtreme.AspNet.Data
@using DevExtreme.AspNet.Data.ResponseModel
@using System.Threading
@using System.Threading.Tasks
@using System.Net.Http
@using System.Text.Json

<DxListBox TData="@(WebApiLookup)" 
           TValue="string"
           CustomData="@LoadCustomData"
           TextFieldName="Text">
</DxListBox>

@code {
    [Inject] protected HttpClient Client { get; set; }

    public class WebApiLookup {
        public string Text { get; set; }
        public string Value { get; set; }
    }

    protected async Task<LoadResult> LoadCustomData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken) {
        using var response = await Client.GetAsync(options.ConvertToGetRequestUri
            ("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup"), cancellationToken);
        response.EnsureSuccessStatusCode();
        using var responseStream = await response.Content.ReadAsStreamAsync();
        return await JsonSerializer.DeserializeAsync<LoadResult>(responseStream, cancellationToken: cancellationToken);
    }
}

Startup.cs

public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddHttpClient<HttpClient>(ConfigureHttpClient);
        services.AddScoped<HttpClient>(serviceProvider => serviceProvider.GetService<IHttpClientFactory>().CreateClient());

        static void ConfigureHttpClient(HttpClient httpClient) {
            httpClient.DefaultRequestHeaders.Add("Accept", "application/json");
        };
    }
}

Web API Controller

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
// ...

[Route("api /[controller] /[action]")]
public class DataGridWebApiController : Controller
{
    NorthwindContext _nwind;

    [HttpGet]
    public object CustomersLookup(DataSourceLoadOptions loadOptions) {
        var lookup = from i in _nwind.Customers
                        let text = i.CompanyName + " (" + i.Country + ")"
                        orderby i.CompanyName
                        select new {
                            Value = i.CustomerID,
                            Text = text
                        };

        return DataSourceLoader.Load(lookup, loadOptions);
    }
    // ...
}