MultiSelectComponent

Represents the Kendo UI MultiSelect component for Angular.

Use the MultiSelectComponent to show a dropdown list where users can select multiple items. See example.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselect
      [data]="listItems"
      textField="name"
      valueField="id"
      placeholder="Select items...">
    </kendo-multiselect>
  `
})
export class AppComponent {
  public listItems = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ];
}

Selector

kendo-multiselect

Export Name

Accessible in templates as #kendoMultiSelectInstance="kendoMultiSelect"

Inputs

Name	Type	Default	Description
adaptiveMode	AdaptiveMode	"none"	Controls the adaptive mode behavior of the component. Set to auto to enable adaptive rendering on small screens.
adaptiveSubtitle	string		Sets the subtitle text for the ActionSheet in adaptive mode. No subtitle appears by default.
adaptiveTitle	string		Sets the title text for the ActionSheet in adaptive mode. Uses the component's label text by default.
allowCustom	boolean	false	Allows users to add custom values not present in the data source. Set to true to enable custom value input. This feature is not available in adaptive mode.
autoClose	boolean	true	Controls whether the options list closes after item selection finishes (see example). Set to false to keep the list open while the component has focus.
checkboxes	boolean | MultiSelectCheckableSettings	false	Controls whether checkboxes appear before each item in the popup list. Pass true to enable checkboxes or an object to configure checkbox settings.
clearButton	boolean	true	Controls whether a clear button appears when items are selected. Set to true to show the button that clears all selections.
data	any[]		Sets the data source for the MultiSelect. Provide the data as an array of items.
disabled	boolean	false	Controls the disabled state of the component. When true, sets the component to disabled. To learn how to disable the component in reactive forms, refer to the article on Forms Support.
fillMode	DropDownFillMode	"solid"	Sets the fill mode of the component.
filterable	boolean	false	Enables the filtering functionality of the MultiSelect. Set to true to allow users to filter the data by typing.
inputAttributes	{[key: string]: string}		Sets HTML attributes for the inner input element. You cannot change attributes essential for component functionality.
itemDisabled	ItemDisabledFn		Determines wether the item will be disabled. The function is executed for each data item. The function receives the item as an argument and should return true if the item is disabled.
listHeight	number	200	Sets the height of the options list in the popup. This affects only the list height, not the entire popup container.
loading	boolean		Controls the loading state of the MultiSelect. Set to true to display the loading indicator.
placeholder	string		Sets the placeholder text for the MultiSelect input. When the values are selected, it disappears.
popupSettings	PopupSettings		Configures the popup appearance and behavior. Set properties like animate, width, height, popupClass, and appendTo.
readonly	boolean	false	Controls the read-only state of the component. When true, the component does not allow user input or selection changes.
rounded	DropDownRounded	"medium"	Sets the border radius of the component.
showStickyHeader	boolean		Shows or hides the current group sticky header when using grouped data. By default the sticky header is displayed (see example).
size	DropDownSize	"medium"	Sets the size of the component.
tabindex	number	0	Sets the tabindex attribute of the component.
tagMapper	(tags: any) => any		Sets a function that transforms selected data items into display tags. Use this to customize how selected items appear as tags.
textField	string		Sets the field name that contains the item text in the data objects. Skip this property when your data contains only primitive values. Supports nested property paths like category.name.
value	any[]		Sets the selected values of the MultiSelect. Accepts primitive values (strings, numbers) or complex objects. Use the valuePrimitive property to define the value type. The component ignores selected values that don't exist in the data source.
valueField	string		Sets the field name that contains the item value in the data objects. Skip this property when your data contains only primitive values. Supports nested property paths like category.id.
valueNormalizer	(text: Observable<string>) => Observable<any>		Sets a function that normalizes custom user input into data items. Use this when your data items differ from simple strings.
valuePrimitive	boolean		Controls the type of selected values. Set to true for primitive values or false for object references. When undefined, the component determines the type based on valueField.
virtual	boolean | VirtualizationSettings		Enables virtualization to improve performance with large datasets. Pass true for default settings or an object to configure virtualization.

Fields

Name	Type	Default	Description
isOpen	boolean		Returns the current open state. Returns true if the popup or actionSheet is open.

Events

Name	Type	Description
close	EventEmitter<PreventableEvent>	Fires before the popup closes. You can prevent the popup from closing by calling preventDefault() on the event.
closed	EventEmitter<any>	Fires after the popup closes completely.
filterChange	EventEmitter<string>	Fires when the user types in the input field. Use this event to filter the data source based on user input.
inputBlur	EventEmitter<any>	Fires when the input element inside the MultiSelect loses focus.
inputFocus	EventEmitter<any>	Fires when the user focuses the input element inside the MultiSelect.
blur	EventEmitter<any>	Fires when the MultiSelect component loses focus.
focus	EventEmitter<any>	Fires when the user focuses the MultiSelect component.
open	EventEmitter<PreventableEvent>	Fires before the popup opens. You can prevent the popup from opening by calling preventDefault() on the event.
opened	EventEmitter<any>	Fires after the popup opens completely.
removeTag	EventEmitter<RemoveTagEvent>	Fires before a tag gets removed from the selection. You can prevent tag removal by calling preventDefault() on the event.
valueChange	EventEmitter<any[]>	Fires when the value changes through user interaction or the Clear button. This event does not fire when you change the value programmatically.

Methods

blur
Removes focus from the MultiSelect input element.

focus
Focuses the MultiSelect input element.

focusItemAt
Focuses a specific item in the MultiSelect based on the provided index. Sets the index to -1 to focus the custom item if available. Pass null or an invalid index to remove focus.
Parameters index number

reset
Resets the MultiSelect by clearing the text and value. This method does not trigger the selectionChange and valueChange events.

toggle
Toggles the visibility of the popup or actionSheet (see example). If you use the toggle method to open or close the popup or actionSheet, the respective open and close events will not be fired.
Parameters open? boolean The state of the popup.