Hi Support,
I have an Angular Ej2 Grid with Firebase/Firestore data.
All works ok, except for exporting the grid to excel. At the moment I get this error:
cruises-veh-c4c.component.ts:85 ERROR Error: Uncaught (in promise): TypeError: value.indexOf is not a function
TypeError: value.indexOf is not a function
at Workbook.processCellValue (ej2-excel-export.es5.js:1178:19)
at Workbook.parseCellType (ej2-excel-export.es5.js:1622:37)
at Workbook.parseCells (ej2-excel-export.es5.js:1118:18)
at Workbook.parserRow (ej2-excel-export.es5.js:1012:14)
at Workbook.parserRows (ej2-excel-export.es5.js:939:28)
at Workbook.parserWorksheets (ej2-excel-export.es5.js:797:22)
at new Workbook (ej2-excel-export.es5.js:708:22)
at ej2-grids.es5.js:43093:32
at ZoneDelegate.invoke (zone.js:372:26)
at Object.onInvoke (core.mjs:26231:33)
at resolvePromise (zone.js:1213:31)
at resolvePromise (zone.js:1167:17)
at zone.js:1279:17
at ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26218:33)
at ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)
at drainMicroTaskQueue (zone.js:582:35)
at invokeTask (zone.js:491:21)
at ZoneTask.invoke (zone.js:476:48)
I'm pretty sure I have everything installed as required. I've included the folder with the relevant code.
Can you have a look please and let me know where I have gone wrong?
So, While I wait, I've been trying a few things.
I have a field, cruiseDate, which is of type Firestore.serverTimestamp() {Timestamp).
If I exclude that field from the grid, the export works, but it does not include the converted date (see below):
<ejs-grid#gridid='Grid'
[dataSource]='vData'
[toolbar]='toolbarOptions'
width="100%"
[allowSorting]="true"
[allowFiltering]="true"
[allowGrouping]="true"
[allowPaging]='true'
[allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)'
>
<e-columns>
<e-columnfield='vehicleRego'headerText='Rego'textAlign='Right'width=90>e-column>
<e-columnfield='vehClass'headerText='Class'textAlign="Center"width=50>e-column>
<e-columnfield='driver'headerText='Driver Name'width=120>e-column>
<e-columnfield='type'headerText='Type'width=80>e-column>
<e-columnfield='title'headerText='Title'textAlign='Right'width=120>e-column>
<e-columnfield='location'headerText='Destination'textAlign='Right'width=120>e-column>
<e-columnfield='c4cYear'headerText='Year'width=50>e-column>
<e-columnheaderText="Date Used">
<ng-template #template let-data>
{{ data.cruiseDate.toDate() |date: 'medium' }}
</ng-template>
</e-columns>
</ejs-grid>
How can I include the converted field in the export, and why would the raw data be throwing an error?
Regards,
Michael
Micheal,
Greetings from Syncfusion support
By default, the template feature is used to access/manipulate the value of display data. The return type of the template must be always `string` data type. It is used to update the values of the column only on the UI level. All the Grid actions will performed based on the datasource value. It does not affect the data in the dataSource.
Since you like to export your customizing value to the exported document, you can achieve the same by using excelQueryCellInfo event of Grid. Please refer the below code example for more information.
<script> function toolbarClick(args) { var gridObj = document.getElementById("Grid").ej2_instances[0]; if (args.item.id === 'Grid_excelexport') { gridObj.excelExport(); } } function excelQueryCellInfo(args) { //excelQueryCellInfo event of Grid if (args.column.field === 'cruiseDate') { args.value = args.data.cruiseDate.toLocaleDateString(); //you can customize your value as you want } } </script>
|
Documentation: https://ej2.syncfusion.com/documentation/api/grid/#excelquerycellinfo
Regards,
Rajapandi R
Is there a difference in Angular?
I had to infer usage types to get it to work for me. Even then it didn't work and still showed the field as a Timestamp object
Timestamp(seconds=1681606814, nanoseconds=0)
Michael,
Since your reported problem was not able to reproduced at our end, please share any issue reproducible sample that would be helpful for us to provide better solution.