Блог

Я использую сетку Kendo с Angular 2, используя это http://www.telerik.com/kendo-angular-ui/components/grid/data-binding / учебное пособие, но я не нашел фильтрации в сетке. Как я могу отфильтровать сетку Kendo с помощью Angular 2?

Я создал этот плунжер, в котором вы можете фильтровать свою сетку по названию продукта. Это очень простой пример:

 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 версии kendo-angular2-grid.

В настоящее время вы можете использовать ограниченный API, который указан здесь

О проблеме уже сообщалось в kendo-angular2 от telerik. Обратитесь к этому

Комментарий участника Telerik по этой проблеме с фильтром-

У нас нет конкретной временной шкалы для функции фильтрации сетки. Для этой функции существует ряд предварительных условий, наиболее важным из которых являются средства выбора даты. Вы можете ознакомиться с нашей дорожной картой для получения более подробной информации — http://www.telerik.com/kendo-angular-ui/roadmap /

Эта идея уже опубликована на недавно открытом портале отзывов, см. это

Я просто проверял возможные способы включения фильтра в сетке Kendo Angular 2 и обнаружил, что Telerik включил его. Пожалуйста, проверьте следующую ссылку.

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

я добавил в решение Fabio Antunes
фильтр компиляции импорта из «@progress /kendo-data-query»;

и измените метод 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
        };
  

Обновление фильтра Kendo — очень похоже на решение Nonik.

Замените «compileFilter» на «filterBy». Это часть набора вспомогательных функций dataquery.

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

Запрос данных Kendo

К вашему сведению, в последней версии Kendo Grid добавлена функция добавления фильтра. Пожалуйста, посмотрите на их веб-сайт.

Если вам требуется какой-либо пользовательский фильтр с сеткой kendo в angular 2, посмотрите здесь или выполните поиск в Google: Angular-2 Пользовательский фильтр Kendo Grid