HxGrid #

Grid to display tabular data from data source. Includes support for client-side and server-side paging & sorting (or virtualized scrolling as needed).

Basic usage #

To define columns, use the HxGridColumn components. You can specify the HeaderText and ItemTextSelector parameters.

To connect the grid to your data, implement the DataProvider method. This method receives a "request" (for sorting and paging requirements) and yields a "result" (items for display along with the total item count).

@inject IDemoDataService DemoDataService

<HxGrid TItem="EmployeeDto" DataProvider="GetGridData" PageSize="5" Responsive="true">
	<Columns>
		<HxGridColumn HeaderText="Name" ItemTextSelector="employee => employee.Name" />
		<HxGridColumn HeaderText="Phone" ItemTextSelector="employee => employee.Phone" />
		<HxGridColumn HeaderText="Salary" ItemTextSelector="@(employee => employee.Salary.ToString("c0"))" ItemCssClass="text-end" HeaderCssClass="text-end" />
		<HxGridColumn HeaderText="Position" ItemTextSelector="employee => employee.Position" />
		<HxGridColumn HeaderText="Location" ItemTextSelector="employee => employee.Location" />
	</Columns>
</HxGrid>

@code {
	private async Task<GridDataProviderResult<EmployeeDto>> GetGridData(GridDataProviderRequest<EmployeeDto> request)
	{
		// you usually pass the data-request to your API/DataLayer
		var response = await DemoDataService.GetEmployeesDataFragmentAsync(request.StartIndex, request.Count, request.CancellationToken);
		return new GridDataProviderResult<EmployeeDto>()
			{
				Data = response.Data,
				TotalCount = response.TotalCount
			};
	}
}

Note: The demos on this page use DemoDataService, in-memory simulation of a simple data store. Find the implementation on GitHub.

Automatic sorting and paging #

If you have your IEnumerable data-source ready (all items preloaded in memory), you can use the request.ApplyTo(data) extension method to apply sorting and paging automatically.

Asynchronous data #

When loading data asynchronously, always ensure that the DataProvider waits for the data to be available; otherwise, the skeleton UI (placeholders) will not display correctly.
If you are preloading data and using the request.ApplyTo(data) extension method, you can leverage TaskCompletionSource to handle waiting until the data is loaded.

Using IQueryable #

When utilizing IQueryable as your data source provider, commonly seen in Blazor Server applications with Entity Framework Core, you can employ the data.ApplyGridDataProviderRequest(request) method.

This method enables the application of sorting and paging to your data source. Subsequently, you are required to "execute" the queries independently. This necessity arises because our components lack access to cancellable asynchronous methods such as CountAsync and ToListAsync. Employing cancellable methods is particularly critical in scenarios like infinite scrolling.

Refreshing data #

To refresh data in the grid, such as when there's a change in the filter being applied, use the gridComponent.RefreshDataAsync() method. This action informs the grid to request updated data from the DataProvider.

Empty data #

When the DataProvider returns no data, the EmptyDataTemplate is rendered. If you do not set your own content, the <HxGridDefaultEmptyDataTemplateContent /> is used.

Content navigation modes #

HxGrid offers various navigation modes, configurable through the ContentNavigationMode parameter. The default mode is set to Pagination.

Infinite scroll (virtualized) #

Enable continuous scrolling in HxGrid by setting ContentNavigationMode="GridContentNavigationMode.InfiniteScroll". This feature leverages the capabilities, requirements, and limitations of Blazor's Virtualize component.

Load more button #

With ContentNavigationMode.LoadMore you can allow loading additional items with a Load more button.

Customize the button text using LoadMoreButtonText, or design your own navigation interface with LoadMoreTemplate. This customization can be achieved using the context.LoadMoreAsync() method.

It's also possible to combine the Load More button with pagination by opting for GridContentNavigationMode.PaginationAndLoadMore.

Custom paging #

HxGrid uses the HxPager to display pagination, unless a value for the PaginationTemplate parameter is provided. Context information is provided via GridPaginationTemplateContext to your pager.

Context menu #

Add a context menu to the grid using HxContextMenuGridColumn. For additional information, refer to HxContextMenu.

Multiselect with checkboxes #

Enable multi-row selection for users by setting MultiSelectionEnabled="true". The selected items can be accessed via the SelectedDataItems parameter, which is bindable.

Note that SelectedDataItems only includes visible items. By default, items are removed from the selection when they become unrendered (for example, after paging, sorting, etc.). However, this behavior can be modified by setting the PreserveSelection="true" parameter, which ensures that selected items are preserved across data operations such as paging, sorting, or manual invocation of RefreshDataAsync.

The "select/deselect all" checkbox operates only on visible records and adds/removes them from the selection accordingly. Non-visible items (e.g., from other pages) are not affected by this operation.

By default, equality in C# for class instances relies on reference equality, meaning two instances with identical data are not considered equal unless they are the same reference.

• Override Equals: Implement a custom equality logic for your data items (e.g., compare by Id or other key properties).
• Use a record: For data items defined as record, equality is automatically generated by the compiler based on all properties.

This issue typically arises when the grid's DataProvider returns new instances for the same rows during subsequent requests. Since these new instances are not equal to the previously selected ones (based on reference equality), their corresponding rows are not marked as selected in the UI.

Inline-editing #

To enable inline editing, utilize the SelectedDataItem and create an editing interface for such items. This can be accomplished by defining the content of the ItemTemplate within HxGridColumn. Use the SelectedDataItemChanged event to save modifications, or alternatively, include a column with command buttons for this purpose.

Filtering from headers #

Set up filtering for individual columns by integrating your filtering interface into the HeaderTemplate of each column. Then, apply the filters to the data within the DataProvider based on the input values.

Hoverable rows #

The Hover parameter allows you to enable or disable the hover state on rows. By default, the hover state is active when the grid's item selection feature is enabled, unless otherwise specified.

Striped rows #

Use the Striped parameter to add zebra-striping, creating alternating row colors.

Persisting the state #

Persist the grid state by loading or saving the CurrentUserState parameter. The GridUserState class is designed to be serializable.

API #

Parameters #

Methods #

Static properties #

CSS variables #

HxGridColumn #

Grid column.

API #

Parameters #

HxContextMenuGridColumn #

Column for displaying the HxContextMenu in the HxGrid.

API #

Parameters #

HxGridEmptyDataTemplateDefaultContent #

API #

Parameters #