How to subscribe to clear filter event in a kendo grid for Angular?

Question

If user clear filter in the top of the grid column, by clicking "Clear" button, then I want UI to do some other action (clear some values in the search bar for example). How to find/subscribe to such event in the kendo UI grid for Angular?

Answer 1

In your component's HTML, add an event binding to the filterChange event (documentation). Then in your component's TypeScript, add the reference to the filterChange event. Finally, store a variable to keep track of the column's current filter value and check when it goes from something to nothing.

For example:

<kendGrid (filterChange)="kendoGridFilterChange($event)" ...>

private firstOrderedOnFilterValue: Date;
kendoGridFilterChange(e: CompositeFilterDescriptor): void {
  if (e.filters) {
    const firstOrderedOnFilter = e.filters.find(filter => filter.field === 'FirstOrderedOn');
    firstOrderedOnFilterValue = firstOrderedOnFilter.value;
  } else {
    if (firstOrderedOnFilterValue) {
      // filter was cleared, do something
    }
    firstOrderedOnFilterValue = null;
  }
}