All Components

Filtering

To enable the filtering functionality, set the filterable property to true.

Basic Configuration

On every character input, the component triggers a filterChange event. The event argument contains the typed string value that you can use to filter the source.

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { from } from 'rxjs/observable/from';
import { delay } from 'rxjs/operators/delay';
import { switchMap } from 'rxjs/operators/switchMap';
import { map } from 'rxjs/operators/map';
import { tap } from 'rxjs/operators/tap';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-multiselect
                #list
                [data]="data"
                [filterable]="true"
                textField="text"
                valueField="value"
                placeholder="T-shirt size"
            >
        </kendo-multiselect>
    </div>
  `
})
export class AppComponent {
    @ViewChild("list") list;

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

    public data: Array<{ text: string, value: number }>;

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

    ngAfterViewInit() {
      const contains = value => s => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1;

      this.list.filterChange.asObservable().pipe(
            switchMap(value => from([this.source]).pipe(
                tap(() => this.list.loading = true),
                delay(1000),
                map((data) => data.filter(contains(value)))
            ))
        )
        .subscribe(x => {
            this.data = x;
        });
    }
}

To filter the data after a delay, use a similar implementation. You can toggle the loading property and provide the user with a visual indication of the filtering process.

import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { from } from 'rxjs/observable/from';
import { delay } from 'rxjs/operators/delay';
import { switchMap } from 'rxjs/operators/switchMap';
import { map } from 'rxjs/operators/map';
import { tap } from 'rxjs/operators/tap';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-multiselect
                #list
                [data]="data"
                [filterable]="true"
                textField="text"
                valueField="value"
                placeholder="T-shirt size"
            >
        </kendo-multiselect>
    </div>
  `
})
export class AppComponent {
    @ViewChild("list") list;

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

    public data: Array<{ text: string, value: number }>;

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

    ngAfterViewInit() {
      const contains = value => s => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1;

      this.list.filterChange.asObservable().pipe(
            switchMap(value => from([this.source]).pipe(
                tap(() => this.list.loading = true),
                delay(1000),
                map((data) => data.filter(contains(value)))
            ))
        )
        .subscribe(x => {
            this.data = x;
            this.list.loading = false;
        });
    }
}

Minimum Filter Length

The following example demonstrates how to update the data and open the suggestion box of the MultiSelect only after typing a minimum number of characters.

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

@Component({
  selector: 'my-app',
  template: `
    <p>Focus the MultiSelect and type minimum 3 characters, e.g. "sma"</p>
    <kendo-multiselect
        #multiselect
        [data]="data"
        [filterable]="true"
        [textField]="'text'"
        [valueField]="'value'"
        (filterChange)="handleFilter($event)"
        [placeholder]="'T-shirt size'"
    >
    </kendo-multiselect>
  `
})
class AppComponent {
    @ViewChild('multiselect') public multiselect: MultiSelectComponent;

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

    public data: Array<{ text: string, value: number }>;

    constructor() {
        this.data = [];
    }

    handleFilter(value) {
        if (value.length >= 3) {
            this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
        } else {
            this.multiselect.toggle(false);
        }
    }
}
In this article