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.
