Filtr siatkowy Kendo Angular 2 niedostępny

Question

Używam Kendo Grid z Angular 2 przy użyciu tego samouczka http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/, ale nie znalazłem filtrowania w siatce. Jak mogę odfiltrować moją Kendo Grid z Angular 2?

Answer 1

Filtry nie są dostępne w obecnej wersji Beta.0 kendo-angular2-grid.

Obecnie można korzystać z ograniczoną API, które są wymienione here

problem jest już zgłoszone na Telerik w kendo-angular2. Refer this

Komentarz od członka Telerik na tym filtrze issue-

Nie mamy konkretny harmonogram Funkcja filtrowania sieci. Istnieje wiele wymagań wstępnych tej funkcji, z których najbardziej znaczącym jest narzędzie do wybierania daty. Możesz przejrzeć naszą mapę drogową dla dalszych szczegółów - http://www.telerik.com/kendo-angular-ui/roadmap/

Ten pomysł jest już zamieszczona na nowo otwartym portalu Refer this

Answer 2

zwrotnego Stworzyłem ten plunker gdzie można filtrować siatkę przez nazwę produktu. Jest to bardzo prosty przykład:

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 do roztworu dodaje się Fabio Antunes
importu compileFilter od '@ toku/kendo-data-zapytania';

i zmień metodę change() na następującą. Umożliwi to filtrowanie według wielu kolumn. Znowu nie dokładnie to, co chcę, ale to na razie zrobi.

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 4

Aktualizacja na filtrze Kendo - bardzo podobna do rozwiązania Nonika.

Zamień "compileFilter" na "filterBy". Jest to część zestawu kwerend danych funkcji pomocnika.

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

Kendo Data Query

Answer 5

właśnie sprawdzanie możliwych sposobów, aby włączyć filtr w Kendo Kątowymi 2 siatki i stwierdził, że Telerik włączył go. Proszę sprawdzić poniższy link.

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

Answer 6

Dla Twojej informacji Kendo Grid dodać funkcję filtra w najnowszej wersji. Proszę spojrzeć na ich stronę internetową.

Jeśli stll wymagany jakiś filtr custome z kendo siatki w kątowym 2 Następnie spojrzeć tutaj lub poszukać w google: Angular-2 + Kendo Siatka filtr niestandardowy