Using Blazor QuickGrid Component In .NET 8, Entity Framework Core And SQL Server

Here's a Blazor Web App that demonstrates on how to show data in a tabular format using the ASP.NET Core Blazor QuickGrid component. As per Microsoft, The QuickGrid component is a Razor component for quickly and efficiently displaying data in tabular form. QuickGrid provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. QuickGrid is highly optimized and uses advanced techniques to achieve optimal rendering performance. Note that this is not as advanced as other commercial grids.

To begin with, lets create a new Blazor Web App that target's the .NET 8 framework and then install these four NuGet packages. We will be getting data from WideWorldImporters database using Entity Framework Core and database approach methodology.

Once you have these installed, next is to scaffold the WideWorldImporters database for you to generate the model classes based from the tables. After completing the reverse engineering process, you will notice that the target folder has the model classes and a DBContext class. You also need to set the connection string in appsettings.json before starting the scaffolding process. In the Program.cs, you need to register the DBContext class.

   builder.Services.AddDbContextFactory<WideWorldImportersContext>(options =>
       options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

I also did copy the default css styles of the QuickGrid from it's documentation.

/* *********** QuickGrid Styles************* */

::deep table {
    min-width: 100%;
}

::deep th.country-name {
    width: 14rem;
}

/* Subtle stripe effect */
::deep tr:nth-child(even) {
    background: rgba(255,255,255,0.4);
}

/* Don't collapse rows even if they are empty */
::deep tbody tr {
    height: 1.8rem;
}

I added a code-behind class called Home.razor.cs with a partial keyword to separate the UI logic from the code. The class has a context factory property with an Inject attribute. A pagination object with number of items per page. IQueryable variable to fetch the data from the database without filter. And a filter property which returns the filtered items based from a search box of the datagrid.

public partial class Home
{
    [Inject]
    IDbContextFactory<WideWorldImportersContext>? contextFactory { get; set; }

    private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
    private string Title = "Wide World Importers - Customers";
    private IQueryable<Customer>? itemsQueryable;
    private string nameFilter = string.Empty;

    private IQueryable<Customer>? FilteredCustomers
    {
        get
        {
            IQueryable<Customer>? Customers = itemsQueryable;

            if (!string.IsNullOrEmpty(nameFilter))
                Customers = itemsQueryable?.Where(c => c.CustomerName.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));

            if (Customers != null)
                return Customers.AsQueryable();

            return null;
        }
    }

    protected override async Task OnInitializedAsync()
    {
        var context = contextFactory.CreateDbContext();
        var customers = await context.Customers
                    .Include(x => x.CustomerCategory)
                    .Include(y => y.DeliveryCity)
                    .Include(z => z.PrimaryContactPerson)
                    .ToListAsync();

        itemsQueryable = customers.AsQueryable();
    }
}

The view contains the QuickGrid component with the corresponding columns. Some columns have attributes set like Sortable and Format. And the CustomerName column can be filtered using search textbox.

<div class="row">
	<QuickGrid Id="qGridCustomer" Class="table table-responsive table-bordered table-striped" Items="@FilteredCustomers" Pagination="@pagination">
		<PropertyColumn Title="Customer Name" Property="@(p => p.CustomerName)" Sortable="true">
			<ColumnOptions>
				<div class="search-box">
					<input type="search" autofocus @bind="nameFilter" @bind:event="oninput" placeholder="Customer Name..." />
				</div>
			</ColumnOptions>
		</PropertyColumn>
		<PropertyColumn Title="Category" Property="@(p => p.CustomerCategory.CustomerCategoryName)" Sortable="true" />
		<PropertyColumn Title="Contact Person" Property="@(p => p.PrimaryContactPerson.FullName)" Sortable="true" />
		<PropertyColumn Title="Deliver City" Property="@(p => p.DeliveryCity.CityName)" Sortable="true" />
		<PropertyColumn Title="Credit Limit" Property="@(p => p.CreditLimit)" Format="#,##0.00" Sortable="true" />
		<PropertyColumn Title="Account Opened Date" Property="@(p => p.AccountOpenedDate)" Format="yyyy-MM-dd" Sortable="true" />
		<PropertyColumn Title="Phone Number" Property="@(p => p.PhoneNumber)" />
		<PropertyColumn Title="Fax Number" Property="@(p => p.FaxNumber)" />
		<PropertyColumn Title="Website" Property="@(p => p.WebsiteUrl)" Sortable="true" />
	</QuickGrid>
</div>
<div class="row">
	<Paginator State="@pagination" />
</div>

Here's what the QuickGrid component looks like.

Source Code