Example T1268112
Visible to All Users

Blazor Grid – Binding to a DevExtreme Data Source with Entity Framework Core

This example uses Entity Framework Core data access technologies to bind the DevExpress Blazor Grid component to a GridDevExtremeDataSource.

Bind the Grid to a DevExtreme Data Source

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

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

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.