ASP.NET Core

Search results

Pdf Export in ASP.NET Core Gantt control

29 Jul 2021 / 4 minutes to read

PDF export allows exporting Gantt data to PDF document. You need to use the pdfExport method for exporting. To enable PDF export in the Gantt, set the allowPdfExport to true.

To export data to PDF document, inject the PdfExport module in Gantt.

Note: Currently, we don’t have support for exporting the manually scheduled tasks.

tagHelper

pdfexport.cs

<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') {
                gantt.pdfExport();
            }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Multiple exporting

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

tagHelper

pdfmultipleexport.cs

<ejs-gantt id='GanttContainer1' dataSource="ViewBag.DataSource" height="280px" allowPdfExport="true"
           toolbar="@(new List<string>() { "PdfExport"})" toolbarClick="toolbarClick" treeColumnIndex="1" projectStartDate="03/31/2019" projectEndDate="04/14/2019">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

<ejs-gantt id='GanttContainer2' dataSource="ViewBag.DataSource" height="250px" allowPdfExport="true" toolbar="@(new List<string>() { "PdfExport"})" toolbarClick="toolbarClick" treeColumnIndex="1">
    <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 firstGantt = document.getElementById("GanttContainer1").ej2_instances[0];
        var secondGantt = document.getElementById("GanttContainer2").ej2_instances[0];
        if (args.item.id === 'GanttContainer1_pdfexport') {
            var firstGanttExport = firstGantt.pdfExport({}, true);
            firstGanttExport.then((fData) => {
                secondGantt.pdfExport({}, false, fData);
            });
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

To customize PDF export

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

File name for exported document

You can assign a file name for the exported document by defining the fileName property in pdfExportProperties.

tagHelper

file-name.cs

<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

Page orientation can be changed to Portrait (Default Landscape) for the exported document using the property pdfExportProperties.pageOrientation.

tagHelper

page-orientation.cs

<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 property pdfExportProperties.pageSize. 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

tagHelper

page-size.cs

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

tagHelper

current-view-data.cs

<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();
}

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

tagHelper

footer.cs

<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 = {
                enableFooter: false
            };
            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.

tagHelper

hidden-columns.cs

<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

By using showPredecessorLines, you can hide or show predecessor lines in the exported PDF document.

tagHelper

connector-lines.cs

<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

You can show a hidden column or hide a visible column while exporting the Gantt using the toolbarClick and beforePdfExport events.

You can show or hide columns by setting the column.visible property to true or false respectively.

In the following example, there is a hidden column Duration in the Gantt. While exporting, we have changed Duration to visible column and StartDate to hidden column.

tagHelper

showhide-columns.cs

<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" 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 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 and backgroundColor properties.

tagHelper

cell-customization.cs

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

tagHelper

timeline-customization.cs

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

tagHelper

taskbar-customization.cs

<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();
}

Theme

PDF export provides an option to include theme for the exported PDF document. To apply theme in exported PDF, define the theme in pdfExportProperties. The available themes are:

Material
Fabric
Bootstrap
Bootstrap 4

tagHelper

themes.cs

<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 = {
                theme: "Fabric"
            };
            gantt.pdfExport(exportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Customized Theme

PDF export provides an option to customize the Gantt style for the exported PDF document. To customize Gantt style in exported PDF, define the ganttStyle in pdfExportProperties.

tagHelper

<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 = {
                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),
                },
            };
            gantt.pdfExport(exportProperties);
        }
    }
</script>

Contents

Multiple exporting
To customize PDF export
File name for exported document
How to change page orientation
How to change page size
Export current view data
Enable footer
Export hidden columns
Export predecessor lines
Show or hide columns on exported PDF
Conditional cell formatting
Timeline cell formatting
Taskbar formatting
Theme
Customized Theme

Contents

Multiple exporting
To customize PDF export
File name for exported document
How to change page orientation
How to change page size
Export current view data
Enable footer
Export hidden columns
Export predecessor lines
Show or hide columns on exported PDF
Conditional cell formatting
Timeline cell formatting
Taskbar formatting
Theme
Customized Theme

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Pdf Export in ASP.NET Core Gantt control

Multiple exporting

To customize PDF export

File name for exported document

How to change page orientation

How to change page size

Export current view data

Enable footer

Export hidden columns

Export predecessor lines

Show or hide columns on exported PDF

Conditional cell formatting

Timeline cell formatting

Taskbar formatting

Theme

Customized Theme