Interface for a class MultiSelect
EmitType<Object>
Triggers before fetching data from the remote server.
EmitType<Object>
Triggers after data is fetched successfully from the remote server.
EmitType<Object>
Triggers when the data fetch request from the remote server fails.
EmitType<Object>
Fires when popup opens before animation.
EmitType<Object>
Event triggers when the input get focus-out.
EmitType<MultiSelectChangeEventArgs>
Fires each time when selection changes happened in list items after model and input value get affected.
EmitType<Object>
Event triggers when the chip selection.
Fires when popup close after animation completion.
EmitType<Object>
Triggers when the component is created.
EmitType<CustomValueEventArgs>
Triggers when the customValue
is selected.
EmitType<Object>
Triggers when data source is populated in the popup list..
EmitType<Object>
Triggers when the component is destroyed.
Triggers event,when user types a text in search box.
For more details about filtering, refer to
Filtering
documentation.
EmitType<Object>
Event triggers when the input get focused.
Fires when popup opens after animation completion.
Fires after the selected item removed from the widget.
Fires before the selected item removed from the widget.
Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
Fires after select all process completion.
Fires before set the selected item as chip in the component.
For more details about chip customization refer
Chip Customization
string
Accepts the template and assigns it to the popup list content of the component when the data fetch request from the remote server fails.
boolean
Allows user to add a
custom value
, the value which is not present in the suggestion list.
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.
boolean
Based on the property, when item get select popup visibility state will changed.
string
Sets the CSS classes to root element of this component which helps to customize the complete styles.
Object
[]
| DataManager
| string[]
| number[]
| boolean[]
Accepts the list items either through local or remote service and binds it to the component.
It can be an array of JSON Objects or an instance of
DataManager
.
string
Sets the delimiter character for ‘default’ and ‘delimiter’ visibility modes.
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
boolean
Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.
boolean
Enable or disable rendering component in right to left direction.
boolean
Reorder the selected items in popup visibility state.
boolean
Specifies a value that indicates whether the component is enabled or not.
The fields
property maps the columns of the data table and binds the data to the component.
groupBy - Group the list items with it’s related items by mapping groupBy field.
<input type="text" tabindex="1" id="list"> </input>
let customers: DropDownList = new DropDownList({
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");
string
Accepts the value to be displayed as a watermark text on the filter bar.
FloatLabelType
Specifies whether to display the floating label above the input element. Possible values are:
string
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.
string
Accepts the template design and assigns it to the group headers present in the popup list.
string
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.
boolean
Hides the selected item from the list item.
Object
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.
boolean
ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
boolean
Sets case sensitive
option for filter operation.
string
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-intemplate engine
which provides options to compile template string into a executable function. For EX: We have expression evolution as like ES6 expression string literals.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
number
Sets limitation to the value selection. based on the limitation, list selection will be prevented.
string
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. string
Accepts the template design and assigns it to popup list of component when no data is available on the component.
boolean
Whether to automatically open the popup when the control is clicked.
string
Gets or sets the placeholder in the component to display the given information in input when no item selected.
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.
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
Accepts the external Query
which will execute along with the data processing.
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.
string
Specifies the selectAllText to be displayed on the component.
boolean
Enables close icon with the each selected item.
boolean
Allows you to either show or hide the DropDown button on the component
boolean
Allows you to either show or hide the selectAll option on the component.
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. string
Selects the list item which maps the data text
field in the component.
string
Specifies the UnSelectAllText to be displayed on the component.
number[]
| string[]
| boolean[]
Selects the list item which maps the data value
field in the component.
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
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.
string
| number
Gets or sets the width of the component. By default, it sizes based on its parent. container dimension.
number
specifies the z-index value of the component popup element.