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

The valueChange event is triggered when the value is changed.

The selectionChange event is triggered when the item selection is changed.

The filterChange event fires if the filterable property is set to true and the user types inside the filter input. For more details, refer to the section on filtering.

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

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselect [data]="data"
      [filterable]="true"
      (valueChange)="valueChange($event)"
      (selectionChange)="selectionChange($event)"
      (filterChange)="filterChange($event)"
      (open)="open()"
      (close)="close()"
      (focus)="focus()"
      (blur)="blur()"
    >
    </kendo-multiselect>
    <event-log title="Event log" [events]="events">
    </event-log>
  `
})

export class AppComponent {
    public events: string[] = [];
    public source: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
    public data: Array<string>;

    constructor() {
        this.data = this.source.slice();
    }

    public valueChange(value: any): void {
        this.log("valueChange", value);
    }

    public selectionChange(value: any): void {
        this.log("selectionChange", value);
    }

    public filterChange(filter: any): void {
        this.log("filterChange", filter);
        this.data = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
    }

    public open(): void {
        this.log("open");
    }

    public close(): void {
        this.log("close");
    }

    public focus(): void {
        this.log("focus");
    }

    public blur(): void {
        this.log("blur");
    }

    private log(event: string, arg: any): void {
        this.events.push(`${event}`);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent }   from './app.component';
import { EventLogComponent }   from './event-log.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent,
    EventLogComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}
import { AppModule } from './ng.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article