Multiple gantt exporting in React Gantt component

18 Dec 20239 minutes to read

PDF export provides an option for exporting multiple Gantt to same file. In this exported document, each Gantt will be exported to a new page of the document in same file.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
        const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        const toolbarOptions = ['PdfExport'];
        let firstGantt;
 let secondGantt;
   function  toolbarClick(args) {
        if (args.item.text === 'Pdf export') {
            const firstGanttExport = this.firstGantt.pdfExport({}, true);
            firstGanttExport.then((pdfData) => {
              secondGantt.pdfExport({}, false, pdfData);
            });
        }
    };
        return (<div>
            <p><b>First Gantt:</b></p>
            <GanttComponent id='firstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
            <Inject services={[Toolbar, PdfExport, Selection]}/>
        </GanttComponent>
        <p><b>Second Gantt:</b></p>
            <GanttComponent id='secondGantt' dataSource={[data[1]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
            <Inject services={[Toolbar,PdfExport, Selection]}/>
        </GanttComponent>
            </div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
        const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        const toolbarOptions = ['PdfExport'];
        let firstGantt:any;
 let secondGantt:any;
   function  toolbarClick(args) {
        if (args.item.text === 'Pdf export') {
            const firstGanttExport = this.firstGantt.pdfExport({}, true);
            firstGanttExport.then((pdfData) => {
              secondGantt.pdfExport({}, false, pdfData);
            });
        }
    };
        return (<div>
            <p><b>First Gantt:</b></p>
            <GanttComponent id='firstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
            <Inject services={[Toolbar, PdfExport, Selection]}/>
        </GanttComponent>
        <p><b>Second Gantt:</b></p>
            <GanttComponent id='secondGantt' dataSource={[data[1]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
            <Inject services={[Toolbar,PdfExport, Selection]}/>
        </GanttComponent>
            </div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>