Kendo Angular 2 Mesh Filter Not Available

Question

I am using a Kendo grid with Angular 2, using this http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ tutorial, but I did not find filtering in the grid. How to filter my Kendo grid using Angular 2?

Answer 1

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

You can currently use the limited API that is listed here.

A problem has already been reported about telerik kendo-angular2. Refer to this question

Telerik member comment on this filter issue -

We do not have a specific timeline for the mesh filtering function. There are a number of prerequisites for this function; the most significant is the date picker. You can view our roadmap for further details - http://www.telerik.com/kendo-angular-ui/roadmap/

This idea has already been posted on the recently opened feedback portal. Refer to this question.

Answer 2

I created this plunker where you can filter your grid by product name. This is a very simple 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)); } } 

Answer 3

I just checked the possible ways to enable the filter in the Kendo Angular 2 Grid and found that Telerik turned it on. Please check the following link.

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

Answer 4

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

and change the change () method as follows. This will allow you to filter by multiple columns. Again, not quite what I want, but it will do so far.

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

Answer 5

Kendo filter update - very similar to Nonik solution.

Replace "compileFilter" with "filterBy". This is part of the dataset for auxiliary functions.

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

Kendo Data Request

Answer 6

For your information, Kendo Grid adds a filter function to the latest version. Check out their site.

If you need a custome filter with a kendo grid in angular 2, then look here or search on google: Angular -2 + Custom filter Grid Kendo