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
dataItemEditComponent: {currentEmployee.Id: }

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

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

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
dataItemEditComponent: {currentEmployee.Id: }

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.

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
An unhandled error has occurred. Reload 🗙