[英]Kendo Angular 2 Grid Filter not available
我正在使用這個http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/教程使用帶有Angular 2的Kendo Grid,但我沒有在網格中找到過濾器。 如何使用Angular 2過濾我的Kendo Grid?
當前Beta.0版本的kendo-angular2-grid中沒有過濾器。
目前,您可以使用此處列出的有限API
已經在telerik的kendo-angular2上報告了問題。 請參閱此
Telerik成員對此過濾器問題的評論 -
我們沒有網格過濾功能的具體時間表。 此功能有許多先決條件,最重要的是日期選擇器。 您可以查看我們的路線圖以獲取更多詳細信息 - http://www.telerik.com/kendo-angular-ui/roadmap/
這種想法已經張貼在新開的反饋門戶轉寄此
我剛剛檢查了在Kendo Angular 2 Grid中啟用過濾器的可能方法,發現Telerik啟用了它。 請檢查以下鏈接。
http://www.telerik.com/kendo-angular-ui/components/grid/filtering/
我創建了這個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));
}
}
我加入了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
};
更新Kendo過濾器 - 非常類似於Nonik的解決方案。
將“compileFilter”替換為“filterBy”。 這是輔助函數的dataquery集的一部分。
import { filterBy } from '@progress/kendo-data-query'
為了您的信息,Kendo Grid在最新版本中添加了過濾功能。 請看他們的網站。
如果你需要在角度2中使用kendo網格的某些客戶過濾器然后在這里查看或在谷歌搜索:Angular-2 + Kendo網格自定義過濾器
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.