Skip to content

Commit

Permalink
Blazor QuickGrid coverage enhancements (dotnet#28767)
Browse files Browse the repository at this point in the history
  • Loading branch information
@guardrex @Donciavas
guardrex authored and Donciavas committed Feb 7, 2024
1 parent dd44af8 commit 68d9625
Showing 1 changed file with 100 additions and 30 deletions.
130 changes: 100 additions & 30 deletions aspnetcore/blazor/components/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1480,7 +1480,77 @@ For more information, see the following resources:

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.

To get started with `QuickGrid`:
To implement a `QuickGrid` component:

* Specify tags for the `QuickGrid` component in Razor markup (`<QuickGrid>...</QuickGrid>`).
* Name a queryable source of data for the grid. Use ***either*** of the following data sources:
* `Items`: A nullable `IQueryable<TGridItem>`, where `TGridItem` is the type of data represented by each row in the grid.
* `ItemsProvider`: A callback that supplies data for the grid.
* `Class`: An optional CSS class name. If provided, the class name is included in the `class` attribute of the rendered table.
* `Theme`: A theme name (default value: `default`). This affects which styling rules match the table.
* `Virtualize`: If true, the grid is rendered with virtualization. This is normally used in conjunction with scrolling and causes the grid to fetch and render only the data around the current scroll viewport. This can greatly improve the performance when scrolling through large data sets. If you use `Virtualize`, you should supply a value for `ItemSize` and must ensure that every row renders with a constant height. Generally, it's preferable not to use `Virtualize` if the amount of data rendered is small or if you're using pagination.
* `ItemSize`: Only applicable when using `Virtualize`. `ItemSize` defines an expected height in pixels for each row, allowing the virtualization mechanism to fetch the correct number of items to match the display size and to ensure accurate scrolling.
* `ItemKey`: Optionally defines a value for `@key` on each rendered row. Typically, this is used to specify a unique identifier, such as a primary key value, for each data item. This allows the grid to preserve the association between row elements and data items based on their unique identifiers, even when the `TGridItem` instances are replaced by new copies (for example, after a new query against the underlying data store). If not set, the `@key` is the `TGridItem` instance.
* `Pagination`: Optionally links this `QuickGrid{TGridItem}` instance with a `PaginationState` model, causing the grid to fetch and render only the current page of data. This is normally used in conjunction with a `Paginator` component or some other UI logic that displays and updates the supplied `PaginationState` instance.
* In the `QuickGrid` child content (<xref:Microsoft.AspNetCore.Components.RenderFragment>), specify `PropertyColumn`s, which represent `QuickGrid{TGridItem}` columns whose cells display values:
* `Property`: Defines the value to be displayed in this column's cells.
* `Format`: Optionally specifies a format string for the value. Using `Format` requires the `TProp` type to implement `IFormattable`.
* `Sortable`: Indicates whether the data should be sortable by this column. The default value may vary according to the column type. For example, a `TemplateColumn{TGridItem}` is sortable by default if any `TemplateColumn{TGridItem}.SortBy` parameter is specified.
* `InitialSortDirection`: Indicates which direction to sort in if `IsDefaultSortColumn` is `true`.
* `IsDefaultSortColumn`: Indicates whether this column should be sorted by default.
* `PlaceholderTemplate`: If specified, virtualized grids use this template to render cells whose data hasn't been loaded.

For example, add the following component to render a grid.

`Pages/QuickGridExample.razor`:

```razor
@page "/quickgrid-example"

<QuickGrid Items="@people">
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
<PropertyColumn Property="@(p => p.Name)" Sortable="true" />
<PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
private record Person(int PersonId, string Name, DateOnly PromotionDate);

private IQueryable<Person> people = new[]
{
new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
}.AsQueryable();
}
```

For an example that uses an <xref:System.Linq.IQueryable> with Entity Framework Core as the queryable data source, see the [`SampleQuickGridComponent` component in the ASP.NET Core Basic Test App (`dotnet/aspnetcore` GitHub repository)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor).
[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]

To use EF Core as the data source:

* Add a package reference to the app for the [`Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter) package.
[!INCLUDE[](~/includes/package-reference.md)]

* Call `AddQuickGridEntityFrameworkAdapter` on the service collection in `Startup.ConfigureServices` of `Startup.cs` (Blazor Server) or `Program.cs` (Blazor WebAssembly) to register an EF-aware implementation of `IAsyncQueryExecutor`.

* Blazor Server:

```csharp
services.AddQuickGridEntityFrameworkAdapter();
```

* Blazor WebAssembly:

```csharp
builder.Services.AddQuickGridEntityFrameworkAdapter();
```

:::moniker-end

Expand All @@ -1490,44 +1560,44 @@ The `QuickGrid` component is an experimental Razor component for quickly and eff

To get started with `QuickGrid`:

1. Add package reference for [`Microsoft.AspNetCore.Components.QuickGrid`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.QuickGrid). If using the .NET CLI to add the package reference, include the `--prerelease` option when you execute the [`dotnet add package` command](/dotnet/core/tools/dotnet-add-package).
Add package reference for [`Microsoft.AspNetCore.Components.QuickGrid`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.QuickGrid). If using the .NET CLI to add the package reference, include the `--prerelease` option when you execute the [`dotnet add package` command](/dotnet/core/tools/dotnet-add-package).
[!INCLUDE[](~/includes/package-reference.md)]
[!INCLUDE[](~/includes/package-reference.md)]

:::moniker-end
Add the following component to render a grid.

:::moniker range=">= aspnetcore-7.0"
`Pages/QuickGridExample.razor`:

1. Add the following component to render a grid.
```razor
@page "/quickgrid-example"
@using Microsoft.AspNetCore.Components.QuickGrid

`Pages/QuickGridExample.razor`:
<QuickGrid Items="@people">
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
<PropertyColumn Property="@(p => p.Name)" Sortable="true" />
<PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

```razor
@page "/quickgrid-example"
@using Microsoft.AspNetCore.Components.QuickGrid
@code {
private record Person(int PersonId, string Name, DateOnly PromotionDate);

<QuickGrid Items="@people">
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
<PropertyColumn Property="@(p => p.Name)" Sortable="true" />
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>
private IQueryable<Person> people = new[]
{
new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
}.AsQueryable();
}
```

@code {
private record Person(int PersonId, string Name, DateOnly BirthDate);
:::moniker-end

private IQueryable<Person> people = new[]
{
new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
}.AsQueryable();
}
```
:::moniker range=">= aspnetcore-7.0"

1. Access the component in a browser at the relative path `/quickgrid-example`.
Access the component in a browser at the relative path `/quickgrid-example`.

For various `QuickGrid` demonstrations, see the [**QuickGrid for Blazor** app](https://aspnet.github.io/quickgridsamples/). The demo site is built using Blazor WebAssembly and is hosted on GitHub Pages. The site loads fast thanks to static prerendering using the community-maintained [`BlazorWasmPrerendering.Build` GitHub project](https://github.com/jsakamoto/BlazorWasmPreRendering.Build).
Expand All @@ -1538,7 +1608,7 @@ There aren't current plans to extend `QuickGrid` with features that full-blown c
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"

> [!WARNING]
> The `QuickGrid` component is in preview. You're welcome to use it in production if it meets your needs, but it isn't officially supported and may change in future releases.
> The `QuickGrid` component is in preview for ASP.NET Core 7.x. You're welcome to use it in production if it meets your needs, but it isn't officially supported until ASP.NET Core 8.0 or later.

:::moniker-end

Expand Down

0 comments on commit 68d9625

Please sign in to comment.