HxListLayout #
Provides a unified layout for data presentation components and associated filtering controls.
This component orchestrates the interaction between filter controls and the data presentation component.
The data list is typically implemented using a HxGrid component. Filters are displayed
in a HxOffcanvas component, while filter values are shown as HxChipList.
Additionally, it supports predefined named views for quick switching between different filter configurations
and other features such as a title, search box, and commands.
Basic usage #
Employees
Filter
Name | Phone | Salary | Position | Location | |
|---|---|---|---|---|---|
Note: The demos on this page use DemoDataService, in-memory simulation of a simple data store.
Find the implementation on GitHub.
Infinite scroll with sticky header #
Enable continuous scrolling in HxGrid by setting ContentNavigationMode="GridContentNavigationMode.InfiniteScroll".
This feature leverages the capabilities, requirements, and limitations of Blazor's
Virtualize component.
For optimal virtualization, specify ItemRowHeight; the default is 41 pixels, aligning with Bootstrap's standard table row height.
Additionally, defining the container element's height is essential for virtualization functionality.
To implement a sticky header, use HeaderRowCssClass="sticky-top".
This feature integrates smoothly with HxListLayout, thanks to pre-included CSS adjustments.
Employees
Name | Phone | Salary | Position | Location |
|---|---|---|---|---|
Title template #
You can customize the title using the TitleTemplate parameter.
Employees NEW
Name | Phone | Salary | Position | Location |
|---|---|---|---|---|
Search #
You can add a search input to the toolbar using the SearchTemplate parameter.
Consider using BindEvent.OnInput and the Debouncer to avoid unnecessary requests to the server.
Employees
Filter
Name | Phone | Salary | Position | Location |
|---|---|---|---|---|
Named views #
Predefined named views allow quick switching between different filter configurations.
Filter
Name | Phone | Salary | Position | Location |
|---|---|---|---|---|
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| CardSettings | CardSettings |
Settings for the wrapping HxCard. |
| CommandsTemplate | RenderFragment |
|
| CssClass | string |
Additional CSS classes for the wrapping div. |
| DataTemplate | RenderFragment |
|
| DetailTemplate | RenderFragment |
|
| FilterModel | TModel |
|
| FilterModelChanged | EventCallback<TModel> |
|
| FilterOffcanvasSettings | OffcanvasSettings |
Settings for the HxOffcanvas with the filter. |
| FilterOpenButtonSettings | ButtonSettings |
Settings for the HxButton opening the filtering offcanvas. |
| FilterSubmitButtonSettings | ButtonSettings |
Settings for the HxButton submitting the filter. |
| FilterTemplate | RenderFragment<TModel> |
|
| NamedViews | IEnumerable<NamedView<TModel>> |
Represents the collection of Named Views available for selection. Each Named View defines a pre-set filter configuration that can be applied to the data. |
| SearchTemplate | RenderFragment |
|
| SelectedNamedView | NamedView<TModel> |
Selected named view (highlighted in the list with .active CSS class). |
| SelectedNamedViewChanged | EventCallback<NamedView<TModel>> |
|
| Settings | ListLayoutSettings |
Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters). |
| Title | string |
Title of the component.
If TitleFromNamedView is true and SelectedNamedView is not null, the component's title displays the name of the currently selected Named View. |
| TitleFromNamedView | bool |
Indicates whether the name of the selected Named View (SelectedNamedView) is automatically used as title.
If true, the component's title changes to match the name of the currently selected Named View.
Useful for dynamic title updates based on user selections from predefined views.
The default value is true. |
| TitleTemplate | RenderFragment |
Title of the component (in form of RenderFragment).
If TitleFromNamedView is true and SelectedNamedView is not null, the component's title displays the name of the currently selected Named View. |
Methods #
| Method | Returns | Description |
|---|---|---|
| HideFilterOffcanvasAsync() | Task |
Closes the filter offcanvas. |
| ShowFilterOffcanvasAsync() | Task |
Opens the filter offcanvas. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | ListLayoutSettings |
Application-wide defaults for HxListLayout and derived components. |
CSS variables #
| Name | Description | Default |
|---|---|---|
| --hx-list-layout-table-font-size | Table font size. | .875rem |
| --hx-list-layout-header-gap | Gap between elements in HxListLayout header. | .5rem |