EJ2 Grid Excel Export without groupings

[Mark]

As the subject says, how do you do an excel export for a grid but exclude the groups?

[Mohammed Ansar Sathik Ali]

Hi Mark,

Greetings from Syncfusion support.

Query: EJ2 Grid Excel Export without groupings

As per your query that you need to export the excel file without the grouped data. We have achieved your requirement using dataSource property of excelExportProperties which is passing on excelExport methos in toolbarClick event.

  toolbarClick: function () {

    var exportProperties = {

      dataSource: window.inventoryData,

    };

    this.excelExport(exportProperties);

  }

Sample: https://stackblitz.com/edit/swnfgf-kulxct?file=index.js

Please get back to us if you need further assistance on this.

Regards,

Mohammed Ansar.

[Nandhini Shanmugam]

This is not working can you implement the same for a react grid component

[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.