@syncfusion/ej2-gantt 22.2.12 → 23.1.36

package/src/gantt/export/export-helper.js

@@ -13,8 +13,101 @@ import { pixelToPoint, isScheduledTask } from '../base/utils';
  */
 var ExportHelper = /** @class */ (function () {
     function ExportHelper(parent) {
+        this.totalColumnWidth = 0;
+        this.beforeSinglePageExport = {};
+        this.baselineHeight = 8;
         this.parent = parent;
     }
+    ExportHelper.prototype.processToFit = function () {
+        this.beforeSinglePageExport['zoomingProjectStartDate'] = this.parent.zoomingProjectStartDate;
+        this.beforeSinglePageExport['zoomingProjectEndDate'] = this.parent.zoomingProjectEndDate;
+        this.beforeSinglePageExport['cloneProjectStartDate'] = this.parent.cloneProjectStartDate;
+        this.beforeSinglePageExport['cloneProjectEndDate'] = this.parent.cloneProjectEndDate;
+        this.beforeSinglePageExport['customTimelineSettings'] = extend({}, this.parent.timelineModule.customTimelineSettings, null, true);
+        this.beforeSinglePageExport['isTimelineRoundOff'] = this.parent.isTimelineRoundOff;
+        this.beforeSinglePageExport['topTier'] = this.parent.timelineModule.topTier;
+        this.beforeSinglePageExport['topTierCellWidth'] = this.parent.timelineModule.topTierCellWidth;
+        this.beforeSinglePageExport['topTierCollection'] = this.parent.timelineModule.topTierCollection;
+        this.beforeSinglePageExport['bottomTier'] = this.parent.timelineModule.bottomTier;
+        this.beforeSinglePageExport['bottomTierCellWidth'] = this.parent.timelineModule.bottomTierCellWidth;
+        this.beforeSinglePageExport['bottomTierCollection'] = this.parent.timelineModule.bottomTierCollection;
+        this.beforeSinglePageExport['totalTimelineWidth'] = this.parent.timelineModule.totalTimelineWidth;
+        this.beforeSinglePageExport['timelineStartDate'] = this.parent.timelineModule.timelineStartDate;
+        this.beforeSinglePageExport['timelineEndDate'] = this.parent.timelineModule.timelineEndDate;
+        this.beforeSinglePageExport['timelineRoundOffEndDate'] = this.parent.timelineModule.timelineRoundOffEndDate;
+        this.beforeSinglePageExport['perDayWidth'] = this.parent.perDayWidth;
+        this.beforeSinglePageExport['updatedConnectorLineCollection'] = extend([], this.parent.updatedConnectorLineCollection, null, true);
+        this.parent.timelineModule.isZoomToFit = true;
+        this.parent.timelineModule.isZooming = false;
+        if (!this.parent.zoomingProjectStartDate) {
+            this.parent.zoomingProjectStartDate = this.parent.cloneProjectStartDate;
+            this.parent.zoomingProjectEndDate = this.parent.cloneProjectEndDate;
+        }
+        if (this.parent.zoomingProjectStartDate > this.parent.cloneProjectStartDate) {
+            this.parent.cloneProjectStartDate = new Date(this.parent.allowUnscheduledTasks ? this.parent.zoomingProjectStartDate : this.parent.cloneProjectStartDate);
+        }
+        this.parent.dataOperation.calculateProjectDates();
+        var timeDifference = (this.parent.cloneProjectEndDate.getTime() - this.parent.cloneProjectStartDate.getTime());
+        var totalDays = (timeDifference / (1000 * 3600 * 24));
+        var chartsideWidth;
+        var gridWidth;
+        if (this.exportProps.fitToWidthSettings.gridWidth) {
+            gridWidth = parseInt(this.exportProps.fitToWidthSettings.gridWidth.split('%')[0]);
+        }
+        if (this.exportProps.fitToWidthSettings.chartWidth) {
+            chartsideWidth = parseInt(this.exportProps.fitToWidthSettings.chartWidth.split('%')[0]);
+        }
+        else {
+            if (this.exportProps.fitToWidthSettings.gridWidth) {
+                chartsideWidth = 100 - gridWidth;
+            }
+            else {
+                chartsideWidth = 70;
+            }
+        }
+        var pdfwidth = (this.parent.pdfExportModule['pdfPageDimensions'].width * chartsideWidth) / 100;
+        var chartWidth = pdfwidth;
+        var perDayWidth = chartWidth / totalDays;
+        var zoomingLevel;
+        var firstValue;
+        var secondValue;
+        var zoomingCollections = this.parent.zoomingLevels.slice();
+        var sortedCollectons = zoomingCollections.sort(function (a, b) {
+            return (!a.perDayWidth && !b.perDayWidth ? 0 : (a.perDayWidth < b.perDayWidth) ? 1 : -1);
+        });
+        if (perDayWidth === 0) { // return when the Gantt chart is not in viewable state.
+            return;
+        }
+        for (var i = 0; i < sortedCollectons.length; i++) {
+            firstValue = sortedCollectons[i];
+            if (i === sortedCollectons.length - 1) {
+                zoomingLevel = sortedCollectons[i];
+                break;
+            }
+            else {
+                secondValue = sortedCollectons[i + 1];
+            }
+            if (perDayWidth >= firstValue.perDayWidth) {
+                zoomingLevel = sortedCollectons[i];
+                break;
+            }
+            if (perDayWidth < firstValue.perDayWidth && perDayWidth > secondValue.perDayWidth) {
+                zoomingLevel = sortedCollectons[i + 1];
+                break;
+            }
+        }
+        var newTimeline = extend({}, {}, zoomingLevel, true);
+        this.parent.timelineModule['roundOffDateToZoom'](this.parent.cloneProjectStartDate, true, perDayWidth, newTimeline.bottomTier.unit, zoomingLevel);
+        this.parent.timelineModule['roundOffDateToZoom'](this.parent.cloneProjectEndDate, false, perDayWidth, newTimeline.bottomTier.unit, zoomingLevel);
+        var numberOfCells = this.parent.timelineModule['calculateNumberOfTimelineCells'](newTimeline);
+        var scrollHeight = this.parent.pdfExportModule['pdfPageDimensions'].height; //17 is horizontal scrollbar width
+        var contentHeight = this.parent.pdfExportModule['pdfPageDimensions'].height;
+        var emptySpace = contentHeight <= scrollHeight ? 0 : 17;
+        newTimeline.timelineUnitSize = Math.abs((chartWidth - emptySpace)) / numberOfCells;
+        this.parent.timelineModule['changeTimelineSettings'](newTimeline);
+        this.parent.timelineModule.isZoomToFit = false;
+        this.parent.timelineModule.isZooming = false;
+    };
     /**
      * @param {IGanttData[]} data .
      * @param {PdfGantt} gantt .
@@ -36,11 +129,16 @@ var ExportHelper = /** @class */ (function () {
         this.gantt.style.cellPadding.right = 0;
         this.ganttStyle = this.gantt.ganttStyle;
         this.gantt.borderColor = this.ganttStyle.chartGridLineColor;
+        this.parent.pdfExportModule.isPdfExport = true;
+        if (this.exportProps.fitToWidthSettings && this.exportProps.fitToWidthSettings.isFitToWidth) {
+            this.processToFit();
+        }
         this.processHeaderContent();
         this.processGanttContent();
         this.processTimeline();
         this.processTaskbar();
         this.processPredecessor();
+        this.parent.pdfExportModule.isPdfExport = false;
     };
     ExportHelper.prototype.processHeaderContent = function () {
         var _this = this;
@@ -96,7 +194,9 @@ var ExportHelper = /** @class */ (function () {
             this.renderEmptyGantt();
         }
         else {
-            this.flatData.forEach(function (data) {
+            var flatData = void 0;
+            flatData = this.flatData;
+            flatData.forEach(function (data) {
                 _this.row = _this.gantt.rows.addRow();
                 if (data.hasChildRecords) {
                     _this.gantt.rows.getRow(_this.rowIndex).isParentRow = true;
@@ -105,6 +205,9 @@ var ExportHelper = /** @class */ (function () {
                 else {
                     _this.processRecordRow(data);
                 }
+                if (_this.exportProps.fitToWidthSettings && _this.exportProps.fitToWidthSettings.isFitToWidth) {
+                    _this.row.height = 33.33;
+                }
                 _this.rowIndex++;
             });
         }
@@ -156,7 +259,7 @@ var ExportHelper = /** @class */ (function () {
                 else {
                     predecessor.connectorLineColor = _this.ganttStyle.connectorLineColor;
                 }
-                predecessor.connectorLineColor = _this.ganttStyle.connectorLineColor;
+                _this.ganttStyle.connectorLineColor = predecessor.connectorLineColor;
                 _this.gantt.predecessorCollection.push(predecessor);
             });
             this.parent.pdfExportModule.isPdfExport = false;
@@ -221,7 +324,9 @@ var ExportHelper = /** @class */ (function () {
      */
     ExportHelper.prototype.processTaskbar = function () {
         var _this = this;
-        this.flatData.forEach(function (data) {
+        var flatData;
+        flatData = this.flatData;
+        flatData.forEach(function (data) {
             var taskbar = _this.gantt.taskbar.add();
             var ganttProp = data.ganttProperties;
             taskbar.left = ganttProp.left;
@@ -252,7 +357,22 @@ var ExportHelper = /** @class */ (function () {
             taskbar.startDate = ganttProp.startDate;
             taskbar.endDate = ganttProp.endDate;
             taskbar.height = _this.parent.chartRowsModule.taskBarHeight;
+            if (_this.parent.renderBaseline) {
+                var height = void 0;
+                if ((taskbar.height + _this.baselineHeight) <= _this.parent.rowHeight) {
+                    height = taskbar.height;
+                }
+                else {
+                    height = taskbar.height - (_this.baselineHeight + 1);
+                }
+                taskbar.height = height;
+            }
+            taskbar.baselineTop = _this.parent.chartRowsModule.baselineTop;
             taskbar.isMilestone = ganttProp.isMilestone;
+            taskbar.baselineStartDate = ganttProp.baselineStartDate;
+            taskbar.baselineEndDate = ganttProp.baselineEndDate;
+            taskbar.baselineLeft = ganttProp.baselineLeft;
+            taskbar.baselineWidth = ganttProp.baselineWidth;
             taskbar.milestoneColor = new PdfColor(_this.ganttStyle.taskbar.milestoneColor);
             taskbar.isParentTask = data.hasChildRecords;
             if (ganttProp.isMilestone) {
@@ -283,6 +403,7 @@ var ExportHelper = /** @class */ (function () {
                     taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskColor);
                     taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.criticalProgressColor);
                     taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskBorderColor);
+                    taskbar.milestoneColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskColor);
                 }
                 else {
                     taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.taskColor);
@@ -290,6 +411,8 @@ var ExportHelper = /** @class */ (function () {
                     taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.taskBorderColor);
                 }
             }
+            taskbar.baselineColor = new PdfColor(_this.ganttStyle.taskbar.baselineColor);
+            taskbar.baselineBorderColor = new PdfColor(_this.ganttStyle.taskbar.baselineBorderColor);
             taskbar.gridLineColor = new PdfColor(_this.ganttStyle.chartGridLineColor);
             _this.gantt.taskbarCollection.push(taskbar);
             var taskStyle = {};
@@ -298,6 +421,8 @@ var ExportHelper = /** @class */ (function () {
             taskStyle.taskBorderColor = taskbar.taskBorderColor;
             taskStyle.progressColor = taskbar.progressColor;
             taskStyle.milestoneColor = taskbar.milestoneColor;
+            taskStyle.baselineColor = taskbar.baselineColor;
+            taskStyle.baselineBorderColor = taskbar.baselineBorderColor;
             var args = {
                 taskbar: taskStyle,
                 data: data
@@ -309,6 +434,8 @@ var ExportHelper = /** @class */ (function () {
                 taskbar.taskBorderColor = args.taskbar.taskBorderColor;
                 taskbar.progressColor = args.taskbar.progressColor;
                 taskbar.milestoneColor = args.taskbar.milestoneColor;
+                taskbar.baselineColor = args.taskbar.baselineColor;
+                taskbar.baselineBorderColor = args.taskbar.baselineBorderColor;
             }
         });
     };
@@ -456,6 +583,26 @@ var ExportHelper = /** @class */ (function () {
         var widths = [];
         var treeColumnIndex = 0;
         var tWidth = (this.pdfDoc.pageSettings.width - 82);
+        if (this.exportProps && this.exportProps.fitToWidthSettings && this.exportProps.fitToWidthSettings.isFitToWidth) {
+            var gridWidth = void 0;
+            if (this.exportProps.fitToWidthSettings.gridWidth) {
+                gridWidth = parseInt(this.exportProps.fitToWidthSettings.gridWidth.split('%')[0]);
+            }
+            else {
+                if (this.exportProps.fitToWidthSettings.chartWidth) {
+                    var chartWidth = parseInt(this.exportProps.fitToWidthSettings.chartWidth.split('%')[0]);
+                    gridWidth = 100 - chartWidth;
+                }
+                else {
+                    gridWidth = 30;
+                }
+            }
+            var pdfwidth = (this.parent.pdfExportModule['pdfPageDimensions'].width * gridWidth) / 100;
+            var perColumnWidth = pdfwidth / this.gantt.columns.columns.length;
+            for (var i = 0; i < this.gantt.columns.columns.length; i++) {
+                this.gantt.columns.getColumn(i).width = perColumnWidth;
+            }
+        }
         if (this.totalColumnWidth > (this.pdfDoc.pageSettings.width - 82)) {
             this.gantt.style.allowHorizontalOverflow = true;
         }

package/src/gantt/export/pdf-base/pdf-grid-table.js

@@ -196,11 +196,11 @@ var PdfTreeGridCell = /** @class */ (function () {
             if (this.finishedDrawingCell) {
                 temp = (this.remainingString === '') ? this.remainingString : this.value;
                 /* eslint-disable-next-line */
-                graphics.drawString(temp, font, textPen, textBrush, (innerLayoutArea.x + leftAdjustment), innerLayoutArea.y, (innerLayoutArea.width - leftAdjustment - padding), (innerLayoutArea.height - padding), this.style.format);
+                graphics.drawString(temp, font, textPen, textBrush, (innerLayoutArea.x + leftAdjustment), this.isHeaderCell ? innerLayoutArea.y - 16 : innerLayoutArea.y, (innerLayoutArea.width - leftAdjustment - padding), (innerLayoutArea.height - padding), this.style.format);
             }
             else {
                 /* eslint-disable-next-line */
-                graphics.drawString(this.remainingString, font, textPen, textBrush, (innerLayoutArea.x + leftAdjustment), innerLayoutArea.y, this.style.format);
+                graphics.drawString(this.remainingString, font, textPen, textBrush, (innerLayoutArea.x + leftAdjustment), this.isHeaderCell ? innerLayoutArea.y - 16 : innerLayoutArea.y, this.style.format);
             }
             result = graphics.stringLayoutResult;
         }

package/src/gantt/export/pdf-base/pdf-style/gantt-theme.js

@@ -55,6 +55,8 @@ var PdfGanttTheme = /** @class */ (function () {
                 ganttStyle.taskbar.progressColor = new PdfColor(33, 82, 125);
                 ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
                 ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.baselineColor = new PdfColor(240, 173, 78);
+                ganttStyle.taskbar.baselineBorderColor = new PdfColor(240, 173, 78);
                 ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(119, 119, 119);
@@ -75,6 +77,8 @@ var PdfGanttTheme = /** @class */ (function () {
                 ganttStyle.taskbar.progressColor = new PdfColor(0, 86, 179);
                 ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
                 ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.baselineColor = new PdfColor(255, 193, 7);
+                ganttStyle.taskbar.baselineBorderColor = new PdfColor(255, 193, 7);
                 ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(108, 117, 125);
@@ -97,6 +101,8 @@ var PdfGanttTheme = /** @class */ (function () {
                 ganttStyle.taskbar.progressColor = new PdfColor(0, 91, 163);
                 ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
                 ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.baselineColor = new PdfColor(216, 59, 1);
+                ganttStyle.taskbar.baselineBorderColor = new PdfColor(216, 59, 1);
                 ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(118, 118, 118);
@@ -117,6 +123,8 @@ var PdfGanttTheme = /** @class */ (function () {
                 ganttStyle.taskbar.progressColor = new PdfColor(63, 81, 181);
                 ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
                 ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.baselineColor = new PdfColor(193, 87, 0);
+                ganttStyle.taskbar.baselineBorderColor = new PdfColor(193, 87, 0);
                 ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(132, 132, 132);

package/src/gantt/export/pdf-base/treegrid-layouter.js

@@ -16,6 +16,7 @@ import { PdfBorders, TemporaryDictionary } from './index';
 import { PdfHorizontalOverflowType } from '../../base/interface';
 import { ElementLayouter, PdfLayoutResult, PdfLayoutFormat, SizeF, PointF, RectangleF, RowLayoutResult, PdfLayoutType, PdfLayoutBreakType } from '@syncfusion/ej2-pdf-export';
 import { PdfStringFormat } from '@syncfusion/ej2-pdf-export';
+import { pointToPixel } from '../../base/utils';
 /**
  *
  */
@@ -83,7 +84,7 @@ var PdfTreeGridLayouter = /** @class */ (function (_super) {
         var startColumn = 0;
         var endColumn = 0;
         var cellWidths = 0;
-        var availableWidth = this.currentGraphics.clientSize.width - this.currentBounds.x;
+        var availableWidth = pointToPixel(this.currentGraphics.clientSize.width) - this.currentBounds.x;
         for (var i = 0; i < this.treegrid.columns.count; i++) {
             cellWidths += this.treegrid.columns.getColumn(i).width;
             if (cellWidths >= availableWidth) {
@@ -311,6 +312,7 @@ var PdfTreeGridLayouter = /** @class */ (function (_super) {
                 var size = new SizeF(column.width, height);
                 if (cell.columnSpan > 1) {
                     size = new SizeF(cell.width, height);
+                    i += cell.columnSpan;
                 }
                 if (!this.checkIfDefaultFormat(column.format) && this.checkIfDefaultFormat(cell.style.format)) {
                     cell.style.format = column.format;

package/src/gantt/export/pdf-connector-line.js

@@ -163,7 +163,9 @@ var PdfGanttPredecessor = /** @class */ (function () {
                 }
                 break;
         }
-        var midPoint = Math.round((this.parent.rowHeight - 1) / 2.0);
+        var midPointforTaskbar = Math.round((this.parent.rowHeight - 1) / 2.0);
+        var midPointforBaseline = Math.round((this.parent.rowHeight - 10) / 2.0);
+        var midPoint = this.parent.renderBaseline ? midPointforBaseline : midPointforTaskbar;
         midPoint = pixelToPoint(midPoint);
         /* eslint-disable-next-line */
         var point1, point2, point3, point4, point5, point6;

package/src/gantt/export/pdf-gantt.js

@@ -221,6 +221,7 @@ var PdfGantt = /** @class */ (function (_super) {
         var pageData;
         this.headerDetails.forEach(function (detail, index) {
             var page = _this.result.page.section.getPages()[_this.startPageIndex];
+            page['contentWidth'] = pointToPixel(_this.headerDetails[index].endPoint - _this.headerDetails[index].startPoint);
             _this.chartHeader.drawTimeline(page, _this.startPoint, detail);
             taskbarPoint.y = taskbarPoint.y + pixelToPoint(_this.parent.timelineModule.isSingleTier ? 45 : 60); // headerHeight
             pageStartX = taskbarPoint.x;
@@ -231,6 +232,11 @@ var PdfGantt = /** @class */ (function (_super) {
                 var task = _this.taskbarCollection[i];
                 var rowHeight = _this.rows.getRow(i + 1).height;
                 var pdfPage = _this.result.page.section.getPages()[_this.startPageIndex];
+                var graphics = pdfPage.graphics;
+                var pen = new PdfPen(new PdfColor(206, 206, 206));
+                if (page['contentWidth'] && (_this.parent.gridLines == "Both" || _this.parent.gridLines == "Horizontal")) {
+                    graphics.drawRectangle(pen, pageStartX, taskbarPoint.y, page['contentWidth'] + 0.5, rowHeight);
+                }
                 /* eslint-disable-next-line */
                 var isNextPage = task.drawTaskbar(pdfPage, taskbarPoint, detail, cumulativeWidth, rowHeight, _this.taskbarCollection[i]);
                 if (isNextPage) {

package/src/gantt/export/pdf-taskbar.d.ts

@@ -14,6 +14,16 @@ export declare class PdfGanttTaskbarCollection {
     isAutoSchedule?: boolean;
     /** Defines the task is milestone or not. */
     isMilestone?: boolean;
+    /** Defines the task baselinestartdate. */
+    baselineStartDate?: Date;
+    /** Defines the task baselineenddate. */
+    baselineEndDate?: Date;
+    /** Defines the task baselineleft. */
+    baselineLeft?: number;
+    /** Defines the task baselinewidth. */
+    baselineWidth?: number;
+    /** Defines the task baselineHeight . */
+    baselineHeight: number;
     /** Defines the left of task.
      *
      * @hidden
@@ -58,6 +68,9 @@ export declare class PdfGanttTaskbarCollection {
     gridLineColor: PdfColor;
     progressFontColor: PdfColor;
     taskColor: PdfColor;
+    baselineColor: PdfColor;
+    baselineBorderColor: PdfColor;
+    baselineTop: number;
     labelColor: PdfColor;
     taskBorderColor: PdfColor;
     progressColor: PdfColor;

package/src/gantt/export/pdf-taskbar.js

@@ -9,14 +9,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { PointF, PdfStringLayouter, PdfPen, PdfSolidBrush, RectangleF, SizeF, PdfStandardFont, PdfFontStyle, PdfStringFormat, PdfVerticalAlignment, PdfTextAlignment, PdfWordWrapType } from '@syncfusion/ej2-pdf-export';
-import { pixelToPoint } from '../base/utils';
+import { PointF, PdfColor, PdfStringLayouter, PdfPen, PdfSolidBrush, RectangleF, SizeF, PdfStandardFont, PdfFontStyle, PdfStringFormat, PdfVerticalAlignment, PdfTextAlignment, PdfWordWrapType } from '@syncfusion/ej2-pdf-export';
+import { pixelToPoint, pointToPixel } from '../base/utils';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * @hidden
  */
 var PdfGanttTaskbarCollection = /** @class */ (function () {
     function PdfGanttTaskbarCollection(parent) {
+        /** Defines the task baselineHeight . */
+        this.baselineHeight = 8;
         /**
          * @private
          */
@@ -63,6 +65,7 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
         //code for while current pdf page is exceed
         if (yPoint > pageSize.height) {
             page = this.GetNextPage(page);
+            page['contentWidth'] = pointToPixel(detail.endPoint - detail.startPoint);
             taskGraphics = page.graphics;
             startPoint.y = 0;
             if (this.parent.pdfExportModule.gantt.enableHeader) {
@@ -70,6 +73,11 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
                 startPoint.y = pixelToPoint(this.parent.timelineModule.isSingleTier ? 45 : 60);
             }
             isNextPage = true;
+            var graphics = page.graphics;
+            var pen = new PdfPen(new PdfColor(206, 206, 206));
+            if (page['contentWidth'] && (this.parent.gridLines == "Both" || this.parent.gridLines == "Horizontal")) {
+                graphics.drawRectangle(pen, startPoint.x, startPoint.y, page['contentWidth'] + 0.5, rowHeight);
+            }
         }
         this.drawLeftLabel(page, startPoint, detail, cumulativeWidth);
         //Draw Taskbar
@@ -93,9 +101,13 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
         if (!taskbar.isMilestone) {
             var taskbarPen = new PdfPen(taskbar.taskBorderColor);
             var taskBrush = new PdfSolidBrush(taskbar.taskColor);
+            var baselinePen = new PdfPen(taskbar.baselineBorderColor);
+            var baselineBrush = new PdfSolidBrush(taskbar.baselineColor);
             var progressPen = new PdfPen(taskbar.progressColor);
             var progressBrush = new PdfSolidBrush(taskbar.progressColor);
-            var adjustHeight = pixelToPoint((this.parent.rowHeight - this.height) / 2.0);
+            var adjustHeightforTaskbar = pixelToPoint((this.parent.rowHeight - this.height) / 2.0);
+            var adjustHeightforBaseline = pixelToPoint((this.parent.rowHeight - this.height) / 4.5);
+            var adjustHeight = this.parent.renderBaseline ? adjustHeightforBaseline : adjustHeightforTaskbar;
             pageIndex = page.section.indexOf(page);
             var startDate = isNullOrUndefined(this.unscheduleStarteDate) ? this.startDate : this.unscheduleStarteDate;
             var endDate = isNullOrUndefined(this.unscheduleEndDate) ? this.endDate : this.unscheduleEndDate;
@@ -109,6 +121,9 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
                     this.drawUnscheduledTask(taskGraphics, startPoint, cumulativeWidth, adjustHeight);
                 }
                 else {
+                    if (this.parent.renderBaseline && taskbar.baselineStartDate && taskbar.baselineEndDate) {
+                        taskGraphics.drawRectangle(baselinePen, baselineBrush, startPoint.x + pixelToPoint(taskbar.baselineLeft - cumulativeWidth) + 0.5, startPoint.y + adjustHeight + pixelToPoint(taskbar.height + 3), pixelToPoint(this.baselineWidth), pixelToPoint(this.baselineHeight));
+                    }
                     taskGraphics.drawRectangle(taskbarPen, taskBrush, startPoint.x + pixelToPoint(this.left - cumulativeWidth) + 0.5, startPoint.y + adjustHeight, pixelToPoint(taskbar.width), pixelToPoint(taskbar.height));
                     if (this.isScheduledTask) {
                         taskGraphics.drawRectangle(progressPen, progressBrush, startPoint.x + pixelToPoint(this.left - cumulativeWidth) + 0.5, startPoint.y + adjustHeight, pixelToPoint(taskbar.progressWidth), pixelToPoint(taskbar.height));
@@ -140,6 +155,9 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
                     this.drawUnscheduledTask(taskGraphics, startPoint, cumulativeWidth, adjustHeight);
                 }
                 else {
+                    if (this.parent.renderBaseline && taskbar.baselineStartDate && taskbar.baselineEndDate) {
+                        taskGraphics.drawRectangle(baselinePen, baselineBrush, startPoint.x + pixelToPoint(taskbar.baselineLeft - cumulativeWidth) + 0.5, startPoint.y + adjustHeight + pixelToPoint(taskbar.height + 3), pixelToPoint(this.baselineWidth), pixelToPoint(this.baselineHeight));
+                    }
                     taskGraphics.drawRectangle(taskbarPen, taskBrush, startPoint.x + pixelToPoint(this.left - cumulativeWidth) + 0.5, startPoint.y + adjustHeight, pixelToPoint(renderWidth), pixelToPoint(taskbar.height));
                     taskbar.width = taskbar.width - renderWidth;
                     if (this.isScheduledTask) {
@@ -171,6 +189,9 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
                     this.taskStartPoint = __assign({}, startPoint);
                     this.isStartPoint = true;
                 }
+                if (this.parent.renderBaseline && taskbar.baselineStartDate && taskbar.baselineEndDate) {
+                    taskGraphics.drawRectangle(baselinePen, baselineBrush, startPoint.x + pixelToPoint(taskbar.baselineLeft - cumulativeWidth) + 0.5, startPoint.y + adjustHeight + pixelToPoint(taskbar.height + 3), pixelToPoint(this.baselineWidth), pixelToPoint(this.baselineHeight));
+                }
                 taskGraphics.drawRectangle(taskbarPen, taskBrush, startPoint.x + pixelToPoint(taskbar.left + 0.5), startPoint.y + adjustHeight, pixelToPoint(taskbar.width), pixelToPoint(taskbar.height));
                 if (this.isScheduledTask) {
                     taskGraphics.drawRectangle(progressPen, progressBrush, startPoint.x + pixelToPoint(taskbar.left + 0.5), startPoint.y + adjustHeight, pixelToPoint(taskbar.progressWidth), pixelToPoint(taskbar.height));
@@ -192,6 +213,9 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
                     this.taskStartPoint = __assign({}, startPoint);
                     this.isStartPoint = true;
                 }
+                if (this.parent.renderBaseline && taskbar.baselineStartDate && taskbar.baselineEndDate) {
+                    taskGraphics.drawRectangle(baselinePen, baselineBrush, startPoint.x + pixelToPoint(taskbar.baselineLeft - cumulativeWidth) + 0.5, startPoint.y + adjustHeight + pixelToPoint(taskbar.height + 3), pixelToPoint(this.baselineWidth), pixelToPoint(this.baselineHeight));
+                }
                 taskGraphics.drawRectangle(taskbarPen, taskBrush, startPoint.x + pixelToPoint(taskbar.left) + 0.5, startPoint.y + adjustHeight, pixelToPoint(detail.totalWidth), pixelToPoint(taskbar.height));
                 if (this.isScheduledTask) {
                     var progressBoundsWidth = 0;
@@ -217,6 +241,9 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
         }
         else {
             this.drawMilestone(page, startPoint, detail, cumulativeWidth);
+            if (this.parent.renderBaseline && taskbar.baselineStartDate && taskbar.baselineEndDate) {
+                this.drawMilestone(page, startPoint, detail, cumulativeWidth);
+            }
         }
         this.drawRightLabel(page, startPoint, detail, cumulativeWidth);
         return isNextPage;
@@ -375,13 +402,20 @@ var PdfGanttTaskbarCollection = /** @class */ (function () {
             var pageIndex = page.section.indexOf(page);
             this.taskStartPoint = __assign({}, startPoint);
             var milestonePen = new PdfPen(this.milestoneColor);
-            var adjustHeight = pixelToPoint(((this.parent.rowHeight - this.height) / 2.0));
+            var adjustHeightforBaselineMilesone = pixelToPoint(((this.parent.rowHeight - this.height) / 3.0));
+            var adjustHeightforMilesone = pixelToPoint(((this.parent.rowHeight - this.height) / 2.0));
+            var adjustHeight = this.parent.renderBaseline ? adjustHeightforBaselineMilesone : adjustHeightforMilesone;
             var milestoneBrush = new PdfSolidBrush(this.milestoneColor);
+            var baselinePen = new PdfPen(this.baselineBorderColor);
+            var baselineBrush = new PdfSolidBrush(this.baselineColor);
             taskGraphics.save(); //saving graphics state
-            var height = Math.floor(this.parent.chartRowsModule.taskBarHeight * 0.6);
+            var height = Math.floor(this.parent.chartRowsModule.taskBarHeight * 0.8);
             /* eslint-disable-next-line */
             taskGraphics.translateTransform(startPoint.x + pixelToPoint(this.left - cumulativeWidth), startPoint.y + adjustHeight - (this.parent.chartRowsModule.taskBarHeight * 0.7) / 2);
             taskGraphics.rotateTransform(45); //apply rotation
+            if (this.parent.renderBaseline && this.baselineStartDate && this.baselineEndDate) {
+                taskGraphics.drawRectangle(baselinePen, baselineBrush, 2, 2, pixelToPoint(height), pixelToPoint(height));
+            }
             taskGraphics.drawRectangle(milestonePen, milestoneBrush, 0, 0, pixelToPoint(height), pixelToPoint(height));
             taskGraphics.restore(); //restoring graphics state
             this.endPage = this.startPage = pageIndex;

package/src/gantt/export/pdf-timeline.js

@@ -1,6 +1,6 @@
 import { PointF, PdfColor, PdfPen, PdfSolidBrush, PdfStandardFont, PdfStringFormat, PdfVerticalAlignment, PdfTextAlignment, PdfWordWrapType } from '@syncfusion/ej2-pdf-export';
 import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
-import { pixelToPoint } from '../base/utils';
+import { pixelToPoint, pointToPixel } from '../base/utils';
 /**
  */
 var PdfTimeline = /** @class */ (function () {
@@ -23,7 +23,7 @@ var PdfTimeline = /** @class */ (function () {
      * @returns {void}
      */
     PdfTimeline.prototype.drawTimeline = function (page, startPoint, detail) {
-        var remainWidth = Math.floor(detail.totalWidth);
+        var remainWidth = pointToPixel(Math.floor(detail.totalWidth));
         var renderWidth = 0;
         this.topTierPoint.x = startPoint.x;
         this.topTierPoint.y = startPoint.y;
@@ -51,7 +51,7 @@ var PdfTimeline = /** @class */ (function () {
                 //Primary header Event Arguments
                 /* eslint-disable-next-line */
                 this.triggerQueryTimelinecell(page, this.topTierPoint.x, this.topTierPoint.y, this.topTierHeight, renderWidth, pHeader.value, true);
-                this.topTierPoint.x += pixelToPoint(renderWidth);
+                this.topTierPoint.x += renderWidth;
                 remainWidth -= renderWidth;
                 if (isCompleted) {
                     this.topTierIndex++;
@@ -77,7 +77,7 @@ var PdfTimeline = /** @class */ (function () {
                 //Secondary header Event Arguments
                 /* eslint-disable-next-line */
                 this.triggerQueryTimelinecell(page, this.bottomTierPoint.x, this.bottomTierPoint.y, this.bottomTierHeight, width, secondHeader.value, false);
-                this.bottomTierPoint.x = this.bottomTierPoint.x + pixelToPoint(width);
+                this.bottomTierPoint.x = this.bottomTierPoint.x + width;
                 remainWidth -= width;
                 secondHeader.completedWidth = width;
                 if (isCompleted) {
@@ -108,7 +108,7 @@ var PdfTimeline = /** @class */ (function () {
                     //Primary header Event Arguments
                     /* eslint-disable-next-line */
                     this.triggerQueryTimelinecell(page, this.topTierPoint.x, this.topTierPoint.y, this.topTierHeight, pHeader.completedWidth, pHeader.value, true);
-                    this.topTierPoint.x += pixelToPoint(pHeader.completedWidth);
+                    this.topTierPoint.x += pHeader.completedWidth;
                 }
             }
         }
@@ -121,7 +121,7 @@ var PdfTimeline = /** @class */ (function () {
                     //Secondary header Event Arguments
                     /* eslint-disable-next-line */
                     this.triggerQueryTimelinecell(page, this.bottomTierPoint.x, this.bottomTierPoint.y, this.bottomTierHeight, secondHeader.width, secondHeader.value, false);
-                    this.bottomTierPoint.x = this.bottomTierPoint.x + pixelToPoint(secondHeader.width);
+                    this.bottomTierPoint.x = this.bottomTierPoint.x + secondHeader.width;
                 }
             }
         }
@@ -168,7 +168,10 @@ var PdfTimeline = /** @class */ (function () {
         var e = eventArgs.timelineCell;
         var rectPen = new PdfPen(eventArgs.timelineCell.borderColor);
         var rectBrush = new PdfSolidBrush(eventArgs.timelineCell.backgroundColor);
-        graphics.drawRectangle(rectPen, rectBrush, x, y, pixelToPoint(width), pixelToPoint(height));
+        graphics.drawRectangle(rectPen, rectBrush, x, y, width, pixelToPoint(height));
+        if (!isTopTier && (this.parent.gridLines == "Both" || this.parent.gridLines == "Vertical")) {
+            graphics.drawRectangle(rectPen, rectBrush, x, y + pixelToPoint(height), width, page.getClientSize().height);
+        }
         var font = new PdfStandardFont(ganttStyle.fontFamily, e.fontSize, e.fontStyle);
         if (ganttStyle.font) {
             font = ganttStyle.font;
@@ -177,7 +180,13 @@ var PdfTimeline = /** @class */ (function () {
         var pLeft = ganttStyle.timeline.padding ? eventArgs.timelineCell.padding.left : 0;
         var pTop = ganttStyle.timeline.padding ? eventArgs.timelineCell.padding.top : 0;
         /* eslint-disable-next-line */
-        graphics.drawString(eventArgs.value, font, null, textBrush, x + pLeft, y + pTop, pixelToPoint(width), pixelToPoint(height), e.format);
+        if (isTopTier) {
+            x = x + pLeft + 4;
+        }
+        else {
+            x = x + pLeft;
+        }
+        graphics.drawString(eventArgs.value, font, null, textBrush, x, y + pTop, pixelToPoint(width), pixelToPoint(height), e.format);
     };
     return PdfTimeline;
 }());

package/src/gantt/export/pdf-treegrid.js

@@ -267,12 +267,15 @@ var PdfTreeGrid = /** @class */ (function (_super) {
                         colSpan = cell.columnSpan;
                         currentCellIndex = j;
                         cell.isCellMergeStart = true;
+                        var totalColumnWidth = this.columns.columns[currentCellIndex].width;
                         //Set Column merges.
                         while (colSpan > 1) {
                             currentCellIndex++;
                             row.cells.getCell(currentCellIndex).isCellMergeContinue = true;
                             colSpan--;
+                            totalColumnWidth += this.columns.columns[currentCellIndex].width;
                         }
+                        cell.width = totalColumnWidth;
                     }
                     else if (cell.columnSpan === 1 && cell.rowSpan > 1) {
                         rowSpan = cell.rowSpan;
@@ -337,15 +340,12 @@ var PdfTreeGrid = /** @class */ (function (_super) {
                         colSpan = cell.columnSpan;
                         currentCellIndex = j;
                         cell.isCellMergeStart = true;
-                        var totalColumnWidth = this.columns.columns[currentCellIndex].width;
                         //set Column merges.
                         while (colSpan > 1) {
                             currentCellIndex++;
                             row.cells.getCell(currentCellIndex).isCellMergeContinue = true;
                             colSpan--;
-                            totalColumnWidth += this.columns.columns[currentCellIndex].width;
                         }
-                        cell.width = totalColumnWidth;
                     }
                     else if (cell.columnSpan === 1 && cell.rowSpan > 1) {
                         rowSpan = cell.rowSpan;

package/src/gantt/models/task-fields-model.d.ts

@@ -26,6 +26,13 @@ export interface TaskFieldsModel {
      */
     parentID?: string;
 
+    /**
+     * Gets or sets a field name of data object in data source that specifies whether the current record has child records.
+     *
+     * @default null
+     */
+    hasChildMapping?: string;
+
     /**
      * To map start date of task from data source.
      *

package/src/gantt/models/task-fields.d.ts

@@ -21,6 +21,12 @@ export declare class TaskFields extends ChildProperty<TaskFields> {
      * @default null
      */
     parentID: string;
+    /**
+     * Gets or sets a field name of data object in data source that specifies whether the current record has child records.
+     *
+     * @default null
+     */
+    hasChildMapping: string;
     /**
      * To map start date of task from data source.
      *