2016-10-07 5 views
5

このhttp://www.telerik.com/kendo-angular-ui/components/grid/data-binding/チュートリアルを使用して角2の剣道グリッドを使用していますが、グリッドでフィルタリングが見つかりませんでした。剣道グリッドを角2でフィルタリングするにはどうしたらいいですか?剣道角2グリッドフィルターが利用できません

+0

フィルタ、フィルタリング、HTTPとチェックアウトPrimeNGのDataTable: //www.primefaces.org/primeng/#/datatable/filter –

答えて

5

現在のベータ版のkendo-angular2-gridでは、フィルタは使用できません。

は現時点では、あなたはすでにtelerikの剣道-angular2で報告されてhere

問題を列挙されている限られたAPIを使用することができます。

issue-このフィルタにTelerikのメンバーからRefer this

コメント私たちは、グリッドのフィルタリング機能のための具体的なタイムラインを持っていません。 この機能にはいくつかの前提条件がありますが、最も多くのものは日付ピッカーである です。あなたは 詳細については、当社のロードマップを確認することができます - http://www.telerik.com/kendo-angular-ui/roadmap/

このアイデアは、すでにあなたが製品名で、あなたのグリッドをフィルタリングすることができますどこ私はこのplunkerを作成し、新しくオープンしたフィードバックポータルRefer this

3

に掲載されています。これは非常に基本的な例です:i「が進行/剣道・データ・クエリ@」ファビオ・アントゥネス・ソリューションから
インポートcompileFilterに追加

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

} 
+0

プランナーデモのおかげで@fabio。私は、剣道グリッドが剣道グリッドデモhttp://demos.telerik.com/kendo-ui/grid/filterrowに与えたように、構築されたフィルターで期待しています。 –

+0

@ user2924558 Sanketはそれがまだ実装されていないと言っています –

+0

ありがとう、これが求めているものです。まだ公式の実装がないので。これは素晴らしいだろう! –

0

とし、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 
     }; 
0

剣道フィルタの更新 - Nonikの解と非常によく似ています。

"compileFilter"を "filterBy"に置き換えます。これは、データ・セットのヘルパー関数の一部です。

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

Kendo Data Query

0

あなたの情報剣道グリッドの最新バージョンにフィルタ機能を追加しています。彼らのウェブサイトを見てください。あなたはstllそして、ここを見たり、Googleで検索した角度2で剣道グリッドといくつか、カスタマーフィルタを必要に応じて

:あなたは代替が必要な場合は角度-2 +剣道グリッドのカスタム

関連する問題