I'm working with angular and kendo, I use kendo combobox to display some value as here.
I want to hide the popup when no data match, but I cannot do that.
Please help me.
you have to use [combobox.toggle()][1]
in filter function when data.length
is zero and combobox.isOpen
is false
Template
<div class="example-wrapper">
<kendo-combobox
#combo
[data]="data"
[textField]="'text'"
[valueField]="'value'"
[filterable]="true"
(filterChange)="handleFilter($event)"
[placeholder]="'T-shirt size'"
>
<ng-template kendoComboBoxNoDataTemplate>
No data found!
</ng-template>
</kendo-combobox>
</div>
component
export class AppComponent {
@ViewChild('combo') combo:ComboBoxComponent
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);
if(this.data.length == 0 && this.combo.isOpen){
this.combo.toggle()
}
}
}