Search results

Custom Data Source in JavaScript (ES5) Gantt control

27 Mar 2023 / 1 minute to read

The excel export provides an option to define datasource dynamically before exporting. To export data dynamically, define the dataSource in exportProperties.

Source
Preview
index.js
index.html
Copied to clipboard
var clickHandler = function(args){
	if (args.item.id === 'GanttExport_excelexport') {
		var excelExportProperties = {
            dataSource: [GanttData[1]]
        };
        ganttChart.excelExport(excelExportProperties);
	}
};

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'],
	toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
Copied to clipboard
<!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/21.1.35/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>