Filtering All TreeList Columns

Environment

Product

Progress® Kendo UI TreeList

Description

How can I filter all the columns of the Kendo UI for Angular TreeList?

Solution

By default, the Kendo UI for Angular TreeList component allows you to filter each of its columns separately by applying various filtering conditions.

To filter all or multiple columns of the TreeList by using an external TextBox component:

1. Handle the built-in valueChange event of the TextBox component.

   html

   <kendo-textbox (valueChange)="filterAll($event)" ...></kendo-textbox>

2. In the event handler, create a custom CompositeFilterDescriptor for the columns that need to be filtered and update the TreeList's filter property.

   ts

   filterAll(e) {
       this.filter = {
           logic: 'or',
           filters: [
               {
                   field: 'name',
                   operator: 'contains',
                   value: e,
               },
               {
                   field: 'type',
                   operator: 'contains',
                   value: e,
               },
               // ... other columns    
           ],
       };
       this.loadData();
   }

3. Finally, reload the TreeList's data with the new CompositeFilterDescriptor. For more details about the implementation, check the fetchChildren function code in the example at the end of the article.

   ts

   filterAll(e) {
       ...
       this.loadData();
   }
   
   private loadData(): void {
       this.cache.clear();
       this.rootData = this.fetchChildren();
   }

The following example demonstrates how to filter all TreeList columns from an outer input field.

Change Theme

Theme

Loading ...