清除kendo角度网格过滤器菜单模板上的按钮触发器事件处理程序

Question

我已经在Kendo Angular Grid上实现了kendoGridFilterMenuTemplate。

<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>

我需要做一些操作，点击清除按钮在我的过滤器。请看下图。

​

​

Answer 1

根据this清除按钮触发valueChange事件，因此您应该能够在multiSelectChange上验证value是否为null并运行您的代码

更新

检查此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 = []
    }
}

我添加了逻辑来检查先前选择的值是否存在，以及当所有过滤器被删除时，您可以运行您的逻辑

Answer 2

这里有一个针对jquery kendo网格的解决方案。要在网格过滤器的清除按钮上捕获任何内容，可以在剑道网格中使用filterMenuInit函数。

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