Skip to main content

GridDevExtremeDataSource<T> Class

Allows you to bind DxGrid and DxTreeList components to large IQueryable data collections.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class GridDevExtremeDataSource<T> :
    GridCustomDataSource

Type Parameters

Name Description
T

The data type.

Remarks

Use the GridDevExtremeDataSource to bind the Grid or TreeList component to a large IQueryable data collection stored locally or published as an HTTP service. The data source implementation is based on the DevExpress DevExtreme.AspNet.Data library.

Grid

When you bind the DxGrid component to the GridDevExtremeDataSource, the Grid delegates data processing operations to the underlying query provider (such as LINQ to Objects, EF Core, and so on). The Grid component loads only data required for screen display. This enhances overall performance, improves application responsiveness, and reduces memory consumption.

Tip

Refer to the following topic for detailed information on limitations that the GridDevExtremeDataSource imposes on Grid features: Large Data (Queryable Collections) - Limitations.

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

The following example binds the Grid component to a large data collection stored locally:

@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)

TreeList

When you bind the DxTreeList component to the GridDevExtremeDataSource, the TreeList delegates data filtering operations to the underlying query provider (such as LINQ to Objects, EF Core, and so on). The TreeList initially loads only root nodes and retrieves the child nodes when a user expands a parent node for the first time. This functionality optimizes overall performance and reduces memory consumption.

Tip

Refer to the following topic for detailed information on limitations that the GridDevExtremeDataSource imposes on TreeList features: Server-Side Data - Limitations.

To bind the component to data, pass your IQueryable data collection to the GridDevExtremeDataSource constructor and assign the result instance to the Data property. To build a hierarchical structure of TreeList nodes, specify additional properties that define node relationships:

KeyFieldName
A field that contains unique identifiers for nodes.
ParentKeyFieldName
A field name that contains a parent node identifiers. This field’s value is 0 or null for root nodes.
HasChildrenFieldName
A field that specifies whether a node has children. The component uses this property to determine which nodes require expand buttons.

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

The following code sample uses the Entity Framework Core data access technology to bind the TreeList component to an IQueryable<T> data collection:

@inject CitiesService CitiesService

<DxTreeList Data="@Data"
            KeyFieldName="ID" 
            ParentKeyFieldName="ParentID" 
            HasChildrenFieldName="HasChildren">
    <Columns>
        <DxTreeListDataColumn Caption="Location" FieldName="Name" />
        <DxTreeListDataColumn FieldName="CityType" />
        <DxTreeListDataColumn FieldName="Year" DisplayFormat="d"/>
        <DxTreeListDataColumn FieldName="RecordType" />
        <DxTreeListDataColumn FieldName="Population" />
    </Columns>
</DxTreeList> 

@code {
    object Data { get; set; }

    protected override async Task OnInitializedAsync() {
        var cities = await CitiesService.GetCitiesAsync();
        Data = new GridDevExtremeDataSource<Location>(cities.AsQueryable());
    }
}

Bind Blazor TreeList to Server-Side Data

Run Demo: Large Dataset Run Demo: Large Dataset via HTTP Service

Inheritance

Object
GridCustomDataSource
GridDevExtremeDataSource<T>
See Also