All Components

MultiSelect Overview

The MultiSelect is a form component that displays a list of options and allows for multiple selections from this list.

It is a richer version of the <select> element and supports item and tag templates, and configurable options for controlling the list behavior.

Basic Usage

The following example demonstrates the MultiSelect in action.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>Favorite sport:</p>
      <kendo-multiselect [data]="listItems" [(ngModel)]="value"></kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<string> = ['Baseball', 'Basketball', 'Cricket', 'Field Hockey', 'Football', 'Table Tennis', 'Tennis', 'Volleyball'];
    public value: any = ['Baseball']
}

Features

The MultiSelect delivers the following features:

Events

On Changing the Value

The valueChange event is triggered when the selected value is changed. If the drop-down list is open, the valueChange event will not fire. To raise the change event when the drop-down list is still open, either blur the component or press ENTER.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            (valueChange)="handleValue($event)"
        >
        </kendo-multiselect>
    </div>
    <div class="example-config">
        <h4>Last 10 calls:</h4>
        <p *ngFor="let call of eventCalls">{{ call.name }}: <strong>{{ call.value | json }}</strong></p>
    </div>
  `
})
class AppComponent {
    public data: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public eventCalls: Array<any> = [];

    public lastCalls() {
        const end = this.eventCalls.length;

        return this.eventCalls.slice(Math.max(0, end - 5), end);
    }

    public handleValue(value) {
        this.eventCalls = this.lastCalls().concat([ { name: 'change', value: value } ]);
    }
}

On Changing the Filter

The filterChange event is raised when something is typed inside the filter input. For more details, refer to the section on filtering.

On Closing and Opening the Drop-Down List

The open and close events are triggered when the visibility state of the drop-down list is about to change. Both events are preventable.

To manually open or close the drop-down list, use the toggle method.

import { ViewChild, Component } from '@angular/core';
import { PreventableEvent, DropDownsModule, MultiSelectComponent } from '@progress/kendo-angular-dropdowns';

@Component({
    selector: 'my-app',
    styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
    template: `
        <div class="example-config">
            <p>Use the button to open and close the drop-down list.</p>     
            <button class="k-button" (click)="toggle()">
                <span *ngIf="opened">Close MultiSelect</span>
                <span *ngIf="!opened">Open MultiSelect</span>
            </button>
        </div>
        <div class="row">
            <div class="col-xs-12 example-col">
                  <p>MultiSelect with prevented open and close.</p>
                  <kendo-multiselect
                      #multiselect
                      [data]="listItems"
                      (open)="onOpen($event)"
                      (close)="onClose($event)">
                  </kendo-multiselect>
            </div>
        </div>
    `
})
class AppComponent {
    @ViewChild('multiselect') public multiselect: MultiSelectComponent;

    public opened: boolean = false;

    public listItems: Array<string> = ['Baseball', 'Basketball', 'Cricket', 'Field Hockey', 'Football', 'Table Tennis', 'Tennis', 'Volleyball'];

    public onOpen(event: PreventableEvent) {
        event.preventDefault(); /* prevent opening */
    }

    public onClose(event: PreventableEvent) {
        event.preventDefault(); /* prevent closing */
    }

    public toggle() {
        this.multiselect.toggle();
        this.opened = this.multiselect.isOpen;
    }
}
In this article