Angular – Kendo Angular 2 Grid Filter not available

angularkendo-ui-angular2

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?

Best Answer

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

}
Related Topic