Complex Export to Excel Functionality

[Sandi Buchanan]

Hi.

I have a complex React SyncFusion application which consists of a single TreeGrid (inside the red) with embedded Grid components (inside the blue). The complex grid works great. No problems there. The issue I'm facing and not quite clear on how to tackle (or if I even can) is creating an Excel export that mimics the table as shown in the UI. I've been able to successfully export the TreeGrid and create an Excel file. However, how do I insert the associated Grid components in the Excel sheet where they belong?

I'm attaching a photo of what the table looks like in the UI.

Is there a way to export the associated Grid component (shown in blue) and place that exported information in the appropriate column(s) in the TreeGrid export?

TreeGrid and Grid in the UI

[Sandi Buchanan]

Adding a screen shot of the TreeGrid Excel export:

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Sandi Buchanan,

Greetings from Syncfusion support.

Currently, we do not have direct support for exporting a TreeGrid with nested Grid components into an Excel file in the way you're asking. The TreeGrid's Excel export functionality supports exporting hierarchical data, but integrating the nested Grid data directly into the Excel export is not natively supported out of the box.

Best regards,
Sreedhar Kumar.

[Sandi Buchanan]

Is there a way to easily hide the header row from the export? Or is that a complicated deal too?

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Sandi Buchanan,

Thank you for your query.

We understand your requirement to "Export the data without the header row in the TreeGrid". By using the excelHeaderQueryCellInfo event, you can set the header cell values to empty during the export process, effectively excluding the headers in the exported file.

Below is a code snippet for your reference:

 <TreeGridComponent 
dataSource={sampleData} 
treeColumnIndex={1}
 childMapping='subtasks' 
allowPaging={true} 
pageSettings={pageSettings}
 allowExcelExport={true} 
height='220' 
toolbarClick={toolbarClick} 
ref={g => treegrid = g} toolbar={toolbarOptions} 
ExcelHeaderQueryCellInfo={excelHeaderQueryCellInfo} // bind excelheaderqueryinfo event
>
//triggers before the excel export of header cells 
const  excelHeaderQueryCellInfo =  (args)=> {
        args.cell.value = '';//update the header cell values with empty string
      },

Additional Resources:

• API Documentation: excelHeaderQueryCellInfo
• Working Sample: React Sample on StackBlitz

This approach ensures that the data is exported without the header row. If you have further questions or need additional assistance, feel free to reach out.

Best regards,
Sreedhar Kumar.

[Sandi Buchanan]

Oookay. This is the first thing I tried. That clears the values in the header row, but how do you remove the actual row completely from the Excel export? Like, I don't want it at all in the export. And removing the "headerText" is not an option. I'm trying to back the grid exports up to each other seamlessly and don't want the header row on the grids exported after the first one at all. Those grids still need their headers in the table.

So in your "Working Sample", how do you remove the first row completely?

I want this:

Not this (which is what your code gives me):

[Sandi Buchanan]

And before you refer me to this "Working Sample": https://stackblitz.com/edit/wsyrwc-jt8idd?file=index.ts,index.html , it doesn't actually work for me. I also tried it and it throws an error in the console. The example is 2 years old, too, so maybe something has changed and it's no longer applicable. I do have stacked headers and that example does not. I copied the example as is and placed it in the "create" action as noted in the example. This is what it gives me:

Example taken from : https://www.syncfusion.com/forums/175071/delete-row-header-in-excelexport

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Sandi Buchanan,

Thank you for your query.

We understand your requirement to export data without header rows in TreeGrid and have prepared a workaround to achieve this. In the created event of the TreeGrid, you can manipulate the exported rows by using the rows.shift() method to remove the first row (header).

We have provided a working example addressing this scenario. You can find the example here: Working Sample

Additionally, we referred to the forum thread you mentioned (Delete Row Header in Excel Export) to ensure compatibility with the latest version of TreeGrid. This approach has been updated to align with the current implementation and addresses stacked header scenarios.

If you encounter any further issues or need assistance, feel free to reach out.

Best regards,
Sreedhar Kumar

[Sandi Buchanan]

I've gotten past the index error I kept getting, but this is what the report is returning me now. It's only returning the last exported grid. This doesn't seem to want to work when exporting multiple grids. Thanks for trying though.

As a future enhancement, you might want to consider adding a prop that allows the user to toggle show/hide of the column headings in the exported grid. It would be a lot easier than what I'm having to go through for something that seems like it should be easy.

[Sandi Buchanan]

Following up for anyone who may come along and need to do this as well. Since SyncFusion doesn't allow for exporting of Grid within a TreeGrid, I had to add all the data I needed in the export to the Grid and hide the columns in the UI. I then unhid them at export time and used row spanning to give the illusion of removing the duplicate information. 

As for removing the column headers in the multiple exports, you want to keep the processGridExport as default for your first grid. Then modify it for your second grid. I was able to do this in the export call at the button level as I kept track of all my grids in a Redux store. Then item.index will give you fits if you don't account for the number of page header rows (if any), column heading rows, and rows in the first grid exported. You'll need to add those together plus 1 to get your starting index for the first row of your next grid. Once I figured all this out, I was able to get a report that uses multiple grid exports that looks as follows:

[Sandi Buchanan]

Here's my code to remove the column headers on subsequently exported grids. I used a counter to know that I've exported the second grid. (The counter is also used for other properties during the export since I don't kn

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Sandi Buchanan,

Thank you for your query.

We understand your use case and appreciate you sharing your approach for exporting multiple grids in the TreeGrid scenario. Since Syncfusion does not currently provide built-in support for exporting a Grid within a TreeGrid, your method of adding the required data to the Grid, hiding columns in the UI, and unhiding them during export with row spanning is a creative workaround.

Additionally, your detailed explanation about managing column headers and calculating the starting index for subsequent grids during export will undoubtedly be helpful for others tackling similar challenges.

If you have any further questions or need assistance, feel free to reach out.

Best regards,
Sreedhar Kumar.