我正在使用带有 Angular 2 的 Kendo Grid 使用这个 http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ 教程，但我没有在网格中找到过滤。如何使用 Angular 2 过滤我的 Kendo Grid？
【问题讨论】：
我创建了这个plunker，您可以在其中按产品名称过滤您的网格。这是一个非常基本的例子：
import { Component } from '@angular/core';
import {
GridDataResult,
SortDescriptor,
orderBy
} from '@progress/kendo-angular-grid';
@Component({
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="filter" (ngModelChange)="change()">
<kendo-grid
[data]="gridView"
[sortable]="{ mode: 'multiple' }"
[sort]="sort"
(sortChange)="sortChange($event)"
>
<kendo-grid-column field="ProductID" title="Product ID" width="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
private filter: string;
private sort: SortDescriptor[] = [];
private gridView: GridDataResult;
private products: any[] = [
{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": false
},
{
"ProductID": 3,
"ProductName": "Chai",
"UnitPrice": 122.0000,
"Discontinued": true
}
,{
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}];
constructor() {
this.loadProducts();
}
protected sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.loadProducts();
}
private loadProducts(prods): void {
const products = prods || this.products;
this.gridView = {
data: orderBy(products, this.sort),
total: products.length
};
}
private change(){
this.loadProducts(this.products.filter(product => product.ProductName === this.filter));
}
}
【讨论】：
过滤器在当前 Beta.0 版本的 kendo-angular2-grid 中不可用。
目前，您可以使用here列出的有限API
telerik 的 kendo-angular2 已经报告了该问题。 Refer this
Telerik 成员对此过滤器问题的评论-
我们没有网格过滤功能的具体时间表。 此功能有许多先决条件，最 重要的是日期选择器。您可以查看我们的路线图 更多细节 - http://www.telerik.com/kendo-angular-ui/roadmap/
这个想法已经发布在新开放的反馈门户Refer this
【讨论】：
我只是在检查在 Kendo Angular 2 Grid 中启用过滤器的可能方法，发现 Telerik 已启用它。请检查以下链接。
http://www.telerik.com/kendo-angular-ui/components/grid/filtering/
【讨论】：
我添加到 Fabio Antunes 解决方案
从'@progress/kendo-data-query'导入compileFilter；
并将 change() 方法更改为以下内容。这将允许您按多列进行过滤。再次不是我想要的，但现在就可以了。
const predicate = compileFilter({
logic: "and",
filters: [
{ field: "fildname1", operator: "contains", value: this.filterValue },
{ field: "fildname2", operator: "contains", value: this.filterValue },
{ field: "fildname3", operator: "eq", value: this.filterValue },
{ field: "fildname4", operator: "eq", value: this.filterValue },
]
});
const result = this.data.filter(predicate);
this.gridView = {
data: result,
total: result.length
};
【讨论】：
剑道过滤器的更新 - 与诺尼克的解决方案非常相似。
将“compileFilter”替换为“filterBy”。这是帮助函数的数据查询集的一部分。
import { filterBy } from '@progress/kendo-data-query'
【讨论】：
Kendo Grid 在最新版本中添加了过滤器功能，供您参考。请查看他们的网站。
如果您仍然需要一些带有 Angular 2 中剑道网格的自定义过滤器，请查看此处或在 google 中搜索：Angular-2 + Kendo Grid 自定义过滤器
【讨论】：