Class SfMultiSelect<TValue, TItem>
The MultiSelect component contains a list of predefined values from which a multiple value can be chosen.
Inherited Members
Namespace: Syncfusion.Blazor.DropDowns
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfMultiSelect<TValue, TItem> : SfDropDownBase<TItem>, IDropDowns
Type Parameters
Name | Description |
---|---|
TValue | Specifies the value type. |
TItem | Specifies the type of SfMultiSelect. |
Constructors
SfMultiSelect()
Declaration
public SfMultiSelect()
Properties
AllowCustomValue
Allows user to add a Custom value the value which is not present in the suggestion list.
Declaration
public bool AllowCustomValue { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
AllowFiltering
To enable the filtering option in this component.
Filter action performs when type in search box and collect the matched item through `Filtering` event.
If searching character does not match, `NoRecordsTemplate` property value will be shown.
Declaration
public bool AllowFiltering { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
CssClass
Specifies the CSS class name that can be appended with the root element of the MultiSelect. One or more custom CSS classes can be added to a MultiSelect.
Declaration
public string CssClass { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the CSS class string separated by space to customize the appearance of component. |
DelimiterChar
Sets the delimiter character for 'default' and 'delimiter' visibility modes.
Declaration
public string DelimiterChar { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is |
EnableChangeOnBlur
By default, the MultiSelect component fires the Change event while focus out the component.
If you want to fires the Change event on every value selection and remove, then disable the EnabledChangeOnBlur property.
Declaration
public bool EnableChangeOnBlur { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The default value of EnableChangeOnBlur is true, which means the MultiSelect component fires the Change event while focus out the component. |
EnableCloseOnSelect
Based on the property, when item get select popup visibility state will changed.
Declaration
public bool EnableCloseOnSelect { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Enabled
Specifies a boolean value that indicates whether the component allows the user to interact with it.
Declaration
public bool Enabled { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableGroupCheckBox
Specifies a boolean value that indicates the whether the grouped list items are allowed to check by checking the group header in checkbox mode.
By default, there is no checkbox provided for group headers.
This property allows you to render checkbox for group headers and to select all the grouped items at once.
Declaration
public bool EnableGroupCheckBox { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnablePersistence
Enable or disable persisting component's state between page reloads.
If enabled, the `Value` state will be persisted.
- Value
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableRtl
Enable or disable rendering component in right to left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableSelectionOrder
Reorder the selected items in popup visibility state.
Declaration
public bool EnableSelectionOrder { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableVirtualization
The Virtual Scrolling feature is used to display a large amount of data that you require without buffering the entire load of a huge database records in the DropDowns, that is, when scrolling, the datamanager request is sent to fetch some amount of data from the server dynamically. To achieve this scenario with DropDowns, set the EnableVirtualization to true.
Declaration
public bool EnableVirtualization { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
FilterBarPlaceholder
Accepts the value to be displayed as a watermark text on the filter bar.
Declaration
public string FilterBarPlaceholder { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
FloatLabelType
Specifies the floating label behavior of the MultiSelect that the placeholder text floats above the MultiSelect based on the following values.
Possible values are:
- NeverNever floats the label in the MultiSelect when the placeholder is available.
- AlwaysThe floating label always floats above the MultiSelect.
- AutoThe floating label floats above the MultiSelect after focusing it or when enters the value in it.
Declaration
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type | Description |
---|---|
FloatLabelType | The default value of FloatLabelType is Auto, which means the floating label floats above the MultiSelect after focusing it or when entering a value in it. |
FooterTemplate
Accepts the template design and assigns it to the footer container of the popup list.
Declaration
public RenderFragment FooterTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment |
HeaderTemplate
Accepts the template design and assigns it to the header container of the popup list.
Declaration
public RenderFragment HeaderTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment |
HideSelectedItem
Hides the selected item from the list item.
Declaration
public bool HideSelectedItem { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
HtmlAttributes
You can add the additional input attributes such as disabled, value, and more to the root element.
If you configured both the property and equivalent input attribute, then the component considers the property value.
Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.Dictionary<System.String, System.Object> | A dictionary of additional HTML attributes for the root element of the component. |
ID
Specifies the id of the MultiSelect component.
Declaration
public string ID { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
InputAttributes
You can add the additional input attributes such as disabled, value, and more to the root element.
If you configured both the property and equivalent input attribute, then the component considers the property value.
Declaration
public Dictionary<string, object> InputAttributes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.Dictionary<System.String, System.Object> | A dictionary of additional input attributes for the root element of the component. |
ItemsCount
The data can be fetched in popup based on ItemsCount, when enabled the EnableVirtualization.
Declaration
public int ItemsCount { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | Accepts an integer value that represents fetched data in popup based on items count. The default value is |
MaximumSelectionLength
Sets limitation to the value selection.
Based on the limitation, list selection will be prevented.
Declaration
public int MaximumSelectionLength { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | An integer value representing the maximum number of items that can be selected in the list. The default value is |
Mode
configures visibility mode for component interaction.
Declaration
public VisualMode Mode { get; set; }
Property Value
Type | Description |
---|---|
VisualMode | Specifies the mode that determines the visibility and interactivity of the component. |
OpenOnClick
Whether to automatically open the popup when the control is clicked.
Declaration
public bool OpenOnClick { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Placeholder
Specifies the text that is shown as a hint or placeholder until the user focuses or enter a value in MultiSelect. The property is depending on the FloatLabelType property.
Declaration
public string Placeholder { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
PopupHeight
Gets or sets the height of the popup list. By default, it renders based on its list item.
Declaration
public string PopupHeight { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is |
PopupWidth
Gets or sets the width of the popup list and percentage values has calculated based on input width.
Declaration
public string PopupWidth { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is |
Readonly
Specifies the boolean value whether the MultiSelect allows the user to change the value.
Declaration
public bool Readonly { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
SelectAllText
Specifies the selectAllText to be displayed on the component.
Declaration
public string SelectAllText { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
ShowClearButton
Enables close icon with the each selected item.
Declaration
public bool ShowClearButton { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
ShowDropDownIcon
Allows you to either show or hide the DropDown button on the component.
Declaration
public bool ShowDropDownIcon { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
ShowSelectAll
Allows you to either show or hide the selectAll option on the component.
Declaration
public bool ShowSelectAll { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
TabIndex
Specifies the tab order of the DropDownList component.
Declaration
public int TabIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | An integer value representing the tab index of MultiSelect DropDown component. |
Text
Selects the list item which maps the data Text
field in the component.
Declaration
public string Text { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
UnSelectAllText
Specifies the UnSelectAllText to be displayed on the component.
Declaration
public string UnSelectAllText { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
Value
Selects the list item which maps the data Value
field in the component.
Declaration
public TValue Value { get; set; }
Property Value
Type | Description |
---|---|
TValue | The current value of the multi select component. |
ValueChanged
Specifies the callback to trigger when the value changes.
Declaration
public EventCallback<TValue> ValueChanged { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<TValue> |
ValueExpression
Specifies the expression for defining the value of the bound.
Declaration
public Expression<Func<TValue>> ValueExpression { get; set; }
Property Value
Type | Description |
---|---|
System.Linq.Expressions.Expression<System.Func<TValue>> |
ValueTemplate
Accepts the template design and assigns it to the selected list item in the input element of the component.
Declaration
public RenderFragment<TItem> ValueTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<TItem> |
Width
Gets or sets the width of the component. By default, it sizes based on its parent. container dimension.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is |
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
ClearAsync()
Allows you to clear the selected values from the MultiSelect component.
Declaration
public Task ClearAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |
FilterAsync(IEnumerable<TItem>, Query, FieldSettingsModel)
To filter the data from given data source by using query.
Declaration
public Task FilterAsync(IEnumerable<TItem> dataSource, Query query = null, FieldSettingsModel fields = null)
Parameters
Type | Name | Description |
---|---|---|
System.Collections.Generic.IEnumerable<TItem> | dataSource | Specifies the data source. |
Query | query | Specifies the query. |
FieldSettingsModel | fields | Specifies the fields. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |
FilteringAction(IEnumerable<TItem>, Query, FieldSettingsModel)
Task which specifies the filtering action.
Declaration
protected Task FilteringAction(IEnumerable<TItem> dataSource, Query query, FieldSettingsModel fields)
Parameters
Type | Name | Description |
---|---|---|
System.Collections.Generic.IEnumerable<TItem> | dataSource | Specifies the data source. |
Query | query | Specifies the query. |
FieldSettingsModel | fields | Specifies the fields. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |
FocusAsync()
Sets the focus to the MultiSelect component for interaction.
Declaration
public Task FocusAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task |
FocusOutAsync()
Remove the focus from the MultiSelect component, if the component is in focus state.
Declaration
public Task FocusOutAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task |
GetDataByValueAsync(TValue)
Gets the array of data Object that matches the given array of values.
Declaration
public Task<List<TItem>> GetDataByValueAsync(TValue dataValue)
Parameters
Type | Name | Description |
---|---|---|
TValue | dataValue | Specifies the value(s). |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.List<TItem>> | Task. |
GetItemsAsync()
Gets all the list items bound on this component.
Declaration
public Task<IEnumerable<TItem>> GetItemsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<TItem>> | Task. |
HidePopupAsync()
Hides the popup if it is in an open state.
Declaration
public Task HidePopupAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |
HideSpinner()
Hides the spinner loader.
Declaration
public Task HideSpinner()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task |
RefreshDataAsync()
Refreshes the popup list items. The method is useful if the popup list item changed externally.
Declaration
public Task RefreshDataAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
SelectAllAsync(Boolean)
Based on the state parameter, entire list item will be selected/deselected.
parameter
- TrueSelects entire list items.
- FalseUn Selects entire list items.
Declaration
public Task SelectAllAsync(bool state)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | state | Specifies the state. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |
ShowPopupAsync()
Opens the popup that displays the list of items.
Declaration
public Task ShowPopupAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |
ShowSpinner()
Shows the spinner loader.
Declaration
public Task ShowSpinner()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task |
UpdateValue()
Task which updates the value.
Declaration
protected Task UpdateValue()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Task. |