Filter the ListBox Data Using an Input Element

Environment

Product	Progress® Kendo UI® for Angular ListBox

Description

I want to filter the data in the Kendo UI for Angular ListBox. How can I achieve this using an input element?

This KB article also answers the following questions:

• How can I filter items in a Kendo UI ListBox for Angular?
• Is there a way to implement custom filtering outside the ListBox component?

Solution

Currently, the Kendo UI for Angular ListBox does not provide a built-in filtering feature. However, you can achieve this functionality by using an input element and filtering the data manually.

1. Create an input element that will filter the data in the ListBox.

   html

       <input
           kendoTextBox
           [(ngModel)]="filterText"
           (input)="filterData()"
           placeholder="Filter countries..."
       />
       <kendo-listbox
           kendoListBoxDataBinding
           [data]="filteredData"
       >
       </kendo-listbox>

2. Implement the filterData method in the component class to filter the data based on the input value.

   ts

       public data: string[] = [
           'Albania',
           'Andorra',
           'Armenia',
           //...
       ]
       public filterText: string = '';
       public filteredData: string[] = [...this.data];
   
       public filterData(): void {
       if (this.filterText) {
           this.filteredData = this.data.filter((item) =>
           item.toLowerCase().includes(this.filterText.toLowerCase()));
       } else {
           this.filteredData = [...this.data];
       }
   }

Your filtering logic may vary depending on the application requirements.

3.Bind the filtered data to the ListBox to update the view.

The following example demonstrates how to filter the data in the Kendo UI for Angular ListBox using an input element.

Change Theme

Theme

Loading ...

Suggested Links

• ListBox Overview
• API Reference of the ListBoxComponent