GridBlazor is a Blazor component that shows data in a grid. It requires a back-end component that performs paging, sorting, filtering and others.
This back-end component can be one of the following:
It supports .NET Core 3.1 and 5.0, 6.0, 7.0 and 8.0, and Blazor WebAssembly 3.2.0, 5.0, 6.0, 7.0 and 8.0
There are native C# Grid components for Blazor client-side and server-side, and for ASP.NET Core MVC.
You can find the specific documentation for each environment clicking the following links:
This is an example of a table of items using this component:
You have to remove the package GridCore
and install the package GridMvcCore
, and upgrade the GridBlazor
package
You must replace all GridCore
instances by GridServer
ones
The Grid
property of the GridServer
object has an SGrid<T>
type, instead of ISGrid<T>
it was before. You should change any reference to this property to reflect this change.
Some classes have been moved from the GridCore
package to the GridMvc
one. Change all required using ...
as needed.
You have to remove the package GridMvcCore
and install the package GridCore
, and upgrade the GridBlazor
package
You must replace all GridServer
instances by GridCore
ones
The Grid
property of the GridCore
object has an ISGrid<T>
type, instead of SGrid<T>
it was before. You should change any reference to this property to reflect this change.
Some classes have been moved from the GridMvc
package to the GridCore
one. Change all required using ...
as needed.
You have to upgrade the GridMvcCore
and GridBlazor
packages
The Grid
property of the GridServer
object is of type ISGrid<T>
, instead of SGrid<T>
it was before. You should change any reference to this property to reflect this change.
Some classes have been moved from the GridMvc
package to the GridCore
one. Change all required using ...
as needed.
GridBlazor 3.4.1 supports the build-in InputFile component for columns of type "file" for .Net 6.0 and later projects. The old Agno.BlazorInputFile component is ussed for .Net Core 3.1 and .Net 5.x projects. See https://github.com/gustavnavar/Grid.Blazor/blob/master/docs/blazor_client/Crud.md#file-type-columns
GridBlazor 3.0.0 supports .Net 6.0
GridMvcCore has been split in 2 parts from version 5.0.0 on:
Sorting is implemented on GridBlazor 2.1.2, GridMvcCore 4.1.2 and newer versions following this sequence "no sort" -> "sort ascending" -> "sort descending" -> "no sort" and so on when a column title is clicked
GridMvcCore 3.0.0 does not support .Net Core 2.x. It requires .NET Core 3.1
GridBlazor 1.6.7 requires a change on the column definition when selecting rows with checkboxes using the SetCheckboxColumn
method. It's mandatory to identify the columns that are primary keys for the grid. You must do it using the SetPrimaryKey(true) method for the primary key columns' definitions:
c.Add("CheckboxColumn").SetCheckboxColumn(true, o => o.Customer.IsVip);
c.Add(o => o.OrderID).SetPrimaryKey(true);
GridBlazor 1.6.2 doesn't support the CheckedRows
property anymore. CheckedRows
only allowed to retrieve the checked values, but not to change them. Use the Checkboxes
property instead of it.
GridBlazor 1.5.0 supports OData server back-ends for Blazor WA applications. More info here
Versions before GridBlazor 1.3.9 had the keyboard navigation enabled by default. This feature requires to focus on the grid element, but it can create problems when used on pages with 2 or more grids. As a consequence, starting with version 1.3.9 it has to be explicitly configured for each grid that requires keyboard navigation. Users can enable keyboard navigation between pages using the SetKeyboard
method of the GridClient
object:
var client = new GridClient<Order>( ... ).SetKeyboard(true);
Grid components have been moved to GridBlazor.Pages
folder in GridBlazor 1.3.2. You must add a reference to this namespace in the _Imports.razor
:
@using GridBlazor.Pages
Blazor Server App require these changes on to the _Host.cshtml file for .Net Core 3.1:
<link href="https://github.com/gustavnavar/Grid.Blazor/blob/master/_content/GridBlazor/css/gridblazor.min.css" rel="stylesheet" />
<script src="https://github.com/gustavnavar/Grid.Blazor/raw/master/_content/GridBlazor/js/gridblazor.js"></script>
Blazor WebAssembly projects require these changes on to the wwwroot/index.html file for version 3.2.0 Preview 1:
<link href="https://github.com/gustavnavar/Grid.Blazor/blob/master/_content/GridBlazor/css/gridblazor.min.css" rel="stylesheet" />
<script src="https://github.com/gustavnavar/Grid.Blazor/raw/master/_content/GridBlazor/js/gridblazor.js"></script>
Blazor WebAssembly projects require to use a new constructor of the GridClient object including an HttpClient object from Dependency Injection for .Net Core 3.1:
@page "/..."
@inject HttpClient httpClient
...
protected override async Task OnParametersSetAsync()
{
...
var client = new GridClient<Order>(httpClient, url, query, false, "ordersGrid", Columns);
...
}
The button to clear all filters is disabled by default starting from GridBlazor
version 1.3.6. You can enable it using the ClearFiltersButton method of the GridClient object:
var client = new GridClient<Order>(httpClient, url, query, false, "ordersGrid", Columns).ClearFiltersButton(true);
https://github.com/gustavnavar/Grid.Blazor/releases
The SQL Server database for all demos can be downloaded from here
Alternatively, if you prefer to install a fresh version of the database you can perform the following steps:
USE Northwind;
ALTER TABLE dbo.Customers ADD IsVip bit NOT NULL DEFAULT 0 WITH VALUES;
GO
datetime
you must modify the NorthwindDbContext
class including:
modelBuilder.Entity<Order>().Property(r => r.OrderDate).HasColumnType("datetime");
for each datetime column. Or you can change all database columns' type to datetime2(7)
.