Multiple gantt exporting in React Gantt component
2 Feb 202324 minutes to read
In Gantt, the Excel export provides support to export multiple Gantt data in new sheet or same sheet.
Same sheet
The Excel export provides support to export multiple Gantt data in the same sheet. To export in same sheet, define multipleExport.type
as AppendToSheet
in ExcelExportProperties
. You can also provide blank rows between exported multiple Gantt data. These blank rows count can be defined using multipleExport.blankRows
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let firstGantt;
let secondGantt;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport'];
function toolbarClick(args) {
if (args.item.id === 'FirstGantt_excelexport') {
const appendExcelExportProperties= {
multipleExport: {type: 'AppendToSheet',blankRows: 2}
};
const firstGanttExport = firstGantt.excelExport(appendExcelExportProperties,true);
firstGanttExport.then((fData) => {
secondGantt.excelExport(appendExcelExportProperties,false,fData);
});
}
};
return (
<div>
<p><b>First Gantt:</b></p>
<GanttComponent id='FirstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
<p><b>Second Gantt:</b></p>
<GanttComponent id='SecondGantt' dataSource={[data[1]]} taskFields={taskFields} allowExcelExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
<Inject services={[ExcelExport, Selection]} />
</GanttComponent>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let firstGantt: any;
let secondGantt: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'FirstGantt_excelexport') {
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: {type: 'AppendToSheet',blankRows: 2}
};
const firstGanttExport: Promise<any> = firstGantt.excelExport(appendExcelExportProperties,true);
firstGanttExport.then((fData: any) => {
secondGantt.excelExport(appendExcelExportProperties,false,fData);
});
}
};
return (
<div>
<p><b>First Gantt:</b></p>
<GanttComponent id='FirstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
<p><b>Second Gantt:</b></p>
<GanttComponent id='SecondGantt' dataSource={[data[1]]} taskFields={taskFields} allowExcelExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
<Inject services={[ExcelExport, Selection]} />
</GanttComponent>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
By default,
multipleExport.blankRows
value is 5.
New sheet
The Excel exporting provides support to export multiple Gantt in new sheet. To export in new sheet, define multipleExport.type
as NewSheet
in ExcelExportProperties
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let firstGantt;
let secondGantt;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport'];
function toolbarClick(args) {
if (args.item.id === 'FirstGantt_excelexport') {
const appendExcelExportProperties = {
multipleExport: {type: 'NewSheet'}
};
const firstGanttExport = firstGantt.excelExport(appendExcelExportProperties,true);
firstGanttExport.then((fData) => {
secondGantt.excelExport(appendExcelExportProperties,false,fData);
});
}
};
return (
<div>
<p><b>First Gantt:</b></p>
<GanttComponent id='FirstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
<p><b>Second Gantt:</b></p>
<GanttComponent id='SecondGantt' dataSource={[data[1]]} taskFields={taskFields} allowExcelExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
<Inject services={[ExcelExport, Selection]} />
</GanttComponent>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ExcelExportProperties, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let firstGantt: any;
let secondGantt: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'FirstGantt_excelexport') {
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: {type: 'NewSheet'}
};
const firstGanttExport: Promise<any> = firstGantt.excelExport(appendExcelExportProperties,true);
firstGanttExport.then((fData: any) => {
secondGantt.excelExport(appendExcelExportProperties,false,fData);
});
}
};
return (
<div>
<p><b>First Gantt:</b></p>
<GanttComponent id='FirstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
<p><b>Second Gantt:</b></p>
<GanttComponent id='SecondGantt' dataSource={[data[1]]} taskFields={taskFields} allowExcelExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
<Inject services={[ExcelExport, Selection]} />
</GanttComponent>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Customize the Excel export
Gantt Excel export allows the users to customize the exported document based on requirement.
Export hidden columns
In Gantt, the Excel export provides an option to export hidden columns by defining includeHiddenColumn
as true
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ColumnsDirective,ColumnDirective, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport', 'CsvExport'];
function toolbarClick(args) {
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties = {
includeHiddenColumn: true
};
ganttInstance.excelExport(excelExportProperties);
} else if (args.item.id === 'GanttExport_csvexport') {
const excelExportProperties= {
includeHiddenColumn: true
};
ganttInstance.csvExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' textAlign='Left' width='100' ></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name' width='150'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='StartDate' width='150' visible={false}></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='150' ></ColumnDirective>
<ColumnDirective field='Progress' headerText='Progress' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ColumnsDirective,ColumnDirective, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
ganttInstance.excelExport(excelExportProperties);
} else if (args.item.id === 'GanttExport_csvexport') {
const excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
ganttInstance.csvExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' textAlign='Left' width='100' ></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name' width='150'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='StartDate' width='150' visible={false}></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='150' ></ColumnDirective>
<ColumnDirective field='Progress' headerText='Progress' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Show or hide columns on exported Excel
In Gantt, while exporting, you can show a hidden column or hide a visible column using the toolbarClick
and excelExportComplete
events.
In the toolbarClick
event, using the args.item.id
property, you can show or hide columns by setting the column.visible
property to true
or false
respectively.
Similarly, in the excelExportComplete event, you can revert the columns visibility back to the previous state.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ColumnsDirective,ColumnDirective, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport', 'CsvExport'];
function toolbarClick(args) {
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.treeGrid.grid.columns[0].visible = true;
ganttInstance.treeGrid.grid.columns[3].visible = false;
ganttInstance.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
ganttInstance.treeGrid.grid.columns[0].visible = true;
ganttInstance.treeGrid.grid.columns[3].visible = false;
ganttInstance.csvExport();
}
};
function excelExportComplete() {
ganttInstance.treeGrid.grid.columns[0].visible = false;
ganttInstance.treeGrid.grid.columns[3].visible = true;
}
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} excelExportComplete={excelExportComplete} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' textAlign='Left' width='100' ></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name' width='150'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='StartDate' width='150' visible={false}></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='150' ></ColumnDirective>
<ColumnDirective field='Progress' headerText='Progress' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, ColumnsDirective,ColumnDirective, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.treeGrid.grid.columns[0].visible = true;
ganttInstance.treeGrid.grid.columns[3].visible = false;
ganttInstance.excelExport();
} else if (args.item.id === 'GanttExport_csvexport') {
ganttInstance.treeGrid.grid.columns[0].visible = true;
ganttInstance.treeGrid.grid.columns[3].visible = false;
ganttInstance.csvExport();
}
};
function excelExportComplete(): void {
ganttInstance.treeGrid.grid.columns[0].visible = false;
ganttInstance.treeGrid.grid.columns[3].visible = true;
}
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} excelExportComplete={excelExportComplete} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' textAlign='Left' width='100' ></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name' width='150'></ColumnDirective>
<ColumnDirective field='StartDate' headerText='StartDate' width='150' visible={false}></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration' width='150' ></ColumnDirective>
<ColumnDirective field='Progress' headerText='Progress' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Cell formatting during export
In Gantt, you can customize the TreeGrid cells in the exported document using the excelQueryCellInfo
event. In this event, you can format the TreeGrid cells of exported Excel and CSV documents based on the required condition.
In the following sample, the background color has been customized for TaskID
column in the exported Excel using the args.style
and backColor
properties.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { ganttData } from './datasource';
function App (){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions= ['ExcelExport'];
function toolbarClick(args) {
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.excelExport();
}
};
function excelQueryCellInfo(args) {
if(args.column.field == 'Progress') {
if(args.value > 80) {
args.style = { backColor: '#A569BD' };
}
else if(args.value < 20) {
args.style = { backColor: '#F08080' };
}
}
};
function queryTaskbarInfo(args) {
if (args.data.Progress > 80) {
args.progressBarBgColor = "#6C3483";
args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
} else if (args.data.Progress < 20) {
args.progressBarBgColor = "#CD5C5C";
args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
}
};
function queryCellInfo(args) {
if(args.column.field == 'Progress') {
if(args.data.Progress > 80) {
args.cell.style.backgroundColor = '#A569BD';
}
else if(args.data.Progress < 20) {
args.cell.style.backgroundColor = '#F08080';
}
}
};
const labelSettings = {
taskLabel: '${Progress}%'
};
const splitterSettings = {
columnIndex: 3
};
return <GanttComponent id='GanttExport' dataSource={ganttData} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} queryCellInfo={queryCellInfo} excelQueryCellInfo={excelQueryCellInfo} queryTaskbarInfo={queryTaskbarInfo} allowExcelExport={true} height='400px' ref={gantt =>ganttInstance = gantt} treeColumnIndex={1} labelSettings={labelSettings} splitterSettings={splitterSettings} >
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText= 'Task ID' textAlign= 'Left' width= '100' visible= {false}></ColumnDirective>
<ColumnDirective field='TaskName' headerText= 'Task Name' width= '150'></ColumnDirective>
<ColumnDirective field='Progress' headerText= 'Progress' width= '150'></ColumnDirective>
<ColumnDirective field='StartDate' headerText= 'Start Date' width= '150'></ColumnDirective>
<ColumnDirective field='Duration' headerText= 'Duration' width= '150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { ganttData } from './datasource';
function App (){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
ganttInstance.excelExport();
}
};
function excelQueryCellInfo(args) {
if(args.column.field == 'Progress') {
if(args.value > 80) {
args.style = { backColor: '#A569BD' };
}
else if(args.value < 20) {
args.style = { backColor: '#F08080' };
}
}
};
function queryTaskbarInfo(args) {
if (args.data.Progress > 80) {
args.progressBarBgColor = "#6C3483";
args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
} else if (args.data.Progress < 20) {
args.progressBarBgColor = "#CD5C5C";
args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
}
};
function queryCellInfo(args) {
if(args.column.field == 'Progress') {
if(args.data.Progress > 80) {
args.cell.style.backgroundColor = '#A569BD';
}
else if(args.data.Progress < 20) {
args.cell.style.backgroundColor = '#F08080';
}
}
};
const labelSettings: any = {
taskLabel: '${Progress}%'
};
const splitterSettings: any = {
columnIndex: 3
};
return <GanttComponent id='GanttExport' dataSource={ganttData} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} queryCellInfo={queryCellInfo} excelQueryCellInfo={excelQueryCellInfo} queryTaskbarInfo={queryTaskbarInfo} allowExcelExport={true} height='400px' ref={gantt =>ganttInstance = gantt} treeColumnIndex={1} labelSettings={labelSettings} splitterSettings={splitterSettings} >
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText= 'Task ID' textAlign= 'Left' width= '100' visible= {false}></ColumnDirective>
<ColumnDirective field='TaskName' headerText= 'Task Name' width= '150'></ColumnDirective>
<ColumnDirective field='Progress' headerText= 'Progress' width= '150'></ColumnDirective>
<ColumnDirective field='StartDate' headerText= 'Start Date' width= '150'></ColumnDirective>
<ColumnDirective field='Duration' headerText= 'Duration' width= '150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Theme
The Excel export also provides an option to include custom theme for exported Excel document.
To apply theme in exported Excel, define the theme
in ExcelExportProperties
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport'];
function toolbarClick(args){
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
ganttInstance.excelExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties: ExcelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
ganttInstance.excelExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
By default, material theme is applied to the exported Excel document.
Add header and footer
The Excel export also allows users to include header and footer contents to the exported Excel document.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport'];
function toolbarClick(args) {
if (args.item.id === 'GanttExport_excelexport') {
const 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:support@northwind.com' }, 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 } }] }
]
},
};
ganttInstance.excelExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties: 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:support@northwind.com' }, 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 } }] }
]
},
};
ganttInstance.excelExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
File name for exported document
You can set the required file name for the exported document by defining the fileName
property in ExcelExportProperties
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['ExcelExport', 'CsvExport'];
function toolbarClick(args) {
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties = {
fileName:"Gantt.xlsx"
};
ganttInstance.excelExport(excelExportProperties);
} else if (args.item.id === 'GanttExport_csvexport'){
const excelExportProperties = {
fileName:"Gantt.csv"
};
ganttInstance.csvExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, ToolbarItem, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'GanttExport_excelexport') {
const excelExportProperties: ExcelExportProperties = {
fileName:"Gantt.xlsx"
};
ganttInstance.excelExport(excelExportProperties);
} else if (args.item.id === 'GanttExport_csvexport'){
const excelExportProperties: ExcelExportProperties = {
fileName:"Gantt.csv"
};
ganttInstance.csvExport(excelExportProperties);
}
};
return <GanttComponent id='GanttExport' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowExcelExport={true} height='400px' ref={gantt => ganttInstance = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar, ExcelExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>