DxDataGrid<T>.CustomData Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

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 function that loads grid data.

Remarks

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

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

The following example binds the Data Grid and the Customer ID and Ship Via combobox columns to a remote Web API service. The ConvertToGetRequestUri extension method is used to generate a GET request URI based on load options. The Web API controller uses the DataSourceLoader.Load method to load data.

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

<DxDataGrid T="@WebApiOrder" CustomData="@LoadOrderData">
    <DxDataGridComboBoxColumn T="@(WebApiCustomerLookup)"
                              TextFieldName="Text"
                              ValueFieldName="Value"
                              CustomData="@LoadCustomerData"
                              Field="@nameof(WebApiOrder.CustomerID)" />
    <DxDataGridDateEditColumn Field="@nameof(WebApiOrder.OrderDate)" />
    <DxDataGridSpinEditColumn Field="@nameof(WebApiOrder.Freight)" />
    <DxDataGridColumn Field="@nameof(WebApiOrder.ShipCountry)" />
    <DxDataGridComboBoxColumn T="@(WebApiShipperLookup)"
                              TextFieldName="Text"
                              ValueFieldName="Value"
                              CustomData="@LoadShipmentData"
                              Field="@nameof(WebApiOrder.ShipVia)" />
</DxDataGrid>

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

    public class WebApiOrder {
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Freight { get; set; }
        public string ShipCountry { get; set; }
        public int ShipVia { get; set; }
    }

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

    public class WebApiShipperLookup {
        public string Text { get; set; }
        public int Value { get; set; }
    }

    protected async Task<LoadResult> LoadOrderData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken)
        => await LoadCustomData("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/Orders", options, cancellationToken);
    protected async Task<LoadResult> LoadCustomerData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken)
        => await LoadCustomData("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup", options, cancellationToken);
    protected async Task<LoadResult> LoadShipmentData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken)
        => await LoadCustomData("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/ShippersLookup", options, cancellationToken);

    protected async Task<LoadResult> LoadCustomData(string dataEndpointUri, DataSourceLoadOptionsBase options, CancellationToken cancellationToken) {
        using var response = await Client.GetAsync(options.ConvertToGetRequestUri(dataEndpointUri), cancellationToken);
        response.EnsureSuccessStatusCode();
        using var responseStream = await response.Content.ReadAsStreamAsync();
        return await JsonSerializer.DeserializeAsync<LoadResult>(responseStream, cancellationToken: cancellationToken);
    }
}

Data Grid Custom Data

Run Demo: Data Grid - Custom Data Binding

NOTE

When users edit data, select data rows, or expand detail rows in master-detail layouts, the Data Grid should be able to identify individual data items. To specify key data fields, use one of the ways described in the KeyFieldName property.

See Also