Display relational data with the free Blazor DataGrid by Radzen

Radzen.Blazor is a free UI component suite for Blazor applications that we shipped with Radzen's experimental Blazor support.

Today I'm going to show you how to use the powerful Blazor DataGrid component to display, sort and page your data. Paging and sorting is supported automatically for in-memory collections and if your data source is IQueryable all queries will be executed in the database (if you are using Entity Framework Core and MS SQL Server for example).

Here is how start using the Radzen Blazor DataGrid in your Blazor applications.

1. Create new Blazor (server-side) application.

2. Add a reference to Radzen.Blazor and register the Radzen Blazor components using @addTagHelper in ~/_ViewImports.cshtml.

@addTagHelper *,Radzen.Blazor

3. Open FetchData.cshtml, replace the HTML table with RadzenGrid and run the application.

<RadzenGrid AllowSorting="true" Data="@forecasts" TItem="WeatherForecast">
  <Columns>
    <RadzenGridColumn TItem="WeatherForecast" Context="data" Property="Date" Title="Date" Type="DateTime">
      <Template>
        @data.Date.ToShortDateString()
      </Template>
    </RadzenGridColumn>
    <RadzenGridColumn TItem="WeatherForecast" Context="data" Property="TemperatureC" Title="TemperatureC" Type="int">
      <Template>
        @data.TemperatureC
      </Template>
    </RadzenGridColumn>
    <RadzenGridColumn TItem="WeatherForecast" Context="data" Property="TemperatureF" Title="TemperatureF" Type="int">
      <Template>
        @data.TemperatureF
      </Template>
    </RadzenGridColumn>
    <RadzenGridColumn TItem="WeatherForecast" Context="data" Property="Summary" Title="Summary" Type="string">
      <Template>
        @data.Summary
      </Template>
    </RadzenGridColumn>
  </Columns>
</RadzenGrid>

4. Open Services\WeatherForecastService.cs, add some more records, set AllowPaging to True for RadzenGrid and run the application.

Now let's bind the data grid to the good old Northwind SQL Server database using Entity Framework Core.

5. Add references to Microsoft.EntityFrameworkCore, Microsoft.EntityFrameworkCore.Relational and Microsoft.EntityFrameworkCore.SqlServer.

6. Create a new Northwind.cs file. It will contain the EF DbContext and a Product class mapped to the Products table from the Northwind database.

using Microsoft.EntityFrameworkCore;
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace WebApplication1.App.Northwind
{
    public partial class NorthwindContext : DbContext
    {
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                // Update the connection string to use your local MS SQL server
                optionsBuilder.UseSqlServer("Server=.;Initial Catalog=Northwind;Persist Security Info=False;Integrated Security=true;MultipleActiveResultSets=False;Encrypt=false;TrustServerCertificate=true;Connection Timeout=30");
            }
        }

        public DbSet<Product> Products
        {
            get;
            set;
        }
    }

    [Table("Products", Schema = "dbo")]
    public partial class Product
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        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 Int16? UnitsInStock
        {
            get;
            set;
        }
        public Int16? UnitsOnOrder
        {
            get;
            set;
        }
        public Int16? ReorderLevel
        {
            get;
            set;
        }
        public bool? Discontinued
        {
            get;
            set;
        }
    }
}

7. Register the NorthwindContext as a singleton in Startup.cs. This allows you to inject it in FetchData.cshtml. Query Products and assign the result to the products field.

Startup.cs

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // Since Blazor is running on the server, we can use an application service
        // to read the forecast data.
        services.AddSingleton<WeatherForecastService>();

        // Register the NorthwindContext so you can inject it to your Blazor pages
        services.AddSingleton<NorthwindContext>();
    }

    public void Configure(IBlazorApplicationBuilder app)
    {
        app.AddComponent<App>("app");
    }
}

FetchData.cshtml

@inject NorthwindContext context

IQueryable<Product> products;

protected override async Task OnInitAsync()
{
    products = await Task.FromResult(context.Products.AsQueryable());
}

8. Bind RadzenGrid to products and add a few columns.

<RadzenGrid AllowPaging="true" AllowSorting="true" Data="@products" TItem="Product">
    <Columns>
        <RadzenGridColumn TItem="Product" Context="data" Property="ProductID" Title="Product ID" Type="integer">
            <Template>
                @data.ProductID
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Property="ProductName" Title="Product Name" Type="string">
            <Template>
                @data.ProductName
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Property="SupplierID" SortProperty="Supplier.CompanyName" Title="Supplier" Type="string">
            <Template>
                @data.Supplier?.CompanyName
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Property="CategoryID" SortProperty="Category.CategoryName" Title="Category" Type="string">
            <Template>
                @data.Category?.CategoryName
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Property="QuantityPerUnit" Title="Quantity Per Unit" Type="string">
            <Template>
                @data.QuantityPerUnit
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Format="decimal" Property="UnitPrice" Title="Unit Price" Type="number">
            <Template>
                @data.UnitPrice
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Format="int16" Property="UnitsInStock" Title="Units In Stock" Type="integer">
            <Template>
                @data.UnitsInStock
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Format="int16" Property="UnitsOnOrder" Title="Units On Order" Type="integer">
            <Template>
                @data.UnitsOnOrder
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Format="int16" Property="ReorderLevel" Title="Reorder Level" Type="integer">
            <Template>
                @data.ReorderLevel
            </Template>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="Product" Context="data" Property="Discontinued" Title="Discontinued" Type="boolean">
            <Template>
                @data.Discontinued
            </Template>
        </RadzenGridColumn>
    </Columns>
</RadzenGrid>

9. Run the application and you will see the Radzen DataGrid component data-bound to the Products table of the Northwind database. If you sort or change the current page you will notice that the queries are executed by your SQL Server and only the current page of data is requested.

Source Code

Enjoy!