All Components
Components

Components / DropDowns / DropDownList

Filtering

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

Basic Configuration

When the filtering functionality is enabled, the component renders a filter input in the drop-down list. 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.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-dropdownlist
            [data]="data"
            [filterable]="true"
            [textField]="'text'"
            [valueField]="'value'"
            (filterChange)="handleFilter($event)"
        >
        </kendo-dropdownlist>
    </div>
  `
})
class AppComponent {
    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();
    }

    handleFilter(value) {
        this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
    }
}

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: `
    <kendo-dropdownlist
        #list
        [data]="data"
        [filterable]="true"
        textField="text"
        valueField="value"
    >
    </kendo-dropdownlist>
  `
})
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 DropDownList only after typing a minimum number of characters.

@Component({
  selector: 'my-app',
  template: `
    <p>Open the DropDownList and type minimum 3 characters, e.g. "sma"</p>
    <kendo-dropdownlist
        [data]="data"
        [filterable]="true"
        [textField]="'text'"
        [valueField]="'value'"
        (filterChange)="handleFilter($event)"
    >
    </kendo-dropdownlist>
  `
})
class AppComponent {
    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.data = [];
        }
    }
}
In this article