Enhance Your Blazor QuickGrid with Dynamic with Button on Columns

QuickGrid is a Razor component that allows developers to display data in a tabular format. It offers a primary and convenient data grid component for typical grid rendering scenarios and a standard design and performance baseline for developing data grid components. QuickGrid is highly tuned and employs various approaches to obtain the best rendering performance possible. To begin using QuickGrid, add a package reference to Microsoft.AspNetCore.Components.QuickGrid.

It is flexible and straightforward, making it excellent for those who need to present data in tabular form quickly and efficiently. QuickGrid is also highly adaptable, allowing us to modify it to our system requirements.

Usage

The QuickGrid Razor Component is incredibly straightforward to set up and add HTML elements to, as shown in the samples below.

private record RoleOperators(int Id, string Name);

In this case, the code below shows how to extend the column by adding custom HTML and adding a button View using Kendo UI.

private record RoleOperators(int Id, string Name)
{
    public MarkupString View => (MarkupString)$"<a class='k-button' href='/roleusers/{Id}'>View</a>";
}

Fill the data into an IQueryable variable, as seen below.

private readonly IQueryable<RoleOperators> _roles = new List<RoleOperators>
{
    new RoleOperators(1, "Root"),
    new RoleOperators(2, "Admin"),
    new RoleOperators(3, "Operator"),
    new RoleOperators(4, "Doctor"),
    new RoleOperators(5, "Patient"),
    new RoleOperators(6, "Nurse"),
    new RoleOperators(7, "Lab"),
    new RoleOperators(8, "Pharmacy"),
    new RoleOperators(9, "Billing"),
    new RoleOperators(10, "Receptionist"),
    new RoleOperators(11, "Accountant"),
    new RoleOperators(12, "Cashier"),
    new RoleOperators(14, "Insurance Agent")
}.AsQueryable();

Finally, add the @using and QuickGrid directing Items to the variable containing the data, and configure the columns as follows.

@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Items="@_roles">
    <PropertyColumn Property="@(p => p.Id)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <TemplateColumn Title="View">
        @context.View
    </TemplateColumn>
</QuickGrid>

The image below shows its result.

Role users list

Note that the variable with the data can be customized and populated with the parameters of the component/page. The code below demonstrates how to do it using parameter ID.

[Parameter]
public int Id { get; set; }

private IQueryable<Person> People
{
    get
    {
        if (this.Id == 1)
        {
            return new List<Person>
            {
                new Person(1, "Jefferson S. Motta"),
            }.AsQueryable();
        }

        return new List<Person>
        {
            new Person(2, "John Doe"),
            new Person(3, "Jane Doe"),
            new Person(4, "Dr. John Doe"),
            new Person(5, "Dr. Jane Doe"),
            new Person(6, "Nurse John Doe"),
            new Person(7, "Nurse Jane Doe"),
            new Person(8, "Lab John Doe"),
            new Person(9, "Lab Jane Doe"),
            new Person(10, "Pharmacy John Doe"),
            new Person(11, "Pharmacy Jane Doe"),
            new Person(12, "Billing John Doe"),
            new Person(13, "Billing Jane Doe"),
            new Person(14, "Receptionist John Doe"),
            new Person(15, "Receptionist Jane Doe"),
            new Person(16, "Accountant John Doe"),
            new Person(17, "Accountant Jane Doe"),
            new Person(18, "Cashier John Doe"),
            new Person(19, "Cashier Jane Doe"),
            new Person(20, "Insurance Agent John Doe"),
            new Person(21, "Insurance Agent Jane Doe"),
        }.AsQueryable();
    }
}

The image below shows its result.

Users by Role

Tip: The IQueryable<Person> People is initialized according to the Id parameter.

However, there are no plans to augment QuickGrid with capabilities that full-fledged other grids typically offer, such as hierarchical rows, drag-to-reorder columns, or Excel-like range choices. If you need advanced features, you don’t want to develop. I suggest looking at here a licensed component that offers comprehensive features ranging from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, etc.