Export

Gantt provides support to export the contents in PDF and excel. To export the contents, the ExcelExport and PdfExport toolbar items must be included in the toolbarSettings.toolbarItems property. And you need to call the export method with the export mapper as parameter in the toolbar button click action.

The below code snippet explains the above behavior,

  • javascript
  • <ej-gantt
        //...
        [toolbarSettings]= "toolbarSettings"
        (toolbarClick)="toolbarClick($event)">
    </ej-gantt>
  • javascript
  • import {Component} from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',
    })
    export class AppComponent {
        public toolbarSettings: any;
        constructor() {
            this.toolbarSettings = {
                showToolbar: true,
                toolbarItems: [
                    ej.Gantt.ToolbarItems.ExcelExport,
                    ej.Gantt.ToolbarItems.PdfExport
                ]
            }
    
        }
        toolbarClick(sender) {
            var id = $(sender.currentTarget).attr("id");
            var gantt = $("#GanttControl").ejGantt("instance");
            gantt.exportGantt = gantt["export"];
    
            if (id == "GanttContainer_pdfExport") {
                gantt.exportGantt("http://js.syncfusion.com/demos/ejServices/api/Gantt/PdfExport", "", false);
                sender.cancel = true;
            }
    
            if (id == "GanttContainer_excelExport") {
                gantt.exportGantt("http://js.syncfusion.com/demos/ejServices/api/Gantt/ExcelExport", "", false);
                sender.cancel = true;
            }
        }
    }

    The PDF and Excel exporting services for Gantt are explained in detail here.

    The below screen shot shows Gantt with excel and PDF exporting enabled.

    Server Configuration

    Gantt data can be converted to PDF and excel file formats in server side only, through EJ’s helper functions in .NET.
    To use Gantt PDF export in projects, it is required to create a server with any of the following web services.

    • Web API
    • WCF Service
    • ASP.NET MVC Controller Action
    • ASP.NET WebMethod

    Following code snippet demonstrate exporting with Web API controller.

  • c#
  • public class GanttController : ApiController
    {       
            [System.Web.Http.ActionName("ExcelExport")]
            [AcceptVerbs("POST")]
            public void ExcelExport()
            {
                string ganttModel = HttpContext.Current.Request.Params["GanttModel"];
                GanttProperties ganttProperty = ConvertGanttObject(ganttModel);
                ExcelExport exp = new ExcelExport();
                TaskDetailsCollection taskCollection = new TaskDetailsCollection();
                IEnumerable<TaskDetails> data = taskCollection.GetDataSource();
                exp.Export(ganttProperty, data, "ExcelExport.xlsx", ExcelVersion.Excel2010, new GanttExportSettings() { Theme = ExportTheme.FlatAzure });
            }
           
            [System.Web.Http.ActionName("PdfExport")]
            [AcceptVerbs("POST")]
            public void GanttPdfExport()
            {
                string ganttModel = HttpContext.Current.Request.Params["GanttModel"];
                string locale = HttpContext.Current.Request.Params["locale"];
                GanttProperties ganttProperty = ConvertGanttObject(ganttModel);
                PdfExport exp = new PdfExport();
                TaskDetailsCollection taskCollection = new TaskDetailsCollection();
                IEnumerable<TaskDetails> data = taskCollection.GetDataSource();
                GanttPdfExportSettings settings = new GanttPdfExportSettings();
                settings.EnableFooter = true;
                settings.IsFitToWidth = isFitToWidth;
                settings.ProjectName = "Project Tracker";
                settings.Locale = locale;
                exp.Export(ganttProperty, data, settings, "Gantt");
            }
    
            private GanttProperties ConvertGanttObject(string ganttProperty)
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                IEnumerable div = (IEnumerable)serializer.Deserialize(ganttProperty, typeof(IEnumerable));
                GanttProperties ganttProp = new GanttProperties();
                foreach (KeyValuePair<string, object> currentProperty in div)
                {
                    var property = ganttProp.GetType().GetProperty(currentProperty.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
                    if (property != null)
                    {
                        Type type = property.PropertyType;
                        string serialize = serializer.Serialize(currentProperty.Value);
                        object value = serializer.Deserialize(serialize, type);
                        property.SetValue(ganttProp, value, null);
                    }
                }
                return ganttProp;
            }
     }

    Server dependencies

    Export Helper functions are available in the Assembly Syncfusion.EJ.Export, which is available in the Essential Studio & Essential JavaScript builds. The list of assemblies needed for Gantt Export as follows

    • Syncfusion.EJ
    • Syncfusion.EJ.Export
    • Syncfusion.Linq.Base
    • Syncfusion.Compression.Base
    • Syncfusion.XlsIO.Base
    • Syncfusion.PDF.Base

    Export Theme

    The Gantt export supports the below themes,

    • flat-azure
    • flat-azure-dark
    • flat-lime
    • flat-lime-dark
    • flat-saffron
    • flat-saffron-dark
    • gradient-azure
    • gradient-azure-dark
    • gradient-lime
    • gradient-lime-dark
    • gradient-saffron
    • gradient-saffron-dark
    • bootstrap-theme
    • high-contrast
    • material
    • Office 365

    The desired theme should be passed as a parameter to the Export method and the code snippet for this as follows

  • c#
  • [System.Web.Http.ActionName("ExcelExport")]
    [AcceptVerbs("POST")]
    public void ExcelExport()
    {
       string ganttModel = HttpContext.Current.Request.Params["GanttModel"];
       GanttProperties ganttProperty = ConvertGridObject(ganttModel);
       ExcelExport exp = new ExcelExport();
       TaskDetailsCollection taskCollection = new TaskDetailsCollection();
       IEnumerable<TaskDetails> data = taskCollection.GetDataSource();
       exp.Export(ganttProperty, data, "ExcelExport.xlsx", ExcelVersion.Excel2010, new GanttExportSettings() { Theme = ExportTheme.FlatAzure });
    }

    Customization

    In Gantt, we can customize Grid cells, taskbars in Excel and PDF files by using exporting events. While exporting the Gantt as Excel or PDF files, events are triggered to customize the Grid cells and taskbars.

    Customize Excel cell

    Excel cells can be customized by using ServerExcelQueryCellInfo event, in this event we can get the details about current record, Excel cell and current column information. Using this information we can customize the background color, font color and value of Excel cell, please find the event argument details below.

    </tr>
    Name Description Type
    Data Returns the current row details GanttRecordDetails
    Cell Returns current Excel cell information IRange
    Column Returns current column information GanttColumn

    The following code snippets shows how to bind ServerExcelQueryCellInfo event in Web API controller and how to customize Excel cell using this event.

  • c#
  • public class GanttController : ApiController
        {
            GanttProperties.GanttEJExportEventHandler queryExcelCellDelegate = new GanttProperties.GanttEJExportEventHandler(GanttExcelQueryCell);
    
            [System.Web.Http.ActionName("ExcelCustomExport")]
            [AcceptVerbs("POST")]
            public void ExcelCustomExport()
            {
                string gridModel = HttpContext.Current.Request.Params["GanttModel"];
                GanttProperties controlProperty = ConvertGridObject(gridModel);
                `controlProperty.ServerExcelQueryCellInfo = queryExcelCellDelegate;`
                ExcelExport exportObject = new ExcelExport();
                TaskDetailsCollection taskDetails = new TaskDetailsCollection();
                IEnumerable<TaskDetails> result = taskDetails.GetExportDataSource();
                exportObject.Export(controlProperty, result, "ExcelExport.xlsx", ExcelVersion.Excel2010, new GanttExportSettings() { Theme = ExportTheme.FlatAzure });
            }
            
            public static void GanttExcelQueryCell(object model, object arguments)
            {
                var record = (GanttRecordDetails)((Dictionary<string, object>)arguments)["Data"];
                var cell = (IRange)((Dictionary<string, object>)arguments)["Cell"];
                var column = (GanttColumn)((Dictionary<string, object>)arguments)["Column"];
                var ganttModel = (GanttProperties)model;
    
                if (column.MappingName == ganttModel.ProgressMapping && !record.IsParentRow)
                {
                    if (float.Parse(cell.Value) > 80)
                        cell.CellStyle.Color = ColorConversion.GetColor(new PdfColor(165, 105, 189));
                    else if (float.Parse(cell.Value) < 20)
                        cell.CellStyle.Color = ColorConversion.GetColor(new PdfColor(240, 128, 128));
                } 
            }
    
            private GanttProperties ConvertGridObject(string controlProperty)
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                IEnumerable outputObject = (IEnumerable)serializer.Deserialize(controlProperty, typeof(IEnumerable));
                GanttProperties gridProp = new GanttProperties();
                foreach (KeyValuePair<string, object> currentProperty in outputObject)
                {
                    var property = gridProp.GetType().GetProperty(currentProperty.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
                    if (property != null)
                    {
                        Type type = property.PropertyType;
                        string serialize = serializer.Serialize(currentProperty.Value);
                        object value = serializer.Deserialize(serialize, type);
                        property.SetValue(gridProp, value, null);
                    }
                }
                return gridProp;
            }
        }

    Click here to view the online demo sample with above code example.

    NOTE

    Refer this link to know more about what are the properties are available in Excel cell and it’s type values.

    Customize PDF cell

    PDF cells in Gantt can be customized by using ServerPdfQueryCellInfo event, in this event we can get the details about current record, PDF cell and current column information. Using this information we can customize the background color and font color of PDF cells, please find the event argument details below.

    </tr>
    Name Description Type
    Data Returns the current row details GanttRecord
    Cell Returns current Excel cell information PdfTreeGridCell
    Column Returns current column information GanttColumn

    The following code snippets shows how to bind ServerPdfQueryCellInfo event in Web API controller and how to customize PDF cell using this event.

  • c#
  • public class GanttController : ApiController
        {
            GanttProperties.GanttEJExportEventHandler queryCellDelegate = new GanttProperties.GanttEJExportEventHandler(GanttPdfQueryCell);
    
            [System.Web.Http.ActionName("PdfCustomExport")]
            [AcceptVerbs("POST")]
            public void PdfCustomExport()
            {
                string gridModel = HttpContext.Current.Request.Params["GanttModel"];
                string locale = HttpContext.Current.Request.Params["locale"];
                GanttProperties gridProperty = ConvertGridObject(gridModel);
                `gridProperty.ServerPdfQueryCellInfo = queryCellDelegate;`
                PdfExport export = new PdfExport();
                TaskDetailsCollection taskCollection = new TaskDetailsCollection();
                IEnumerable<TaskDetails> result = taskCollection.GetExportDataSource();
                GanttPdfExportSettings settings = new GanttPdfExportSettings();
                settings.EnableFooter = true;
                settings.IsFitToWidth = true;
                settings.ProjectName = "Project Tracker";
                settings.Locale = locale;
                export.Export(gridProperty, result, settings, "Gantt");
            }
    
            public static void GanttPdfQueryCell(object model, object arguments)
            {
                var record = (GanttRecord)((Dictionary<string, object>)arguments)["Data"];
                var cell = (PdfTreeGridCell)((Dictionary<string, object>)arguments)["Cell"];
                var column = (GanttColumn)((Dictionary<string, object>)arguments)["Column"];
                var ganttModel = (GanttProperties)model;
    
                if (column.MappingName == ganttModel.ProgressMapping && !record.IsParentRow)
                {
                    if (record.Progress > 80)
                    {
                        PdfBrush color = new PdfSolidBrush(new PdfColor(165, 105, 189));
                        cell.Style.BackgroundBrush = color;
                    }
                    else if (record.Progress < 20)
                    {
                        PdfBrush color = new PdfSolidBrush(new PdfColor(240, 128, 128));
                        cell.Style.BackgroundBrush = color;
                    }
                }       
            }
    
            private GanttProperties ConvertGridObject(string controlProperty)
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                IEnumerable outputObject = (IEnumerable)serializer.Deserialize(controlProperty, typeof(IEnumerable));
                GanttProperties gridProperty = new GanttProperties();
                foreach (KeyValuePair<string, object> currentProperty in outputObject)
                {
                    var property = gridProperty.GetType().GetProperty(currentProperty.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
                    if (property != null)
                    {
                        Type type = property.PropertyType;
                        string serialize = serializer.Serialize(currentProperty.Value);
                        object value = serializer.Deserialize(serialize, type);
                        property.SetValue(gridProperty, value, null);
                    }
                }
                return gridProperty;
            }
        }

    Click here to view the online demo sample with above code example.

    NOTE

    Refer this link to know more about what are the properties are available in PDF cell and it’s type values.

    Customize PDF taskbar

    PDF taskbars in Gantt can be customized by using ServerPdfQueryTaskbarInfo event, in this event we can get the details about current record and taskbar information. Using this information we can customize the background color of taskbar and progress bar, please find the event argument details below.

    </tr>
    Name Description Type
    Data Returns the current row details GanttRecord
    Taskbar Returns current Excel cell information PdfGanttTaskbar

    The following code snippets shows how to bind ServerPdfQueryTaskbarInfo event in Web API controller and how to customize PDF taskbar using this event.

  • c#
  • public class GanttController : ApiController
        {
            GanttProperties.GanttEJExportEventHandler queryTaskbarDelegate = new GanttProperties.GanttEJExportEventHandler(GanttQueryTaskbar);
    
            [System.Web.Http.ActionName("PdfCustomExport")]
            [AcceptVerbs("POST")]
            public void PdfCustomExport()
            {
                string gridModel = HttpContext.Current.Request.Params["GanttModel"];
                string locale = HttpContext.Current.Request.Params["locale"];
                GanttProperties gridProperty = ConvertGridObject(gridModel);
                `gridProperty.ServerPdfQueryTaskbarInfo = queryTaskbarDelegate;`
                PdfExport export = new PdfExport();
                TaskDetailsCollection taskCollection = new TaskDetailsCollection();
                IEnumerable<TaskDetails> result = taskCollection.GetExportDataSource();
                GanttPdfExportSettings settings = new GanttPdfExportSettings();
                settings.EnableFooter = true;
                settings.IsFitToWidth = true;
                settings.ProjectName = "Project Tracker";
                settings.Locale = locale;
                export.Export(gridProperty, result, settings, "Gantt");
            }
    
            public static void GanttQueryTaskbar(object model, object arguments)
            {
                var record = (GanttRecord)((Dictionary<string, object>)arguments)["Data"];
                var taskbar = (PdfGanttTaskbar)((Dictionary<string, object>)arguments)["Taskbar"];
                if (!record.IsParentRow)
                {
                    if (record.Progress > 80)
                    {
                        taskbar.ProgressColor = new PdfColor(108, 52, 131);
                        taskbar.TaskBorderColor = taskbar.TaskColor = new PdfColor(165, 105, 189);
                    }
                    else if (record.Progress < 20)
                    {
                        taskbar.ProgressColor = new PdfColor(205, 92, 92);
                        taskbar.TaskBorderColor = taskbar.TaskColor = new PdfColor(240, 128, 128);
                    }
                }
            }
    
            private GanttProperties ConvertGridObject(string controlProperty)
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                IEnumerable outputObject = (IEnumerable)serializer.Deserialize(controlProperty, typeof(IEnumerable));
                GanttProperties gridProperty = new GanttProperties();
                foreach (KeyValuePair<string, object> currentProperty in outputObject)
                {
                    var property = gridProperty.GetType().GetProperty(currentProperty.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
                    if (property != null)
                    {
                        Type type = property.PropertyType;
                        string serialize = serializer.Serialize(currentProperty.Value);
                        object value = serializer.Deserialize(serialize, type);
                        property.SetValue(gridProperty, value, null);
                    }
                }
                return gridProperty;
            }
        }

    Click here to view the online demo sample with above code example.