Skip to main content

DxDataGrid<T>.CustomData Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.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

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

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 the DevExpress ASP.NET Core Controls product line included in the following DevExpress Subscriptions: Universal, DXperience, ASP.NET, and 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.

If you prepare a request with the DataSourceLoadOptions on the client and pass it to the server, only the following options are passed to the server:

  • RequireTotalCount
  • RequireGroupCount
  • IsCountQuery
  • Skip
  • Take
  • Sort
  • Group
  • Filter
  • TotalSummary
  • GroupSummary
  • Select

A custom model binder that uses DataSourceLoadOptions or the server’s ConvertToGetRequestUri method can restore only these options from the request. If you need to use other options, specify them before you execute the DataSourceLoader.Load method in a controller action:

[HttpGet]
public object Orders(DataSourceLoadOptions loadOptions) {
    // ...
    loadOptions.StringToLower = true;
    return DataSourceLoader.Load(_nwind.Orders, loadOptions);
}

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.ResponseModel
@using DevExtreme.AspNet.Data
@using System.Threading
@using System.Threading.Tasks
@using System.Net.Http
@using System.Text.Json
@inject HttpClient Client
<DxDataGrid T="@WebApiOrder" CustomData="@LoadOrderData" ShowFilterRow="true">
    <Columns>
        <DxDataGridComboBoxColumn T="@(WebApiCustomerLookup)" TextFieldName="Text" ValueFieldName="Value"
                                  CustomData="@LoadCustomerData" Field="@nameof(WebApiOrder.CustomerID)" Width="300px" />
        <DxDataGridDateEditColumn Field="@nameof(WebApiOrder.OrderDate)" Width="180px" />
        <DxDataGridSpinEditColumn Field="@nameof(WebApiOrder.Freight)" DisplayFormat="c" Width="180px" />
        <DxDataGridColumn Field="@nameof(WebApiOrder.ShipCountry)" Width="210px" />
        <DxDataGridComboBoxColumn T="@(WebApiShipperLookup)" TextFieldName="Text" ValueFieldName="Value"
                                  CustomData="@LoadShipmentData" Field="@nameof(WebApiOrder.ShipVia)" Width="220px" />
    </Columns>
</DxDataGrid>

@code {
    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