QuickGrid DataGrid Component
Inleiding
In de eerdere posts over Blazor Component Libraries zagen we dat we bij de Blazor Component Libraries van derden uitkwamen als we een interface willen hebben dat beter aansluit op wat gewenst wordt.
Microsoft heeft geen eigen Blazor Component Library. Ze hebben zo te zien ook geen plannen voor het doen bouwen van een component library dat een alternatief vormt voor de component libraries van derden. Ze verwijzen op hun website voor de geavanceerdere wensen dan ook naar de commerciële component Libraries.
Desalniettemin hebben de Microsoft ontwikkelaars van Blazor toch een eigen datagrid component ontwikkeld (QuickGrid). Ze willen de Blazor developers toch enigszins tegemoet komen door te voorzien in de “common needs” van de Blazor developer.
In deze post gaan we de QuickGrid Data Grid component bekijken. We activeren in deze post stap voor stap de diverse features van de QuickGrid component en we bekijken wat elke feature met de user interface doet.
De WASM client-solution maakt gebruik van de minimal APIs in deze minimal API server-solution. De server solution met minimal APIs moet ook in de “lucht” zijn. Dit omdat de client anders geen contact kan krijgen met de minimal APIs voor het laten doen van de CRUD-acties. De server solution code inclusief minimal APIs vind je hier (GitHub).
Installatie
We gebruiken een WASM (WebAssembly) client-solution waarin we NuGet-package Microsoft.AspNetCore.Components.QuickGrid hebben geïnstalleerd.
De NuGet-package is op het moment van dit schrijven (lente 2023) een officieel ondersteund prerelease product in .Net 8.
In deze post ben ik uitgegaan van de alpha versie in .Net 6. De code met de opgetuigde QuickGrid DataGrid-component vind je hier (GitHub).
Data Binding
In pagina Eigenaren.razor zorgen we ervoor dat via functie OnInitializedAsync() minimal API /HaalOpEigenaren wordt aangeroepen zodra de .razor-pagina wordt gestart.
De minimal API retourneert naar aanleiding van de aanroep EIGENAAR-objecten en we stoppen de objecten in array eigenaren[]. De array zal verder gebruikt worden door andere variabelen.
@page "/eigenaren"
...
@code {
private EIGENAAR[]? eigenaren;
...
protected override async Task OnInitializedAsync()
{ ...
var opgehaald =
await httpClient.GetAsync(
Configuration["apiLocatie"] + "/HaalOpEigenaren");
...
eigenaren =
await opgehaald
.Content.ReadFromJsonAsync<EIGENAAR[]?>();
}
...
}
Variabele GefilterdeEigenaren wordt gevuld vanuit array eigenaren[]. Variabele omschrijvingFilter speelt daarbij ook een rol en wordt gebruikt om het getoonde te filteren.
Variabele omschrijvingFilter heeft bij de initiële opstart van de pagina nog geen waarde zodat alles getoond zal worden en nog niks wordt gefilterd.
IQueryable<EIGENAAR> GefilterdeEigenaren
{
get
{
// eigenaren is gevuld door OnInitializedAsync()
var resultaat = eigenaren.AsQueryable();
// eventueel nog filteren met een filterwaarde
if (!string.IsNullOrEmpty(omschrijvingFilter))
{
resultaat =
resultaat.Where(
f => f.Omschrijving
.Contains(
omschrijvingFilter,
StringComparison
.CurrentCultureIgnoreCase));
}
return resultaat;
}
}
Variabele GefilterdeEigenaren wordt uiteindelijk door de QuickGrid gebruikt:
<div class="row">
<QuickGrid Items="GefilterdeEigenaren">
...
</QuickGrid>
</div>
QuickGrid
We zetten de QuickGrid-component in Eigenaren.razor:
en we krijgen dit:
Resizing
De kolombreedte van de QuickGrid hoeft niet als een statisch gegeven beschouwd te worden. De QuickGrid DataGrid kent daarvoor de ResizableColumns-attribuut.
<QuickGrid Items="GefilterdeEigenaren" ResizableColumns >
Met onderstaand resultaat waarbij we de kolommen met slepen breder of smaller kunnen maken:
Sorting
Sorteren binnen de QuickGrid DataGrid is mogelijk middels de Sortable-attribuut. Geef daarvoor bij elke kolom op of daarop gesorteerd dient te worden. In dit voorbeeld willen we sorteren op de kolommen Omschrijving en Regio:
<PropertyColumn
Property="f => f.Omschrijving"
Title="Omschrijving"
Sortable="true">
<ColumnOptions>
...
</ColumnOptions>
</PropertyColumn>
<PropertyColumn
Property="f => f.Regio"
Title="Regio"
Sortable="true" />
Met onderstaand resultaat waarbij gesorteerd is op de Omschrijving.
Paging
Voor het bladeren beginnen we met een variabele pagination waarin de status m.b.t. het bladeren wordt vastgelegd. We geven in de variabele ook meteen op dat we per pagina vijf regels willen zien:
// Pagination...
PaginationState pagination =
new PaginationState { ItemsPerPage = 5 };
We voegen aan de <QuickGrid>-tag attribuut Pagination toe die we koppelen aan variabele pagination.
<QuickGrid Items="GefilterdeEigenaren"
ResizableColumns
Pagination="pagination">
Voor het kunnen bladeren moeten we als laatste stap een Paginator-component toevoegen:
<!-- In .NET 6 -->
<!-- https://www.youtube.com/watch?v=sVrWK5GAPgU -->
<!-- https://github.com/dotnet/razor/issues/7395 -->
<Paginator Value="@pagination" />
<!-- In .NET 7/8 -->
<!-- <Paginator State="@pagination" /> -->
En we krijgen onderstaand resultaat. Per pagina worden vijf regels getoond en we zien ook een “paginator” waarmee we naar een andere pagina kunnen gaan.
De Pager kan verder “gecustomized” worden en meer daarover is terug te vinden op de QuickGrid website.
Filtering
We voegen functionaliteit toe voor het kunnen filteren. We willen filteren binnen de omschrijving en binnen de <PropertyColumn>-tag voegen we een <ColumnOptions>-tag toe.
In die <ColumnOptions>-tag bevindt zich een <input>-textbox-tag waarin de waarde kan worden opgegeven waarop moet worden gefilterd.
Het één en ander wordt “gebind” aan variabele omschrijvingFilter. Deze variabele kwam reeds ter sprake bij de Data Binding.
<PropertyColumn
Property="f => f.Omschrijving"
Title="Omschrijving"
Sortable="true">
<ColumnOptions>
<input type="search"
autofocus
@bind="omschrijvingFilter"
@bind:event="oninput"
placeholder="Filter op..." />
</ColumnOptions>
</PropertyColumn>
We geven in dit voorbeeld op dat we willen filteren op de waarde “Mar”:
En we krijgen twee rijen te zien omdat de tekst “mar” voorkomt in de omschrijving:
En dat wordt weer veroorzaakt doordat we bij de definitie van variabele GefilterdeEigenaren gebruik maken van een .Contains.
IQueryable<EIGENAAR> GefilterdeEigenaren
{
get
{
// eigenaren is gevuld door OnInitializedAsync()
var resultaat = eigenaren.AsQueryable();
// eventueel nog filteren met een filterwaarde
if (!string.IsNullOrEmpty(omschrijvingFilter))
{
resultaat =
resultaat.Where(
f => f.Omschrijving
.Contains(
omschrijvingFilter,
StringComparison
.CurrentCultureIgnoreCase));
}
return resultaat;
}
}
Departing
De gegevens worden met QuickGrid getoond en je hebt datgene gevonden waarnaar je op zoek bent. De QuickGrid heeft haar werk gedaan en het is tijd om afscheid te nemen van de QuickGrid. Je gaat naar een ander onderdeel van de applicatie om daar de dingen te doen met datgene wat je gevonden hebt.
We voegen twee kolommen toe. Een kolom waarmee we naar een .razor-component gaan waarin we gegevens kunnen wijzigen en een kolom waarmee we naar een .razor-component gaan waarin we de desbetreffende eigenaar kunnen verwijderen. Let op de onclick-attributen in regel 14 en 21. We geven de ID mee aan de hand van een context. De ID is voor de desbetreffende event-handlers een parameter.
<QuickGrid ...>
<PropertyColumn Property="f => f.ID" .../>
<PropertyColumn Property="f => f.Omschrijving">
...
</PropertyColumn>
<PropertyColumn Property="f => f.Regio" ... />
<TemplateColumn Title="Muteer">
<button
class="btn btn-info"
@onclick="(() => EigenaarMuteer(context.ID))">Edit
</button>
</TemplateColumn>
<TemplateColumn Title="Verwijder">
<button
class="btn btn-danger"
@onclick="(() => EigenaarVerwijder(context.ID))">
Delete
</button>
</TemplateColumn>
</QuickGrid>
...
<Paginator Value="@pagination" />
...
}
En we krijgen dit resultaat met rechts de twee toegevoegde kolommen met respectievelijk een edit- / delete-icon. Het klikken op het icoontje heeft als gevolg dat naar een ander .razor-component binnen de applicatie wordt gegaan waarbij de ID mee wordt genomen en je in dat andere scherm de gegevens krijgt te zien van de desbetreffende eigenaar.
Slot
De Microsoft bouwers van Blazor willen geen serieus alternatief bouwen voor de component libraries van derden. Ze hebben desalniettemin toch een eigen datagrid component ontwikkeld (QuickGrid) om te kunnen voorzien in de “common needs” van de Blazor developers.
Ze verwijzen op hun website dan ook naar de commerciële component Libraries indien je dingen wil die de basis functionaliteiten van QuickGrid ontstijgen zoals hierarchical rows, drag-to-reorder columns en Excel-like range selections.
We hebben in deze post QuickGrid bekeken en een aantal features hebben we de revue laten doen passeren (Resizing, Sorting, Paging en Filtering). We hebben ook gekeken hoe we vanuit de DataGrid code kunnen triggeren zodat we met de informatie uit de DataGrid naar een andere plek in de applicatie kunnen gaan.
Een feature wordt in de DataGrid geactiveerd middels het doen gebruiken van bepaalde attributen. Je hoeft er nauwelijks voor te programmeren, het is voornamelijk configureren.
Hopelijk ben je met deze post weer wat wijzer geworden en ik hoop je weer terug te zien één van mijn volgende blog posts. Wil je weten wat ik nog meer over Blazor heb geschreven? Hit the Blazor button…