Filtering All TreeList Columns

Environment

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.

   Copy Code<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.

   Copy CodefilterAll(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.

   Copy CodefilterAll(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.