7

我正在使用此http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/教程将 Kendo Grid 与 Angular 2 一起使用，但我没有在网格中找到过滤。如何使用 Angular 2 过滤我的剑道网格？

4

6 回答 6

5

当前 Beta.0 版本的 kendo-angular2-grid 中不提供过滤器。

目前，您可以使用此处列出的有限 API

Telerik 的 kendo-angular2 上已经报告了问题。参考这个

Telerik 成员对此过滤器问题的评论-

我们没有网格过滤功能的具体时间表。此功能有许多先决条件，最重要的是日期选择器。您可以查看我们的路线图以获取更多详细信息 - http://www.telerik.com/kendo-angular-ui/roadmap/

这个想法已经发布在新打开的反馈门户上参考这个

于 2016-10-14T07:01:16.883 回答
5

我创建了这个plunker，您可以在其中按产品名称过滤您的网格。这是一个非常基本的例子：

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

}
于 2016-10-14T09:48:31.763 回答
5

我只是在检查在 Kendo Angular 2 Grid 中启用过滤器的可能方法，发现 Telerik 已启用它。请检查以下链接。

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

于 2017-03-29T17:24:30.817 回答
0

剑道过滤器的更新 - 与诺尼克的解决方案非常相似。

将“compileFilter”替换为“filterBy”。这是帮助函数的数据查询集的一部分。

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

剑道资料查询

于 2017-02-10T00:13:44.490 回答
0

我添加到 Fabio Antunes 解决方案
Import compileFilter from '@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
        };
于 2016-11-15T19:47:46.347 回答
0

供您参考 Kendo Grid 在最新版本中添加了过滤器功能。请看他们的网站。

如果您仍然需要一些带有角度 2 中剑道网格的自定义过滤器，请查看此处或在 google 中搜索：Angular-2 + Kendo Grid 自定义过滤器

于 2017-04-30T03:14:31.223 回答