How can I help you?
To customize PDF export
24 Mar 202624 minutes to read
Customizing PDF export in the React Gantt Chart component allows tailoring exported documents for specific needs, using PdfExportProperties to adjust file names, page orientation, size, columns, headers, footers, timelines, and templates. Ensuring focused content like selected rows or styled taskbars, with the PdfExport module injected and allowPdfExport enabled. Use beforePdfExport and pdfExportComplete events for pre-export and post-export modifications, and pdfQueryTaskbarInfo for taskbar styling, supporting RTL layouts via enableRtl.
Customize file name
Set the exported PDF file name using the fileName property in PdfExportProperties, such as ProjectPlan.pdf, for personalized document naming.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
fileName: 'new.pdf'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
fileName: 'new.pdf'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>How to change page orientation
Adjust page orientation to Portrait or Landscape using the pageOrientation property in PdfExportProperties. By default, the exported PDF document is in Landscape orientation.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
pageOrientation: 'Portrait'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
pageOrientation: 'Portrait'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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 page size
Page size can be customized for the exported document using the pageSize property in pdfExportProperties.
The supported page sizes are:
- Letter
- Note
- Legal
- A0 to A9
- B0 to B5
- Archa
- Archb
- Archc
- Archd
- Arche
- Flsa
- HalfLetter
- Letter11x17
- Ledger
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
pageSize: 'A0'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
pageSize: 'A0'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Export current view data
PDF export provides an option to export the current view data into PDF. To export current view data alone, define the exportType to CurrentViewData.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
exportType: 'CurrentViewData'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
exportType: 'CurrentViewData'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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 footer
By default, we render the default footer for a PDF file, this can be enabled or disabled by using the enableFooter property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
exportType: 'CurrentViewData'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskSettings: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
exportType: 'CurrentViewData'
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskSettings}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="ID" width="100" textAlign="Left" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Export hidden columns
PDF export provides an option to export hidden columns of Gantt by defining the includeHiddenColumn to true.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
includeHiddenColumn: true
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" visible={false} />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
includeHiddenColumn: true
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" visible={false} />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Export predecessor lines
The visibility of predecessor lines in the exported PDF document can be controlled using the showPredecessorLines property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
let ganttChart = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps = {
showPredecessorLines: true
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={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="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties, ToolbarItem } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttChart: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
};
const toolbar: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttChart) {
const exportProps: PdfExportProperties = {
showPredecessorLines: true
};
ganttChart.pdfExport(exportProps);
}
}
return (
<GanttComponent
ref={(g) => ganttChart = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
allowPdfExport={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="Start Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Export specific columns
A hidden column can be shown, or a visible column can be hidden while exporting the Gantt chart by using the toolbarClick and beforePdfExport events.
Columns can be shown or hidden by setting the column.visible property to true or false, respectively.
In the following example, the Duration column is initially hidden in the Gantt chart. During export, the Duration column is made visible and the StartDate column is hidden.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } 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 = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function beforePdfExport() {
if (ganttInstance) {
ganttInstance.treeGrid.columns[2].visible = false;
ganttInstance.treeGrid.columns[3].visible = true;
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
beforePdfExport={beforePdfExport}
allowPdfExport={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" />
<ColumnDirective field="Duration" headerText="Duration" width="150" visible={false} />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentId'
};
const toolbar: string[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
(ganttInstance as any).pdfExport();
}
}
function beforePdfExport(): void {
if (ganttInstance) {
(ganttInstance as any).treeGrid.columns[2].visible = false;
(ganttInstance as any).treeGrid.columns[3].visible = true;
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
beforePdfExport={beforePdfExport}
allowPdfExport={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" />
<ColumnDirective field="Duration" headerText="Duration" width="150" visible={false} />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Conditional cell formatting
TreeGrid cells in the exported PDF can be customized or formatted using the pdfQueryCellInfo event. This event allows formatting TreeGrid cells in the exported PDF document based on the column cell value.
In the following sample, the background color is set for Progress column in the exported document by using the args.style.backgroundColor property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
predecessor: 'Predecessor',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttChart_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function pdfQueryCellInfo(args) {
if (args.column.field === 'Progress') {
if (args.value < 50) {
args.style.backgroundColor = new PdfColor(240, 128, 128);
} else {
args.style.backgroundColor = new PdfColor(165, 105, 189);
}
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttChart"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
pdfQueryCellInfo={pdfQueryCellInfo}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" clipMode="EllipsisWithTooltip" />
<ColumnDirective field="StartDate" />
<ColumnDirective field="Duration" />
<ColumnDirective field="Progress" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
predecessor: 'Predecessor',
parentID: 'ParentID'
};
const toolbar: string[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttChart_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function pdfQueryCellInfo(args: any): void {
if (args.column.field === 'Progress') {
if (args.value < 50) {
args.style.backgroundColor = new PdfColor(240, 128, 128);
} else {
args.style.backgroundColor = new PdfColor(165, 105, 189);
}
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttChart"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
pdfQueryCellInfo={pdfQueryCellInfo}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" />
<ColumnDirective field="TaskName" headerText="Task Name" width="250" clipMode="EllipsisWithTooltip" />
<ColumnDirective field="StartDate" />
<ColumnDirective field="Duration" />
<ColumnDirective field="Progress" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Timeline cell formatting
Timeline cells in the exported PDF document can be customized or formatted using the pdfQueryTimelineCellInfo event.
In the following sample, the header background color is set for timeline cells in the exported document by using the args.timelineCell.backgroundColor property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function pdfQueryTimelineCellInfo(args) {
args.timelineCell.backgroundColor = new PdfColor(240, 248, 255);
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
pdfQueryTimelineCellInfo={pdfQueryTimelineCellInfo}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" visible={false} />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: string[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function pdfQueryTimelineCellInfo(args: any): void {
(args.timelineCell as any).backgroundColor = new PdfColor(240, 248, 255);
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
pdfQueryTimelineCellInfo={pdfQueryTimelineCellInfo}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" visible={false} />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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>Taskbar formatting
Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo event.
In the following sample, the taskbar background color is customized in the chart side of the exported document by using the args.taskbar property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function pdfQueryTaskbarInfo(args) {
const d = args.data;
if (d.Progress < 50 && !d.hasChildRecords) {
const bar = args.taskbar;
bar.progressColor = new PdfColor(205, 92, 92);
bar.taskColor = bar.taskBorderColor = new PdfColor(240, 128, 128);
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
pdfQueryTaskbarInfo={pdfQueryTaskbarInfo}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" visible={false} />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: string[] = ['PdfExport'];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
ganttInstance.pdfExport();
}
}
function pdfQueryTaskbarInfo(args: any): void {
const d: any = args.data;
if (d.Progress < 50 && !d.hasChildRecords) {
const bar = args.taskbar;
bar.progressColor = new PdfColor(205, 92, 92);
bar.taskColor = bar.taskBorderColor = new PdfColor(240, 128, 128);
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
pdfQueryTaskbarInfo={pdfQueryTaskbarInfo}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" visible={false} />
<ColumnDirective field="StartDate" headerText="StartDate" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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 Gantt chart appearance in PDF export
PDF export allows to customize the Gantt chart’s appearance in the exported PDF documents. To customize the appearance of Gantt charts in exported PDF documents, define ganttStyle within pdfExportProperties. By using ganttStyle, can customize columnHeader, fontFamily, cell, taskbar, label, timeline, chartGridLineColor, connectorLineColor, criticalConnectorLineColor, footer, font, eventMarker and holiday regardless of the theme.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, DayMarkers } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { PdfColor, PdfDashStyle, PdfPaddings, PdfBorders, PdfFontFamily, PdfFontStyle, PdfPen, PdfStringFormat, PdfTextAlignment } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance = null;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
predecessor: 'Predecessor',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar = ['PdfExport'];
const eventMarkers = [
{ day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off' }
];
const holidays = [
{ from: "04/04/2019", to: "04/04/2019", label: " Public holidays", cssClass: "e-custom-holiday" },
{ from: "04/12/2019", to: "04/12/2019", label: " Public holiday", cssClass: "e-custom-holiday" }
];
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
const stringFormat = new PdfStringFormat();
stringFormat.alignment = PdfTextAlignment.Center;
const vertical = new PdfStringFormat();
vertical.alignment = PdfTextAlignment.Center;
const pen = new PdfPen(new PdfColor(105, 105, 105), 1);
pen.dashStyle = PdfDashStyle.Dash;
const borderPen = new PdfPen(new PdfColor(192, 192, 192), 1);
const borders = new PdfBorders();
borders.all = borderPen;
const exportProperties = {
ganttStyle: {
connectorLineColor: new PdfColor(128, 0, 0),
taskbar: {
taskColor: new PdfColor(240, 128, 128),
taskBorderColor: new PdfColor(255, 0, 0),
progressColor: new PdfColor(205, 92, 92)
},
columnHeader: {
backgroundColor: new PdfColor(179, 219, 255)
},
timeline: {
backgroundColor: new PdfColor(179, 219, 255),
padding: new PdfPaddings(5, 2, 0, 0)
},
footer: {
backgroundColor: new PdfColor(205, 92, 92)
},
label: {
fontColor: new PdfColor(128, 0, 0)
},
cell: {
backgroundColor: new PdfColor(240, 248, 255),
fontColor: new PdfColor(0, 0, 0),
borderColor: new PdfColor(179, 219, 255)
},
fontFamily: 1,
eventMarker: {
label: {
backgroundColor: new PdfColor(255, 239, 213),
fontFamily: PdfFontFamily.TimesRoman,
fontColor: new PdfColor(139, 69, 19),
fontSize: 9,
format: stringFormat,
fontStyle: PdfFontStyle.Bold,
borderColor: new PdfColor(160, 82, 45),
borders: borders
},
lineStyle: pen
},
holiday: {
fontFamily: PdfFontFamily.TimesRoman,
fontSize: 10,
fontStyle: PdfFontStyle.Bold,
borderColor: new PdfColor(211, 211, 211),
backgroundColor: new PdfColor(255, 248, 220),
fontColor: new PdfColor(105, 105, 105),
format: vertical,
borders: borders
}
}
};
ganttInstance.pdfExport(exportProperties);
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
eventMarkers={eventMarkers}
holidays={holidays}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="EndDate" headerText="End Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection, DayMarkers]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, DayMarkers } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { PdfColor, PdfDashStyle, PdfPaddings, PdfBorders, PdfFontFamily, PdfFontStyle, PdfPen, PdfStringFormat, PdfTextAlignment } from '@syncfusion/ej2-pdf-export';
function App() {
let ganttInstance: GanttComponent | null = null;
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
predecessor: 'Predecessor',
progress: 'Progress',
parentID: 'ParentID'
};
const toolbar: string[] = ['PdfExport'];
const eventMarkers = [
{ day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off' }
];
const holidays = [
{ from: "04/04/2019", to: "04/04/2019", label: " Public holidays", cssClass: "e-custom-holiday" },
{ from: "04/12/2019", to: "04/12/2019", label: " Public holiday", cssClass: "e-custom-holiday" }
];
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport' && ganttInstance) {
const stringFormat = new PdfStringFormat();
stringFormat.alignment = PdfTextAlignment.Center;
const vertical = new PdfStringFormat();
vertical.alignment = PdfTextAlignment.Center;
const pen = new PdfPen(new PdfColor(105, 105, 105), 1);
pen.dashStyle = PdfDashStyle.Dash;
const borderPen = new PdfPen(new PdfColor(192, 192, 192), 1);
const borders = new PdfBorders();
borders.all = borderPen;
const exportProperties: PdfExportProperties = {
ganttStyle: {
connectorLineColor: new PdfColor(128, 0, 0),
taskbar: {
taskColor: new PdfColor(240, 128, 128),
taskBorderColor: new PdfColor(255, 0, 0),
progressColor: new PdfColor(205, 92, 92)
},
columnHeader: {
backgroundColor: new PdfColor(179, 219, 255)
},
timeline: {
backgroundColor: new PdfColor(179, 219, 255),
padding: new PdfPaddings(5, 2, 0, 0)
},
footer: {
backgroundColor: new PdfColor(205, 92, 92)
},
label: {
fontColor: new PdfColor(128, 0, 0)
},
cell: {
backgroundColor: new PdfColor(240, 248, 255),
fontColor: new PdfColor(0, 0, 0),
borderColor: new PdfColor(179, 219, 255)
},
fontFamily: 1,
eventMarker: {
label: {
backgroundColor: new PdfColor(255, 239, 213),
fontFamily: PdfFontFamily.TimesRoman,
fontColor: new PdfColor(139, 69, 19),
fontSize: 9,
format: stringFormat,
fontStyle: PdfFontStyle.Bold,
borderColor: new PdfColor(160, 82, 45),
borders: borders
},
lineStyle: pen
},
holiday: {
fontFamily: PdfFontFamily.TimesRoman,
fontSize: 10,
fontStyle: PdfFontStyle.Bold,
borderColor: new PdfColor(211, 211, 211),
backgroundColor: new PdfColor(255, 248, 220),
fontColor: new PdfColor(105, 105, 105),
format: vertical,
borders: borders
}
}
};
ganttInstance.pdfExport(exportProperties);
}
}
return (
<GanttComponent
ref={(g) => ganttInstance = g}
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
toolbarClick={toolbarClick}
eventMarkers={eventMarkers}
holidays={holidays}
allowPdfExport={true}
treeColumnIndex={1}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" width="100" />
<ColumnDirective field="TaskName" headerText="Task Name" width="150" />
<ColumnDirective field="StartDate" headerText="Start Date" width="150" />
<ColumnDirective field="EndDate" headerText="End Date" width="150" />
<ColumnDirective field="Duration" headerText="Duration" width="150" />
<ColumnDirective field="Progress" headerText="Progress" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection, DayMarkers]} />
</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/33.2.3/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 split taskbar segment colors in PDF
The PDF export feature in the Gantt Chart allows you to customize the colors of split taskbar segments using the taskSegmentStyles property inside the pdfQueryTaskbarInfo event.
The taskSegmentStyles property contains a collection of style properties for task segments. By specifying the index of corresponding segment index in this collection you can customize that segment taskbar color, progress color, and its border color.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { Inject, Toolbar, PdfExport, Edit } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App() {
const taskFields = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
endDate: "EndDate",
duration: "Duration",
progress: "Progress",
parentID: "ParentID",
segments: "Segments"
};
const editSettings = {
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport') {
ganttRef.pdfExport();
}
}
function queryTaskbarInfo(args) {
const taskData = args.data.taskData;
if (taskData.Segments) {
const segmentIndex = (args.taskbarElement).dataset.segmentIndex;
if (Number(segmentIndex) === 1) {
args.taskbarBgColor = 'red';
args.taskbarBorderColor = 'black';
args.progressBarBgColor = 'green';
}
}
}
function pdfQueryTaskbarInfo(args) {
const taskbar = args.taskbar;
if (taskbar.taskSegmentStyles && taskbar.taskSegmentStyles.length > 1) {
taskbar.taskSegmentStyles[1].taskColor = { r: 255, g: 0, b: 0 };
taskbar.taskSegmentStyles[1].progressColor = { r: 0, g: 128, b: 0 };
taskbar.taskSegmentStyles[1].taskBorderColor = { r: 0, g: 0, b: 0 };
}
}
let ganttRef;
return (
<GanttComponent
ref={(g) => ganttRef = g}
id="ganttDefault"
height="450px"
dataSource={GanttData}
taskFields={taskFields}
editSettings={editSettings}
toolbar={['PdfExport']}
gridLines="Both"
toolbarClick={toolbarClick}
queryTaskbarInfo={queryTaskbarInfo}
pdfQueryTaskbarInfo={pdfQueryTaskbarInfo}
allowPdfExport={true}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" />
<ColumnDirective field="TaskName" headerText="Task Name" />
<ColumnDirective field="StartDate" headerText="Start Date" />
<ColumnDirective field="EndDate" headerText="End Date" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Edit]} />
</GanttComponent>
);
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, EditSettingsModel, PdfQueryTaskbarInfoEventArgs, IQueryTaskbarInfoEventArgs, Inject, Toolbar, PdfExport, Edit } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
endDate: "EndDate",
duration: "Duration",
progress: "Progress",
parentID: "ParentID",
segments: "Segments"
};
const editSettings: EditSettingsModel = {
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport') {
(ganttRef as any).pdfExport();
}
}
function queryTaskbarInfo(args: IQueryTaskbarInfoEventArgs): void {
const taskData: any = args.data.taskData;
if (taskData.Segments) {
const segmentIndex = (args.taskbarElement as any).dataset.segmentIndex;
if (Number(segmentIndex) === 1) {
args.taskbarBgColor = 'red';
args.taskbarBorderColor = 'black';
args.progressBarBgColor = 'green';
}
}
}
function pdfQueryTaskbarInfo(args: PdfQueryTaskbarInfoEventArgs): void {
const taskbar = args.taskbar;
if (taskbar.taskSegmentStyles && taskbar.taskSegmentStyles.length > 1) {
taskbar.taskSegmentStyles[1].taskColor = { r: 255, g: 0, b: 0 };
taskbar.taskSegmentStyles[1].progressColor = { r: 0, g: 128, b: 0 };
taskbar.taskSegmentStyles[1].taskBorderColor = { r: 0, g: 0, b: 0 };
}
}
let ganttRef: GanttComponent;
return (
<GanttComponent
ref={(g) => ganttRef = g as any}
id="ganttDefault"
height="450px"
dataSource={GanttData}
taskFields={taskFields}
editSettings={editSettings}
toolbar={['PdfExport']}
gridLines="Both"
toolbarClick={toolbarClick}
queryTaskbarInfo={queryTaskbarInfo}
pdfQueryTaskbarInfo={pdfQueryTaskbarInfo}
allowPdfExport={true}
>
<ColumnsDirective>
<ColumnDirective field="TaskID" headerText="Task ID" />
<ColumnDirective field="TaskName" headerText="Task Name" />
<ColumnDirective field="StartDate" headerText="Start Date" />
<ColumnDirective field="EndDate" headerText="End Date" />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Edit]} />
</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/33.2.3/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>Exporting with templates
Exporting with column template
The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using pdfQueryCellInfo event.
In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image properties in the pdfQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data, resources } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const splitterSettings = {
columnIndex: 4
};
const toolbar = ['PdfExport'];
let ganttInstance;
function toolbarClick(args) {
if (args.item.id === 'ganttDefault_pdfexport') {
ganttInstance.pdfExport({
fileName: 'new.pdf'
});
}
}
function pdfQueryCellInfo(args) {
if (args.column.headerText === 'Resources') {
args.image = {
height: 40,
width: 40,
base64: args.data.taskData.resourcesImage
};
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + args.data.taskData.EmailId,
displayText: args.data.taskData.EmailId
};
}
}
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
allowPdfExport={true}
allowResizing={true}
splitterSettings={splitterSettings}
resources={resources}
resourceFields=
pdfQueryCellInfo={pdfQueryCellInfo}
toolbarClick={toolbarClick}
ref={(g) => (ganttInstance = g)}
>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' textAlign='Left' width='100' />
<ColumnDirective field='TaskName' headerText='Task Name' width='150' />
<ColumnDirective field='resources' headerText='Resources' width='250' />
<ColumnDirective field='EmailId' headerText='Email ID' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection }
from '@syncfusion/ej2-react-gantt';
import { data, resources } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, ToolbarItem, PdfQueryCellInfoEventArgs, Column }
from '@syncfusion/ej2-react-gantt';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
resourceInfo: 'resources',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const splitterSettings: SplitterSettingsModel = {
columnIndex: 4
};
const toolbar: ToolbarItem[] = ['PdfExport'];
let ganttInstance: GanttComponent | null;
function toolbarClick(args: any): void {
if (args.item.id === 'ganttDefault_pdfexport') {
ganttInstance.pdfExport({
fileName: 'new.pdf'
});
}
}
function pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs): void {
if ((args.column as Column).headerText === 'Resources') {
args.image = {
height: 40,
width: 40,
base64: (args as any).data.taskData.resourcesImage
};
}
if ((args.column as Column).headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + (args as any).data.taskData.EmailId,
displayText: (args as any).data.taskData.EmailId
};
}
}
return (
<GanttComponent
id="ganttDefault"
height="430px"
dataSource={data}
taskFields={taskFields}
toolbar={toolbar}
allowPdfExport={true}
allowResizing={true}
splitterSettings={splitterSettings}
resources={resources}
resourceFields=
pdfQueryCellInfo={pdfQueryCellInfo}
toolbarClick={toolbarClick}
ref={(g) => (ganttInstance = g)}
>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' textAlign='Left' width='100' />
<ColumnDirective field='TaskName' headerText='Task Name' width='150' />
<ColumnDirective field='resources' headerText='Resources' width='250' />
<ColumnDirective field='EmailId' headerText='Email ID' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Exporting with taskbar template
The PDF export functionality allows to export taskbar templates that include images and text to an PDF document using pdfQueryTaskbarInfo event. Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo event for parent taskbar templates, taskbar templates and milestone templates.
In the following sample, taskbar templates with images and text are exported to PDF using taskbarTemplate properties in the pdfQueryTaskbarInfo event.
Note: PDF Export supports base64 string to export the images.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PdfColor } from '@syncfusion/ej2-pdf-export';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-react-gantt';
import { base64Data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
resourceInfo: 'resources'
};
const toolbarOptions = ['PdfExport'];
let ganttChart;
function toolbarClick(args) {
if (args.item.text === 'PDF export') {
let exportProperties = {
enableFooter: false
};
ganttChart.pdfExport(exportProperties);
}
};
function pdfQueryTaskbarInfo(args) {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
args.taskbarTemplate.fontStyle = {
fontColor: new PdfColor(255, 255, 255),
fontFamily: 'TimesRoman',
}
}
if (args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
args.taskbarTemplate.fontStyle = {
fontColor: new PdfColor(255, 255, 255),
fontFamily: 'TimesRoman',
}
}
if (args.data.ganttProperties.duration === 0) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args).data.taskData.resourcesImage, height: 20,
}]
}
args.taskbarTemplate.value = args.data.TaskName,
args.taskbarTemplate.fontStyle = {
fontColor: new PdfColor(255, 255, 255),
fontFamily: 'TimesRoman'
}
}
}
const splitterSettings = {
columnIndex: 2
};
function TaskbarTemplate(props) {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style= >
<div className="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style= >
<img className="image" src={`./images/${props.ganttProperties.resourceNames}.png`} style= />
</div>
<span
className="e-task-label"
style= >
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props) {
return (
<div className="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style= >
<div className="e-gantt-parent-progressbar-inner-div e-row-expand e-gantt-parent-progressbar" style= >
</div>
<span className="e-task-label" style= >
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props) {
return (
<div className="e-gantt-milestone" style=>
<div className="e-milestone-top" style= />
<div className="e-milestone-bottom" style= />
<img className="image" src={`./images/${props.ganttProperties.resourceNames}.png`} style= />
</div>
);
}
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
return <GanttComponent dataSource={base64Data} rowHeight={45} taskFields={taskFields} toolbar={toolbarOptions} pdfQueryTaskbarInfo={pdfQueryTaskbarInfo} toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} resourceFields={resourceFields} resources={editingResources} taskbarTemplate={TaskbarTemplate}
parentTaskbarTemplate={ParentTaskbarTemplate}
milestoneTemplate={MilestoneTemplate} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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, PdfExport, Selection, PdfExportProperties, PdfQueryTaskbarInfoEventArgs } from '@syncfusion/ej2-react-gantt';
import { base64Data, editingResources } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
function App() {
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
child: 'subtasks',
resourceInfo: 'resources'
};
const toolbarOptions = ['PdfExport'];
let ganttChart: any;
function toolbarClick(args: ClickEventArgs) {
if (args.item.text === 'PDF export') {
let exportProperties: PdfExportProperties = {
enableFooter: false
};
ganttChart.pdfExport(exportProperties);
}
};
function pdfQueryTaskbarInfo(args: PdfQueryTaskbarInfoEventArgs) {
if (!args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args as any).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
if (args.data.hasChildRecords) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args as any).data.taskData.resourcesImage, height: 20
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
if (args.data.ganttProperties.duration === 0) {
if (args.data.ganttProperties.resourceNames) {
args.taskbarTemplate.image = [{
width: 20, base64: (args as any).data.taskData.resourcesImage, height: 20,
}]
}
args.taskbarTemplate.value = args.data.TaskName;
}
}
const splitterSettings: any = {
columnIndex: 2
};
const resourceFields: any = {
id: 'resourceId',
name: 'resourceName',
};
function TaskbarTemplate(props: any) {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style= >
<div className="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style= >
<img className="image" src={`./images/${props.ganttProperties.resourceNames}.png`} style= />
</div>
<span
className="e-task-label"
style=>
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props: any) {
return (
<div className="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style= >
<div className="e-gantt-parent-progressbar-inner-div e-row-expand e-gantt-parent-progressbar" style= >
</div>
<span className="e-task-label" style= >
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props: any) {
return (
<div className="e-gantt-milestone" style=>
<div className="e-milestone-top" style= />
<div
className="e-milestone-bottom"
style= />
<img className="image" src={`./images/${props.ganttProperties.resourceNames}.png`} style= />
</div>
);
}
return <GanttComponent dataSource={base64Data} rowHeight={45} taskFields={taskFields} pdfQueryTaskbarInfo={pdfQueryTaskbarInfo} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} resourceFields={resourceFields} resources={editingResources} taskbarTemplate={TaskbarTemplate}
parentTaskbarTemplate={ParentTaskbarTemplate}
milestoneTemplate={MilestoneTemplate} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Exporting with task label template
The PDF export functionality allows to export task label template that include images and text to an PDF document using pdfQueryTaskbarInfo event.
In the following sample, task label template with images and text are exported to PDF using labelSettings properties in the pdfQueryTaskbarInfo event.
Note: PDF Export supports base64 string to export the images.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { base64Data, editingResources } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
resourceInfo: 'resources'
};
const toolbarOptions = ['PdfExport'];
let ganttChart;
function toolbarClick(args) {
if (args.item.text === 'PDF export') {
let exportProperties = {
enableFooter: false
};
ganttChart.pdfExport(exportProperties);
}
};
function pdfQueryTaskbarInfo(args) {
args.labelSettings.leftLabel.value = args.data.ganttProperties.taskName + '[' + args.data.ganttProperties.progress + ']';
if (args.data.ganttProperties.resourceNames) {
args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;
args.labelSettings.rightLabel.image = [{
base64: args.data.taskData.resourcesImage, width: 20, height: 20
}]
}
args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%'
}
const LeftLabelTemplate = (props) => {
return (<span>{props.TaskName} [ {props.Progress}% ]</span>);
};
const templateLeft = LeftLabelTemplate;
const RightLabelTemplate = (props) => {
if (props.ganttProperties.resourceInfo) {
const resources = props.ganttProperties.resourceInfo;
return (
<div>
{resources.map((resource, index) => {
const src =
'https://ej2.syncfusion.com/react/demos/src/gantt/images/' +
resource.resourceName + '.png';
return (
<span
key={resource.resourceId}
style=
>
<img src={src} height="40px" />
<span style=>
{resource.resourceName}
</span>
</span>
);
})}
</div>
);
}
return <div />;
};
const templateRight = RightLabelTemplate;
const labelSettings = {
leftLabel: templateLeft,
rightLabel: templateRight,
taskLabel: '${Progress}%'
};
const splitterSettings = {
columnIndex: 2
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
const projectStartDate = new Date('03/24/2019');
const projectEndDate = new Date('04/30/2019');
return <GanttComponent dataSource={base64Data} rowHeight={60} taskFields={taskFields} pdfQueryTaskbarInfo={pdfQueryTaskbarInfo} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} labelSettings={labelSettings} resourceFields={resourceFields} resources={editingResources} projectStartDate={projectStartDate} projectEndDate={projectEndDate} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, PdfExportProperties, ColumnDirective, pdfQueryTaskbarInfoEventArgs, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { base64Data, editingResources } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
function App() {
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
resourceInfo: 'resources'
};
const toolbarOptions = ['PdfExport'];
let ganttChart: any;
function toolbarClick(args: ClickEventArgs) {
if (args.item.text === 'PDF export') {
let exportProperties: PdfExportProperties = {
enableFooter: false
};
ganttChart.pdfExport(exportProperties);
}
};
function pdfQueryTaskbarInfo(args: pdfQueryTaskbarInfoEventArgs) {
args.labelSettings.leftLabel.value = args.data.ganttProperties.taskName + '[' + args.data.ganttProperties.progress + ']';
if (args.data.ganttProperties.resourceNames) {
args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;
args.labelSettings.rightLabel.image = [{
base64: (args as any).data.taskData.resourcesImage, width: 20, height: 20
}]
}
args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%'
}
const LeftLabelTemplate = (props: any) => {
return (<span>{props.TaskName} [ {props.Progress}% ]</span>);
};
const templateLeft: any = LeftLabelTemplate;
const RightLabelTemplate = (props: any) => {
if (props.ganttProperties.resourceInfo) {
const resources = props.ganttProperties.resourceInfo;
return (
<div>
{resources.map((resource: any, index: number) => {
const src =
'https://ej2.syncfusion.com/react/demos/src/gantt/images/' +
resource.resourceName + '.png';
return (
<span
key={resource.resourceId}
style=
>
<img src={src} height="40px" />
<span style=>
{resource.resourceName}
</span>
</span>
);
})}
</div>
);
}
return <div />;
};
const templateRight: any = RightLabelTemplate;
const labelSettings: any = {
leftLabel: templateLeft,
rightLabel: templateRight,
taskLabel: '${Progress}%'
};
const splitterSettings: any = {
columnIndex: 2
};
const resourceFields: any = {
id: 'resourceId',
name: 'resourceName',
};
const projectStartDate = new Date('03/24/2019');
const projectEndDate = new Date('04/30/2019');
return <GanttComponent dataSource={base64Data} rowHeight={60} taskFields={taskFields} pdfQueryTaskbarInfo={pdfQueryTaskbarInfo} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} labelSettings={labelSettings} resourceFields={resourceFields} resources={editingResources} projectStartDate={projectStartDate} projectEndDate={projectEndDate} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, 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/33.2.3/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%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Exporting with header template
The PDF export functionality allows to export header template that include images and text to an PDF document using pdfColumnHeaderQueryCellInfo event.
In the following sample, header template with images and text are exported to PDF using headerTemplate properties in the pdfColumnHeaderQueryCellInfo event.
Note: PDF Export supports base64 string to export the images.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { base64Data, editingResources } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
resourceInfo: 'resources'
};
const toolbarOptions = ['PdfExport'];
let ganttChart;
function toolbarClick(args) {
if (args.item.text === 'PDF export') {
let exportProperties = {
enableFooter: false
};
ganttChart.pdfExport(exportProperties);
}
};
let i = 0;
function pdfColumnHeaderQueryCellInfo(args) {
let base64Array = [
{ 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
{ 'StartDate': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
]
while (i < base64Array.length) {
const key = Object.keys(base64Array[i])[0];
const value = base64Array[i][key];
if (key === args.column.field) {
args.headerTemplate.image = [{
base64: value, width: 20, height: 20
}];
args.headerTemplate.value = args.column.field;
break;
}
i++;
}
}
const splitterSettings = {
columnIndex: 2
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
const projectStartDate = new Date('03/24/2019');
const projectEndDate = new Date('04/30/2019');
return (
<div className='control-pane'>
<div className='control-section'>
<GanttComponent dataSource={base64Data} rowHeight={60} taskFields={taskFields} pdfColumnHeaderQueryCellInfo={pdfColumnHeaderQueryCellInfo} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} resourceFields={resourceFields} resources={editingResources} projectStartDate={projectStartDate} projectEndDate={projectEndDate} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskName' headerText='TaskName' headerTemplate={() => {
return (<div><img className="image" src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Task name.png" width="20" height="20" />
<b className='e-header'>Task Name</b></div>);
}} ></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date' headerTemplate={() => {
return (<div><img className="image" src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Start date.png" width="20" height="20" />
<b className='e-header'>Start Date</b></div>);
}}></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
</div>
</div>
)
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, PdfExportProperties, pdfColumnHeaderQueryCellInfo, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { base64Data, editingResources } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
function App() {
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
resourceInfo: 'resources'
};
const toolbarOptions = ['PdfExport'];
let ganttChart: any;
function toolbarClick(args: ClickEventArgs) {
if (args.item.text === 'PDF export') {
let exportProperties: PdfExportProperties = {
enableFooter: false
};
ganttChart.pdfExport(exportProperties);
}
};
let i: number = 0;
function pdfColumnHeaderQueryCellInfo(args: pdfColumnHeaderQueryCellInfo) {
let base64Array: Object[] = [
{ 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
{ 'StartDate': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
]
while (i < base64Array.length) {
const key = Object.keys(base64Array[i])[0];
const value = base64Array[i][key];
if (key === args.column.field) {
args.headerTemplate.image = [{
base64: value, width: 20, height: 20
}];
args.headerTemplate.value = args.column.field;
break;
}
i++;
}
}
const splitterSettings: any = {
columnIndex: 2
};
const resourceFields: any = {
id: 'resourceId',
name: 'resourceName',
};
const projectStartDate = new Date('03/24/2019');
const projectEndDate = new Date('04/30/2019');
return (
<div className='control-pane'>
<div className='control-section'>
<GanttComponent dataSource={base64Data} rowHeight={60} taskFields={taskFields} pdfColumnHeaderQueryCellInfo={pdfColumnHeaderQueryCellInfo} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} ref={gantt => ganttChart = gantt}
splitterSettings={splitterSettings} resourceFields={resourceFields} resources={editingResources} projectStartDate={projectStartDate} projectEndDate={projectEndDate} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskName' headerText='TaskName' headerTemplate={() => {
return (<div><img className="image" src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Task name.png" width="20" height="20" />
<b className='e-header'>Task Name</b></div>);
}} ></ColumnDirective>
<ColumnDirective field='StartDate' headerText='Start Date' headerTemplate={() => {
return (<div><img className="image" src="https://ej2.syncfusion.com/angular/demos/assets/gantt/images/Start date.png" width="20" height="20" />
<b className='e-header'>Start Date</b></div>);
}}></ColumnDirective>
</ColumnsDirective>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
</div>
</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/33.2.3/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%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>