To customize PDF export

24 Jul 202624 minutes to read

Customizing PDF export in the EJ2 JavaScript Gantt Chart control 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.

var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        var exportProperties = {
            fileName: "new.pdf"
        };
        ganttChart.pdfExport(exportProperties);
    }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var gantt = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '430px',
    id: 'ganttDefault',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    treeColumnIndex: 1,
    columns: [
        { field: 'TaskID', headerText: 'ID', width: 100, textAlign: 'Left' },
        { field: 'TaskName', headerText: 'Task Name', width: 250 },
        { field: 'StartDate', headerText: 'Start Date', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ],
    toolbarClick: function (args) {
        if (args.item.id === 'GanttExport_pdfexport') {
            gantt.pdfExport({
                pageOrientation: 'Portrait'
            });
        }
    }
});

gantt.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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
var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        var exportProperties = {
            pageSize: 'A0'
        };
        ganttChart.pdfExport(exportProperties);
    }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="GanttExport"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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.

var clickHandler = function(args){
   if (args.item.id === 'GanttExport_pdfexport') {
        var exportProperties = {
            exportType: 'CurrentViewData'
        };
        ganttChart.pdfExport(exportProperties);
   }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    allowFiltering: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="GanttExport"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

By default, we render the default footer for a PDF file, this can be enabled or disabled by using the enableFooter property.

var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        var exportProperties = {
            enableFooter: false
        };
        ganttChart.pdfExport(exportProperties);
    }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Export hidden columns

PDF export provides an option to export hidden columns of Gantt by defining the includeHiddenColumn to true.

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '430px',
    treeColumnIndex: 1,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
        { field: 'StartDate', headerText: 'Start Date', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ],
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    toolbarClick: function (args) {
        if (args.item.id === 'Gantt_pdfexport') {
            ganttChart.pdfExport({
                includeHiddenColumn: true
            });
        }
    }
});

ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="Gantt"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Export predecessor lines

The visibility of predecessor lines in the exported PDF document can be controlled using the showPredecessorLines property.

var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        var exportProperties = {
            showPredecessorLines: true
        };
        ganttChart.pdfExport(exportProperties);
    }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="GanttExport"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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.

var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        ganttChart.pdfExport();
    }
};

var beforePdfExport = function (args) {
    ganttChart.treeGrid.columns[2].visible = false;
    ganttChart.treeGrid.columns[3].visible = true;
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        parentID: 'ParentID',
    },
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName' },
        { field: 'StartDate' },
        { field: 'Duration', visible: false },
        { field: 'Progress' }
    ],
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler,
    beforePdfExport: beforePdfExport
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        ganttChart.pdfExport();
    }
};

var pdfQueryCellInfo = function (args) {
    if (args.column.field == 'Progress') {
        if (args.value < 50) {
            args.style.backgroundColor = new ej.pdfexport.PdfColor(240, 128, 128);
        } else {
            args.style.backgroundColor = new ej.pdfexport.PdfColor(165, 105, 189);
        }
    }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler,
    pdfQueryCellInfo: pdfQueryCellInfo
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="GanttExport"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'ganttDefault',
    height: '430px',
    dataSource: GanttData,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: function (args) {
        if (args.item.id === 'GanttExport_pdfexport') {
            ganttChart.pdfExport();
        }
    },
    pdfQueryTimelineCellInfo: function (args) {
        args.timelineCell.backgroundColor = new ej.pdfexport.PdfColor(240, 248, 255);
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
        { field: 'StartDate', headerText: 'StartDate', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'ganttDefault',
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    toolbarClick: function (args) {
        if (args.item.id === 'GanttExport_pdfexport') {
            ganttChart.pdfExport();
        }
    },
    pdfQueryTaskbarInfo: function (args) {
        var d = args.data;
        if (d.Progress < 50 && !d.hasChildRecords) {
            var bar = args.taskbar;
            bar.progressColor = new ej.pdfexport.PdfColor(205, 92, 92);
            bar.taskColor = bar.taskBorderColor = new ej.pdfexport.PdfColor(240, 128, 128);
        }
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
        { field: 'StartDate', headerText: 'StartDate', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'ganttDefault',
    dataSource: GanttData,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        predecessor: 'Predecessor',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    treeColumnIndex: 1,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    eventMarkers: [
        { day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off' }
    ],
    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' }
    ],
    toolbarClick: function (args) {
        if (args.item.id === 'GanttExport_pdfexport') {

            var stringFormat = new ej.pdfexport.PdfStringFormat();
            stringFormat.alignment = ej.pdfexport.PdfTextAlignment.Center;

            var vertical = new ej.pdfexport.PdfStringFormat();
            vertical.alignment = ej.pdfexport.PdfTextAlignment.Center;

            var pen = new ej.pdfexport.PdfPen(new ej.pdfexport.PdfColor(105, 105, 105), 1);
            pen.dashStyle = ej.pdfexport.PdfDashStyle.Dash;

            var borderPen = new ej.pdfexport.PdfPen(new ej.pdfexport.PdfColor(192, 192, 192), 1);
            var borders = new ej.pdfexport.PdfBorders();
            borders.all = borderPen;

            ganttChart.pdfExport({
                ganttStyle: {
                    connectorLineColor: new ej.pdfexport.PdfColor(128, 0, 0),
                    taskbar: {
                        taskColor: new ej.pdfexport.PdfColor(240, 128, 128),
                        taskBorderColor: new ej.pdfexport.PdfColor(255, 0, 0),
                        progressColor: new ej.pdfexport.PdfColor(205, 92, 92)
                    },
                    columnHeader: {
                        backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
                    },
                    timeline: {
                        backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255),
                        padding: new ej.pdfexport.PdfPaddings(5, 2, 0, 0)
                    },
                    footer: {
                        backgroundColor: new ej.pdfexport.PdfColor(205, 92, 92)
                    },
                    label: {
                        fontColor: new ej.pdfexport.PdfColor(128, 0, 0)
                    },
                    cell: {
                        backgroundColor: new ej.pdfexport.PdfColor(240, 248, 255),
                        fontColor: new ej.pdfexport.PdfColor(0, 0, 0),
                        borderColor: new ej.pdfexport.PdfColor(179, 219, 255)
                    },
                    fontFamily: 1,
                    eventMarker: {
                        label: {
                            backgroundColor: new ej.pdfexport.PdfColor(255, 239, 213),
                            fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
                            fontColor: new ej.pdfexport.PdfColor(139, 69, 19),
                            fontSize: 9,
                            format: stringFormat,
                            fontStyle: ej.pdfexport.PdfFontStyle.Bold,
                            borderColor: new ej.pdfexport.PdfColor(160, 82, 45),
                            borders: borders
                        },
                        lineStyle: pen
                    },
                    holiday: {
                        fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
                        fontSize: 10,
                        fontStyle: ej.pdfexport.PdfFontStyle.Bold,
                        borderColor: new ej.pdfexport.PdfColor(211, 211, 211),
                        backgroundColor: new ej.pdfexport.PdfColor(255, 248, 220),
                        fontColor: new ej.pdfexport.PdfColor(105, 105, 105),
                        format: vertical,
                        borders: borders
                    }
                }
            });
        }
    },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150 },
        { field: 'StartDate', headerText: 'Start Date', width: 150 },
        { field: 'EndDate', headerText: 'End Date', width: 150 },
        { field: 'Duration', headerText: 'Duration', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Gantt Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="GanttExport"></div>
    </div>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'ganttDefault',
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
        segments: 'Segments'
    },
    editSettings: {
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    },
    toolbar: ['PdfExport'],
    gridLines: 'Both',
    allowPdfExport: true,
    columns: [
        { field: 'TaskID', headerText: 'Task ID' },
        { field: 'TaskName', headerText: 'Task Name' },
        { field: 'StartDate', headerText: 'Start Date' },
        { field: 'EndDate', headerText: 'End Date' }
    ],
    toolbarClick: function (args) {
        if (args.item.id === 'GanttExport_pdfexport') {
            ganttChart.pdfExport();
        }
    },
    queryTaskbarInfo: function (args) {
        var taskData = args.data && args.data.taskData ? args.data.taskData : null;
        if (taskData && taskData.Segments) {
            var segmentIndex = args.taskbarElement && args.taskbarElement.dataset
                ? args.taskbarElement.dataset.segmentIndex
                : null;

            if (Number(segmentIndex) === 1) {
                args.taskbarBgColor = 'red';
                args.taskbarBorderColor = 'black';
                args.progressBarBgColor = 'green';
            }
        }
    },
    pdfQueryTaskbarInfo: function (args) {
        var taskbar = args.taskbar;
        if (taskbar && taskbar.taskSegmentStyles && taskbar.taskSegmentStyles.length > 1) {
            taskbar.taskSegmentStyles[1].taskColor = new ej.pdfexport.PdfColor(255, 0, 0);
            taskbar.taskSegmentStyles[1].progressColor = new ej.pdfexport.PdfColor(0, 128, 0);
            taskbar.taskSegmentStyles[1].taskBorderColor = new ej.pdfexport.PdfColor(0, 0, 0);
        }
    }
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="container">
          <div id="GanttExport"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'ganttDefault',
    dataSource: data,
    height: '430px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        resourceInfo: 'resources',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    allowResizing: true,
    splitterSettings: { columnIndex: 4 },
    resources: resources,
    resourceFields: { id: 'resourceId', name: 'resourceName' },
    columns: [
        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
        { field: 'TaskName', headerText: 'Task Name', width: 150 },
        { field: 'resources', headerText: 'Resources', width: 250 },
        { field: 'EmailId', headerText: 'Email ID', width: 150 }
    ],
    toolbarClick: function (args) {
        if (args.item.id === 'GanttExport_pdfexport') {
            ganttChart.pdfExport({ fileName: 'new.pdf' });
        }
    },
    pdfQueryCellInfo: function (args) {
        if (args.column && args.column.headerText === 'Resources') {
            args.image = {
                height: 40,
                width: 40,
                base64: args.data && args.data.taskData ? args.data.taskData.resourcesImage : null
            };
        }
        if (args.column && args.column.headerText === 'Email ID') {
            var email = args.data && args.data.taskData ? args.data.taskData.EmailId : '';
            args.hyperLink = {
                target: 'mailto:' + email,
                displayText: email
            };
        }
    }
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    </head>

    <body>
      <script type="text/x-jsrender" id="columnTemplate">
        ${if(ganttProperties.resourceNames)}
        <div class="image">
          <img src="./images/${ganttProperties.resourceNames}.png" style="height:40px;width:40px" alt="${resourceName}" />
        </div>
        ${/if}
      </script>
      <script id="template2" type="text/x-template">
        ${if(taskData.EmailID)}
        <div class="link">
            <a href="mailto:${taskData.EmailID}">${taskData.EmailID}</a></div>
        </div>
        ${/if}
      </script>
      <div id="container">
        <div id="GanttExport"></div>
      </div>
      <script>
          var ele = document.getElementById('container');
          if(ele) {
          ele.style.visibility = "visible";
          }   
      </script>
      <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'Gantt',
    dataSource: base64Data,
    height: '450px',
    rowHeight: 45,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        child: 'subtasks',
        resourceInfo: 'resources'
    },
    resources: editingResources,
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName'
    },
    splitterSettings: {
        columnIndex: 2
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName' }
    ],
    toolbarClick: function (args) {
        if (args.item.text === 'PDF export') {
            ganttChart.pdfExport({ enableFooter: false });
        }
    },
    pdfQueryTaskbarInfo: function (args) {
        var data = args.data;
        if (data && data.ganttProperties && data.ganttProperties.resourceNames) {
            args.taskbarTemplate.image = [{
                width: 20,
                height: 20,
                base64: data.taskData.resourcesImage
            }];
            args.taskbarTemplate.value = data.TaskName;
        }
    }
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">
<head>
  <title>EJ2 Gantt</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript Gantt Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
  <style>
    .e-gantt .e-gantt-chart .e-gantt-milestone {
      position: absolute;
      transform: rotate(0deg)!important;
    }
  </style>
</head>

<body>
<script type="text/x-jsrender" id="TaskbarTemplate">
    <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"  style="height:100%">
       <div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
        ${if(ganttProperties.resourceNames)}
        <div class="image">
            <img src="./images/${ganttProperties.resourceNames}.png" style="height:40px;width:40px" alt="${resourceName}" />
        </div>
        ${/if}
          <span class="e-task-label" style="position: absolute; z-index: 1; max-width:70%; font-size: 12px; color: white; top: 5px; left: 35px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
       </div>
    </div>
</script>

<script type="text/x-jsrender" id="ParentTaskbarTemplate">
   <div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
      <div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
      <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
   </div>
   </div>
</script>
<script type="text/x-jsrender" id="MilestoneTemplate">
    <div style="margin-top=-7px;">
    <div class="e-gantt-milestone" style="position:absolute;">
        <div class="image" style="position:absolute;">
            <img class="moments" src="./images/${ganttProperties.resourceNames}.png" height="40px" width="40px" />
        </div>
        <div class="e-milestone-top" style="border-right-width:20px; margin-top: -2px;border-left-width:20px;border-bottom-width:20px;"></div>
        <div class="e-milestone-bottom" style="top:26px;border-right-width:20px; border-left-width:20px; border-top-width:20px;"></div>
    </div>
</div>
 </script>
</script>
  <div id="container">
    <div id="GanttExport"></div>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var ganttChart = new ej.gantt.Gantt({
    id: 'Gantt',
    dataSource: base64Data,
    height: '450px',
    rowHeight: 60,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
        resourceInfo: 'resources'
    },
    resources: editingResources,
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName'
    },
    projectStartDate: new Date('03/24/2019'),
    projectEndDate: new Date('04/30/2019'),
    splitterSettings: {
        columnIndex: 2
    },
    labelSettings: {
        leftLabel: '${TaskName} [ ${Progress}% ]',
        rightLabel: '${resourceNames}',
        taskLabel: '${Progress}%'
    },
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    columns: [
        { field: 'TaskID' },
        { field: 'TaskName' }
    ],
    toolbarClick: function (args) {
        if (args.item && args.item.id === 'GanttExport_pdfexport') {
            ganttChart.pdfExport({ enableFooter: false });
        }
    },
    pdfQueryTaskbarInfo: function (args) {
        var gp = args.data && args.data.ganttProperties ? args.data.ganttProperties : null;

        if (args.labelSettings && gp) {
            args.labelSettings.leftLabel.value = gp.taskName + '[' + gp.progress + ']';

            if (gp.resourceNames) {
                args.labelSettings.rightLabel.value = gp.resourceNames;
                args.labelSettings.rightLabel.image = [{
                    base64: args.data.taskData.resourcesImage,
                    width: 20,
                    height: 20
                }];
            }

            args.labelSettings.taskLabel.value = gp.progress + '%';
        }
    }
});

ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>EJ2 Gantt</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript Gantt Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>

  <script type="text/x-template" id="leftLabel">
    <div style="margin-top=-7px;">
        <div id = "leftLabel">
            <span>${TaskName} [ ${TaskID}]</span>
        </div>
    </div>
</script>

  <script type="text/x-template" id="rightLabel">
    <div style="margin-top=-7px;">
    ${if(ganttProperties.resourceInfo)}
    <div id = "rightLabel">
        ${getResourceElements(ganttProperties.resourceInfo)}
    </div>
    ${/if}
</div>
</script>

  <div id="container">
    <div id="GanttExport"></div>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var clickHandler = function (args) {
    if (args.item.id === 'GanttExport_pdfexport') {
        var exportProperties = {
            enableFooter: false
        };
        ganttChart.pdfExport(exportProperties);
    }
};
var i = 0;
var pdfColumnHeaderQueryCellInfo = function (args) {
    var 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) {
        var key = Object.keys(base64Array[i])[0];
        var 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++;
    }
};

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    rowHeight: 45,
    taskbarHeight: 35,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        resourceInfo: 'resources',
        dependency: 'Predecessor',
        parentID: 'ParentID'
    },
    allowPdfExport: true,
    columns: [
        { field: 'TaskName', headerTemplate: '#projectName', width: 250 },
        { field: 'StartDate', headerTemplate: '#dateTemplate' }
    ],
    pdfColumnHeaderQueryCellInfo: pdfColumnHeaderQueryCellInfo,
    toolbar: ['PdfExport'],
    toolbarClick: clickHandler,
    resources: editingResources,
    resourceFields: {
        id: 'resourceId',
        name: 'resourceName'
    },
    projectStartDate: new Date('03/24/2019'),
    projectEndDate: new Date('04/30/2019'),
});
ganttChart.appendTo('#GanttExport');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>EJ2 Gantt</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript Gantt Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/tailwind3.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
  <script type="text/x-template" id="projectName">
    <div>
        <div>
            <img class="taskName" src="images/Task name.png" width="20" height="20" />  Task Name
        </div>
    </div>
</script>
  <script type="text/x-template" id="dateTemplate">
    <div>
        <div>
            <img class="startDate" src="images/Start date.png" width="20" height="20" />  Start Date
        </div>
    </div>
</script>

  <div id="container">
    <div id="GanttExport"></div>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

See also