Kendo Angular 2 Grid Filter not available

问题:

I am using the Kendo Grid with Angular 2 using this http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ tutorial but I didn't find filtering in the grid. How can I filter my Kendo Grid with Angular 2?

回答1:

Filters are not available in current Beta.0 version of kendo-angular2-grid.

At present, you can use limited API which are listed here

Issue is already reported on telerik's kendo-angular2. Refer this

Comment from Telerik member on this filter issue-

We don't have a concrete timeline for the grid filtering feature. There are a number of prerequisites of this feature, the most significant one being the date pickers. You can review our roadmap for further details - http://www.telerik.com/kendo-angular-ui/roadmap/

This idea is already posted on newly opened feedback portal Refer this

回答2:

I created this plunker where you can filter your grid by product Name. It's a very basic example:

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));    }  } 

回答3:

I was just checking possible ways to enable filter in Kendo Angular 2 Grid and found that Telerik has enabled it. Please check following link.

http://www.telerik.com/kendo-angular-ui/components/grid/filtering/

回答4:

i added to the Fabio Antunes solution
Import compileFilter from '@progress/kendo-data-query';

and change the change() method to the following. This will allow you to filter by multiple columns. Again not exactly what i want, but this will do for now.

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         }; 

回答5:

Update on the Kendo filter - Very similar to Nonik's solution.

Replace "compileFilter" with "filterBy". This is part of the dataquery set of helper functions.

import { filterBy } from '@progress/kendo-data-query' 

Kendo Data Query

回答6:

For your information Kendo Grid has add filter feature in latest version. Please look at their website.

If you stll required some custome filter with kendo grid in angular 2 then look at here or search in google : Angular-2 + Kendo Grid Custom Filter

文章来源: Kendo Angular 2 Grid Filter not available