Dates not formatted on Excel

Question

I'm exporting my grid to Excel, but for some reason the format I use on dates is not applied to the Excel file. Here is a Stackblitz with the issue:

https://stackblitz.com/edit/angular-ivy-1l4ads

As you can see I'm using the format

{type: 'date', skeleton: 'short'}

for dates, but it is not applied when exporting to Excel.

I was given this example by Chat:

https://stackblitz.com/edit/angular-5pusu1

This one is working, but I just couldn't find what makes the difference in functionality.

Another difference between both, is that in my Stackblitz the app stops working if I remove the "type" property from the column, meanwhile in yours you don't need it for the app to work. So there is definitely something differente in our code, but I haven't been able to spot it.

Can you tell me how to get the formatting working when exporting to Excel on the Stackblitz I provided?

Thiyagu Subramani · Accepted Answer

Hi Ricardo, 

Thanks for contacting Syncfusion forum. 

In first stackblitz sample you have used TestDate field value type as string like ‘2044-06-01T00:00:00.000Z’ (ISO date string).  

By default in EJ2 Grid the date column values must be in date object then only format, filtering and sorting operation will be properly applied to the date column.  

In column API if you set type as date in column level then the string values will be converted to date object in source level and format will be properly applied to the date column. But if we export the excel, cell value as maintained as string instead of date object, So we have to change the required cell value as data value using excelQueryCellInfo event.  


  

Please refer to the below code and modified sample. 





excelQueryCellInfo(args): void { 
    if(args.column.field === 'TestDate'){ 
    args.data[args.column.field] = new Date(args.data[args.column.field]); 
    args.value = args.data[args.column.field]; 
  } 


Sample link : https://stackblitz.com/edit/angular-5pusu1-yelqz3?file=app.component.ts 

API link :  https://ej2.syncfusion.com/angular/documentation/api/grid/#excelquerycellinfo 

  

But in your reported second sample, you are used required OrderDate field type as date object in dataSource. So its works fine and no need to define type as date in column level. Please refer to the below image and sample. 

  

Sample link :  https://stackblitz.com/edit/angular-5pusu1-fzc7jx?file=app.component.ts 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S.

Ricardo Salas · Answer

Thanks a lot for the explanation, it is working as expected now.

Thiyagu Subramani · Answer

Hi Ricardo,  

Thanks for the update.  

We are happy to hear that your issue is resolved.  

Please get back to us if you need further assistance.  

Regards,  
Thiyagu S.