How to set Custom Filter Menu Components in angular 17 with Kendo UI

 Dear Reader, 

if you want to set menu filter Kendo UI with angular then it very useful tips.

 for example when you are using  <kendo-grid></kendo-grid> so you have to follow below steps for filter the menu.

on UI Component

<kendo-grid

[data]="gridDataSource$ | async"

filterable="menu"

(dataStateChange)="dataStateChange($event)">  

<kendo-grid-column field="productName" title="Product Name" width="150">

</kendo-grid-column>

</kendo-grid>

and My TS code are as below

import { process, State } from '@progress/kendo-data-query';

export class DataComponent implements OnInit {

  skip = 0;

  public state: State = {

    skip: 0,

    take: 10,

    filter: {

      logic: 'and',

      filters: []

    }

  };

dataStateChange(state: DataStateChangeEvent): void {

    this.state = state;

    this.loadData();

  }

  private loadData(): void {

    this.gridDataSource$ = this.gridDataSubject.asObservable().pipe(

      map(gridDataResult => process(gridDataResult.data, this.state))

    );

  }

}

Thank you Hope it is helpful to you ! Happy learning.