Excel export in EJ2 JavaScript Gantt control

2 May 20233 minutes to read

Gantt supports client-side exporting, which allows you to export its data to the Excel and CSV formats. Use the excelExport and csvExport methods for exporting. To enable Excel export in the Gantt, set the allowExcelExport to true.

To export data to Excel and CSV, inject the ExcelExport module in Gantt.

index.js
index.html
var clickHandler = function(args){
	if (args.item.id === 'GanttExport_excelexport') {
			ganttChart.excelExport();
		} else if (args.item.id === 'GanttExport_csvexport') {
			ganttChart.csvExport();
		}
};

ej.gantt.Gantt.Inject(ej.gantt.ExcelExport,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',        
        duration: 'Duration',
        progress: 'Progress',        
        child: 'subtasks'
    },
    allowExcelExport: true,
    toolbar: ['ExcelExport', 'CsvExport'],
	toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
	<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        
        <div id="container">
            <div id="GanttExport"></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>