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

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清除按钮触发multiSelectChange事件，因此您可以在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 = [] } } 上验证value是否为空并运行代码

更新

选中此stackblitz

c.execute('''
        CREATE TABLE IF NOT EXISTS cluster_relationships
        (
            plan_id INTEGER NOT NULL,
            parent_cluster TEXT,
            child_cluster TEXT NOT NULL,
            FOREIGN KEY(plan_id) REFERENCES plan_listing(plan_auto_id),
            FOREIGN KEY(plan_id, parent_cluster) REFERENCES cluster_detail(plan_id, cluster_no) ON DELETE CASCADE,
            FOREIGN KEY(plan_id, child_cluster) REFERENCES cluster_detail(plan_id, cluster_no) ON DELETE CASCADE,
            PRIMARY KEY(plan_id, parent_cluster, child_cluster)
        )
    ''')

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

Answer 2

这是jquery剑道网格的解决方案。要捕捉任何点击网格过滤器的清除按钮，可以使用剑道网格内的 filterMenuInit 函数。

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