How do you export a grid component without applying grouping?

[Nandhini Shanmugam]

For example if i have a grid and i have grouped few columns and when i try to export i want to export all the data irrespective of grouping at the same time i dont want the grid to be reloaded unless until i clear it.

[Joseph Christ Nithin Issack]

Hi Nandhini,

Greetings from Syncfusion Support.

Regarding your requirement to export the EJ2 Grid to an Excel file without grouping, we achieve this by temporarily removing the group settings before export and then restoring them once the export is complete. Below is a detailed breakdown of the implementation:

Step 1: Define the toolbarClick Event

The toolbarClick event is triggered when the user clicks an export button (Excel, PDF, or CSV) from the toolbar.

 

 function toolbarClick(args) {

    switch (args.item.id) {

      case 'DefaultExport_pdfexport':

        gridInstance.pdfExport();

        break;

      case 'DefaultExport_excelexport':

        gridInstance.excelExport();

        break;

      case 'DefaultExport_csvexport':

        gridInstance.csvExport();

        break;

    }

  }

 

• The args.item.id property determines which export type was selected.

• Calls the excelExport() method for Excel export

Step 2: Handle the beforeExcelExport Event

Before exporting to Excel, we need to remove the grouping so that the exported file contains only raw data.

 

 function beforeExcelExport(args) {

    // Store the current grouping state

    groupedColumns = gridInstance.groupSettings.columns;

    // Clear grouping

    gridInstance.setProperties(

      {

        groupSettings: {

          columns: [],

        },

      },

      true

    );

  }

 

• We store the current grouping (groupSettings.columns) in a variable (groupedColumns).

• We clear the grouping by setting groupSettings.columns = [].

• The second parameter true in setProperties ensures that changes are applied without re-rendering the grid.

Step 3: Handle the excelExportComplete Event

After the export is completed, we restore the original grouping settings to bring back the grouped view in the UI.

 

 

  function excelExportComplete(args) {

    gridInstance.setProperties(

      {

        groupSettings: {

          columns: groupedColumns,

        },

      },

      true

    );

  }

 

• We restore the previously stored grouping (groupedColumns).

• This ensures that the grid displays as it was before the export, maintaining user preferences.

Step 4: Test with a Working Sample

To see this in action, you can refer to the following sample project:
Sample: https://stackblitz.com/edit/react-mjxayypa-mhsmfdoy?file=index.js

Summary of the Approach

1. User clicks an export button (Excel).

• The toolbarClick event is triggered.

2. Before exporting to Excel (beforeExcelExport):

• The current grouping state is saved.

• Grouping is cleared to export raw data.

3. Excel file is exported.

4. After export completes (excelExportComplete):

• The original grouping is restored in the grid.

Regards,

Joseph I.