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