HxGrid

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

Client-side data processing

  • Create a field/property for the data.
  • Set data to this field/property. Do not sort data.
  • Use the extension method ApplyTo (request.ApplyTo(data)) in the DataProvider method to automaticky sort and page data from the field/property. While the result of the DataProvider method is a generic Task, the result must be wrapped using Task.FromResult. It is easy, see the demo source code.
LCIDDisplayNameNameEnglishName
Loading data...

Server side paging & sorting

  • Implement the DataProvider method to delegate the paging & sorting to the server side. The sample code does not have this implementation.
Display NameName
Loading data...

Empty data

Display NameName
Loading data...

Infinite scroll (Virtualized)

You can switch from paging to infinite-scoll by setting ContentNavigationMode="GridContentNavigationMode.InfiniteScroll". Use a Placeholder (<Placeholder>...</Placeholder>) to display content until the item data is available.

Display NameName
Loading data...

Context menu

LCIDDisplayNameNameEnglishName
Loading data...

API

Parameters

Name Type Description
DataProvider GridDataProviderDelegate<object> Data provider for items to render as a table.
SelectionEnabled bool Indicates whether single data item selection is enabled. Selection is performed by click on the item row. Can be combined with multiselection. Default is true.
MultiSelectionEnabled bool Indicates whether multi data items selection is enabled. Selection is performed by checkboxes in the first column. Can be combined with (single) selection. Default is false.
Columns RenderFragment Columns template.
ContextMenu RenderFragment<object> Context menu template.
EmptyDataTemplate RenderFragment Template to render when there is empty Data (but not null).
SelectedDataItem object Selected data item. Intended for data binding.
SelectedDataItems HashSet<object> Selected data items. Intended for data binding.
ContentNavigationMode GridContentNavigationMode? Strategy how data are displayed in the grid (and loaded to the grid).
PageSize int? Page size.
ShowFooterWhenEmptyData bool? Indicates whether to render footer when data are empty.
CurrentUserState GridUserState<object> Current grid state (page, sorting).
InProgress bool? Indicates whether the grid should be displayed as "in progress". When null (default) value is used, grid is "in progress" when retrieving data by data provider.
TableContainerCssClass string Custom CSS class to render with div element wrapping the main table (HxPager is not wrapped in this div element).
TableCssClass string Custom CSS class to render with main table element.
HeaderRowCssClass string Custom CSS class to render with header tr element.
ItemRowCssClass string Custom CSS class to render with data tr element.
ItemRowHeight float? Height of the item row used for infinite scroll calculations. Default value is 41px (row-height of regular table-row within Bootstrap 5 default theme).
ItemRowCssClassSelector Func<object, string> Returns custom CSS class to render with data tr element.
FooterRowCssClass string Custom CSS class to render with footer tr element.
PagerContainerCssClass string Custom CSS class to render with pager wrapping div element.
OverscanCount int? Infinite scroll: Gets or sets a value that determines how many additional items will be rendered before and after the visible region. This help to reduce the frequency of rendering during scrolling. However, higher values mean that more elements will be present in the page.
Default is 50.

Event Callbacks

Name Type Description
SelectedDataItemChanged EventCallback<object> Event fires when selected data item changes. Intended for data binding.
SelectedDataItemsChanged EventCallback<HashSet<object>> Event fires when selected data items changes. Intended for data binding.
CurrentUserStateChanged EventCallback<GridUserState<object>> Event fires when grid state is changed.

Methods

Method Returns Description
RefreshDataAsync() Task Instructs the component to re-request data from its HxGrid.DataProvider. This is useful if external data may have changed.

Static properties

Property Type Description
Defaults GridDefaults Application-wide defaults for the HxGrid.

CSS Variables

Name Description Default
--hx-grid-button-hover-background Grid button background color on hover. #dee2e6
--hx-grid-button-border-radius Grid button border radius. .2rem
--hx-pager-margin Pager margin. 1rem

HxGridColumn

Grid column.

API

Parameters

Name Type Description
Visible bool Indicates whether the column is visible (otherwise the column is hidden).
HeaderText string Header cell text.
HeaderTemplate RenderFragment<GridHeaderCellContext> Header cell template.
HeaderCssClass string Header cell css class.
ItemTextSelector Func<object, string> Returns text for the item.
ItemTemplate RenderFragment<object> Returns template for the item.
ItemCssClass string Returns item css class (not dependent on data).
ItemCssClassSelector Func<object, string> Returns item css class for the specific date item.
PlaceholderTemplate RenderFragment<PlaceholderContext> Placeholder cell template.
FooterText string Footer cell text.
FooterTemplate RenderFragment<GridFooterCellContext> Footer cell template.
FooterCssClass string Footer cell css class.
SortString string Returns column sorting as string. Use to set sorting as a string, ie. to get value to pass to backend. Ignored for client-side sorting.
SortKeySelector Expression<Func<object, IComparable>> Returns column sorting expression for automatic grid sorting. To be used for "strongly typed" setting of sorting, required for client-side sorting. Must be IComparable. Sorting of the column does not support multiple expressions. Create an artifcial property and implement IComparable.
SortDirection SortDirection Initial sorting direction. Default is SortDirection.Ascending.
IsDefaultSortColumn bool Indicates the sorting on the column is default (primary) on the grid. Set true for the column which is to be used for default sorting.
An unhandled error has occurred. Reload 🗙