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 = [];
}
}
}