How to Export Detailed Row in ej2 Syncfusion React Data Grid (to PDF and Excel)?

Question

I want to export data from ej2 syncfusion react data grid to Excel and PDF, but the existing data has some details related to each row. I want to export the following data with detailed data into Excel and PDF. Is there any way to export grid with Detailed Row in ej2 Syncfusion React Data Grid? I tried to use hierarchyExportMode at Export Properties and its not working to export the detail row, only the main data in the row.

Here's the data I want to export sample pic:

import React from 'react';
import { Layout } from 'antd';
import dummyParrent from '../../../../dataDummy4.json';
import dummyAnak from '../../../../dataDummy5.json';

import {
    GridComponent,
    ColumnDirective,
    ColumnsDirective,
    Page,
    Inject,
    Toolbar,
    PdfExport,
    Grid,
    ExcelExport,
    Filter,
    DetailRow,
} from '@syncfusion/ej2-react-grids'

import { DataManager, Query } from '@syncfusion/ej2-data';

const Laporan = () => {
    const { Content } = Layout;

    let grid = Grid | null;

    const dataParrent = dummyParrent.map((dt, index) => {
        return ({
            no: index + 1,
            id_team: dt.id_team,
            nama_team: dt.nama_team,
            adviser: dt.adviser
        })
    })

    const dataAnak = dummyAnak.map((dt) => {
        return ({
            id: dt.id,
            nama: dt.nama,
            umur: dt.umur,
            col_dum: dt.col_dum,
            id_team: dt.id_team

        })
    })

    const detailData = (e) => {

        const selectData = new DataManager(dataAnak).executeLocal(new Query().where("id_team", "equal", e.data.id_team, false));

        const detail1 = new Grid({
            dataSource: selectData,
            columns: [
                { field: 'id', headerText: 'Id ', width: 100 },
                { field: 'nama', headerText: 'Nama', width: 100 },
                { field: 'umur', headerText: 'Umur', width: 100 },
                { field: 'col_dum', headerText: 'Col_dum', width: 100 },
                { field: 'id_team', headerText: 'Id Team', width: 100 }
            ]
        });

        const detail2 = new Grid({
            dataSource: selectData,
            columns: [
                { field: 'id', headerText: 'Id ', width: 100 },
                { field: 'nama', headerText: 'Nama', width: 100 },
                { field: 'umur', headerText: 'Umur', width: 100 },
                { field: 'col_dum', headerText: 'Col_dum', width: 100 },
                { field: 'id_team', headerText: 'Id Team', width: 100 }
            ]
        });
        detail1.appendTo(e.detailElement.querySelector('.custom-grid1'));
        detail2.appendTo(e.detailElement.querySelector('.custom-grid2'));
    }

    const gridTemplate = () => {

        return (
            <div className='mt-2'>
                <div className='mb-2'>
                    <b>Detail Data 1</b>
                    <div className='custom-grid1'></div>
                </div>
                <div className=''>
                    <b>Detail Data 2</b>
                    <div className='custom-grid2'></div>
                </div>
            </div>
        );
    }

    const toolbarClick = (args) => {
        if (grid) {
            if (args.item.id.includes('excelexport')) {
                grid.excelExport({
                    fileName: 'ExportHirarki.xlsx',
                    hierarchyExportMode: 'All',
                    }
                })
            } else if (args.item.id.includes('pdfexport')) {
                grid.pdfExport({
                    fileName: 'ExportHirarki.pdf',
                    hierarchyExportMode: 'All',
                    pageSize: 'A4',
                    pageOrientation: 'Landscape'
                })
            }
        }
    }

    const pdfHeaderQueryCellInfo = (PdfHeaderQueryCellInfoEventArgs) => {
        PdfHeaderQueryCellInfoEventArgs.cell.row.pdfGrid.repeatHeader = true;
    }

    return (
        <Content className='konten'>
            <div>
                <div className='mt-2'><b>First Grid</b></div>
                <GridComponent
                    dataSource={dataParrent}
                    ref={g => grid = g}
                    allowPaging={true}
                    toolbar={['PdfExport', 'ExcelExport', 'Search']}
                    allowPdfExport={true}
                    allowExcelExport={true}
                    allowFiltering={true}
                    filterSettings={{ type: 'Excel' }}
                    toolbarClick={toolbarClick}
                    pdfHeaderQueryCellInfo={pdfHeaderQueryCellInfo}
                    gridLines='Both'
                    width='auto'
                    dataBound={() => {
                        grid.detailRowModule.expandAll()
                    }}
                    detailDataBound={detailData}
                    detailTemplate={gridTemplate}
                >
                    <ColumnsDirective>
                        <ColumnDirective field='no' headerText='No' textAlign='Left' headerTextAlign='Center' width='120' />
                        <ColumnDirective field='id_team' headerText='Id Team' textAlign='Left' headerTextAlign='Center' width='120' />
                        <ColumnDirective field='nama_team' headerText='Nama Team' textAlign='Left' headerTextAlign='Center' width='120' />
                        <ColumnDirective field='adviser' headerText='Adviser' textAlign='Left' headerTextAlign='Center' width='150' />
                    </ColumnsDirective>
                    <Inject services={[Page, Toolbar, PdfExport, ExcelExport, Filter, DetailRow]} />
                </GridComponent>
            </div>
        </Content>
    );
};

export default Laporan;

Here is dataDummy4.json:

[
    {
        "id_team": "1",
        "nama_team": "IYO A",
        "adviser": "Dummy"
    },
    {
        "id_team": "2",
        "nama_team": "IYO B",
        "adviser": "Dummy"
    },
    {
        "id_team": "1",
        "nama_team": "IYO C",
        "adviser": "Dummy"
    },
    {
        "id_team": "2",
        "nama_team": "IYO D",
        "adviser": "Dummy"
    }
]

And dataDummy5.json:

[
    {
        "id_team": "1",
        "id": "5",
        "nama": "Child 1",
        "umur": "22",
        "status": "Single 1",
        "col_dum": "Hellow World"
    },
    {
        "id_team": "2",
        "id": "6",
        "nama": "Child 2",
        "umur": "25",
        "status": "Single 2",
        "col_dum": "Hellow World"
    },
    {
        "id_team": "2",
        "id": "7",
        "nama": "Child Baru",
        "umur": "25",
        "status": "Single Baru",
        "col_dum": "Hellow World"
    }
]

Answer 1

The EJ2 Grid does not support the detail template exporting as the template may contain anything(text, image, etc.). So, if you want to export the data as the main Grid and child Grid pattern, then you can use the hierarchy grid export.

PdfExport

ExcelExport

Demo