如何在剑道网格角度中实现类似过滤菜单的excel答案

【问题标题】：How to implement excel like filter menu in kendo grid angular如何在剑道网格角度中实现类似过滤菜单的excel
【发布时间】：2018-07-01 20:45:59
【问题描述】：

这种过滤器已经在jquery中实现了

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/grid-with-excel-like-filter

需要在angular 4中实现相同类型的过滤器

这是尝试代码

<kendo-grid-column field="ProductName" [width]="120" [filterable]="true">
          <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
            <li *ngFor="let product of dataRangeGrid['data']">{{product.categoryName}}</li>
          </ng-template>
        </kendo-grid-column>

在 jquery 中，我们有一个选择

filterable="{multi:true}"

但这不适用于角度

【问题讨论】：

在此处分享您的代码不是链接
更新问题
按照给定的链接检查并检查我给出的答案。 stackoverflow.com/questions/45981486/…

标签： angular kendo-ui kendo-grid

【解决方案1】：

请查看 Telerik 文档以了解 Angular。

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/#toc-filter-menu

 @Component({
    selector: 'my-app',
    template: `
<kendo-grid
        [data]="gridData"        
        [filter]="state.filter"        
        filterable="menu"
        (dataStateChange)="dataStateChange($event)"
    >
    <kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name">
    </kendo-grid-column>
    <kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" filter="date" format="{0:d}">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="180" filter="numeric" format="{0:c}">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="120" filter="boolean">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
        </ng-template>
    </kendo-grid-column>
    </kendo-grid>
`
})

【讨论】：