Persisting the DropDownList Filter Value оn Blur

Environment

Product

Progress® Kendo UI® for Angular DropDownList

Description

How can I persist the filter value of the Kendo UI for Angular DropDownList?

Solution

By default, the filter value is cleared when the DropDownList component is blurred and the popup is closed. To persist the filter criteria in this case:

1. Listen for the filterChange event, as demonstrated in the article about filtering the DropDownList and save the filter value to a custom field.

   ts

   public filterValue = '';
   public ngAfterViewInit(): void {
       this.list.filterChange
           .asObservable()
           .pipe(
               switchMap((value) =>
                   ...
                   this.filterValue = value;
               )
           )
   }

2. Handle the open event of the component:

   html

   <kendo-dropdownlist #list (open)="onOpen()" ...></kendo-dropdownlist>

3. To display the last inserted filter value and filter the DropDownList records, get the filter input control by using the querySelector method. Then, get its value to the stored filter criteria. The whole logic must be executed inside the NgZone onStable event.

   ts

   public onOpen(): void {
       this.zone.onStable.pipe(take(1)).subscribe(() => {
           const filterInput = document.querySelector(
             '.k-popup .k-list-filter input'
           ) as HTMLInputElement;
   
           filterInput.value = this.filterValue;
           this.data = [...this.data.filter(this.contains(this.filterValue))];
       });
   }

The following example demonstrates how to implement the suggested approach and persist the filter value of the DropDownList when the component is blurred.

Change Theme

Theme

Loading ...