Excel Export Options in React Gantt Chart Component
18 Nov 201824 minutes to read
The React Gantt Chart component 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings = {
type: 'Multiple'
};
const toolbar = ['ExcelExport'];
let ganttInstance;
function toolbarClick(args) {
if (args.item.id === 'gantt_excelexport') {
const selectedRecords = ganttInstance.treeGrid.getSelectedRecords();
const exportProperties = {
dataSource: selectedRecords
};
ganttInstance.excelExport(exportProperties);
}
}
return (
<GanttComponent
id="gantt"
dataSource={GanttData}
taskFields={taskFields}
height="450px"
toolbar={toolbar}
allowExcelExport={true}
selectionSettings={selectionSettings}
toolbarClick={toolbarClick}
ref={g => ganttInstance = g}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="120" />
<ColumnDirective field="Duration" headerText="Duration" width="100" />
<ColumnDirective field="Progress" headerText="Progress" width="120" />
</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 { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection }
from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
import { TaskFieldsModel, SelectionSettingsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const selectionSettings: SelectionSettingsModel = {
type: 'Multiple'
};
const toolbar: ToolbarItem[] = ['ExcelExport'];
let ganttInstance: GanttComponent;
function toolbarClick(args: any) {
if (args.item.id === 'gantt_excelexport') {
const selectedRecords = ganttInstance.treeGrid.getSelectedRecords();
const exportProperties = {
dataSource: selectedRecords
};
ganttInstance.excelExport(exportProperties);
}
}
return (
<GanttComponent
id="gantt"
dataSource={GanttData}
taskFields={taskFields}
height="450px"
toolbar={toolbar}
allowExcelExport={true}
selectionSettings={selectionSettings}
toolbarClick={toolbarClick}
ref={g => ganttInstance = g}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="120" />
<ColumnDirective field="Duration" headerText="Duration" width="100" />
<ColumnDirective field="Progress" headerText="Progress" width="120" />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ExcelExport, ColumnsDirective, ColumnDirective, Selection } 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',
parentID: 'ParentID'
};
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={GanttData} 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, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App() {
let ganttInstance: GanttComponent;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbarOptions: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
function toolbarClick(args: ClickEventArgs) {
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={GanttData} 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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Include hidden columns in export
To include hidden columns during Excel export in the Gantt Chart component, 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, 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',
parentID: 'parentID'
};
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, ExcelExportProperties, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttInstance: GanttComponent;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Enable filtering in exported Excel
To enable filtering in exported Excel or CSV files in Gantt Chart component, set the enableFilter property to true within ExcelExportProperties. Additionally, ensure that filtering is enabled in the Gantt configuration by setting allowFiltering to true.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['ExcelExport', 'CsvExport'];
let ganttRef;
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_excelexport') {
const excelExportProperties = {
enableFilter: true
};
ganttRef.excelExport(excelExportProperties);
}
}
return (
<GanttComponent id="ganttDefault"
dataSource={GanttData}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowExcelExport={true}
allowFiltering={true}
treeColumnIndex={1}
height="430px"
ref={g => ganttRef = g}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" visible={false} />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Filter]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, TaskFieldsModel, Toolbar, ExcelExport, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-react-navigations';
import { GanttData } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: any = ['ExcelExport', 'CsvExport'];
let ganttRef: GanttComponent;
function toolbarClick(args: ClickEventArgs) {
if (args.item.id === 'ganttDefault_excelexport') {
const excelExportProperties = {
enableFilter: true
};
ganttRef.excelExport(excelExportProperties);
}
}
return (
<GanttComponent id="ganttDefault"
dataSource={GanttData}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowExcelExport={true}
allowFiltering={true}
treeColumnIndex={1}
height="430px"
ref={g => ganttRef = g}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" visible={false} />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Filter]} />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Set custom file name
To specify a custom name for the exported Excel or CSV file in the Gantt Chart component, set the fileName property within the ExcelExportProperties configuration. This defines the name assigned to the file when the export is triggered.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { getComponent } from '@syncfusion/ej2-base';
import { GanttData } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const splitterSettings = { columnIndex: 1 };
const toolbar = ['ExcelExport', 'CsvExport'];
const toolbarClick = (args) => {
if (args.item.id === 'ganttDefault_excelexport') {
const textbox = getComponent(document.getElementById('fileNameBox'), TextBoxComponent)
const gantt = getComponent(document.getElementById('ganttDefault'), GanttComponent);
const excelProps = {
fileName: textbox.value !== '' ? textbox.value + '.xlsx' : 'new.xlsx'
};
gantt.excelExport(excelProps);
}
};
return (
<div>
<div style=>
<label style=>Enter file name: </label>
<TextBoxComponent id="fileNameBox" placeholder="Enter file name" width={120} />
</div>
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={GanttData}
taskFields={taskFields}
splitterSettings={splitterSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowExcelExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" visible={false} />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GanttComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { getComponent } from '@syncfusion/ej2-base';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { GanttData } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const splitterSettings: SplitterSettingsModel = { columnIndex: 1 };
const toolbar: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
const toolbarClick = (args: ClickEventArgs): void => {
if ((args as any).item.id === 'ganttDefault_excelexport') {
const textbox = getComponent(document.getElementById('fileNameBox') as HTMLElement, TextBoxComponent) as TextBoxComponent;
const gantt = getComponent(document.getElementById('ganttDefault') as HTMLElement, GanttComponent) as GanttComponent;
const excelProps: ExcelExportProperties = {
fileName: textbox.value !== '' ? textbox.value + '.xlsx' : 'new.xlsx'
};
gantt.excelExport(excelProps);
}
};
return (
<div>
<div style=>
<label style=>Enter file name: </label>
<TextBoxComponent id="fileNameBox" placeholder="Enter file name" width={120} />
</div>
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={GanttData}
taskFields={taskFields}
splitterSettings={splitterSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowExcelExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" visible={false} />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customize exported columns
The Gantt Chart component 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ExcelExport } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App() {
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['ExcelExport', 'CsvExport'];
let ganttInstance;
const toolbarClick = (args) => {
if (args.item && args.item.id === 'ganttDefault_excelexport') {
const 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' }
];
const excelExportProperties = {
columns: exportColumns
};
ganttInstance.excelExport(excelExportProperties);
}
};
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={GanttData}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowExcelExport={true}
treeColumnIndex={1}
ref={((g) => ganttInstance = g)}
>
<Inject services={[Toolbar, ExcelExport]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ExcelExport, TaskFieldsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { ExcelExportProperties, Column } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './datasource';
function App() {
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['ExcelExport', 'CsvExport'];
let ganttInstance: GanttComponent;
const toolbarClick = (args: ClickEventArgs): void => {
if (args.item && args.item.id === 'ganttDefault_excelexport') {
const exportColumns: Partial<Column>[] = [
{ 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' }
];
const excelExportProperties: ExcelExportProperties = {
columns: exportColumns as Column[]
};
ganttInstance.excelExport(excelExportProperties);
}
};
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={GanttData}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowExcelExport={true}
treeColumnIndex={1}
ref={((g: any) => ganttInstance = g)}
>
<Inject services={[Toolbar, ExcelExport]} />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Add header and footer to export
To add header and footer content to exported Excel or CSV files in the Gantt Chart component, 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['ExcelExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_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:[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 }
}
]
}
]
}
};
if (ganttInstance) {
ganttInstance.excelExport(excelExportProperties);
}
}
}
return (
<GanttComponent
id="ganttDefault"
dataSource={data}
height="430px"
taskFields={taskFields}
toolbar={toolbar}
allowExcelExport={true}
treeColumnIndex={1}
toolbarClick={toolbarClick}
ref={(g) => {
ganttInstance = g;
}}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="80" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="120" />
<ColumnDirective field="Duration" headerText="Duration" width="100" textAlign="Right" />
<ColumnDirective field="Progress" headerText="Progress" width="100" textAlign="Right" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItems[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_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:[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 }
}
]
}
]
}
};
if (ganttInstance) {
ganttInstance.excelExport(excelExportProperties);
}
}
}
return (
<GanttComponent
id="ganttDefault"
dataSource={data}
height="430px"
taskFields={taskFields}
toolbar={toolbar}
allowExcelExport={true}
treeColumnIndex={1}
toolbarClick={toolbarClick}
ref={(g: GanttComponent) => {
ganttInstance = g;
}}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="80" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="120" />
<ColumnDirective field="Duration" headerText="Duration" width="100" textAlign="Right" />
<ColumnDirective field="Progress" headerText="Progress" width="100" textAlign="Right" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['ExcelExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_excelexport') {
const excelExportProperties = {
theme: {
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
ganttInstance.excelExport(excelExportProperties);
}
}
return (
<GanttComponent
id="ganttDefault"
dataSource={data}
height="430px"
taskFields={taskFields}
toolbar={toolbar}
allowExcelExport={true}
treeColumnIndex={1}
toolbarClick={toolbarClick}
ref={(g) => { ganttInstance = g; }}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="80" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="120" />
<ColumnDirective field="Duration" headerText="Duration" width="100" textAlign="Right" />
<ColumnDirective field="Progress" headerText="Progress" width="100" textAlign="Right" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItems[] = ['ExcelExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
const excelExportProperties: ExcelExportProperties = {
theme: {
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
ganttInstance!.excelExport(excelExportProperties);
}
}
return (
<GanttComponent
id="ganttDefault"
dataSource={data}
height="430px"
taskFields={taskFields}
toolbar={toolbar}
allowExcelExport={true}
treeColumnIndex={1}
toolbarClick={toolbarClick}
ref={(g: GanttComponent | null) => { ganttInstance = g; }}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="80" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="120" />
<ColumnDirective field="Duration" headerText="Duration" width="100" textAlign="Right" />
<ColumnDirective field="Progress" headerText="Progress" width="100" textAlign="Right" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</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:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection, TaskFieldsModel, LabelSettingsModel, SplitterSettingsModel, IQueryTaskbarInfoEventArgs, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { Column, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './datasource';
function App() {
let ganttInstance = null;
const data = editingData;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['ExcelExport'];
const labelSettings = {
taskLabel: '${Progress}%'
};
const splitterSettings = {
columnIndex: 3
};
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_excelexport') {
ganttInstance.excelExport();
}
}
function excelQueryCellInfo(args) {
if (args.column.field === 'Progress') {
const progressValue = args.value;
if (progressValue > 80) {
args.style = { backColor: '#A569BD' };
} else if (progressValue < 20) {
args.style = { backColor: '#F08080' };
}
}
}
function queryTaskbarInfo(args) {
const progress = (args.data).Progress;
if (progress > 80) {
args.progressBarBgColor = '#6C3483';
args.taskbarBgColor = args.taskbarBorderColor = '#A569BD';
} else if (progress < 20) {
args.progressBarBgColor = '#CD5C5C';
args.taskbarBgColor = args.taskbarBorderColor = '#F08080';
}
}
function queryCellInfo(args) {
if ((args.column).field === 'Progress') {
const progress = (args.data).Progress;
if (progress > 80) {
(args.cell).style.backgroundColor = '#A569BD';
} else if (progress < 20) {
(args.cell).style.backgroundColor = '#F08080';
}
}
}
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
allowExcelExport={true}
treeColumnIndex={1}
labelSettings={labelSettings}
splitterSettings={splitterSettings}
toolbarClick={toolbarClick}
queryCellInfo={queryCellInfo}
excelQueryCellInfo={excelQueryCellInfo}
queryTaskbarInfo={queryTaskbarInfo}
ref={(g) => {
ganttInstance = g;
}}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" visible={false} />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
</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 { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, ExcelExport, Selection, TaskFieldsModel, LabelSettingsModel, SplitterSettingsModel, IQueryTaskbarInfoEventArgs, ToolbarItems } from '@syncfusion/ej2-react-gantt';
import { Column, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './datasource';
function App() {
let ganttInstance: GanttComponent | null = null;
const data: object[] = editingData;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItems[] = ['ExcelExport'];
const labelSettings: LabelSettingsModel = {
taskLabel: '${Progress}%'
};
const splitterSettings: SplitterSettingsModel = {
columnIndex: 3
};
function toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
ganttInstance!.excelExport();
}
}
function excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
if (args.column.field === 'Progress') {
const progressValue = args.value as number;
if (progressValue > 80) {
args.style = { backColor: '#A569BD' };
} else if (progressValue < 20) {
args.style = { backColor: '#F08080' };
}
}
}
function queryTaskbarInfo(args: IQueryTaskbarInfoEventArgs): void {
const progress = (args.data as { Progress: number }).Progress;
if (progress > 80) {
args.progressBarBgColor = '#6C3483';
args.taskbarBgColor = args.taskbarBorderColor = '#A569BD';
} else if (progress < 20) {
args.progressBarBgColor = '#CD5C5C';
args.taskbarBgColor = args.taskbarBorderColor = '#F08080';
}
}
function queryCellInfo(args: QueryCellInfoEventArgs): void {
if ((args.column as Column).field === 'Progress') {
const progress = (args.data as { Progress: number }).Progress;
if (progress > 80) {
(args.cell as HTMLElement).style.backgroundColor = '#A569BD';
} else if (progress < 20) {
(args.cell as HTMLElement).style.backgroundColor = '#F08080';
}
}
}
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
allowExcelExport={true}
treeColumnIndex={1}
labelSettings={labelSettings}
splitterSettings={splitterSettings}
toolbarClick={toolbarClick}
queryCellInfo={queryCellInfo}
excelQueryCellInfo={excelQueryCellInfo}
queryTaskbarInfo={queryTaskbarInfo}
ref={(g: GanttComponent | null) => {
ganttInstance = g;
}}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" visible={false} />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
</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/34.1.29/tailwind3.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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>