All Components

MultiSelectComponent

Represents the Kendo UI MultiSelect component for Angular.

@Component({
selector: 'my-app',
template: `
 <kendo-multiselect [data]="listItems">
 </kendo-multiselect>
`
})
class AppComponent {
  public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
}

Selector

kendo-multiselect

Export Name

Accessible in templates as #kendoMultiSelectInstance="kendoMultiSelect"

Inputs

allowCustom boolean

Specifies whether the MultiSelect allows user-defined values that are not present in the dataset.
The default value is false.

For more information, refer to the article on custom values.

autoClose boolean (default: true)

Controls whether to close the suggestion list of the MultiSelect after the selection of an item.

clearButton boolean

If set to true, renders a button on hovering over the component.
Clicking this button resets the value of the component to an empty array and triggers the change event.

disabled boolean

Sets the disabled state of the component.

filterable boolean

Enables the filtering functionality of the MultiSelect.

loading boolean

Sets and gets the loading state of the MultiSelect.

readonly boolean

Sets the readonly state of the component.

tabindex number

Specifies the tabindex of the component.

textField string

Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.

valueField string

Sets the data item field that represents the item value. If the data contains only primitive values, do not define it.

valuePrimitive boolean

Specifies the type of the selected value.
If set to true, the selected value has to be of the primitive type.

For more details, refer to the section on the
valuePrimitive property.

data any[]

Sets the data of the MultiSelect.

The data has to be provided in an array-like list of items.

placeholder string

The hint which is displayed when the component is empty.
When the values are selected, it disappears.

popupSettings PopupSettings

Configures the popup of the MultiSelect.

The available options are:

  • animate: Boolean—Controls the popup animation. By default, the open and close animations are enabled.
  • width: Number—Sets the width of the popup container. By default, the width of the host element is used.
  • height: Number—Sets the height of the popup container. By default, the height is 200px.
  • popupClass: String—Specifies a list of CSS classes that are used to style the popup.

value any[]

Sets the value of the MultiSelect. It can be either of the primitive (string, numbers) or of the complex (objects) type.
To define the type, use the valuePrimitive option.

All selected values which are not present in the source are ignored.

tagMapper (tags: any) => any

A user-defined callback function which receives an array of selected data items and maps them to an array of tags.

valueNormalizer (text: Observable) => Observable

A user-defined callback function which returns normalized custom values.
Typically used when the data items are different from type string.

import { map } from 'rxjs/operators/map';

@Component({
selector: 'my-app',
template: `
  <kendo-multiselect
      [allowCustom]="true"
      [data]="listItems"
      [textField]="'text'"
      [valueField]="'value'"
      [valueNormalizer]="valueNormalizer"
      (valueChange)="onValueChange($event)"
  >
  </kendo-multiselect>
`
})

class AppComponent {
  public listItems: Array<{ text: string, value: number }> = [
      { text: "Small", value: 1 },
      { text: "Medium", value: 2 },
      { text: "Large", value: 3 }
  ];

  public onValueChange(value) {
      console.log("valueChange : ", value);
  }

  public valueNormalizer = (text$: Observable<string>) => text$.pipe(map((text: string) => {
     return {
        ProductID: Math.floor(Math.random() * (1000 - 100) + 1000), //generate unique valueField
        ProductName: text };
  }));

}

Fields

isOpen boolean

Returns the current open state of the popup.

Events

close EventEmitter

Fires each time the popup is about to close.
This event is preventable. If you cancel it, the popup will remain open.

filterChange EventEmitter

Fires each time the user types in the input field.
You can filter the source based on the passed filtration value.

blur EventEmitter

Fires each time the MultiSelect gets blurred.

focus EventEmitter

Fires each time the user focuses the MultiSelect.

open EventEmitter

Fires each time the popup is about to open.
This event is preventable. If you cancel it, the popup will remain closed.

removeTag EventEmitter<RemoveTagEvent>

Fires each time a tag is about to be removed.
This event is preventable. If you cancel it, the tag will not be removed.

valueChange EventEmitter

Fires each time the value is changed—
when the component is blurred or the value is cleared through the Clear button.
For more details, refer to the example on events.

When the value of the component is changed programmatically through its API or form binding
(either to ngModel or formControl), the valueChange event is not triggered because of
potentially causing a mix-up with the built-in valueChange mechanisms of the ngModel or formControl bindings.

Methods

blur

Blurs the MultiSelect.

focus

Focuses the MultiSelect.

reset

Resets the value of the MultiSelect.
If you use the reset method to clear the value of the component,
the model will not update automatically and the selectionChange and valueChange events will not be fired.

toggle

Toggles the visibility of the popup.
If you use the toggle method to open or close the popup, the respective open and close events will not be fired.

Parameters

open boolean

The state of the popup.

In this article