DxDataGrid<T>.DataAsync Property

Specifies an asynchronous function that returns grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Description
Func<CancellationToken, Task<IEnumerable<T>>>

A function that returns grid data.

Remarks

Use the DataAsync property to bind the Data Grid to a strongly typed collection that is loaded asynchronously (for instance, from an HTTP request). This property allows you to prevent the grid’s page from excessive re-rendering and draw the grid’s skeleton while the data is not yet loaded.

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.

@using System.Threading
@inject WeatherForecastService WeatherForecastService

<DxDataGrid DataAsync="@LoadDataAsync">
    @*...*@
</DxDataGrid>

@code {
    async Task<IEnumerable<WeatherForecast>> LoadDataAsync(CancellationToken token) {
        return await WeatherForecastService.GetForecastAsync(DateTime.Now.Date);
    }
}

Run Demo: Data Grid - Asynchronous Data Binding Run Demo: Data Grid - Large Datasets

View Example: How to bind the Data Grid to a data source asynchronously

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.

Caching

The DataAsync function can be called multiple times during the grid’s life cycle because Blazor can re-render components. Cache this function if it is time- or resource-consuming.

@using System.Threading
@inject WeatherForecastService WeatherForecastService

<DxDataGrid DataAsync="@LoadDataAsync">
    @*...*@
</DxDataGrid>

@code {
    IEnumerable<WeatherForecast> Cache;
    async Task<IEnumerable<WeatherForecast>> LoadDataAsync(CancellationToken token) {
        if(Cache == null)
            Cache = await WeatherForecastService.GetForecastAsync(DateTime.Now.Date, token);
        return Cache;
    }
}

Cancellation Token

The DataAsync function receives a cancellation signal in the following cases:

  • The Data Grid is disposed during data retrieve operations. This occurs under the following circumstances:

    • A user switches a tab with the Data Grid component in a tabbed layout.
    • A user navigates to another page.
    • Data Grid is placed inside the if condition and the condition equals false on the last render.
  • A user triggers Data Grid UI update operations too often without waiting until the previous operation is completed (for instance, when users navigate between Data Grid pages before the previous page is loaded).

<DxTabs>
    <DxTabPage Text="Data Grid">
        <DxDataGrid DataAsync="@LoadDataAsync" KeyFieldName="Id">
            @*...*@
        </DxDataGrid>
    </DxTabPage>
    <DxTabPage Text="Cancelled Task Counter">
        Cancelled Task Count: @CancelledTaskCount
    </DxTabPage>
</DxTabs>

@code {
    int CancelledTaskCount = 0;
    async Task<IEnumerable<WeatherForecast>> LoadDataAsync(CancellationToken token) {
        try {
            return await WeatherForecastService.GetForecastAsync(DateTime.Now.Date, token);
        } catch(TaskCanceledException) {
            CancelledTaskCount++;
        }
        return Enumerable.Empty<WeatherForecast>();
    }
}

Key Field

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 the key data field, use one of the ways described in the KeyFieldName property.

See Also