Setting custom format for date column causes Filter to break

Question

Im trying to set a column containing date values with this format as date format:

"dd.MM.yyyy HH:mm:ss"

However, when doing so and setting type "date", the excel filter breaks with the following error:

date-formatter.js?752d:123 Uncaught (in promise) TypeError: value.getDate is not a function
    at eval (date-formatter.js?752d:123:1)
    at ValueFormatter.toView (value-formatter.js?70e3:42:1)
    at ExcelFilterBase.CheckBoxFilterBase.createFilterItems (checkbox-filter-base.js?90b6:910:1)
    at ExcelFilterBase.CheckBoxFilterBase.processDataSource (checkbox-filter-base.js?90b6:737:1)
    at ExcelFilterBase.CheckBoxFilterBase.dataSuccess (checkbox-filter-base.js?90b6:718:1)
    at eval (checkbox-filter-base.js?90b6:676:1)

Rajapandiyan Settu · Answer

Hi Sebastian, 
 
Thanks for contacting Syncfusion support. 
 
Based on your reported information, we suspect that you are using a date string value in the data source(for the date column). This is the cause of reported problem. Before proceeding with this we would like to share the behavior of Date Format in EJ2 Grid. 
 
In EJ2 Grid, we can show the dateString value in dateObject by setting column type as date and apply the format. But the Grid have some limitations for this, when using Excel Export feature, Checkbox & Excel Filter dialog, Filtering, Sorting, etc., the Grid expects the dateObject value from the dataSource to perform the action. So, we need dateObject value in dataSource to apply format and perform action in all the Grid features. 
 
We suggest you to use dateObject value in the Grid’s dataSource instead of dateString to resolve your problem. Please refer to the below code example and sample for more information. 
 





 
[index.js] 
 
 
var data = [ 
  { 
    OrderID: 10248, 
    CustomerID: 'VINET', 
    EmployeeID: 5, 
    OrderDate: new Date('11/10/2021'),  // use dateObject value 
  }, 
  --- 
]; 
 
var grid = new ej.grids.Grid({ 
  dataSource: data, 
  allowPaging: true, 
  allowFiltering: true, 
  filterSettings: { type: 'Excel' }, 
  columns: [ 
    --- 
    { 
      field: 'OrderDate', 
      headerText: 'Order Date', 
      width: 130, 
      type: 'date', 
      format: 'yMd', 
    }, 
  ], 
}); 
grid.appendTo('#Grid'); 
 
  
 
Sample: https://stackblitz.com/edit/bohacb 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Sebastian Göhring · Answer

Ok, so Im having to update on this:My problem is, i cant easily set the date column as date, because im using an URLAdaptor.let data: DataManager = new DataManager({    url: '/api/grid/' + id,    adaptor: new UrlAdaptor});How can I set the Date here as date object?

Rajapandiyan Settu · Answer

Hi Sebastian,Thanks for your update.In EJ2 Grid, all the data actions are performed based on the
dataSource. So, we kindly suggest you to use dateObject value in
the Grid’s dataSource to perform the actions with date column.Set the field type as DateObject in your class model.

public class BigData
         
  {
             
  public DateTime? OrderDate { get; set; }
         
  }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_grid_js_urladaptor-1249366298.zipPlease get back to us if you need further assistance with
this.Regards,Rajapandiyan S

Sebastian Göhring · Answer

So what youre saying is - the date definition has to be on the server side? But the URL Adaptor gets the Data as json from the URL - so how can it say its a date and not a normal string? Does it only accept a certain date format that the grid converts it into a date object?

Rajapandiyan Settu · Answer

Hi Sebastian,Thanks for your update.When using URLAdaptor in the Grid, we need to return the
data in result and count format. The response should be in the below structure,Screenshot: Response Tab

In the response, the DateTime values are returned in string
format. We have parsed this date string value into a date object using regex in
our source. Our EJ2 DataManager only supports standard ISO and Microsoft format
date strings.We suggest you to use DateTime value
in your class model to perform the actions with date column.

public class BigData
         
  {
             
  public DateTime? OrderDate { get; set; }
         
  }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_grid_js_urladaptor-1249366298.zipPlease get back to us if you need further assistance with
this.Regards,Rajapandiyan S