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.

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:

• ... with Blazor Server and any EF Core-supported database
• ... with Blazor WebAssembly and EF Core's Sqlite support

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.

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();
    }
}