CODEWITHSUNDEEP
reactjsgridexportsyncfusion
Stevey
Stevey

Reputation: 127

How to export a hidden column in Syncfusion React Grid

I have a Syncfusion grid (from '@syncfusion/ej2-react-grids') react component that displays an account status column as icons, but when exporting this column I want it to export the status names instead of icons.

I was able to export the status name column ONLY when I also made the status name column visible, which is not desirable (on UI we want to show status icon only).

How should it be done - to hide a column but show it in Excel or CSV file export? I have spent hours searching for the right answer to this seemly simple question, but no luck so far.

Thanks

Upvotes: 1

Views: 651

Answers (1)

Rajapandiyan Settu
Rajapandiyan Settu

Reputation: 1

We have validated your requirement at our end. The excel export provides an option to export hidden columns of the grid by defining ExcelExportProperties.includeHiddenColumn as true. Please refer to the below documentation for more information.

Export all the hidden columns: https://ej2.syncfusion.com/react/documentation/grid/excel-exporting/#export-hidden-columns

The above solution exports all the hidden columns in the Grid. We can also have the option to export a particular hidden column in the Grid.

You can show a hidden column or hide a visible column while printing the grid using toolbarClick and ExcelExportComplete events.

In the toolbarClick event, based on args.item.id as Grid_excelexport. We can show or hide columns by setting column.visible property to true or false respectively. In the excelExportComplete event, We have reversed the state back to the previous state. Please refer to the below documentation for more information.

Show or Hide columns on exported Excel: https://ej2.syncfusion.com/react/documentation/grid/excel-exporting/#show-or-hide-columns-on-exported-excel

Sample: https://stackblitz.com/edit/react-ocqmux-gfpxrp?file=index.js

When you export the Grid the excelQueryCellInfo event will be triggered. In that event, you can customize the particular column text as you want.

excelQueryCellInfo: https://ej2.syncfusion.com/react/documentation/api/grid/#excelquerycellinfo

Upvotes: 0

Related Questions