Filter menu in data grid not working for filtering date type columns

Question

Hello Syncfusion,I have a problem with filtering date type columns. They are displayed properly, but when I use filter, then as a result get empty grid. What am I doing wrong?car-table.component.ts: @Input() public carList: Car[]; ngOnInit(): void { this.dateFormat = 'dd.MM.yyyy'; this.filterOptions = { type: 'Menu' }; this.filter = { params: { format: this.dateFormat } }; }car.models.ts:export interface Car { name: string; productionDate: Date; status: string; saleDate: Date; repairDate: Date;}car-table.component.html:

Praveenkumar Gajendiran · Accepted Answer

Hi Tomek,Thanks for your update.By default Grid column type will be set based on your  first value of the column from the dataSource. If you have using the value is the date string and set the column type as date, Grid will convert the value as  date string to the date object value. 

But, the Grid can preforming the action like Filtering, Searching, Grouping, Sorting, etc., based on the original value of the Grid data Source. So we suggest you to need defined date object value for the date column. 
And the valueAccessor is used only for the display purpose and we cannot perform any Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column. So, we are unable to perform the value while updating through valueAccessor. This is the behavior of EJ2 Grid.  
Note :  The Grid can perform the actions like Filtering, Sorting, Searching, Grouping, aggregates, etc., are only based on the column field and its dataSource value. 

So we suggest you to change the date value as date object (new Date()) in your dataSource.Please get back to us if you need further assistance.Regards,Praveenkumar G

Praveenkumar Gajendiran · Answer

Hi Tomek,Thanks for contacting Snycfusion support.We checked your query and provided code example. We have prepared a Grid with menu filter sample based on your provided code example, but we are unable to reproduce the reported issue at our end and everything works fine. For your convenience we have prepared a video. Please find the link below  
Video Link: https://www.syncfusion.com/downloads/support/directtrac/159493/ze/WID440~1-1656010791.zipSample Link: https://stackblitz.com/edit/angular-r7v9fe?file=app.component.html Refer the below document for menu filter feature of Grid.Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/filtering/#filter-menu 
If you still face the issue or this is not your requirement scenario, please get back to us with the below details that will be helpful for us to proceed further.  

1)                 Please ensure that you bind date value as string or date object. If you have defined the date value as string, could you please change the date value as date object (new Date()). 
2)                 Share the console window, if you have any script error. 
3)                 Share the full code example for Grid rendering. 
4)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 
5)                 If possible, explain your problem scenario with video demonstration. 
6)                 Syncfusion package version. 

Regards,Praveenkumar G

Tomek Romek · Answer

Hi,Thanks for answer. I checked and probably dates fields are interpreted as a strings.I tried to cast it to a Date value using valueAccessor, but after that I lost filtering and sort options. Do you have any idea how to enable filtering and ordering in column with value accesor? Or do you know how can I cast it in the other way?

.ts public formatedfield = (field: Date, data: Car, column: Object): Date => { const saleDate = 'saleDate'; console.log(typeof(data[saleDate])); //this log return string return new Date(data[saleDate]); }