如何为过滤器菜单创建自定义（可重用）功能

Question

我有一个与 Kendo 文档中的过滤器匹配的自定义过滤器：

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/reusable-filter/

@Component({
    selector: 'my-dropdown-filter',
    template: `
    <kendo-dropdownlist 
      [data]="data"
      (valueChange)="onChange($event)" 
      [defaultItem]="defaultItem"
      [value]="selectedValue" 
      [valuePrimitive]="true"
      [textField]="textField"
      [valueField]="valueField">
    </kendo-dropdownlist>
  `
})
export class DropDownListFilterComponent extends BaseFilterCellComponent {

    public get selectedValue(): any {
        const filter = this.filterByField(this.valueField);
        return filter ? filter.value : null;
    }

    @Input() public filter: CompositeFilterDescriptor;
    @Input() public data: any[];
    @Input() public textField: string;
    @Input() public valueField: string;

    public get defaultItem(): any {
        return {
            [this.textField]: "Select item...",
            [this.valueField]: null
        };
    }

    constructor(filterService: FilterService) {
        super(filterService);
    }

    public onChange(value: any): void {
        this.applyFilter(
            value === null ? // value of the default item
                this.removeFilter(this.valueField) : // remove the filter 
                this.updateFilter({ // add a filter for the field with the value
                    field: this.valueField,
                    operator: "eq",
                    value: value
                })
        ); // update the root filter
    }
}

它适用于“行”样式的网格过滤器。但是，当我尝试将其更改为“菜单”样式时，只要更改下拉菜单，就会应用过滤器。该样式的所有其他过滤器都需要您单击“过滤器”按钮。如果我将更改处理程序中的代码更改为：

public onChange(value: any): void {
    if (value) {
        this.updateFilter({ // add a filter for the field with the value
            field: this.valueField,
            operator: 'eq',
            value: value
        })
    }
    else {
        this.removeFilter(this.valueField);
    }
}

然后过滤器按钮功能按预期工作；但它实际上并没有过滤网格。我期望有一些方法可以在单击“过滤器”时调用，但没有找到它。我也尝试过设置过滤器属性（相同的效果）或使用applyFilter，它会立即再次过滤。

如何在 Kendo Angular Grids 中使用带有“菜单”样式过滤器的自定义过滤器组件？

Answer 1

自定义过滤器菜单时，您需要使用 kendoGridFilterMenuTemplate 指令（而不是 kendoGridFilterCellTemplate 指令）。

Step-by-step explanation of the process and a runnable example are available in the docs.