如何在Angular的Kendo Grid中订阅清除筛选事件？

要实现点击列顶部「Clear」按钮后执行自定义操作（比如清除搜索栏），可以通过以下两种方式处理：

方式一：监听Grid的filterChange原生事件 #

点击「Clear」按钮会触发Grid筛选器的变更，通过监听filterChange事件，你可以判断筛选状态的变化并执行自定义逻辑。

步骤1：模板中绑定事件 #

<kendo-grid
  [data]="gridData"
  [filter]="gridFilter"
  (filterChange)="onFilterChange($event)"
>
  <!-- 列配置示例 -->
  <kendo-grid-column field="ProductName" title="产品名称">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell
        [column]="column"
        [filter]="filter"
      ></kendo-grid-string-filter-cell>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

步骤2：组件类中处理事件 #

import { Component } from '@angular/core';
import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: 'app-grid-demo',
  templateUrl: './grid-demo.component.html'
})
export class GridDemoComponent {
  public gridData: any[] = /* 你的数据源 */;
  public gridFilter: CompositeFilterDescriptor | FilterDescriptor | null = null;
  // 保存上一次的筛选状态，用于对比变化
  private prevFilter: CompositeFilterDescriptor | FilterDescriptor | null = null;

  onFilterChange(filter: CompositeFilterDescriptor | FilterDescriptor | null): void {
    // 对比前后筛选状态，判断是否有列筛选被清除
    this.checkFilterClear(filter);
    
    this.prevFilter = { ...filter } as any;
    this.gridFilter = filter;
  }

  private checkFilterClear(currentFilter: CompositeFilterDescriptor | FilterDescriptor | null): void {
    // 场景1：全局清除所有筛选
    if (!currentFilter && this.prevFilter) {
      this.clearTargetSearchBar();
      return;
    }

    // 场景2：某一列的筛选被单独清除
    if (currentFilter instanceof CompositeFilterDescriptor && this.prevFilter instanceof CompositeFilterDescriptor) {
      // 找出之前存在、现在消失的筛选字段
      const removedFields = this.prevFilter.filters
        .map(f => (f as FilterDescriptor).field)
        .filter(field => !currentFilter.filters.some(f => (f as FilterDescriptor).field === field));
      
      if (removedFields.length > 0) {
        // 根据清除的字段执行对应操作，比如清除指定搜索栏
        removedFields.forEach(field => {
          if (field === 'ProductName') {
            this.clearProductSearchBar();
          }
        });
      }
    }
  }

  // 示例：清除目标搜索栏
  private clearTargetSearchBar(): void {
    // 这里实现你的清除逻辑，比如：
    // this.globalSearchText = '';
  }

  private clearProductSearchBar(): void {
    // this.productSearchText = '';
  }
}

方式二：自定义筛选模板，绑定Clear按钮点击事件 #

如果需要更精准地控制「Clear」按钮的行为，可以自定义筛选单元格模板，直接给Clear按钮绑定点击事件。

步骤1：自定义筛选模板 #

<kendo-grid-column field="ProductName" title="产品名称">
  <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
    <kendo-grid-string-filter-cell
      [column]="column"
      [filter]="filter"
    >
      <ng-template kendoGridFilterCellButtonsTemplate>
        <!-- 自定义Clear按钮，绑定点击事件 -->
        <button kendoButton (click)="onColumnClear(column.field); $event.stopPropagation()">
          Clear
        </button>
        <button kendoButton (click)="filter.applyFilter()">Filter</button>
      </ng-template>
    </kendo-grid-string-filter-cell>
  </ng-template>
</kendo-grid-column>

步骤2：组件类中处理点击事件 #

onColumnClear(field: string): void {
  // 执行Grid的筛选清除逻辑（可选，若需要保留默认清除筛选的行为）
  this.gridFilter = this.removeFilterByField(this.gridFilter, field);
  
  // 执行自定义操作
  if (field === 'ProductName') {
    this.clearProductSearchBar();
  }
}

// 辅助方法：移除指定字段的筛选条件
private removeFilterByField(filter: CompositeFilterDescriptor | FilterDescriptor | null, field: string): any {
  if (!filter) return null;
  if (filter instanceof CompositeFilterDescriptor) {
    const updatedFilters = filter.filters.filter(f => (f as FilterDescriptor).field !== field);
    return updatedFilters.length ? { ...filter, filters: updatedFilters } : null;
  }
  return (filter as FilterDescriptor).field === field ? null : filter;
}

private clearProductSearchBar(): void {
  // this.productSearchText = '';
}

内容的提问来源于stack exchange，提问作者sam sergiy klok