We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Export to Excel throws an error

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?


Attachment: cruisesvehc4c_399087b4.zip

5 Replies

MI Michael April 18, 2023 11:43 AM UTC

And this is my app.module.ts


Attachment: app.module.ts_8db8a3b8.zip


MI Michael April 18, 2023 01:38 PM UTC

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



RR Rajapandi Ravi Syncfusion Team April 19, 2023 01:02 PM UTC

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



MI Michael April 20, 2023 09:19 AM UTC

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)

excelQueryCellInfo(args: { column: { field: string; }; value: any; data: { cruiseDate: { toLocaleString: () => any; }; }; }) { //excelQueryCellInfo event of Grid

if (args.column.field === 'cruiseDate') {

args.value = args.data?.cruiseDate.toLocaleString(); //you can customize your value as you want

}

}


RR Rajapandi Ravi Syncfusion Team April 27, 2023 11:31 AM UTC

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.


Loader.
Up arrow icon