Programmatically Managing Filters Inside the Angular Filter Component

Environment

Product

Progress® Kendo UI for Angular Filter

Description

In some scenarios, I need to programmatically control the filters applied to the Kendo UI for Angular Filter. This includes adding new filters, removing specific filters, and clearing all filters, for instance, when implementing a query box over a Grid component.

This Knowledge Base article also answers the following questions:

• How can I add a filter to the Kendo UI for Angular Filter programmatically?
• How do I remove a filter from the Kendo UI for Angular Filter via code?
• What is the method to clear all filters in the Kendo UI for Angular Filter component?

Solution

To programmatically manage filters inside the Kendo UI for Angular Filter, consider the following approaches:

• Using the Built-In Property
• Modifying the Filters Internally

Using the Built-In Property

1. Bind the value property of the Filter component to a variable in your component.

   html

   <kendo-filter #filter [filters]="filters" [value]="filterValue"></kendo-filter>

2. Define methods in your component to add, remove, and clear filters.

   • Adding a filter:

     ts

     public addFilter() {
         const filter = {
           field: 'ProductName',
           operator: 'eq',
           value: 'Chai',
         };
     
         this.filterValue.filters.push(filter);
         ...
     }

   • Removing the first filter:

     ts

     public removeFirstFilter() {
         if (this.filterValue.filters.length > 0) {
           this.filterValue.filters.splice(0, 1);
           ...
         }
     }

   • Clearing all filters:

     ts

     public clearAll() {
         this.filterValue.filters = [];
         ...
     }

3. Create a designated method that applies the filters to the desired component.

The following example demonstrates a Filter component synced with a Kendo UI for Angular Grid.

Change Theme

Theme

Loading ...

Modifying the Filters Internally

1. Obtain a reference to the Filter component.

   ts

   @ViewChild('filter') public filterComponent: FilterComponent;

2. Use the internal currentFilter and filters property to add, remove, and clear filters inside the component.

   • Adding a filter:

     ts

     public addFilter() {
         const filter = {
           field: 'ProductName',
           operator: 'eq',
           value: 'Chai',
         };
     
         this.filterComponent.currentFilter.filters.push(filter);
         ...
     }

   • Removing the first filter:

     ts

     public removeFirstFilter() {
         if (this.filterComponent.currentFilter.filters.length > 0) {
             this.filterComponent.currentFilter.filters.splice(0, 1);
     
         }
     }

   • Clearing all filters:

     ts

     public clearAll() {
         this.filterComponent.currentFilter.filters = [];
         ...
     }

3. Define a method that applies the filters to the desired component.

The following example demonstrates how to internally modify the filters inside the Filter component.

Change Theme

Theme

Loading ...

See Also

• Filter Overview
• Grid Overview
• API Reference of the Filter Component
• API Reference of the Grid Component
• External Filtering in Kendo UI for Angular Grid