To customize PDF export

21 Mar 202524 minutes to read

PDF export provides an option to customize the mapping of Gantt to exported PDF document.

File name for exported document

The file name of the exported PDF document can be specified using the fileName property in pdfExportProperties.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            var exportProperties = {
                fileName: "new.pdf"
            };
            gantt.pdfExport(exportProperties);
            }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

How to change page orientation

The page orientation of the exported PDF document can be customized using the pageOrientation property in pdfExportProperties. By default, the exported PDF document is in Landscape orientation.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            var exportProperties = {
                pageOrientation: 'Portrait'
            };
            gantt.pdfExport(exportProperties);
            }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

How to change 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
  • A1
  • A2
  • A3
  • A5
  • A6
  • A7
  • A8
  • A9
  • B0
  • B1
  • B2
  • B3
  • B4
  • B5
  • Archa
  • Archb
  • Archc
  • Archd
  • Arche
  • Flsa
  • HalfLetter
  • Letter11x17
  • Ledger
<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            var exportProperties = {
                pageSize: 'A0'
            };
            gantt.pdfExport(exportProperties);
            }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            var exportProperties = {
                exportType: 'CurrentViewData'
            };
            gantt.pdfExport(exportProperties);
            }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Export hidden columns

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

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task ID" width="150" textAlign="Left"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" width="250" visible="false"></e-gantt-column>
        <e-gantt-column field="StartDate" headerText="StartDate" width="250"></e-gantt-column>
        <e-gantt-column field="Duration" headerText="Duration" width="150"></e-gantt-column>
        <e-gantt-column field="Progress" headerText="Progress" width="250"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            var exportProperties = {
                includeHiddenColumn: true
            };
            gantt.pdfExport(exportProperties);
            }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Export predecessor lines

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

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task ID" width="150" textAlign="Left"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
        <e-gantt-column field="StartDate" headerText="StartDate" width="250" visible="false"></e-gantt-column>
        <e-gantt-column field="Duration" headerText="Duration" width="150"></e-gantt-column>
        <e-gantt-column field="Progress" headerText="Progress" width="250"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            var exportProperties = {
                showPredecessorLines: true
            };
            gantt.pdfExport(exportProperties);
            }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Show or hide columns on exported PDF

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.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" beforePdfExport="beforePdfExport" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" parentID="ParentId">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task ID" width="150" textAlign="Left"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
        <e-gantt-column field="StartDate" headerText="StartDate" width="250"></e-gantt-column>
        <e-gantt-column field="Duration" headerText="Duration" width="150" visible="false"></e-gantt-column>
        <e-gantt-column field="Progress" headerText="Progress" width="250"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            gantt.pdfExport();
        }
    }
    function beforePdfExport(args) {
        var obj = (document.getElementById('GanttContainer')).ej2_instances[0]
        obj.treeGrid.columns[3].visible = true;
        obj.treeGrid.columns[2].visible = false;
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Conditional cell formatting

TreeGrid cells in the exported PDF can be customized or formatted using the pdfQueryCellInfo event. In this event, you can format the treegrid cells of 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.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" pdfQueryCellInfo="pdfQueryCellInfo" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task ID" width="150" textAlign="Left"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
        <e-gantt-column field="StartDate" headerText="StartDate" width="250"></e-gantt-column>
        <e-gantt-column field="Duration" headerText="Duration" width="150" visible="false"></e-gantt-column>
        <e-gantt-column field="Progress" headerText="Progress" width="250"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            gantt.pdfExport();
            }
    }
    function pdfQueryCellInfo(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(205, 92, 92);
                }
            }
        }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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.headerBackgroundColor property.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
               toolbarClick="toolbarClick" pdfQueryTimelineCellInfo="pdfQueryTimelineCellInfo" allowPdfExport="true">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
        </e-gantt-taskfields>
        <e-gantt-columns>
            <e-gantt-column field="TaskId" headerText="Task ID" width="150" textAlign="Left"></e-gantt-column>
            <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
            <e-gantt-column field="StartDate" headerText="StartDate" width="250"></e-gantt-column>
            <e-gantt-column field="Duration" headerText="Duration" width="150" visible="false"></e-gantt-column>
            <e-gantt-column field="Progress" headerText="Progress" width="250"></e-gantt-column>
        </e-gantt-columns>
    </ejs-gantt>
    <script>
        function toolbarClick(args) {
            var gantt = document.getElementById("GanttContainer").ej2_instances[0];
            if (args.item.id === 'GanttContainer_pdfexport') {
                gantt.pdfExport();
            }
        }
        function pdfQueryTimelineCellInfo(args) {
            args.timelineCell.backgroundColor = new ej.pdfexport.PdfColor(240, 248, 255);
        }
        </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
               toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
        </e-gantt-taskfields>
        <e-gantt-columns>
            <e-gantt-column field="TaskId" headerText="Task ID" width="150" textAlign="Left"></e-gantt-column>
            <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
            <e-gantt-column field="StartDate" headerText="StartDate" width="250"></e-gantt-column>
            <e-gantt-column field="Duration" headerText="Duration" width="150" visible="false"></e-gantt-column>
            <e-gantt-column field="Progress" headerText="Progress" width="250"></e-gantt-column>
        </e-gantt-columns>
    </ejs-gantt>
    <script>
        function toolbarClick(args) {
            var gantt = document.getElementById("GanttContainer").ej2_instances[0];
            if (args.item.id === 'GanttContainer_pdfexport') {
                gantt.pdfExport();
            }
        }
        function pdfQueryTaskbarInfo(args) {
            if (args.data.Progress < 50 && !args.data.hasChildRecords) {
                args.taskbar.progressColor = new ej.pdfexport.PdfColor(205, 92, 92);
                args.taskbar.taskColor = args.taskbar.taskBorderColor = new ej.pdfexport.PdfColor(240, 128, 128);
            }
        }
        </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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. By using ganttStyle, can customize columnHeader, fontFamily, cell, taskbar, label, timeline, chartGridLineColor, connectorLineColor, criticalConnectorLineColor, footer, font, eventMarker and holiday regardless of the theme.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
           toolbarClick="toolbarClick" allowPdfExport="true">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-holidays>
        <e-gantt-holiday from="04/11/2019" to="04/12/2019" label="Public holidays" cssClass="e-custom-holiday"></e-gantt-holiday>
        <e-gantt-holiday from="04/01/2019" to="04/01/2019" label="Public holiday" cssClass="e-custom-holiday"></e-gantt-holiday>
    </e-gantt-holidays>
    <e-gantt-eventmarkers>
        <e-gantt-eventmarker day="04/10/2019" label="Project approval and kick-off" cssClass="e-custom-event-marker"></e-gantt-eventmarker>
    </e-gantt-eventmarkers>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            const stringFormat = new ej.pdfexport.PdfStringFormat();
            stringFormat.alignment = ej.pdfexport.PdfTextAlignment.Center;
      
            const vertical = new ej.pdfexport.PdfStringFormat();
            vertical.alignment = ej.pdfexport.PdfTextAlignment.Center;
      
            const penColor = new ej.pdfexport.PdfColor(105, 105, 105);
            const penWidth = 1;
            const pen = new ej.pdfexport.PdfPen(penColor, penWidth);
            pen.dashStyle = ej.pdfexport.PdfDashStyle.Dash; 
      
            const borderWidth = 1;
            const borderColor = new ej.pdfexport.PdfColor(192, 192, 192); 
            let pdfpen = new ej.pdfexport.PdfPen(borderColor, borderWidth);
            let pdfborders = new ej.pdfexport.PdfBorders();
            pdfborders.all = pdfpen;
            var exportProperties = {
                ganttStyle: {
                    fontFamily: 1,
                    columnHeader: {
                        backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
                    },
                    taskbar: {
                        taskColor: new ej.pdfexport.PdfColor(240, 128, 128),
                        taskBorderColor: new ej.pdfexport.PdfColor(240, 128, 128),
                        progressColor: new ej.pdfexport.PdfColor(205, 92, 92),
                    },
                    connectorLineColor: new ej.pdfexport.PdfColor(128, 0, 0),
                    footer: {
                        backgroundColor: new ej.pdfexport.PdfColor(205, 92, 92)
                    },
                    timeline: {
                        backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255),
                        padding: new PdfPaddings(5, 2, 0, 0),
                    },
                    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),
                    },
                    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: pdfborders,
                        },
                        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: pdfborders,
                    },

            }
                
        };
        gantt.pdfExport(exportProperties);
        }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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.

<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "PdfExport" })"
    toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" queryTaskbarInfo="queryTaskbarInfo" height="450px" allowPdfExport="true" gridLines="Both" >
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="Subtasks" segments="Segments">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowEditing="true" allowDeleting="true" allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task ID"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name"></e-gantt-column>
        <e-gantt-column field="StartDate" headerText="Start Date"></e-gantt-column>
        <e-gantt-column field="EndDate" headerText="End Date"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>
<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            gantt.pdfExport();
        }
    }
    function queryTaskbarInfo(args) {
        if (args.data.taskData.Segments) {
            var segmentIndex = args.taskbarElement.dataset.segmentIndex;
            if (Number(segmentIndex) === 1) {
                args.taskbarBgColor = 'red';
                args.taskbarBorderColor = 'black';
                args.progressBarBgColor = "green";
            }
        }
    }
    function pdfQueryTaskbarInfo(args) {
        if (args.taskbar.taskSegmentStyles) {
            args.taskbar.taskSegmentStyles[1].taskColor = new ej.pdfexport.PdfColor(255, 0, 0);
            args.taskbar.taskSegmentStyles[1].progressColor = new ej.pdfexport.PdfColor(0, 128, 0);
            args.taskbar.taskSegmentStyles[1].taskBorderColor = new ej.pdfexport.PdfColor(0, 0, 0);
        }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData();
    return View();
}

public static List<GanttDataSource> ganttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Segments = new List<GanttSegment>
                {
                    new GanttSegment {StartDate = new DateTime(2024,04,02), Duration = 2},
                    new GanttSegment {StartDate = new DateTime(2024,04,04), Duration = 2}
                }
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50

            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Segments = new List<GanttSegment>
                {
                    new GanttSegment {StartDate = new DateTime(2024,04,02), Duration = 2},
                    new GanttSegment {StartDate = new DateTime(2024,04,04), Duration = 2}
                }
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>()
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 50
            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                Duration = 3,
                StartDate = new DateTime(2019, 04, 04),
                Progress = 50
            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }

        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
            public List<GanttSegment> Segments { get; set; }
        }

Exporting with template

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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "PdfExport" })" toolbarClick="toolbarClick" pdfQueryCellInfo="pdfQueryCellInfo" allowPdfExport="true" height="450px" resources="ViewBag.projectResources">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                           endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks" resourceInfo="ResourceId">
                    </e-gantt-taskfields>
                     <e-gantt-resourcefields id="ResourceId" name="ResourceName"> </e-gantt-resourcefields>
                    <e-gantt-columns>
                        <e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
                        <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
                        <e-gantt-column field="ResourceId" headerText="Resources" template="#columnTemplate"></e-gantt-column>
                        <e-gantt-column field="StartDate"></e-gantt-column>
                        <e-gantt-column field="Duration"></e-gantt-column>
                        <e-gantt-column field="Progress"></e-gantt-column>
                    </e-gantt-columns>					
				</ejs-gantt>

<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
            if (args.item.id === 'GanttContainer_pdfexport') {
                gantt.pdfExport();
            }
    }
    function pdfQueryCellInfo(args){
        if (args.column.headerText === 'Resources') {
        {
         args.image = { height:40,width:40, base64: (args as any).data.taskData.resourcesImage };
        }
         } }
</script>
				
    <script type="text/x-jsrender" id="columnTemplate">
        ${if(ganttProperties.resourceNames)}
        <div class="image">
            <img src="${TaskID}.png" style="height:40px;width:40px" /><div style="display:inline-block;width:100%;position:relative;left:30px;top:-14px">${ganttProperties.resourceNames}</div>
        </div>
        ${/if}
    </script>
public IActionResult Index()
{
     ViewBag.DataSource = ganttData();
     ViewBag.projectResources = projectResources();
    return View();
}

public static List<GanttResources> projectResources()
        {
            List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

            GanttResources Record1 = new GanttResources()
            {
                ResourceId = 1,
                ResourceName = "Martin Tamer"
            };
            GanttResources Record2 = new GanttResources()
            {
                ResourceId = 2,
                ResourceName = "Rose Fuller"
            };
            GanttResources Record3 = new GanttResources()
            {
                ResourceId = 3,
                ResourceName = "Margaret Buchanan"
            };
            GanttResources Record4 = new GanttResources()
            {
                ResourceId = 4,
                ResourceName = "Fuller King"
            };
            GanttResources Record5 = new GanttResources()
            {
                ResourceId = 5,
                ResourceName = "Davolio Fuller"
            };
            GanttResources Record6 = new GanttResources()
            {
                ResourceId = 6,
                ResourceName = "Van Jack"
            };
            GanttResources Record7 = new GanttResources()
            {
                ResourceId = 7,
                ResourceName = "Fuller Buchanan"
            };
            GanttResources Record8 = new GanttResources()
            {
                ResourceId = 8,
                ResourceName = "Jack Davolio"
            };
            GanttResources Record9 = new GanttResources()
            {
                ResourceId = 9,
                ResourceName = "Tamer Vinet"
            };
            GanttResources Record10 = new GanttResources()
            {
                ResourceId = 10,
                ResourceName = "Vinet Fuller"
            };
            GanttResources Record11 = new GanttResources()
            {
                ResourceId = 11,
                ResourceName = "Bergs Anton"
            };
            GanttResources Record12 = new GanttResources()
            {
                ResourceId = 12,
                ResourceName = "Construction Supervisor"
            };
            GanttResourcesCollection.Add(Record1);
            GanttResourcesCollection.Add(Record2);
            GanttResourcesCollection.Add(Record3);
            GanttResourcesCollection.Add(Record4);
            GanttResourcesCollection.Add(Record5);
            GanttResourcesCollection.Add(Record6);
            GanttResourcesCollection.Add(Record7);
            GanttResourcesCollection.Add(Record8);
            GanttResourcesCollection.Add(Record9);
            GanttResourcesCollection.Add(Record10);
            GanttResourcesCollection.Add(Record11);
            GanttResourcesCollection.Add(Record12);
            return GanttResourcesCollection;
        }
        public static List<GanttDataSource> ganttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,
                ResourceId = new int[] { 1 },
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
                ResourceId = new int[] { 2 },
            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                Dependency = "3FS",
                Notes = "Measure the total property area alloted for construction",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                ResourceId = new int[] { 3 }
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),

                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70,
                ResourceId = new int[] { 4 },

            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Dependency = "6FS",
                Progress = 50,
                ResourceId = new int[] { 3 },

            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }
        public class GanttResources
        {
            public int ResourceId { get; set; }
            public string ResourceName { get; set; }
        }
        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public string Dependency { get; set; }
            public string Notes { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
            public int[] ResourceId { get; set; }

        }

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 template 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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { 'PdfExport' })"
    toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true" height="450px"
    rowHeight="60" parentTaskbarTemplate="#ParentTaskbarTemplate" resources="ViewBag.projectResources"
    taskbarTemplate="#TaskbarTemplate" milestoneTemplate="#MilestoneTemplate">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
        progress="Progress" child="SubTasks" resourceInfo="ResourceId">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>


<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%">
                <img src="${ganttProperties.resourceNames}.png" style="height:40px;width:40px" />
                <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="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 class="e-gantt-milestone" style="position:absolute;">
            <div class="e-milestone-top" style="border-right-width:15px;border-left-width:15px;border-bottom-width:15px;"></div>
            <div class="e-milestone-bottom" style="top:15px;border-right-width:15px; border-left-width:15px; border-top-width:15px;">
            </div>
            <img src="${ganttProperties.resourceNames}.png" style="height:40px;width:40px" />
        </div>
    </script>

<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            gantt.pdfExport();
        }
    }
    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;
        }
        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;
        }
        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
        }
    }
</script>
public IActionResult Index()
{
     ViewBag.DataSource = GanttData();
     ViewBag.ProjectResources = ProjectResources();
    return View();
}

public static List<GanttResources> ProjectResources()
        {
            List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

            GanttResources Record1 = new GanttResources()
            {
                ResourceId = 1,
                ResourceName = "Martin Tamer"
            };
            GanttResources Record2 = new GanttResources()
            {
                ResourceId = 2,
                ResourceName = "Rose Fuller"
            };
            GanttResources Record3 = new GanttResources()
            {
                ResourceId = 3,
                ResourceName = "Margaret Buchanan"
            };
            GanttResources Record4 = new GanttResources()
            {
                ResourceId = 4,
                ResourceName = "Fuller King"
            };
            GanttResources Record5 = new GanttResources()
            {
                ResourceId = 5,
                ResourceName = "Davolio Fuller"
            };
            GanttResources Record6 = new GanttResources()
            {
                ResourceId = 6,
                ResourceName = "Van Jack"
            };
            GanttResources Record7 = new GanttResources()
            {
                ResourceId = 7,
                ResourceName = "Fuller Buchanan"
            };
            GanttResources Record8 = new GanttResources()
            {
                ResourceId = 8,
                ResourceName = "Jack Davolio"
            };
            GanttResources Record9 = new GanttResources()
            {
                ResourceId = 9,
                ResourceName = "Tamer Vinet"
            };
            GanttResources Record10 = new GanttResources()
            {
                ResourceId = 10,
                ResourceName = "Vinet Fuller"
            };
            GanttResources Record11 = new GanttResources()
            {
                ResourceId = 11,
                ResourceName = "Bergs Anton"
            };
            GanttResources Record12 = new GanttResources()
            {
                ResourceId = 12,
                ResourceName = "Construction Supervisor"
            };
            GanttResourcesCollection.Add(Record1);
            GanttResourcesCollection.Add(Record2);
            GanttResourcesCollection.Add(Record3);
            GanttResourcesCollection.Add(Record4);
            GanttResourcesCollection.Add(Record5);
            GanttResourcesCollection.Add(Record6);
            GanttResourcesCollection.Add(Record7);
            GanttResourcesCollection.Add(Record8);
            GanttResourcesCollection.Add(Record9);
            GanttResourcesCollection.Add(Record10);
            GanttResourcesCollection.Add(Record11);
            GanttResourcesCollection.Add(Record12);
            return GanttResourcesCollection;
        }
        public static List<GanttDataSource> GanttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,
                ResourceId = new int[] { 1 },
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
                ResourceId = new int[] { 2 },
            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                Dependency = "3FS",
                Notes = "Measure the total property area alloted for construction",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                ResourceId = new int[] { 3 }
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),

                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70,
                ResourceId = new int[] { 4 },

            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Dependency = "6FS",
                Progress = 50,
                ResourceId = new int[] { 3 },

            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }
        public class GanttResources
        {
            public int ResourceId { get; set; }
            public string ResourceName { get; set; }
        }
        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public string Dependency { get; set; }
            public string Notes { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
            public int[] ResourceId { get; set; }

        }

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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { 'PdfExport' })"
    toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true" height="450px"
    rowHeight="60" resources="ViewBag.projectResources">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
        progress="Progress" child="SubTasks" resourceInfo="ResourceId">
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" headerText="Task Id" width="50"></e-gantt-column>
        <e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
    </e-gantt-columns>
    <e-gantt-labelSettings leftLabel="#leftLabel" rightLabel="#rightLabel" taskLabel="${Progress}%"></e-gantt-labelSettings>
</ejs-gantt>




<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            gantt.pdfExport();
        }
    }
    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 + '%'
        }
</script>

<script type="text/x-template" id="leftLabel">
    <div style="margin-top=-7px;">
        <div id="leftLabel">
            <span>${TaskName} [ ${Progress}% ]</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>
<script>
    function getResourceElements(value) {
        var out = "";
        var img = document.createElement('img');
        img.height = 40;
        var span = document.createElement('span');
        span.style.marginLeft = "5px";
        span.style.marginRight = "5px";
        for (var index = 0; index < value.length; index++) {
            var imgName = value[index].ResourceName;
            img.src = '../Content/gantt/images/' + value[index].ResourceName + '.png';
            span.innerHTML = value[index].ResourceName;
            out = out + img.outerHTML + span.outerHTML;
        }
        return out;
    }
</script>
public IActionResult Index()
{
     ViewBag.DataSource = GanttData();
     ViewBag.ProjectResources = ProjectResources();
    return View();
}

public static List<GanttResources> ProjectResources()
        {
            List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

            GanttResources Record1 = new GanttResources()
            {
                ResourceId = 1,
                ResourceName = "Martin Tamer"
            };
            GanttResources Record2 = new GanttResources()
            {
                ResourceId = 2,
                ResourceName = "Rose Fuller"
            };
            GanttResources Record3 = new GanttResources()
            {
                ResourceId = 3,
                ResourceName = "Margaret Buchanan"
            };
            GanttResources Record4 = new GanttResources()
            {
                ResourceId = 4,
                ResourceName = "Fuller King"
            };
            GanttResources Record5 = new GanttResources()
            {
                ResourceId = 5,
                ResourceName = "Davolio Fuller"
            };
            GanttResources Record6 = new GanttResources()
            {
                ResourceId = 6,
                ResourceName = "Van Jack"
            };
            GanttResources Record7 = new GanttResources()
            {
                ResourceId = 7,
                ResourceName = "Fuller Buchanan"
            };
            GanttResources Record8 = new GanttResources()
            {
                ResourceId = 8,
                ResourceName = "Jack Davolio"
            };
            GanttResources Record9 = new GanttResources()
            {
                ResourceId = 9,
                ResourceName = "Tamer Vinet"
            };
            GanttResources Record10 = new GanttResources()
            {
                ResourceId = 10,
                ResourceName = "Vinet Fuller"
            };
            GanttResources Record11 = new GanttResources()
            {
                ResourceId = 11,
                ResourceName = "Bergs Anton"
            };
            GanttResources Record12 = new GanttResources()
            {
                ResourceId = 12,
                ResourceName = "Construction Supervisor"
            };
            GanttResourcesCollection.Add(Record1);
            GanttResourcesCollection.Add(Record2);
            GanttResourcesCollection.Add(Record3);
            GanttResourcesCollection.Add(Record4);
            GanttResourcesCollection.Add(Record5);
            GanttResourcesCollection.Add(Record6);
            GanttResourcesCollection.Add(Record7);
            GanttResourcesCollection.Add(Record8);
            GanttResourcesCollection.Add(Record9);
            GanttResourcesCollection.Add(Record10);
            GanttResourcesCollection.Add(Record11);
            GanttResourcesCollection.Add(Record12);
            return GanttResourcesCollection;
        }
        public static List<GanttDataSource> GanttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,
                ResourceId = new int[] { 1 },
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
                ResourceId = new int[] { 2 },
            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                Dependency = "3FS",
                Notes = "Measure the total property area alloted for construction",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                ResourceId = new int[] { 3 }
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),

                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70,
                ResourceId = new int[] { 4 },

            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Dependency = "6FS",
                Progress = 50,
                ResourceId = new int[] { 3 },

            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }
        public class GanttResources
        {
            public int ResourceId { get; set; }
            public string ResourceName { get; set; }
        }
        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public string Dependency { get; set; }
            public string Notes { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
            public int[] ResourceId { get; set; }

        }

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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { 'PdfExport' })"
            toolbarClick="toolbarClick" pdfQueryTaskbarInfo="pdfQueryTaskbarInfo" allowPdfExport="true" height="450px" rowHeight = "60" resources = "ViewBag.projectResources">
    <e-gantt-taskfields id = "TaskId" name = "TaskName" startDate = "StartDate" endDate = "EndDate" duration = "Duration" progress = "Progress" child = "SubTasks" resourceInfo = "ResourceId" >
    </e-gantt-taskfields>
    <e-gantt-columns>
        <e-gantt-column field = "TaskName" headerText = "Task Id" width = "50" headerTemplate = "#projectName"> </e-gantt-column>
        <e-gantt-column field = "StartDate" headerText = "Task Name" width = "250" headerTemplate = "#dateTemplate"> </e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>



<script>
    function toolbarClick(args) {
        var gantt = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === 'GanttContainer_pdfexport') {
            gantt.pdfExport();
        }
    }
    let i = 0;
    function pdfQueryTaskbarInfo(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++;
        }
    }
</script>

<script type = "text/x-template" id = "projectName" >
    <div>
        <img class="taskName" width = "20" height = "20" />
        <span>& nbsp;Task Name < /span>
    </div>
</script>
<script type = "text/x-template" id = "dateTemplate" >
    <div>
        <img class="startDate" width = "20" height = "20" />
        <span>& nbsp;Start Date < /span> 
    </div>
</script>

<style>
    .material img.resource, .fabric img.resource, .bootstrap img.resource,
    .tailwind img.resource, .bootstrap5 img.resource, .bootstrap4 img.resource,
    .fluent img.resource,.material3 img.resource{
    content: url("../Content/gantt/images/Resources.png");
}
    .material - dark img.resource, .fabric - dark img.resource, .bootstrap - dark img.resource,
    .tailwind - dark img.resource, .bootstrap5 - dark img.resource, .highcontrast img.resource,
    .fluent - dark img.resource,.material3 - dark img.resource {
    content: url("../Content/gantt/images/ResourcesDark.png");
}
    .material img.taskName, .fabric img.taskName, .bootstrap img.taskName,
    .tailwind img.taskName, .bootstrap5 img.taskName, .bootstrap4 img.taskName,
    .fluent img.taskName,.material3 img.taskName {
    content: url("../Content/gantt/images/TaskName.png");
}
    .material - dark img.taskName, .fabric - dark img.taskName, .bootstrap - dark img.taskName,
    .tailwind - dark img.taskName, .bootstrap5 - dark img.taskName, .highcontrast img.taskName,
    .fluent - dark img.taskName,.material3 - dark img.taskName {
    content: url("../Content/gantt/images/TaskNameDark.png");
}
    .material img.startDate, .fabric img.startDate, .bootstrap img.startDate,
    .tailwind img.startDate, .bootstrap5 img.startDate, .bootstrap4 img.startDate,
    .fluent img.startDate,.material3 img.startDate {
    content: url("../Content/gantt/images/StartDate.png");
}
    .material - dark img.startDate, .fabric - dark img.startDate, .bootstrap - dark img.startDate,
    .tailwind - dark img.startDate, .bootstrap5 - dark img.startDate, .highcontrast img.startDate,
    .fluent - dark img.startDate,.material3 - dark img.startDate {
    content: url("../Content/gantt/images/StartDateDark.png");
}
    .material img.duration, .fabric img.duration, .bootstrap img.duration,
    .tailwind img.duration, .bootstrap5 img.duration, .bootstrap4 img.duration,
    .fluent img.duration,.material3 img.duration {
    content: url("../Content/gantt/images/Duration.png");
}
    .material - dark img.duration, .fabric - dark img.duration, .bootstrap - dark img.duration,
    .tailwind - dark img.duration, .bootstrap5 - dark img.duration, .highcontrast img.duration,
    .fluent - dark img.duration,.material3 - dark img.duration {
    content: url("../Content/gantt/images/DurationDark.png");
}
    .material img.progressTemplate, .fabric img.progressTemplate, .bootstrap img.progressTemplate,
    .tailwind img.progressTemplate, .bootstrap5 img.progressTemplate, .bootstrap4 img.progressTemplate,
    .fluent img.progressTemplate,.material3 img.progressTemplate {
    content: url("../Content/gantt/images/Progress.png");
}
    .material - dark img.progressTemplate, .fabric - dark img.progressTemplate, .bootstrap - dark img.progressTemplate,
    .tailwind - dark img.progressTemplate, .bootstrap5 - dark img.progressTemplate, .highcontrast img.progressTemplate,
    .fluent - dark img.progressTemplate,.material3 - dark img.progressTemplate {
    content: url("../Content/gantt/images/ProgressDark.png");
}
img.resource, img.taskName, img.startDate, img.duration, img.progressTemplate {
    margin - right: 8px;
}
</style>
public IActionResult Index()
{
     ViewBag.DataSource = GanttData();
     ViewBag.ProjectResources = ProjectResources();
    return View();
}

public static List<GanttResources> ProjectResources()
        {
            List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

            GanttResources Record1 = new GanttResources()
            {
                ResourceId = 1,
                ResourceName = "Martin Tamer"
            };
            GanttResources Record2 = new GanttResources()
            {
                ResourceId = 2,
                ResourceName = "Rose Fuller"
            };
            GanttResources Record3 = new GanttResources()
            {
                ResourceId = 3,
                ResourceName = "Margaret Buchanan"
            };
            GanttResources Record4 = new GanttResources()
            {
                ResourceId = 4,
                ResourceName = "Fuller King"
            };
            GanttResources Record5 = new GanttResources()
            {
                ResourceId = 5,
                ResourceName = "Davolio Fuller"
            };
            GanttResources Record6 = new GanttResources()
            {
                ResourceId = 6,
                ResourceName = "Van Jack"
            };
            GanttResources Record7 = new GanttResources()
            {
                ResourceId = 7,
                ResourceName = "Fuller Buchanan"
            };
            GanttResources Record8 = new GanttResources()
            {
                ResourceId = 8,
                ResourceName = "Jack Davolio"
            };
            GanttResources Record9 = new GanttResources()
            {
                ResourceId = 9,
                ResourceName = "Tamer Vinet"
            };
            GanttResources Record10 = new GanttResources()
            {
                ResourceId = 10,
                ResourceName = "Vinet Fuller"
            };
            GanttResources Record11 = new GanttResources()
            {
                ResourceId = 11,
                ResourceName = "Bergs Anton"
            };
            GanttResources Record12 = new GanttResources()
            {
                ResourceId = 12,
                ResourceName = "Construction Supervisor"
            };
            GanttResourcesCollection.Add(Record1);
            GanttResourcesCollection.Add(Record2);
            GanttResourcesCollection.Add(Record3);
            GanttResourcesCollection.Add(Record4);
            GanttResourcesCollection.Add(Record5);
            GanttResourcesCollection.Add(Record6);
            GanttResourcesCollection.Add(Record7);
            GanttResourcesCollection.Add(Record8);
            GanttResourcesCollection.Add(Record9);
            GanttResourcesCollection.Add(Record10);
            GanttResourcesCollection.Add(Record11);
            GanttResourcesCollection.Add(Record12);
            return GanttResourcesCollection;
        }
        public static List<GanttDataSource> GanttData()
        {
            List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

            GanttDataSource Record1 = new GanttDataSource()
            {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child1 = new GanttDataSource()
            {
                TaskId = 2,
                TaskName = "Identify site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 70,
                ResourceId = new int[] { 1 },
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
                ResourceId = new int[] { 2 },
            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                Dependency = "3FS",
                Notes = "Measure the total property area alloted for construction",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                ResourceId = new int[] { 3 }
            };
            Record1.SubTasks.Add(Child1);
            Record1.SubTasks.Add(Child2);
            Record1.SubTasks.Add(Child3);

            GanttDataSource Record2 = new GanttDataSource()
            {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),

                EndDate = new DateTime(2019, 04, 21),
                SubTasks = new List<GanttDataSource>(),
            };
            GanttDataSource Child4 = new GanttDataSource()
            {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Progress = 70,
                ResourceId = new int[] { 4 },

            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Dependency = "6FS",
                Progress = 50,
                ResourceId = new int[] { 3 },

            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

            GanttDataSourceCollection.Add(Record1);
            GanttDataSourceCollection.Add(Record2);

            return GanttDataSourceCollection;
        }
        public class GanttResources
        {
            public int ResourceId { get; set; }
            public string ResourceName { get; set; }
        }
        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public string Dependency { get; set; }
            public string Notes { get; set; }
            public DateTime StartDate { get; set; }
            public DateTime EndDate { get; set; }
            public int? Duration { get; set; }
            public int Progress { get; set; }
            public List<GanttDataSource> SubTasks { get; set; }
            public int[] ResourceId { get; set; }

        }