QuickGrid for Blazor

Data sources

QuickGrid can show data from three main sources:

  • In-memory IQueryable
    • Good for small amounts of data
    • Sorting/filtering/etc is evaluated in memory
  • EF-Core IQueryable
    • Good if you're using Entity Framework with any amount of data
    • Sorting/filtering/etc is evaluated inside the database
  • Remote data
    • Good for arbitrary amounts of data, e.g., from a JSON API
    • Sorting/filtering/etc is evaluated by the data provider

In-memory IQueryable data

This is the simplest option when working with small amounts of data, up to a few hundred items.

Simply obtain your data through whatever means you want (e.g., a call to a JSON API endpoint, or a direct database query), and then use the AsQueryable extension method to make it suitable for in-memory querying. Pass this value as the grid's Items parameter.

Argentina0123
Armenia0224
Australia1772246
Austria1157
Azerbaijan0347
Bahamas2002
Bahrain0101
Belarus1337
Belgium3137
Bermuda1001
Botswana0011
Brazil76821
Bulgaria3126
Burkina Faso0011
Canada761124
Chinese Taipei24612
Colombia0415
Côte d'Ivoire0011
Croatia3328
Cuba73515
Czech Republic44311
Denmark34411
Dominican Republic0325
Ecuador2103
Egypt1146
Estonia1012
Ethiopia1124
Fiji1012
Finland0022
France10121133
Georgia2518
Germany10111637
Ghana0011
Great Britain22212265
Greece2114
Grenada0011
Hong Kong, China1236
Hungary67720
India1247
Indonesia1135
Ireland2024
Islamic Republic of Iran3227
Israel2024
Italy10102040
Jamaica4149
Japan27141758
Jordan0112
Kazakhstan0088
Kenya44210
Kosovo2002
Kuwait0011
Kyrgyzstan0213
Latvia1012
Lithuania0101
Malaysia0112
Mexico0044
Mongolia0134
Morocco1001
Namibia0101
Netherlands10121436
New Zealand76720
Nigeria0112
North Macedonia0101
Norway4228
People's Republic of China38321888
Philippines1214
Poland45514
Portugal1124
Puerto Rico1001
Qatar2013
Republic of Korea641020
Republic of Moldova0011
ROC20282371
Romania1304
San Marino0123
Saudi Arabia0101
Serbia3159
Slovakia1214
Slovenia3115
South Africa1203
Spain38617
Sweden3609
Switzerland34613
Syrian Arab Republic0011
Thailand1012
Tunisia1102
Turkey22913
Turkmenistan0101
Uganda2114
Ukraine161219
United States of America394133113
Uzbekistan3025
Venezuela1304

When using in-memory IQueryable, there's no limit on the kinds of sorting or filtering you can do, because it's all computed in memory. However, you don't get the benefit of database indexes for the in-memory operations, so this can be a performance bottleneck. If you're working with larger data set, consider a different data source.

Entity Framework IQueryable data

This is the simplest and best-performing option if you're using EF Core:

EF Core's DataContext gives you a DbSet property for each table in your database. Simply supply this as the grid's Items parameter:

@inject ApplicationDbContext MyDbContext

<QuickGrid Items="@MyDbContext.People">
    ...
</QuickGrid>

You may also use any EF-supported LINQ operator to filter the data before passing it:

@inject ApplicationDbContext MyDbContext

<QuickGrid Items="@MyDbContext.Documents.Where(d => d.CategoryId == currentCategoryId)">
    ...
</QuickGrid>

QuickGrid recognizes EF-supplied IQueryable instances and knows how to resolve queries asynchronously for efficiency. For this to work, you'll need to reference the Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter package and call AddQuickGridEntityFrameworkAdapter in your Program.cs file:

builder.Services.AddQuickGridEntityFrameworkAdapter();

If you forget to do this, you'll get an error to remind you.

Remote data

If you're using Blazor WebAssembly, it's very common to fetch data from a JSON API on a server. If you want to fetch only the data that's needed for the current page/viewport and apply any sorting or filtering rules on the server, you can use the ItemsProvider parameter.

You can also use ItemsProvider with Blazor Server if it needs to query an external endpoint, or in any other case where your requirements aren't covered by an IQueryable.

To do this, supply a callback matching the GridItemsProvider<TGridItem> delegate type, where TGridItem is the type of data displayed in the grid. Your callback will be given a parameter of type GridItemsProviderRequest<TGridItem> which specifies the start index, maximum row count, and sort order of data to return. As well as returning the matching items, you need to return a totalItemCount so that paging or virtualization can work.

Here is an example of connecting a grid to the public OpenFDA Food Enforcement database.

ID
State
City
Company
Status

Total: 22565 results found

This particular endpoint doesn't support sorting, so none of the columns are marked as sortable. However it does support skip and limit parameters, so we can enable virtualization and scroll quickly through tens of thousands of records.

Refreshing data programmatically

Sometimes you might know that the data source's contents will have changed. For example, the user may have saved some changes that will affect the data, or they might have changed the current query parameters. In any such case, you can call the grid's RefreshDataAsync method:

<QuickGrid ... @ref="myGrid">
    ...
</QuickGrid>

@code {
    QuickGrid<MyDataType> myGrid;

    async Task HandleSomeEvent()
    {
        ...

        // We can force the grid to reload the current data
        await myGrid.RefreshDataAsync();
    }
}
An unhandled error has occurred. Reload 🗙