Export multiple grid to excel

Is it possible to export multiple grid, more than two, in a single sheet in excel export? The documentation is for two grids but I want to create a single excel file with one sheet which needs to have multiple grid/table. I have a few of these tables.

the working eg

if (gridRef) {
const appendExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 },
};
const masterGridRefExport = gridRef.masterGrid.excelExport(
appendExcelExportProperties,
true,
);
masterGridRefExport.then((fData) => {
if (gridRef.addressGrid) {
gridRef.addressGrid.excelExport(appendExcelExportProperties, false, fData);
}
});
}

Screenshot 2023-09-01 135s252.png


My required format is something like this
Image_4756_1693556752387


1 Reply 1 reply marked as answer

HK Harini Kannan Syncfusion Team September 4, 2023 10:19 AM UTC

Hi Samuel,

As per your query, we understand that you want to export multiple Grid component in a single sheet in excel export. In the toolbarClick event, using each Grid’s Instances and setting the type as AppendToSheet in the excelExportProperties to export multiple grids in the single sheet .  The blankRows is to separate the one grid from another. We have provided a code snippet and a sample that demonstrate this solution. Please find the code snippet below.


Code Snippet:

function toolbarClick(args) {

    if (args.item.text == 'Excel Export') {

      const excelExportProperties = {

        multipleExport: { type: 'AppendToSheet'blankRows: 2 },

      };

      gridInstance.excelExport(excelExportPropertiestrue).then((wb1=> {

        gridInstance2.excelExport(excelExportPropertiestruewb1).then((wb2=> {

          gridInstance3.excelExport(excelExportPropertiestruewb2).then((wb3=> {

            gridInstance4.excelExport(excelExportPropertiestruewb3).then((wb4=> {

              gridInstance5.excelExport(excelExportPropertiesfalsewb4);

            });

          });

        });

      });

    }

  }


Sample: https://stackblitz.com/edit/react-uw7ty6-f6mbiu?file=index.js,index.html


Please let us know if you need any further assistance.


Regards,

Harini K



Marked as answer
Loader.
Up arrow icon