*
*
* FilterType
|
* Description
|
* Supported Types
|
*
*
* StartsWith
|
* Checks whether a value begins with the specified value.
|
* String
|
*
*
* EndsWith
|
* Checks whether a value ends with specified value.
|
*
String
|
*
*
* Contains
|
* Checks whether a value contains with specified value.
|
*
String
|
*
*
* The default value set to `StartsWith`, all the suggestion items which contain typed characters to listed in the suggestion popup.
*
* @default 'StartsWith'
*/
filterType?: FilterType;
/**
* specifies the z-index value of the component popup element.
*
* @default 1000
*/
zIndex?: number;
/**
* ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
*/
ignoreAccent?: boolean;
/**
* Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
*
* @default 'en-US'
*/
locale?: string;
/**
* 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
*
* @default false
*/
enableGroupCheckBox?: boolean;
/**
* Sets the CSS classes to root element of this component which helps to customize the
* complete styles.
*
* @default null
*/
cssClass?: string;
/**
* Gets or sets the width of the component. By default, it sizes based on its parent.
* container dimension.
*
* @default '100%'
* @aspType string
*/
width?: string | number;
/**
* Gets or sets the height of the popup list. By default it renders based on its list item.
* > For more details about the popup configuration refer to
* [`Popup Configuration`](../../multi-select/getting-started/#configure-the-popup-list) documentation.
*
* @default '300px'
* @aspType string
*/
popupHeight?: string | number;
/**
* Gets or sets the width of the popup list and percentage values has calculated based on input width.
* > For more details about the popup configuration refer to
* [`Popup Configuration`](../../multi-select/getting-started/#configure-the-popup-list) documentation.
*
* @default '100%'
* @aspType string
*/
popupWidth?: string | number;
/**
* Gets or sets the placeholder in the component to display the given information
* in input when no item selected.
*
* @default null
*/
placeholder?: string;
/**
* Accepts the value to be displayed as a watermark text on the filter bar.
*
* @default null
*/
filterBarPlaceholder?: string;
/**
* Gets or sets the additional attribute to `HtmlAttributes` property in MultiSelect,
* which helps to add attribute like title, name etc, input should be key value pair.
*
* {% codeBlock src='multiselect/htmlAttributes/index.md' %}{% endcodeBlock %}
*
* @default {}
*/
htmlAttributes?: { [key: string]: string };
/**
* Accepts the template design and assigns it to the selected list item in the input element of the component.
* For more details about the available template options refer to
* [`Template`](../../multi-select/templates) documentation.
*
* We have built-in `template engine`
* which provides options to compile template string into a executable function.
* For EX: We have expression evolution as like ES6 expression string literals.
*
* @default null
* @aspType string
*/
valueTemplate?: string | Function;
/**
* Accepts the template design and assigns it to the header container of the popup list.
* > For more details about the available template options refer to [`Template`](../../multi-select/templates) documentation.
*
* @default null
* @aspType string
*/
headerTemplate?: string | Function;
/**
* Accepts the template design and assigns it to the footer container of the popup list.
* > For more details about the available template options refer to [`Template`](../../multi-select/templates) documentation.
*
* @default null
* @aspType string
*/
footerTemplate?: string | Function;
/**
* Accepts the template design and assigns it to each list item present in the popup.
* > For more details about the available template options refer to [`Template`](../../multi-select/templates) documentation.
*
* We have built-in `template engine`
* which provides options to compile template string into a executable function.
* For EX: We have expression evolution as like ES6 expression string literals.
*
* @default null
* @aspType string
*/
itemTemplate?: string | Function;
/**
* 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.
*
* {% codeBlock src="multiselect/allow-filtering-api/index.ts" %}{% endcodeBlock %}
*
* {% codeBlock src="multiselect/allow-filtering-api/index.html" %}{% endcodeBlock %}
*
* @default null
*/
allowFiltering?: boolean;
/**
* Specifies the delay time in milliseconds for filtering operations.
*
* @default 300
*/
debounceDelay?: number;
/**
* Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
*
* @default true
*/
isDeviceFullScreen?: boolean;
/**
* 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 changeOnBlur property.
*
* @default true
*/
changeOnBlur?: boolean;
/**
* Allows user to add a
* [`custom value`](../../multi-select/custom-value), the value which is not present in the suggestion list.
*
* @default false
*/
allowCustomValue?: boolean;
/**
* Enables close icon with the each selected item.
*
* @default true
*/
showClearButton?: boolean;
/**
* Sets limitation to the value selection.
* based on the limitation, list selection will be prevented.
*
* @default 1000
*/
maximumSelectionLength?: number;
/**
* Gets or sets the `readonly` to input or not. Once enabled, just you can copy or highlight
* the text however tab key action will perform.
*
* @default false
*/
readonly?: boolean;
/**
* Gets or sets a value that indicates whether the Multiselect popup can be resized.
* When set to `true`, a resize handle appears in the bottom-right corner of the popup,
* allowing the user to resize the width and height of the popup.
*
* @default false
*/
allowResize?: boolean;
/**
* Selects the list item which maps the data `text` field in the component.
*
* @default null
* @aspType string
*/
text?: string | null;
/**
* Selects the list item which maps the data `value` field in the component.
* {% codeBlock src='multiselect/value/index.md' %}{% endcodeBlock %}
*
* @default null
* @isGenericType true
*/
value?: number[] | string[] | boolean[] | object[] | null ;
/**
* Defines whether the object binding is allowed or not in the component.
*
* @default false
*/
allowObjectBinding?: boolean;
/**
* Hides the selected item from the list item.
*
* @default true
*/
hideSelectedItem?: boolean;
/**
* Based on the property, when item get select popup visibility state will changed.
*
* @default true
*/
closePopupOnSelect?: boolean;
/**
* configures visibility mode for component interaction.
*
* - `Box` - selected items will be visualized in chip.
*
* - `Delimiter` - selected items will be visualized in text content.
*
* - `Default` - on `focus in` component will act in `box` mode.
* on `blur` component will act in `delimiter` mode.
*
* - `CheckBox` - The 'checkbox' will be visualized in list item.
*
* {% codeBlock src="multiselect/visual-mode-api/index.ts" %}{% endcodeBlock %}
*
* {% codeBlock src="multiselect/visual-mode-api/index.html" %}{% endcodeBlock %}
*
* @default Default
*/
mode?: visualMode;
/**
* Sets the delimiter character for 'default' and 'delimiter' visibility modes.
*
* @default ','
*/
delimiterChar?: string;
/**
* Sets [`case sensitive`](../../multi-select/filtering/#case-sensitive-filtering)
* option for filter operation.
*
* @default true
*/
ignoreCase?: boolean;
/**
* Allows you to either show or hide the DropDown button on the component
*
* @default false
*/
showDropDownIcon?: boolean;
/**
* Specifies whether to display the floating label above the input element.
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
* @aspType Syncfusion.EJ2.Inputs.FloatLabelType
* @isEnumeration true
*/
floatLabelType?: FloatLabelType;
/**
* Allows you to either show or hide the selectAll option on the component.
*
* @default false
*/
showSelectAll?: boolean;
/**
* Specifies the selectAllText to be displayed on the component.
*
* @default 'select All'
*/
selectAllText?: string;
/**
* Specifies the UnSelectAllText to be displayed on the component.
*
* @default 'select All'
*/
unSelectAllText?: string;
/**
* Reorder the selected items in popup visibility state.
*
* @default true
*/
enableSelectionOrder?: boolean;
/**
* Whether to automatically open the popup when the control is clicked.
*
* @default true
*/
openOnClick?: boolean;
/**
* By default, the typed value is converting into chip or update as value of the component when you press the enter key or select from the popup.
* If you want to convert the typed value into chip or update as value of the component while focusing out the component, then enable this property.
* If custom value is enabled, both custom value and value present in the list are converted into tag while focusing out the component; Otherwise, value present in the list is converted into tag while focusing out the component.
*
* @default false
*/
addTagOnBlur?: boolean;
/**
* Fires each time when selection changes happened in list items after model and input value get affected.
*
* @event change
*/
change?: EmitType