Clear button trigger event handler on kendo Angular grid filter menu template

Question

I have implemented kendoGridFilterMenuTemplate on Kendo Angular Grid.

<kendo-grid-column
   field="orderStage"
   title="Order Stage"
   width="110px">
                  <ng-template
                    kendoGridFilterMenuTemplate
                    let-filter="filter"
                    let-column="column"
                    let-filterService="filterService"
                  >
                    <kendo-multiselect
                      [data]="orderStageData"
                      [(ngModel)]="orderStagesSelected"
                      (valueChange)="multiSelectChange($event,filterService,'orderStage')"
                    >
                    </kendo-multiselect>
                  </ng-template>
                </kendo-grid-column>

I need to do some operation on click of clear button in my filter. please have a look at the image below.

Answer 1

According to this clear button trigger the valueChange event, so you sould be able to validate on multiSelectChange if value is null and run your code

UPDATE

check this stackblitz

private previousCategoryFilter: CompositeFilterDescriptor[] = [];

public filterChange(filter: CompositeFilterDescriptor): void {
    let catFilter = filter.filters.map((f: CompositeFilterDescriptor) => {
      return f.filters.find((f: FilterDescriptor) =>
        f.field === 'CategoryID'
      ) as CompositeFilterDescriptor
    })

    console.log("catFilter", catFilter)
    console.log("this.previousCategoryFilter", this.previousCategoryFilter)


    if (this.previousCategoryFilter.length = 0 && catFilter.length > 0) {
      console.log("save value")
      this.previousCategoryFilter = catFilter
    }
    else if (this.previousCategoryFilter.length > 0 && catFilter.length === 0) {
      console.log("clear")
      this.previousCategoryFilter = []
    }
}

i added logic to check if there where values selected previously and when all filters are removed you can run your logic

Answer 2

Here's a solution for the jquery kendo grid. To catch anything on the clear button click of grid filter one can use the filterMenuInit function inside the kendo grid.

filterable: true,
filterMenuInit: function (e) {
    e.container.on("click", "[type='reset']", 
            function () {
             console.log("Clear button clicked");
           });
}