Skip to main content

GridDevExtremeDataSource<T> Class

Allows you to bind the DxGrid to a large IQueryable<T> data collection.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public class GridDevExtremeDataSource<T> :
    GridCustomDataSource

Type Parameters

Name Description
T

The data type.

Remarks

When you assign a data collection to the Data property directly, the Grid stores all data records in memory. This increases memory consumption if the collection is large. All data processing operations (sort, group, filter, and so on) are performed within the Blazor application and can cause lags.

The GridDevExtremeDataSource allows you to bind the Grid to a large IQueryable<T> data collection stored locally or published as an HTTP service. When you use this data source, the Grid delegates data processing operations to an underlying query provider (such as LINQ to Objects, EF Core, and so on). The Grid loads only data required for screen display. This helps enhance overall performance and application responsiveness and reduce memory consumption. The data source implementation is based on the DevExpress DevExtreme.AspNet.Data library.

To display data within the Grid, declare DxGridDataColumn objects in the Columns template and use each object’s FieldName property to assign data fields.

Tip

For detailed information about the GridDevExtremeDataSource, refer to the following topic: Large Data (Queryable Collections).

Do the following to bind the Grid to a large IQueryable<T> data collection stored locally:

  1. Install the DevExtreme.AspNet.Data NuGet package.
  2. Create a GridDevExtremeDataSource class instance and pass your IQueryable<T> data collection as the constructor parameter.
  3. Assign this instance to the DxGrid.Data property.
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="CustomerName" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="Freight" DisplayFormat="n2" />
        <DxGridDataColumn FieldName="ExtendedPrice" DisplayFormat="c" />
    </Columns>
</DxGrid>

@code {
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = new GridDevExtremeDataSource<Invoice>(Northwind.Invoices);
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Large Data

Run Demo: Large Data (Queryable) Run Demo: Large Data (Queryable as HTTP Service)

Inheritance

Object
GridCustomDataSource
GridDevExtremeDataSource<T>
See Also