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

[Tomek Romek]

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:

<ejs-grid #grid [dataSource]="carList" [allowFiltering]='true' [filterSettings]='filterOptions' 

[allowSorting]='true' [selectedRowIndex]=0 (rowSelected)='rowSelected()'>

  <e-columns>

    <e-column field='name' headerText='Name' width='210'></e-column>

    <e-column field='productionDate' type='date' [format]="dateFormat" headerText='Production Date' width='110' [filter]='filter'></e-column>

    <e-column field='Status' headerText='Car Status' width='100'></e-column>

    <e-column field='saleDate' type='date' [format]="dateFormat" headerText='Sale Date' width='110' [filter]='filter'></e-column>

    <e-column field='repairDate' type='date' [format]="dateFormat" headerText='Repair Date' width='110 [filter]='filter'></e-column>

  </e-columns>

</ejs-grid>

[Praveenkumar Gajendiran]

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.zip
Sample 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]

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?

<ejs-grid #grid [dataSource]="carList" [allowFiltering]='true' [filterSettings]='filterOptions' 

[allowSorting]='true' [selectedRowIndex]=0 (rowSelected)='rowSelected()'>

  <e-columns>

    <e-column field='name' headerText='Name' width='210'></e-column>

    <e-column field='productionDate' type='date' [format]="dateFormat" headerText='Production Date' width='110' [filter]='filter'></e-column>

    <e-column field='Status' headerText='Car Status' width='100'></e-column>

    <e-column [valueAccessor]='formatedfield' type='date' [format]="dateFormat" headerText='Sale Date' width='110' [filter]='filter'></e-column>

    <e-column field='repairDate' type='date' [format]="dateFormat" headerText='Repair Date' width='110 [filter]='filter'></e-column>

  </e-columns>

</ejs-grid>

.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]);

  }

[Praveenkumar Gajendiran]

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 

[John Miller]

For anyone hitting this from Google, the fix when dates come from a REST API as strings is to convert them once before binding:

this.carList = data.map(car => ({

  ...car,

  productionDate: car.productionDate ? new Date(car.productionDate) : null,

  saleDate: car.saleDate ? new Date(car.saleDate) : null,

  repairDate: car.repairDate ? new Date(car.repairDate) : null

}));

Also note Status in the HTML is capitalised but the interface uses lowercase status, so that column stays empty until matched. Field names are case sensitive.

[format] is display only, filtering uses the underlying Date object, so once values are real Dates it just works.

Regards: 
John Miller

[Pavithra Subramaniyam]

Hi John Miller,

Thanks for your suggestion!

Regards,
Pavithra S