如何在劍道網格角度中實現Excel之類的濾鏡菜單

Question

這種過濾器已經在jquery中實現

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

需要在角度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}"

但這在角度上不起作用

Answer 1

請檢查Telerik文檔中的角度。

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