Data Editors for Blazor - Custom data binding

This example binds DevExpress Blazor ListBox, ComboBox, and TagBox to a remote Web API service and uses the CustomData property to implement custom data load logic.

Overview

To bind an editor to data from a Web API service, complete the following steps:

1. Reference the DevExtreme.AspNet.Data library in your project. Add the following directives to files where you will write data loading code:

   • @using DevExtreme.AspNet.Data
   • @using DevExtreme.AspNet.Data.ResponseModel

2. Use a component's CustomData property to implement an ansynchronous function. This function returns a Task<LoadResult> object and accepts the following parameters:

   • A DataSourceLoadOptionBase object.
   • A CancellationToken object.

3. In the remote service, implement an API controller and create a LoadResult object based on load options.

Files to Review

• ListBox.razor
• ComboBox.razor
• TagBox.razor
• WebApiLookup.cs
• Program.cs

Documentation

ListBox

• Bind to Data
• CustomData

ComboBox

• Bind to Data
• CustomData

TagBox

• Bind to Data
• CustomData