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

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

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

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

1 个答案: