How to clear all filters in an Angular kendo grid?

Question

How to clear all filters in a kendo grid by clicking button? Two scenarios: button on the same component and somewhere else..

Answer 1

Bind the Grid's built-in filter property [(filter)] = 'filter'. This would allow access the filters that are currently applied on the component and then clear them programmatically when the button is clicked.

import { Component } from '@angular/core';
import { Product } from './model';
import { sampleProducts } from './products';

@Component({
  selector: 'my-app',
  template: `
        <button kendoButton (click)='onClick()'>Clear All</button>
        <br><br>
        <kendo-grid 
            [kendoGridBinding]="gridData" 
            [filterable]="true"                         
            [height]="350" 
            [(filter)] = 'filter'>
            <kendo-grid-column field="ProductID" title="ID" [width]="40" [filterable]="false"> </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Product Name"> </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Product Name" filter="numeric"> </kendo-grid-column>
            <kendo-grid-column
                field="FirstOrderedOn"
                title="Date"
                format="MM/dd/yyyy"
                filter="date">
            </kendo-grid-column>
        </kendo-grid> 
    `,
})
export class AppComponent {
  public gridData: Product[] = sampleProducts;
  public filter: any = { logic: 'and', filters: [] };

  public onClick() {
    this.filter = { logic: 'and', filters: [] };
  }
}

Example on stackblitz: https://stackblitz.com/edit/angular-dfz6fv-xmo7wq?file=src/app/app.component.ts