时间戳

首页 > 解决方案 > 清除剑道角网格过滤器菜单模板上的按钮触发事件处理程序

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

问题描述

我已经kendoGridFilterMenuTemplate在 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>

我需要在我的过滤器中单击清除按钮进行一些操作。请看下面的图片。

在此处输入图像描述

标签： angularkendo-uikendo-gridkendo-ui-angular2

解决方案

根据这个清除按钮触发valueChange事件，因此您应该能够验证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 = []
    }
}

我添加了逻辑来检查之前选择的值是否在哪里以及当所有过滤器都被删除时你可以运行你的逻辑

推荐阅读