This example uses Entity Framework Core data access technologies to bind the DevExpress Blazor Grid component to a GridDevExtremeDataSource.
You can use the GridDevExtremeDataSource class to bind the DevExpress Blazor Grid to a large IQueryable data collection. This data source implementation is built upon our DevExtreme.AspNet.Data library. When you use this data source, our Blazor Grid delegates data filtering operations to an underlying query provider (such as EF Core) and only loads data required for on-screen display (helps optimize app performance and reduces overall memory consumption).
To use this data source in your next Blazor project, create a GridDevExtremeDataSource class instance and pass your IQueryable data collection as the constructor parameter. Once complete, assign this instance to the Grid's Data property. Refer to the following help topic for additional information/technical guidance: Bind Blazor Grid to Data.
Files to Review
Documentation
More Examples
- How to bind the Grid to a DataTable object
- How to bind the Grid to data with Entity Framework Core
- How to bind the Grid to an Instant Feedback data source and enable edit operations
- How to bind the Grid to a Web API service
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
BindGridToLargeData/Components/Pages/Index.razor
Razor@page "/"
@using Microsoft.EntityFrameworkCore
@using BindGridToLargeData.Models;
@using DevExpress.Data.Linq
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
@rendermode InteractiveServer
<div>
<DxGrid Data="GridDataSource"
TextWrapEnabled="false"
VirtualScrollingEnabled="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="my-grid">
<Columns>
<DxGridDataColumn FieldName="ShipName" />
<DxGridDataColumn FieldName="ShipCity" />
<DxGridDataColumn FieldName="ShipCountry" />
<DxGridDataColumn FieldName="OrderDate" />
<DxGridDataColumn FieldName="ShippedDate" />
</Columns>
</DxGrid>
</div>
@code {
object GridDataSource { get; set; }
NorthwindContext Northwind { get; set; }
protected override void OnInitialized() {
Northwind = NorthwindContextFactory.CreateDbContext();
GridDataSource = new GridDevExtremeDataSource<Order>(Northwind.Orders);
}
public void Dispose() {
Northwind?.Dispose();
}
}
BindGridToLargeData/Components/Pages/Index.razor.css
CSS::deep .my-grid {
height: 400px;
}
BindGridToLargeData/Models/Invoice.cs
C#using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace BindGridToLargeData.Models {
public partial class Order {
public int OrderId { get; set; }
[Required]
public string ShipName { get; set; }
[Required]
public string ShipCity { get; set; }
[Required]
public string ShipCountry { get; set; }
public decimal? Freight { get; set; }
[Range(typeof(DateTime), "1/1/2010", "1/1/2024",
ErrorMessage = "OrderDate must be between {1:d} and {2:d}")]
public DateTime? OrderDate { get; set; }
[Range(typeof(DateTime), "1/1/2010", "1/1/2024",
ErrorMessage = "ShippedDate must be between {1:d} and {2:d}")]
public DateTime? ShippedDate { get; set; }
}
}
BindGridToLargeData/Models/NorthwindContext.cs
C#using System;
using System.Collections.Generic;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Options;
namespace BindGridToLargeData.Models;
public partial class NorthwindContext : DbContext {
public NorthwindContext() {}
public NorthwindContext(DbContextOptions<NorthwindContext> options) : base(options) {}
public virtual DbSet<Order> Orders { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
}
protected override void OnModelCreating(ModelBuilder modelBuilder) {
modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
modelBuilder.Entity<Order>(entity => {
entity.HasIndex(e => e.OrderDate, "OrderDate");
entity.HasIndex(e => e.ShippedDate, "ShippedDate");
entity.Property(e => e.OrderId).HasColumnName("OrderID");
entity.Property(e => e.Freight)
.HasColumnType("money")
.HasDefaultValueSql("((0))");
entity.Property(e => e.OrderDate).HasColumnType("datetime");
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.ShippedDate).HasColumnType("datetime");
});
OnModelCreatingPartial(modelBuilder);
}
partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
}
BindGridToLargeData/Program.cs
C#using BindGridToLargeData.Components;
using BindGridToLargeData.Models;
using Microsoft.EntityFrameworkCore;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
builder.Services.AddDevExpressBlazor(options => {
options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5;
options.SizeMode = DevExpress.Blazor.SizeMode.Medium;
});
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
var env = sp.GetRequiredService<IWebHostEnvironment>();
var dbPath = Path.Combine(env.ContentRootPath, "Northwind.db");
options.UseSqlite("Data Source=" + dbPath);
});
builder.Services.AddMvc();
var app = builder.Build();
// Configure the HTTP request pipeline.
if(app.Environment.IsDevelopment()) {
app.UseWebAssemblyDebugging();
} else {
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AllowAnonymous();
app.Run();