Blazor Grid
Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.
Grid Parameters
Name | Type | Default | Required | Description | Added Version |
---|---|---|---|---|---|
AllowDetailView | bool | false | Gets or sets a value indicating whether the grid detail view is enabled. | 3.0.0 | |
AllowFiltering | bool | false | Gets or sets the grid filtering. | 1.0.0 | |
AllowPaging | bool | false | Gets or sets the grid paging. | 1.0.0 | |
AllowRowClick | bool | false | Gets or sets the allow row click. | 1.9.5 | |
AllowSelection | bool | false | Gets or sets the grid selection. | 1.8.0 | |
AllowSorting | bool | false | Gets or sets the grid sorting. | 1.0.0 | |
AutoHidePaging | bool | false | Automatically hides the paging controls when the grid item count is less than or equal to the PageSize and this property is set to true . | 1.10.5 | |
ChildContent | RenderFragment | null | ✔️ | Gets or sets the content to be rendered within the component. | 1.0.0 |
Data | IEnumerable<TItem> | null | Gets or sets the grid data. | 1.4.3 | |
DataProvider | GridDataProviderDelegate<TItem> | null | DataProvider is for items to render. The provider should always return an instance of GridDataProviderResult , and null is not allowed. | 1.0.0 | |
DisableAllRowsSelection | Func<IEnumerable<TItem>, bool>? | Enable or disable the header checkbox selection. | 1.8.0 | ||
DisableRowSelection | Func<TItem, bool>? | Enable or disable the row level checkbox selection. | 1.8.0 | ||
EmptyDataTemplate | RenderFragment | null | ✔️ | Template to render when there are no rows to display. | 1.0.0 |
EmptyText | string | No records to display | Shows text on no records. | 1.0.0 | |
FiltersRowCssClass | string | null | Gets or sets the filters row css class. | 1.9.2 | |
FiltersTranslationProvider | GridFiltersTranslationDelegate | null | Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed. | 1.10.0 | |
FixedHeader | bool | false | Gets or sets the grid fixed header. | 1.10.3 | |
GridContainerClass | string | null | Gets or sets the grid container css class. | 3.0.0 | |
GridContainerStyle | string | null | Gets or sets the grid container css style. | 3.0.0 | |
HeaderRowCssClass | string | null | Gets or sets the header row css class but not the thead tag class. | 1.9.2 | |
Height | float | 320 pixels | Gets or sets the grid height. | 1.10.3 | |
ItemsPerPageText | string | Items per page | ✔️ | Gets or sets the items per page text. | 1.9.5 |
PageSize | int | 10 | Gets or sets the page size. | 1.0.0 | |
PageSizeSelectorItems | int[] | new int[] { 10, 20, 50 } | ✔️ | Gets or sets the page size selector items. | 1.8.0 |
PageSizeSelectorVisible | bool | false | Gets or sets the page size selector visible. | 1.8.0 | |
PaginationItemsTextFormat | string | {0} - {1} of {2} items | ✔️ | Gets or sets the pagination items text format. | 1.8.0 |
Responsive | bool | false | Gets or sets a value indicating whether Grid is responsive. | 1.0.0 | |
RowClass | Func<TItem, string>? | Gets or sets the row class. | 1.6.0 | ||
SelectionMode | GridSelectionMode | GridSelectionMode.Single | Gets or sets the grid selection mode. | 1.8.0 | |
SettingsProvider | GridSettingsProviderDelegate | null | Settings are for the grid to render. The provider should always return an instance of 'GridSettings', and 'null' is not allowed. | 1.0.0 | |
THeadCssClass | string? | null | Gets or sets the thead css class. | 1.10.3 | |
Unit | Unit | Unit.px | Gets or sets the units. | 1.10.3 |
Grid requires either Data
or DataProvider
parameter, but not both.
Grid Callback Events
Name | Type | Description | Added Version |
---|---|---|---|
GridSettingsChanged | EventCallback<GridSettings> | This event is fired when the grid state is changed. | 1.0.0 |
OnRowClick | EventCallback<GridRowEventArgs<TItem>> | This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking. | 1.9.5 |
OnRowDoubleClick | EventCallback<GridRowEventArgs<TItem>> | This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking. | 1.9.5 |
SelectedItemsChanged | EventCallback<HashSet<TItem>> | This event is fired when the items selection changed. | 1.8.0 |
Grid Methods
Name | Return Type | Description | Added Version |
---|---|---|---|
GetFilters() | IEnumerable<FilterItem> | Get filters. | 1.0.0 |
RefreshDataAsync(CancellationToken cancellationToken = default) | Task | Refresh the grid data. | 1.0.0 |
ResetPageNumber() | ValueTask | Reset the page number to 1 and refresh the grid. | 1.4.3 |
GridColumn Parameters
Name | Type | Default | Required | Description | Added Version |
---|---|---|---|---|---|
ChildContent | RenderFragment | null | ✔️ | Gets or sets the content to be rendered within the component. | 1.0.0 |
ColumnClass | Func<TItem, string>? | Gets or sets the column class. | 1.6.0 | ||
Filterable | bool | true | If true, filter is enabled. The filter is enabled or disabled based on the grid AllowFiltering parameter. | 1.0.0 | |
FilterButtonColor | ButtonColor | ButtonColor.Light | Gets or sets the filter button color. | 3.0.0 | |
FilterButtonCSSClass | string? | null | Gets or sets the filter button CSS class. | 3.0.0 | |
FilterOperator | FilterOperator | FilterOperator.None | Gets or sets the filter operator. | 1.0.0 | |
FilterTextboxWidth | int | 0 | Gets or sets the filter textbox width in pixels. | 1.0.0 | |
FilterValue | string | null | Gets or sets the filter value. | 1.0.0 | |
Freeze | bool | false | Indicates whether the column is frozen. | 1.10.4 | |
FreezeDirection | FreezeDirection | FreezeDirection.Left | Gets or sets the freeze direction of the column. | 1.10.4 | |
FreezeLeftPosition | double | 0 | Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns. | 1.10.4 | |
FreezeRightPosition | double | 0 | Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns. | 1.10.4 | |
HeaderContent | RenderFragment | null | Gets or sets the header content. | 1.7.3 | |
HeaderText | string | null | Gets or sets the table column header text. | 1.0.0 | |
HeaderTextAlignment | enum | Alignment.Start | Gets or sets the header text alignment. Use Alignment.Start or Alignment.Center or Alignment.End . | 1.0.0 | |
IsDefaultSortColumn | bool | false | Gets or sets the default sort column. | 1.0.0 | |
PropertyName | string | null | Gets or sets the property name. This is required when AllowFiltering is true. | 1.0.0 | |
Sortable | bool | true | Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the grid AllowSorting parameter. | 1.0.0 | |
SortDirection | SortDirection | SortDirection.None | Gets or sets the default sort direction of a column. Use SortDirection.Ascending or SortDirection.Descending | 1.0.0 | |
SortKeySelector | Expression<Func<TItem, IComparable>> | Expression used for sorting. | 1.0.0 | ||
SortString | string | null | Gets or sets the column sort string. This string is passed to the backend/API for sorting. And it is ignored for client-side sorting. | 1.0.0 | |
StringComparison | StringComparison | StringComparison.OrdinalIgnoreCase | Gets or sets the StringComparison. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase . | 1.0.0 | |
TextAlignment | Alignment | Alignment.Start | Gets or sets the text alignment. Use Alignment.Start or Alignment.Center or Alignment.End . | 1.0.0 | |
TextNoWrap | bool | false | Gets or sets text nowrap. | 1.0.0 |
GridSettings Properties
Name | Type | Default | Required | Description | Added Version |
---|---|---|---|---|---|
PageNumber | int | Page number. | 1.0.0 | ||
PageSize | int | Size of the page. | 1.0.0 | ||
Filters | IEnumerable<FilterItem> | Current filters. | 1.0.0 |
Examples
Client side filtering
For filtering, AllowFiltering
and PropertyName
parameters are required.
Add AllowFiltering="true"
parameter to Grid and PropertyName
parameter to all the GridColumns.
<Grid @ref="grid"
TItem="Employee4"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowFiltering="true"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee4" HeaderText="Id" PropertyName="Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee4" HeaderText="Employee Name" PropertyName="Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee4" HeaderText="DOJ" PropertyName="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1> employees;
protected override void OnInitialized()
{
employees = new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
return await Task.FromResult(request.ApplyTo(employees));
}
}
Client side filtering with string comparision
In the below example, StringComparision.Ordinal
is used on the Employee Name column to make the filter case-sensitive.
By default, StringComparison.OrdinalIgnoreCase
is used to compare culture-agnostic and case-insensitive string matching.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowFiltering="true"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" StringComparison="StringComparison.Ordinal">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1> employees;
protected override void OnInitialized()
{
employees = new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
return await Task.FromResult(request.ApplyTo(employees));
}
}
Client side paging
For paging, AllowPaging
and PageSize
parameters are required.
Add AllowPaging="true"
and PageSize="20"
parameters to the Grid. PageSize
parameter is optional.
The default page size is 10.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowPaging="true"
PageSize="5"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1> employees;
protected override void OnInitialized()
{
employees = new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
};
}
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
return await Task.FromResult(request.ApplyTo(employees));
}
}
Client side sorting
For sorting, AllowSorting
and SortKeySelector
parameters are required.
Add AllowSorting="true"
parameter to Grid and SortKeySelector
to all the GridColumns.
<Grid TItem="Employee1"
AllowSorting="true"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1> employees;
protected override void OnInitialized()
{
employees = new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
return await Task.FromResult(request.ApplyTo(employees));
}
}
Client side filtering, paging, and sorting
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowFiltering="true"
AllowPaging="true"
PageSize="5"
AllowSorting="true"
AllowSelection="true"
SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="OnSelectedItemsChanged"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
<div class="mt-3">
Selected Items Count: @selectedEmployees.Count
</div>
<div class="mt-2">
Selected Employees:
<ul>
@foreach (var emp in selectedEmployees)
{
<li>@emp.Name</li>
}
</ul>
</div>
@code {
private IEnumerable<Employee1> employees = default!;
private HashSet<Employee1> selectedEmployees = new();
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
};
}
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
{
selectedEmployees = employees is not null && employees.Any() ? employees : new();
return Task.CompletedTask;
}
}
Set default filter
FilterOperator
and FilterValue
parameters are required to set the default filter.
You can set the default filter on more than one GridColumn.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowFiltering="true"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" FilterOperator="FilterOperator.GreaterThanOrEquals" FilterValue="105">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1>? employees;
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
}
Disable specific column filter
Filterable
parameter is required to disable the filter on a specific column.
Add Filterable="false"
parameter to GridColumn. The column filter is disabled on the Id column in the below example.
By default, Filterable="true"
on all the columns if the AllowFiltering
parameter is set to true
on the grid.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowFiltering="true"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" Filterable="false">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" Filterable="false">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1>? employees;
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
}
Increase filter textbox width
Add FilterTextboxWidth
parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth
parameter is optional.
Filter textbox width measured in pixels.
<Grid TItem="Employee3"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowFiltering="true"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee3" HeaderText="Id" PropertyName="Id" FilterTextboxWidth="80">
@context.Id
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="First Name" PropertyName="FirstName" FilterTextboxWidth="80">
@context.FirstName
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Last Name" PropertyName="LastName" FilterTextboxWidth="80">
@context.LastName
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Email" PropertyName="Email">
@context.Email
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Company" TextNoWrap="true" PropertyName="Company">
@context.Company
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Designation" TextNoWrap="true" PropertyName="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="DOJ" PropertyName="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End" PropertyName="Salary" FilterTextboxWidth="80">
@context.Salary.ToString("N2")
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center" PropertyName="IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee3>? employees;
private async Task<GridDataProviderResult<Employee3>> EmployeesDataProvider(GridDataProviderRequest<Employee3> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee3> GetEmployees()
{
return new List<Employee3>
{
new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },
new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },
new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
};
}
}
Server side filtering, paging and sorting
For server-side sorting, we need the SortString
parameter on GridColumn along with the SortKeySelector
parameter.
<Grid TItem="Customer2"
Class="table table-hover table-bordered table-striped"
DataProvider="CustomersDataProvider"
AllowFiltering="true"
AllowPaging="true"
AllowSorting="true"
Responsive="true">
<GridColumn TItem="Customer2" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.CustomerId
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
@context.CustomerName
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
@context.Phone
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
@context.Email
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
@context.Address
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
@context.PostalZip
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
@context.Country
</GridColumn>
</Grid>
@code {
[Inject] public ICustomerService _customerService { get; set; } = default!;
private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
{
string sortString = "";
SortDirection sortDirection = SortDirection.None;
if (request.Sorting is not null && request.Sorting.Any())
{
// Note: Multi column sorting is not supported at this moment
sortString = request.Sorting.FirstOrDefault()!.SortString;
sortDirection = request.Sorting.FirstOrDefault()!.SortDirection;
}
var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
}
}
Set default sorting
IsDefaultSortColumn
parameter is required to set the default sorting. Add IsDefaultSortColumn="true"
parameter to the GridColumn.
The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending"
to the GridColumn.
If more than one GridColumn has the IsDefaultSortColumn
paramter, it will pick the first column as the default sorting column.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowSorting="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="@(item => item.Id)">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="@(item => item.Name)" IsDefaultSortColumn="true" SortDirection="SortDirection.Descending">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="@(item => item.Designation)">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="@(item => item.DOJ)">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="@(item => item.IsActive)">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1>? employees;
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
}
Disable specific column sorting
Add Sortable="false"
parameter the GridColumn to disable the sorting.
If sorting is disabled, then the SortKeySelector
parameter is not required.
The sorting is disabled on the Designation column in the below example.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
AllowSorting="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="@(item => item.Id)">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="@(item => item.Name)">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" Sortable="false">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="@(item => item.DOJ)">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="@(item => item.IsActive)">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1>? employees;
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
}
Header text alignment
Use the HeaderTextAlignment
parameter to change the header column alignment.
By default, HeaderTextAlignment
is set to Alignment.Start. Other options you can use are Alignment.Center
and Alignment.End
.
<Grid TItem="Employee1"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" HeaderTextAlignment="Alignment.Center">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" HeaderTextAlignment="Alignment.Center">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" HeaderTextAlignment="Alignment.Center">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" HeaderTextAlignment="Alignment.End">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee1>? employees;
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee1> GetEmployees()
{
return new List<Employee1>
{
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
}
Cell alignment
Use the TextAlignment
parameter to change the cell data alignment.
By default, TextAlignment
is set to Alignment.Start
. Other options you can use are Alignment.Center
and Alignment.End
.
<Grid TItem="Employee2"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider">
<GridColumns>
<GridColumn TItem="Employee2" HeaderText="Id" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.Id
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Employee Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End">
@context.Salary
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee2>? employees;
private async Task<GridDataProviderResult<Employee2>> EmployeesDataProvider(GridDataProviderRequest<Employee2> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee2> GetEmployees()
{
return new List<Employee2>
{
new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },
new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },
new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },
new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },
new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },
new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },
new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },
new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },
new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },
};
}
}
Cell formating
To format the cell data, use ToString()
method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
@context.Salary.ToString("N2")
<Grid TItem="Employee2" class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider">
<Grid TItem="Employee2"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider">
<GridColumns>
<GridColumn TItem="Employee2" HeaderText="Id" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.Id
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Employee Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End">
@context.Salary.ToString("N2")
</GridColumn>
<GridColumn TItem="Employee2" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee2>? employees;
private async Task<GridDataProviderResult<Employee2>> EmployeesDataProvider(GridDataProviderRequest<Employee2> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee2> GetEmployees()
{
return new List<Employee2>
{
new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },
new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },
new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },
new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },
new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },
new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },
new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },
new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },
new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },
};
}
}
Cell nowrap
To prevent text from wrapping, add TextNoWrap="true"
parameter to the GridColumn.
Add Responsive="true"
parameter to the grid to enable horizontal scrolling.
<Grid TItem="Employee3"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
Responsive="true">
<GridColumns>
<GridColumn TItem="Employee3" HeaderText="Id" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.Id
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="First Name">
@context.FirstName
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="First Name">
@context.LastName
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Email">
@context.Email
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Company" TextNoWrap="true">
@context.Company
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Designation" TextNoWrap="true">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End">
@context.Salary.ToString("N2")
</GridColumn>
<GridColumn TItem="Employee3" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.IsActive
</GridColumn>
</GridColumns>
</Grid>
@code {
private IEnumerable<Employee3>? employees;
private async Task<GridDataProviderResult<Employee3>> EmployeesDataProvider(GridDataProviderRequest<Employee3> request)
{
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
employees = GetEmployees(); // call a service or an API to pull the employees
return await Task.FromResult(request.ApplyTo(employees));
}
private IEnumerable<Employee3> GetEmployees()
{
return new List<Employee3>
{
new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },
new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },
new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
};
}
}
Empty data
If there are no records to display in the Grid, by default, it will display the No records to display message.
You can change this message by adding the EmptyText
parameter to the Grid.
<Grid TItem="Employee"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider"
EmptyText="No records to display">
<GridColumns>
<GridColumn TItem="Employee" HeaderText="Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee" HeaderText="First Name">
@context.FirstName
</GridColumn>
<GridColumn TItem="Employee" HeaderText="Last Name">
@context.LastName
</GridColumn>
<GridColumn TItem="Employee" HeaderText="Designation">
@context.Designation
</GridColumn>
</GridColumns>
</Grid>
@code {
private async Task<GridDataProviderResult<Employee>> EmployeesDataProvider(GridDataProviderRequest<Employee> request)
{
await Task.Delay(3000);
return (new GridDataProviderResult<Employee> { Data = new List<Employee>(), TotalCount = 0 });
}
}
Empty data template
Set the GridEmptyDataTemplate
to customize the message displayed when the grid has no records.
<Grid TItem="Employee"
Class="table table-hover table-bordered table-striped"
DataProvider="EmployeesDataProvider">
<GridColumns>
<GridColumn TItem="Employee" HeaderText="Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee" HeaderText="First Name">
@context.FirstName
</GridColumn>
<GridColumn TItem="Employee" HeaderText="Last Name">
@context.LastName