Using Radzen DataGrid with SQL Server in Blazor Server App (.NET 9)

In this post, you'll learn how to integrate Radzen DataGrid into your Blazor Server application using SQL Server. We’ll cover setting up EF Core, configuring the `AppDbContext`, and showing employees data in a powerful, searchable, sortable, and paginated grid.

🎥 Watch the full tutorial on YouTube: https://youtu.be/ruLcxvGcO9g

Technologies Used

• Blazor Server (.NET 9)
• Entity Framework Core
• SQL Server
• Radzen.Blazor UI

Project Setup

Project Name: BlazorAppRadzenDataGridWithDataBase

EmployeeGrid.razor

@page "/employees"
@using Microsoft.EntityFrameworkCore
@inject AppDbContext _context




Employees from Database


    
        
        
        
        
    





@code {
    private RadzenDataGrid grid;
    private List employees;
    private int count;

    private async Task LoadData(LoadDataArgs args)
    {
        var query = _context.Employees.AsQueryable();

        if (!string.IsNullOrEmpty(args.OrderBy))
        {
            query = query.OrderBy(args.OrderBy);
        }

        count = await query.CountAsync();
        employees = await query.Skip(args.Skip ?? 0).Take(args.Top ?? 5).ToListAsync();
    }
}
    

AppDbContext.cs

using BlazorAppRadzenDataGridWithDataBase.Models;
using Microsoft.EntityFrameworkCore;

namespace BlazorAppRadzenDataGridWithDataBase.Data
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions options) : base(options) { }

        public DbSet Employees { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);

            modelBuilder.Entity().HasData(
                new Employee { Id = 1, Name = "Alice Johnson", Designation = "Software Engineer", Department = "IT" },
                new Employee { Id = 2, Name = "Bob Smith", Designation = "HR Manager", Department = "HR" },
                new Employee { Id = 3, Name = "Catherine Lee", Designation = "Accountant", Department = "Finance" },
                new Employee { Id = 4, Name = "Daniel Kim", Designation = "Product Manager", Department = "Product" },
                new Employee { Id = 5, Name = "Evelyn Brown", Designation = "UX Designer", Department = "Design" },
                new Employee { Id = 6, Name = "Frank Wilson", Designation = "DevOps Engineer", Department = "IT" },
                new Employee { Id = 7, Name = "Grace Thomas", Designation = "Recruiter", Department = "HR" },
                new Employee { Id = 8, Name = "Henry Davis", Designation = "CFO", Department = "Finance" },
                new Employee { Id = 9, Name = "Isla White", Designation = "QA Tester", Department = "IT" },
                new Employee { Id = 10, Name = "Jack Miller", Designation = "CTO", Department = "IT" },
                new Employee { Id = 11, Name = "Karen Moore", Designation = "Marketing Head", Department = "Marketing" },
                new Employee { Id = 12, Name = "Liam Taylor", Designation = "Sales Manager", Department = "Sales" },
                new Employee { Id = 13, Name = "Mia Anderson", Designation = "Business Analyst", Department = "Product" },
                new Employee { Id = 14, Name = "Nathan Harris", Designation = "Graphic Designer", Department = "Design" },
                new Employee { Id = 15, Name = "Olivia Martin", Designation = "Support Executive", Department = "Support" },
                new Employee { Id = 16, Name = "Paul Thompson", Designation = "Frontend Developer", Department = "IT" },
                new Employee { Id = 17, Name = "Quincy Scott", Designation = "Backend Developer", Department = "IT" }
            );
        }
    }
}
    

_imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorAppRadzenDataGridWithDataBase
@using BlazorAppRadzenDataGridWithDataBase.Components
@using BlazorAppRadzenDataGridWithDataBase.Data
@using BlazorAppRadzenDataGridWithDataBase.Models
@using Radzen.Blazor
@using Radzen
    

appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DefaultConnection": "Server=(local)\\sqlexpress;Database=BlazorDB;Trusted_Connection=True;TrustServerCertificate=True;"
  }
}
    

👨‍🏫 One-to-One Training on .NET

I provide one-to-one .NET training on Blazor, Web API, C#, SQL Server, Entity Framework, and more.
📞 Contact Me: +91-9331897923 (Call or WhatsApp)
🌐 Visit: https://supernovaservices.com