GridDevExtremeDataSource<T> Class

Allows you to bind DxGrid and DxTreeList components to large IQueryable<T> 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<T> 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 how to bind the Grid component to the GridDevExtremeDataSource: Large Data (Queryable Collections).

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:

Razor

@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();
    }
}

Invoice

using System;
#nullable disable

namespace Grid.Northwind {
    public partial class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { get; set; }
    }
}

WeatherForecastService

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Invoice> Invoices { get; set; }
        // ...
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }
        // ...
        protected override void OnModelCreating(ModelBuilder modelBuilder) {
        // ...
            modelBuilder.Entity<Invoice>(entity => {
                entity.HasNoKey();
                entity.ToView("Invoices");
                entity.Property(e => e.Address).HasMaxLength(60);
                entity.Property(e => e.City).HasMaxLength(15);
                entity.Property(e => e.Country).HasMaxLength(15);
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.CustomerName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.ExtendedPrice).HasColumnType("money");
                entity.Property(e => e.Freight).HasColumnType("money");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.PostalCode).HasMaxLength(10);
                entity.Property(e => e.ProductId).HasColumnName("ProductID");
                entity.Property(e => e.ProductName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.Region).HasMaxLength(15);
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.Salesperson)
                    .IsRequired()
                    .HasMaxLength(31);
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
                entity.Property(e => e.ShipperName)
                    .IsRequired()
                    .HasMaxLength(40);
                entity.Property(e => e.UnitPrice).HasColumnType("money");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

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 how to bind the TreeList component to the GridDevExtremeDataSource: Server-Side Data.

To bind the component to data, pass your IQueryable<T> 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:

Razor

@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());
    }
}

Location.cs

public class Location {
    public string? Name { get; set; }
    public string? City { get; set; }
    public string? Country { get; set; }
    public decimal Population { get; set; }
    public int ID { get; set; }
    public int ParentID { get; set; }
    public string? CityType { get; set; }
    public string? RecordType { get; set; }
    public int? Year { get; set; }
    public bool HasChildren { get; set; }
}

CitiesService.cs

public class CitiesService {
    CitiesContext _context;
    public CitiesService(IDbContextFactory<CitiesContext> contextFactory) {
        _context = contextFactory.CreateDbContext();
    }
    public void SeedData() {
        _context.Database.EnsureCreated();
        if (_context.Locations.Any())
            return;
        var stream = File.OpenRead(@"cities.json");
        var cities = System.Text.Json.JsonSerializer.Deserialize<Location[]>(stream);
        if (cities == null)
            return;
        foreach (var city in cities) {
            city.ID++;
            city.ParentID++;
        }
        _context.Locations.AddRange(cities);
        _context.SaveChanges();
    }

    public async Task<Location[]?> GetCitiesAsync() {
        await _context.Locations.LoadAsync();
        return _context.Locations.Local.ToArray();
    }
}

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

Inheritance

Object

GridCustomDataSource

GridDevExtremeDataSource<T>