How to implement excel like filter menu in kendo grid angular

Question

This kind of filter is implemented in jquery already

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

same type of filter need to implement in angular 4

this is trying code

<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>

in jquery, we have one option

filterable="{multi:true}"

but this is not working in angular

Answer 1

Please check Telerik documentation for 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>
`
})