Excel Export Options in EJ2 JavaScript Gantt Chart Control
2 Jul 202624 minutes to read
The EJ2 JavaScript Gantt Chart control provides configurable options for Excel or CSV export through the ExcelExportProperties object. You can customize column selection, include hidden columns, define a custom data source, apply filters, and format exported data. It also supports setting file names, adding headers and footers, and exporting multiple Gantt Charts.
Export selected records
You can export selected records to Excel or CSV by using getSelectedRecords to retrieve the required data and assigning it to ExportProperties.dataSource within the toolbarClick event. Once the data source is set, initiate the export using excelExport or csvExport method.
ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.ExcelExport, ej.gantt.Selection);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
selectionSettings: {
type: 'Multiple'
},
toolbar: ['ExcelExport'],
allowExcelExport: true,
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '120' },
{ field: 'Duration', headerText: 'Duration', width: '100' },
{ field: 'Progress', headerText: 'Progress', width: '120' }
],
toolbarClick: function (args) {
if (args.item && args.item.id === 'GanttDefault_excelexport') {
var selectedRecords = ganttChart.treeGrid.getSelectedRecords();
var exportProperties = { dataSource: selectedRecords };
ganttChart.excelExport(exportProperties);
}
}
});
ganttChart.appendTo('#GanttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttDefault"></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>Show or hide columns during export
To show or hide specific columns during Excel export in Gantt, use the toolbarClick event to check args.item.id and update the columns.visible property to true or false . After the export is complete, restore the original column visibility using the excelExportComplete event.
The following example demonstrates how the StartDate column is made visible and the Duration column is excluded from the exported Excel file.
var gantt = new ej.gantt.Gantt({
id: 'GanttExport',
dataSource: GanttData,
height: '400px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
treeColumnIndex: 1,
toolbar: ['ExcelExport', 'CsvExport'],
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
{ field: 'TaskName', headerText: 'Task Name', width: 150 },
{ field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
allowExcelExport: true,
toolbarClick: function (args) {
if (args.item.id === 'GanttExport_excelexport') {
gantt.treeGrid.grid.columns[0].visible = true;
gantt.treeGrid.grid.columns[3].visible = false;
gantt.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
gantt.treeGrid.grid.columns[0].visible = true;
gantt.treeGrid.grid.columns[3].visible = false;
gantt.csvExport();
}
},
excelExportComplete: function () {
gantt.treeGrid.grid.columns[0].visible = false;
gantt.treeGrid.grid.columns[3].visible = true;
},
csvExportComplete: function () {
gantt.treeGrid.grid.columns[0].visible = false;
gantt.treeGrid.grid.columns[3].visible = true;
}
});
gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/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>Include hidden columns in export
To include hidden columns during Excel export in the Gantt Chart control, set ExportProperties.includeHiddenColumn to true in the export configuration. This ensures that hidden columns are included in the exported data.
The following example demonstrates that the hidden StartDate column is included in the exported file.
var clickHandler = function(args){
if (args.item.id === 'GanttExport_excelexport') {
var excelExportProperties = {
includeHiddenColumn: true
};
ganttChart.excelExport(excelExportProperties);
}
else if (args.item.id === 'GanttExport_csvexport') {
var excelExportProperties = {
includeHiddenColumn: true
};
ganttChart.csvExport(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',
parentID: 'ParentID'
},
treeColumnIndex: 1,
allowExcelExport: true,
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150',visible:false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
],
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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/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>Enable filtering in exported Excel
To enable filtering in exported Excel or CSV files in Gantt Chart control, set the enableFilter property to true within ExcelExportProperties. Additionally, ensure that filtering is enabled in the Gantt configuration by setting allowFiltering to true.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
treeColumnIndex: 1,
allowExcelExport: true,
allowFiltering: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
toolbar: ['ExcelExport', 'CsvExport'],
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
{ field: 'TaskName', headerText: 'Task Name', width: 150 },
{ field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
toolbarClick: function (args) {
if (args.item.id === 'GanttDefault_excelexport') {
var excelExportProperties = { enableFilter: true };
ganttChart.excelExport(excelExportProperties);
}
}
});
ganttChart.appendTo('#GanttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttDefault"></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>Set custom file name
To specify a custom name for the exported Excel or CSV file in the Gantt Chart control, set the fileName property within the ExcelExportProperties configuration. This defines the name assigned to the file when the export is triggered.
var fileNameBox = new ej.inputs.TextBox({
placeholder: 'Enter file name',
width: 120
});
fileNameBox.appendTo('#fileNameBox');
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
treeColumnIndex: 1,
allowExcelExport: true,
splitterSettings: { columnIndex: 1 },
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
toolbar: ['ExcelExport', 'CsvExport'],
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
{ field: 'TaskName', headerText: 'Task Name', width: 150 },
{ field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
toolbarClick: function (args) {
if (args.item.id === 'ganttDefault_excelexport') {
var name = fileNameBox.value && fileNameBox.value.trim() !== '' ? fileNameBox.value.trim() : 'new';
ganttChart.excelExport({ fileName: name + '.xlsx' });
}
}
});
ganttChart.appendTo('#ganttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="padding: 0 0 20px 0;">
<label style="padding: 30px 17px 0 0; font-weight: bold;">
Enter file name:
</label>
<input id="fileNameBox" />
</div>
<div id="ganttDefault"></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>Customize exported columns
The Gantt Chart control supports customizing column settings during Excel or CSV export by configuring the ExcelExportProperties.columns property. You can specify attributes such as field, headerText, and textAlign to define the structure and formatting of each column in the exported file, aligning the exported content with specific layout and styling preferences.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
treeColumnIndex: 1,
allowExcelExport: true,
toolbar: ['ExcelExport', 'CsvExport'],
toolbarClick: function (args) {
if (args.item && args.item.id === 'GanttDefault_excelexport') {
var exportColumns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Project Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
var excelExportProperties = {
columns: exportColumns
};
ganttChart.excelExport(excelExportProperties);
}
}
});
ganttChart.appendTo('#GanttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttDefault"></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>Add header and footer to export
To add header and footer content to exported Excel or CSV files in the Gantt Chart control, configure the header and footer properties within ExcelExportProperties during the toolbarClick event. This allows you to define custom content that appears at the top and bottom of the exported document.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
treeColumnIndex: 1,
allowExcelExport: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: 80 },
{ field: 'TaskName', headerText: 'Task Name', width: 150 },
{ field: 'StartDate', headerText: 'Start Date', width: 120 },
{ field: 'Duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
{ field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right' }
],
toolbar: ['ExcelExport'],
toolbarClick: function (args) {
if (args.item && args.item.id === 'GanttDefault_excelexport') {
var excelExportProperties = {
header: {
headerRows: 7,
rows: [
{
cells: [
{
colSpan: 4,
value: 'Northwind Traders',
style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true }
}
]
},
{
cells: [
{
colSpan: 4,
value: '2501 Aerial Center Parkway',
style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
}
]
},
{
cells: [
{
colSpan: 4,
value: 'Suite 200 Morrisville, NC 27560 USA',
style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
}
]
},
{
cells: [
{
colSpan: 4,
value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',
style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
}
]
},
{
cells: [
{
colSpan: 4,
hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' },
style: { hAlign: 'Center' }
}
]
},
{
cells: [
{
colSpan: 4,
hyperlink: { target: 'mailto:[email protected]' },
style: { hAlign: 'Center' }
}
]
}
]
},
footer: {
footerRows: 4,
rows: [
{
cells: [
{
colSpan: 4,
value: 'Thank you for your business!',
style: { hAlign: 'Center', bold: true }
}
]
},
{
cells: [
{
colSpan: 4,
value: '!Visit Again!',
style: { hAlign: 'Center', bold: true }
}
]
}
]
}
};
ganttChart.excelExport(excelExportProperties);
}
}
});
ganttChart.appendTo('#GanttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttDefault"></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>Apply font and color themes
The Excel or CSV export feature in Gantt supports applying custom themes to the exported document, helping maintain a consistent and visually structured appearance.
To configure a theme, set the theme property within ExcelExportProperties. This allows customization of styles for the following sections in the exported file
- caption: Defines the style for the caption, typically used for titles or descriptions at the top of the sheet.
- header: Specifies the styling for column headers.
- record: Applies formatting to the data rows exported from the Gantt Chart.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
treeColumnIndex: 1,
allowExcelExport: true,
toolbar: ['ExcelExport'],
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: 80 },
{ field: 'TaskName', headerText: 'Task Name', width: 150 },
{ field: 'StartDate', headerText: 'Start Date', width: 120 },
{ field: 'Duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
{ field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right' }
],
toolbarClick: function (args) {
if (args.item && args.item.id === 'ganttDefault_excelexport') {
var excelExportProperties = {
theme: {
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
ganttChart.excelExport(excelExportProperties);
}
}
});
ganttChart.appendTo('#ganttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="ganttDefault"></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>By default, tailwind3 theme is applied to the exported Excel document.
Apply conditional formatting
You can customize Gantt cells in exported Excel or CSV documents using the excelQueryCellInfo event. This event is triggered for each cell during export, allowing formatting to be conditionally applied based on the cell’s content.
In the example below, the background color is customized for the Progress column in the exported Excel or CSV file:
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
treeColumnIndex: 1,
allowExcelExport: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
labelSettings: {
taskLabel: '${Progress}%'
},
splitterSettings: {
columnIndex: 3
},
toolbar: ['ExcelExport'],
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100, visible: false },
{ field: 'TaskName', headerText: 'Task Name', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150 }
],
toolbarClick: function (args) {
if (args.item && args.item.id === 'GanttDefault_excelexport') {
ganttChart.excelExport();
}
},
excelQueryCellInfo: function (args) {
if (args.column && args.column.field === 'Progress') {
var progressValue = args.value;
if (progressValue > 80) {
args.style = { backColor: '#A569BD' };
} else if (progressValue < 20) {
args.style = { backColor: '#F08080' };
}
}
},
queryTaskbarInfo: function (args) {
var progress = args.data && args.data.Progress;
if (progress > 80) {
args.progressBarBgColor = '#6C3483';
args.taskbarBgColor = '#A569BD';
args.taskbarBorderColor = '#A569BD';
} else if (progress < 20) {
args.progressBarBgColor = '#CD5C5C';
args.taskbarBgColor = '#F08080';
args.taskbarBorderColor = '#F08080';
}
},
queryCellInfo: function (args) {
if (args.column && args.column.field === 'Progress') {
var progress = args.data && args.data.Progress;
if (progress > 80) {
args.cell.style.backgroundColor = '#A569BD';
} else if (progress < 20) {
args.cell.style.backgroundColor = '#F08080';
}
}
}
});
ganttChart.appendTo('#GanttDefault');<!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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="GanttDefault"></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>