HxMultiSelect #
MultiSelect. Unlike a normal select, multiselect allows the user to select multiple options at once.
Basic usage #
Selected employees (IDs):
Filtering #
You can enable filtering by setting AllowFiltering="true".
You can use the FilterEmptyResultTemplate to customize the message displayed when no items are found.
Selected employees (IDs):
Custom filtering #
You can customize filtering by setting FilterPredicate to a delegate that returns bool and accepts two parameters: TItem and string (filter).
You can use the FilterEmptyResultTemplate to customize the content displayed when no items are found.
Selected employees (IDs):
Select all #
You can enable the "-select all-" option by setting AllowSelectAll="true".
You can customize the text of the "-select all-" option by setting SelectAllText.
Selected employees (IDs):
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | IReadOnlyDictionary<string, object> |
A collection of additional attributes that will be applied to the created element. |
| AllowFiltering | bool? |
Enables filtering capabilities. |
| AllowSelectAll | bool? |
Enables select all capabilities. |
| AutoSort | bool |
When set to false, items will no longer be sorted.Default value is true. |
| ChipTemplate | RenderFragment |
Chip template. |
| ClearFilterOnHide | bool? |
When enabled the filter will be cleared when the dropdown is closed. |
| CssClass | string |
Custom CSS class to render with wrapping div. |
| Data | IEnumerable<TItem> |
Items to display. |
| DisplayName | string |
Gets or sets the display name for this field. This value is used when generating error messages when the input value fails to parse correctly. |
| EmptyText | string |
Text to display when the selection is empty (the Value property is null or empty). |
| Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState.
When value is false, input is rendered as disabled.
To set multiple controls as disabled use |
| FilterClearIcon | IconBase |
Icon displayed in filter input for clearing the filter. |
| FilterEmptyResultTemplate | RenderFragment |
Template that defines what should be rendered in case of empty items. |
| FilterEmptyResultText | string |
Text to display when the filtered results list is empty and when not using FilterEmptyResultTemplate. |
| FilterPredicate | Func<TItem, string, bool> |
Defines a custom filtering predicate to apply to the list of items. If not specified, the default behavior filters items based on whether the item text (obtained via TextSelector) contains the filter query string. |
| FilterSearchIcon | IconBase |
Icon displayed in filter input for searching the filter. |
| GenerateChip | bool |
When true, HxChipGenerator is used to generate chip item(s). Default is true. |
| Hint | string |
Hint to render after input as form-text. |
| HintTemplate | RenderFragment |
Hint to render after input as form-text. |
| InputCssClass | string |
Custom CSS class to render with the input element. |
| InputGroupEndTemplate | RenderFragment |
Input-group at the end of the input. |
| InputGroupEndText | string |
Input-group at the end of the input. |
| InputGroupStartTemplate | RenderFragment |
Input-group at the beginning of the input. |
| InputGroupStartText | string |
Input-group at the beginning of the input. |
| InputSize | InputSize? |
Size of the input. |
| InputText | string |
Text to display in the input (default is a list of selected values). |
| InputTextSelector | Func<IEnumerable<TItem>, string> |
Function to build the text to be displayed in the input from selected items (default is a list of selected values). |
| Label | string |
Label text. |
| LabelCssClass | string |
Custom CSS class to render with the label. |
| LabelTemplate | RenderFragment |
Label content. |
| NullDataText | string |
Text to display when Data is null. |
| SelectAllText | string |
Text to display for the select all dropdown option. |
| Settings | MultiSelectSettings |
Set of settings to be applied to the component instance (overrides HxMultiSelect.Defaults, overridden by individual parameters). |
| SortKeySelector | Func<TItem, IComparable> |
Selects value for items sorting. When not set, TextSelector property will be used.If you need complex sorting, pre-sort data manually or create a custom comparable property. |
| TextSelector | Func<TItem, string> |
Selects text to display from item. When not set, ToString() is used. |
| ValidationMessageMode | ValidationMessageMode? |
Specifies how the validation message should be displayed. Default is ValidationMessageMode.Regular, you can override application-wide default for all inputs in HxInputBase.Defaults. |
| Value | List<TValue> |
Value of the input. This should be used with two-way binding. |
| ValueChanged | EventCallback<List<TValue>> |
A callback that updates the bound value. |
| ValueExpression | Expression<Func<List<TValue>>> |
An expression that identifies the bound value. |
| ValueSelector | Func<TItem, TValue> |
Selects value from item. Not required when TValue is same as TItem. |
Methods #
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask |
Gives focus to the input element. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | MultiSelectSettings |
Application-wide defaults for the HxMultiSelect. |
CSS variables #
| Name | Description | Default |
|---|---|---|
| --hx-multi-select-dropdown-menu-height | Height of the dropdown menu. | 300px |
| --hx-multi-select-background-color | Background color of the dropdown menu. | var(--bs-body-bg) |
| --hx-multi-select-filter-input-icon-opacity | Opacity of the filter input icon. | .25 |