可重复使用的列MENU过滤器（Angular 2的Kendo）-Java 学习之路

我正在尝试找到在角度剑道中配置网格过滤选项的最佳方法（来自asp.net telerik的东西） . 我想我一般都有我想要的方式，但遇到了问题 .

我正在尝试实现此示例：https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/reusable-filter/

但我想使用过滤器菜单而不是过滤器行 . 所以我改变了filterable =“menu”和kendoGridFilterMenuTemplate，但现在选择了下拉过滤器炸弹 .

这是一个例子：

https://plnkr.co/edit/2OI4wk7FaQHwOoJuZjos?p=preview

<ng-template kendoGridFilterMenuTemplate let-filter>
            <my-dropdown-filter
                [filter]="filter"
                [data]="distinctCategories"
                textField="CategoryName"
                valueField="CategoryID">
            </my-dropdown-filter>
</ng-template>

关于如何使这项工作的任何想法/建议？

1 回答

如果有人需要这个...剑道人员指出我正确的方向 . 我相信这只是文档还没有赶上的情况（开发站点中有一个新的例子，它显示了我需要的内容） .

简介：使用过滤器菜单模板时，需要传递过滤器服务并在onchange事件中调用filterService.filter而不是apply过滤器 .

以下是自定义过滤器控件/下拉列表中的相关代码（如果有人需要）：

import {Component, Input, Output} from '@angular/core';
import {CompositeFilterDescriptor} from '@progress/kendo-data-query';
import {FilterService, BaseFilterCellComponent} from '@progress/kendo-angular-grid';

@Component({
  selector: 'grid-dropdown-filter',
  template: `
    <kendo-dropdownlist
      [data]="data"
      (valueChange)="onChange($event)"
      [defaultItem]="defaultItem"
      [value]="selectedValue"
      [valuePrimitive]="true"
      [textField]="textField"
      [valueField]="valueField">
    </kendo-dropdownlist>
  `
})
export class GridDropdownFilterComponent extends BaseFilterCellComponent {
  @Input() public filter: CompositeFilterDescriptor;
  @Input() public filterService: FilterService;
  @Input() public data: any[];  // Dropdown list data
  @Input() public textField: string;
  @Input() public valueField: string;
  @Input() public field: string;
  
  public get selectedValue(): any {
    const filter: any = this.filterByField(this.field);
    return filter ? filter.value : undefined;
  }

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

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

  public onChange(value: any): void {
    this.filter = this.updateFilter({
      field: this.field,
      operator: "eq",
      value: value
    });

    this.filterService.filter(this.filter);
  }
}

回复于 2024-05-08T22:58:43+08:00

可重复使用的列MENU过滤器（Angular 2的Kendo）

1 回答

相关问题