Search results

Exporting Hierarchy Grid in JavaScript (ES5) Grid control

06 Jun 2023 / 2 minutes to read

The grid has an option to export the hierarchy grid to excel document. By default, it will use Expanded as hierarchyExportMode. you can change the exporting option by using the ExcelExportProperties.hierarchyExportMode property. The available options are,

Mode Behavior
Expanded Exports the visible child grids in expanded state and remaining child grid in collapsed state when args.isChild property is set to true in beforeExcelExport event.
All Exports the all the child grids in expanded state.
None Exports all child grids in collapsed state when args.isChild property is set to true in beforeExcelExport event.
Source
Preview
index.js
index.html
Copied to clipboard
ej.grids.Grid.Inject(ej.grids.DetailRow, ej.grids.Toolbar, ej.grids.ExcelExport);

var grid= new ej.grids.Grid({
    dataSource: employeeData,
    toolbar: ["ExcelExport"],
    allowExcelExport: true,
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
        { field: 'FirstName', headerText: 'First Name', width: 150 },
        { field: 'City', headerText: 'City', width: 150 },
        { field: 'Country', headerText: 'Country', width: 150 }
    ],
    childGrid: {
        dataSource: data,
        queryString: 'EmployeeID',
        columns: [
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
            { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
            { field: 'ShipCity', headerText: 'Ship City', width: 150 },
            { field: 'ShipName', headerText: 'Ship Name', width: 150 }
        ],
    },
    beforeExcelExport: beforeExcelExport,
    toolbarClick: toolbarClick
});
grid.appendTo('#Grid');

function beforeExcelExport(args) {
    args.isChild = true;
}

function toolbarClick(args) {
    if (args['item'].id === 'Grid_excelexport') {
        var exportProperties = {
           hierarchyExportMode: "Expanded"
        };
        grid.excelExport(exportProperties);
    }
}
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="Grid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Limitations

  • Microsoft Excel permits up to seven nested levels in outlines. So that in the grid we can able to provide only up to seven nested level and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the Microsoft Limitation