MultiSelectModel

23 Sep 202513 minutes to read

Interface for a class MultiSelect

Properties

actionBegin EmitType<Object>

Triggers before fetching data from the remote server.

actionComplete EmitType<Object>

Triggers after data is fetched successfully from the remote server.

actionFailure EmitType<Object>

Triggers when the data fetch request from the remote server fails.

beforeOpen EmitType<Object>

Fires when popup opens before animation.

beforeSelectAll EmitType<ISelectAllEventArgs>

Fires before select all process.

blur EmitType<Object>

Event triggers when the input get focus-out.

change EmitType<MultiSelectChangeEventArgs>

Fires each time when selection changes happened in list items after model and input value get affected.

chipSelection EmitType<Object>

Event triggers when the chip selection.

close EmitType<PopupEventArgs>

Fires when popup close after animation completion.

created EmitType<Object>

Triggers when the component is created.

customValueSelection EmitType<CustomValueEventArgs>

Triggers when the customValue is selected.

dataBound EmitType<Object>

Triggers when data source is populated in the popup list..

destroyed EmitType<Object>

Triggers when the component is destroyed.

filtering EmitType<FilteringEventArgs>

Triggers event,when user types a text in search box.

For more details about filtering, refer to Filtering documentation.

focus EmitType<Object>

Event triggers when the input get focused.

open EmitType<PopupEventArgs>

Fires when popup opens after animation completion.

removed EmitType<RemoveEventArgs>

Fires after the selected item removed from the widget.

removing EmitType<RemoveEventArgs>

Fires before the selected item removed from the widget.

resizeStart EmitType<Object>

Triggers when the user starts resizing the Multiselect popup.

resizeStop EmitType<Object>

Triggers when the user finishes resizing the Multiselect popup.

resizing EmitType<Object>

Triggers continuously while the Multiselect popup is being resized by the user.
This event provides live updates on the width and height of the popup.

select EmitType<SelectEventArgs>

Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.

selectedAll EmitType<ISelectAllEventArgs>

Fires after select all process completion.

tagging EmitType<TaggingEventArgs>

Fires before set the selected item as chip in the component.

For more details about chip customization refer Chip Customization

actionFailureTemplate string|Function

Accepts the template and assigns it to the popup list content of the MultiSelect component
when the data fetch request from the remote server fails.

addTagOnBlur 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.

allowCustomValue boolean

Allows user to add a
custom value, the value which is not present in the suggestion list.

allowFiltering boolean

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.

allowObjectBinding boolean

Defines whether the object binding is allowed or not in the component.

allowResize 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.

changeOnBlur 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.

closePopupOnSelect boolean

Based on the property, when item get select popup visibility state will changed.

cssClass string

Sets the CSS classes to root element of this component which helps to customize the
complete styles.

dataSource { : }[]|DataManager|string[]|number[]|boolean[]

Accepts the list items either through local or remote service and binds it to the MultiSelect component.
It can be an array of JSON Objects or an instance of
DataManager.

debounceDelay number

Specifies the delay time in milliseconds for filtering operations.

delimiterChar string

Sets the delimiter character for ‘default’ and ‘delimiter’ visibility modes.

enableGroupCheckBox boolean

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

enableHtmlSanitizer boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence boolean

Enable or disable persisting MultiSelect component’s state between page reloads.
If enabled, following list of states will be persisted.

  1. value

enableRtl boolean

Enable or disable rendering component in right to left direction.

enableSelectionOrder boolean

Reorder the selected items in popup visibility state.

enableVirtualization boolean

Defines whether to enable virtual scrolling in the component.

enabled boolean

Specifies a value that indicates whether the MultiSelect component is enabled or not.

fields FieldSettingsModel

The fields property maps the columns of the data table and binds the data to the component.

  • text - Maps the text column from data table for each list item.
  • value - Maps the value column from data table for each list item.
  • iconCss - Maps the icon class column from data table for each list item.
  • groupBy - Group the list items with it’s related items by mapping groupBy field. 
    <input type="text" tabindex="1" id="list"> </input>
    let customers: MultiSelect = new MultiSelect({
   dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
   query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
   fields: { text: 'ContactName', value: 'CustomerID' },
   placeholder: 'Select a customer'
});
customers.appendTo("#list");

filterBarPlaceholder string

Accepts the value to be displayed as a watermark text on the filter bar.

filterType FilterType

Determines on which filter type, the MultiSelect component needs to be considered on search action.
The FilterType and its supported data types are

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.

floatLabelType FloatLabelType

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.

footerTemplate 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 documentation.

groupTemplate string|Function

Accepts the template design and assigns it to the group headers present in the MultiSelect popup list.

headerTemplate 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 documentation.

hideSelectedItem boolean

Hides the selected item from the list item.

htmlAttributes { : }

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.

 <input type="text" id="country">
import { MultiSelect } from '@syncfusion/ej2-dropdowns';

let countries: { [key: string]: Object; }[] = [
  { Name: "Australia", Code: "AU" },
  { Name: "Bermuda", Code: "BM" },
  { Name: "Canada", Code: "CA" },
  { Name: "Cameroon", Code: "CM" },
  { Name: "Denmark", Code: "DK" }
];
// initialize MultiSelect component
let multiselect: MultiSelect = new MultiSelect({
  //set the local data to dataSource property
  dataSource: countries,
  // map the appropriate columns to fields property
  fields: { text: 'Name', value: 'Code' },
  htmlAttributes: { name: "country", placeholder: "Select a country", title: "MultiSelect DropDown" }
});
multiselect.appendTo('#country');

ignoreAccent boolean

ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.

ignoreCase boolean

Sets case sensitive
option for filter operation.

isDeviceFullScreen boolean

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.

itemTemplate 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 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.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

maximumSelectionLength number

Sets limitation to the value selection.
based on the limitation, list selection will be prevented.

mode visualMode

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.

noRecordsTemplate string|Function

Accepts the template design and assigns it to popup list of MultiSelect component
when no data is available on the component.

openOnClick boolean

Whether to automatically open the popup when the control is clicked.

placeholder string

Gets or sets the placeholder in the component to display the given information
in input when no item selected.

popupHeight 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 documentation.

popupWidth 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 documentation.

query Query

Accepts the external Query
which will execute along with the data processing in MultiSelect.

readonly boolean

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.

selectAllText string

Specifies the selectAllText to be displayed on the component.

showClearButton boolean

Enables close icon with the each selected item.

showDropDownIcon boolean

Allows you to either show or hide the DropDown button on the component

showSelectAll boolean

Allows you to either show or hide the selectAll option on the component.

sortOrder SortOrder

Specifies the sortOrder to sort the data source. The available type of sort orders are

  • None - The data source is not sorting.
  • Ascending - The data source is sorting with ascending order.
  • Descending - The data source is sorting with descending order.

text string|null

Selects the list item which maps the data text field in the component.

unSelectAllText string

Specifies the UnSelectAllText to be displayed on the component.

value number[]|string[]|boolean[]|object[]|null

Selects the list item which maps the data value field in the component.

 <input type="text" id="country">
import { MultiSelect } from '@syncfusion/ej2-dropdowns';

let countries: { [key: string]: Object; }[] = [
  { Name: "Australia", Code: "AU" },
  { Name: "Bermuda", Code: "BM" },
  { Name: "Canada", Code: "CA" },
  { Name: "Cameroon", Code: "CM" },
  { Name: "Denmark", Code: "DK" }
];
// initialize MultiSelect component
let multiselect: MultiSelect = new MultiSelect({
  //set the local data to dataSource property
  dataSource: countries,
  // map the appropriate columns to fields property
  fields: { text: 'Name', value: 'Code' },
  // set the placeholder to MultiSelect input element
  placeholder: 'Select a Country',
  value: ["CM"]
});
multiselect.appendTo('#country');

valueTemplate string|Function

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 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.

width string|number

Gets or sets the width of the component. By default, it sizes based on its parent.
container dimension.

zIndex number

specifies the z-index value of the component popup element.