Bind Blazor Grid to Queryable Data Sources

• Jun 08, 2026
• 8 minutes to read

You can use a GridDevExtremeDataSource<T> to bind the Blazor Grid component to a large IQueryable data collection. Data source implementation is based on the DevExpress DevExtreme.AspNet.Data library.

When bound to this data source, the Grid loads data on demand instead of the entire dataset. The component delegates all data shaping operations to the underlying query provider, such as LINQ to Objects, EF Core, and so on. These services process data more efficiently and improve overall performance.

Bind to Local Data

Follow the steps below to bind the Grid to a large IQueryable data collection stored locally:

1. Create a GridDevExtremeDataSource class instance and pass your IQueryable data collection as the constructor parameter.
2. Assign this instance to the Grid’s Data property.

The following code snippet uses the Entity Framework Core technology to bind the Grid to an IQueryable data collection:

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; }
    }
}

NorthwindContext

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.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            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 dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

Run Demo: Grid - Large Data (Queryable) Run Demo: 1M Rows × 1K Columns View Example: Bind to a DevExtreme Data Source

Bind to a Web API Service

Follow these steps to bind the Grid to a large IQueryable collection published as an HTTP service:

1. Create a GridDevExtremeDataSource class instance and pass two constructor parameters:

   • An HttpClient object that sends HTTP requests and receives HTTP responses from the specified URL.
   • A URL to the service’s controller action that processes HTTP requests (see step 3).

2. Assign the GridDevExtremeDataSource class instance to the Grid’s Data property.

3. On the service side, implement an API controller and create action methods. Use the DevExtreme.AspNet.Data library’s DataSourceLoader class to create LoadResult based on load options.
4. Implement a custom model binder. Refer to the following link for additional information and an example: Server Side Configuration.

The following code sample binds the Grid to an IQueryable collection published as an HTTP service:

Razor

@inject HttpClient HttpClient

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="CustomerID" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="Freight" DisplayFormat="n2" />
        <DxGridDataColumn FieldName="ShipCountry" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    public class Order {
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Freight { get; set; }
        public string ShipCountry { get; set; }
    }

    protected override async Task OnInitializedAsync() {
        var uri = new Uri("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/Orders");
        Data = new GridDevExtremeDataSource<Order>(HttpClient, uri);
    }
}

Model

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Product {
        public Product() {
            OrderDetails = new HashSet<OrderDetail>();
        }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int? SupplierId { get; set; }
        public int? CategoryId { get; set; }
        public string QuantityPerUnit { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
        public short? UnitsOnOrder { get; set; }
        public short? ReorderLevel { get; set; }
        public bool Discontinued { get; set; }
        public bool InStock => !Discontinued;
        public virtual Category Category { get; set; }
        public virtual Supplier Supplier { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { get; set; }
    }
}

Web API Controller

using System.Text.Json;
using System.Threading.Tasks;
using DevExtreme.AspNet.Data;
using Microsoft.AspNetCore.Mvc;

namespace BlazorDemo.AspNetCoreHost {
    public partial class NwindController : Controller {
        [HttpGet]
        public async Task<IActionResult> GetProducts(DataSourceLoadOptions loadOptions) {
            // If underlying data is a large SQL table, specify PrimaryKey and PaginateViaPrimaryKey.
            // This can make SQL execution plans more efficient.
            loadOptions.PrimaryKey = new[] { "ProductId" };
            loadOptions.PaginateViaPrimaryKey = true;
            // Use your IDbContextFactory instance instead of _contextFactory
            using(var ctx = _contextFactory.CreateDbContext()) {
                var loadResult = await DataSourceLoader.LoadAsync(ctx.Products, loadOptions);
                return Json(loadResult, new JsonSerializerOptions());
            }
        }
    }
}

Custom Model Binder

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Data.Helpers;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorDemo.AspNetCoreHost {
    [ModelBinder(BinderType = typeof(DataSourceLoadOptionsBinder))]
    public class DataSourceLoadOptions : DataSourceLoadOptionsBase {
    }
    public class DataSourceLoadOptionsBinder : IModelBinder {
        public Task BindModelAsync(ModelBindingContext bindingContext) {
            var loadOptions = new DataSourceLoadOptions();
            DataSourceLoadOptionsParser.Parse(loadOptions, key => bindingContext.ValueProvider.GetValue(key).FirstOrDefault());
            bindingContext.Result = ModelBindingResult.Success(loadOptions);
            return Task.CompletedTask;
        }
    }
}

Program.cs

// ...
builder.Services.AddHttpClient();

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

Custom HTTP Requests

You can also generate and send custom HTTP requests:

1. Implement an asynchronous function that returns a Task<Stream> object and accepts two parameters:

   • A URL to the service’s controller action.
   • A CancellationToken object that propagates a cancellation notification.

2. Create a GridDevExtremeDataSource class instance and pass two constructor parameters (the newly created function and the URL to the service’s controller action).

3. Assign the GridDevExtremeDataSource instance to the Grid’s Data property.

The following code snippet adds an authorization header to HTTP requests. Note that you should process authorization information in the service’s controller.

@*...*@

@code {
    // ...

    protected override async Task OnInitializedAsync() {
        var uri = new Uri("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/Orders");
        Data = new GridDevExtremeBasedDataSource<Order>(ExecuteDataSourceHttpRequest, url);
    }

    async Task<Stream> ExecuteDataSourceHttpRequest(Uri url, CancellationToken cancellationToken) {
        using var request = new HttpRequestMessage(HttpMethod.Get, url);
        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", "...");
        var response = await HttpClient.SendAsync(request);
        return await response.Content.ReadAsStreamAsync();
    }
}

Limitations

Note the following Grid-related limitations when using GridDevExtremeDataSource:

• Cell editing is unavailable.
• Custom sorting is unavailable.
• Interval/custom grouping is unavailable.
• Search, filter, sorting, and grouping against display text are unavailable.
• Custom summary calculation is unavailable.
• AllPages mode of the Select All checkbox is unavailable.
• Unbound columns are unavailable.
• Sorting, filtering, or data grouping during select/deselect all processing cancels the operation.
• Criteria operators applied by the SetFieldFilterCriteria/SetFilterCriteria method are limited. For additional information, see method descriptions.
• To call the SetFocusedDataItemAsync method, you must specify the KeyFieldName/KeyFieldNames property value.
• SelectAllAsync and DeselectAllAsync methods load all data and can impact overall performance and increase memory consumption.
• A second call to the SelectAllAsync/DeselectAllAsync method cancels the operation initiated by a previously called method.

The GridDevExtremeDataSource loads data asynchronously in small portions (instead of the entire dataset). To ensure correct data operations, you must:

• Call WaitForDataLoadAsync before methods that read Grid data (GetRowValue, GetTotalSummaryValue, and so on).
• Call WaitForRemoteSourceRowLoadAsync before methods that accept a row visible index as a parameter (SelectRow, StartEditRowAsync, and so on).