如何在Angular Kendo Grid中清除所有过滤器？含两种场景

以下是两种场景的实现方案，覆盖常见的Kendo Grid使用框架：

一、按钮与Grid位于同一组件内 #

这种场景下可直接获取Grid实例，调用内置方法清除过滤器：

jQuery版本 #

// 绑定按钮点击事件
$("#clearFilterBtn").click(function() {
    // 获取Grid实例
    const grid = $("#grid").data("kendoGrid");
    // 清除列上的过滤器UI
    grid.clearFilters();
    // 重置数据源过滤条件，确保数据回到未过滤状态
    grid.dataSource.filter({});
});

Angular版本 #

组件类代码：

import { Component, ViewChild } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-grid-container',
  template: `
    <button (click)="clearAllFilters()">清除所有过滤器</button>
    <kendo-grid #grid [data]="gridData" [filterable]="true">
      <!-- 列配置示例 -->
      <kendo-grid-column field="name" title="名称"></kendo-grid-column>
      <kendo-grid-column field="age" title="年龄"></kendo-grid-column>
    </kendo-grid>
  `
})
export class GridContainerComponent {
  @ViewChild('grid') grid: GridComponent;
  gridData = [/* 数据源 */];

  clearAllFilters() {
    // 清除过滤器
    this.grid.clearFilters();
    // 重置数据源过滤规则
    this.grid.dataSource.filter({});
  }
}

二、按钮位于其他组件/页面位置 #

这种场景需要通过全局实例获取或跨组件通信触发清除操作：

jQuery版本 #

直接通过Grid的ID获取实例，无需考虑按钮位置：

$("#externalClearBtn").click(function() {
    const grid = $("#grid").data("kendoGrid");
    grid.clearFilters();
    grid.dataSource.filter({});
});

Angular版本（通过共享服务实现） #

1. 创建全局共享服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class GridFilterService {
  private clearFilterTrigger = new Subject<void>();

  // 触发清除过滤器的信号
  triggerClearFilters() {
    this.clearFilterTrigger.next();
  }

  // 订阅清除信号
  onClearFilters() {
    return this.clearFilterTrigger.asObservable();
  }
}

2. Grid组件中订阅信号：

import { Component, ViewChild, OnInit } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';
import { GridFilterService } from './grid-filter.service';

@Component({
  selector: 'app-kendo-grid',
  template: `<kendo-grid #grid [data]="gridData" [filterable]="true"></kendo-grid>`
})
export class KendoGridComponent implements OnInit {
  @ViewChild('grid') grid: GridComponent;
  gridData = [/* 数据源 */];

  constructor(private filterService: GridFilterService) {}

  ngOnInit() {
    // 监听清除信号，执行清除操作
    this.filterService.onClearFilters().subscribe(() => {
      this.grid.clearFilters();
      this.grid.dataSource.filter({});
    });
  }
}

3. 外部组件的按钮调用服务触发清除：

import { Component } from '@angular/core';
import { GridFilterService } from './grid-filter.service';

@Component({
  selector: 'app-external-button',
  template: `<button (click)="clearGridFilters()">清除Grid过滤器</button>`
})
export class ExternalButtonComponent {
  constructor(private filterService: GridFilterService) {}

  clearGridFilters() {
    this.filterService.triggerClearFilters();
  }
}

效果示意图 #

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