@syncfusion/ej2-gantt 22.2.12 → 23.1.38

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

package/src/gantt/models/task-fields.js

@@ -35,6 +35,9 @@ var TaskFields = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], TaskFields.prototype, "parentID", void 0);
+    __decorate([
+        Property(null)
+    ], TaskFields.prototype, "hasChildMapping", void 0);
     __decorate([
         Property(null)
     ], TaskFields.prototype, "startDate", void 0);

package/src/gantt/renderer/chart-rows.d.ts

@@ -11,7 +11,7 @@ export declare class ChartRows extends DateProcessor {
     taskBarHeight: number;
     milestoneHeight: number;
     private milesStoneRadius;
-    private baselineTop;
+    baselineTop: number;
     baselineHeight: number;
     private baselineColor;
     private parentTaskbarTemplateFunction;

package/src/gantt/renderer/chart-rows.js

@@ -305,16 +305,16 @@ var ChartRows = /** @class */ (function (_super) {
         return splitTasks;
     };
     ChartRows.prototype.getSplitTaskbarLeftResizerNode = function () {
-        var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
+        var lResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 5 : -2;
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.icon + '"' +
-            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;z-index:1"></div>';
         return template;
     };
     ChartRows.prototype.getSplitTaskbarRightResizerNode = function (segment) {
-        var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
+        var rResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? -17 : -10;
         var template = '<div class="' + cls.taskBarRightResizer + ' ' + cls.icon + '"' +
             ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (segment.width + rResizerLeft) + 'px;' +
-            'height:' + (this.taskBarHeight) + 'px;"></div>';
+            'height:' + (this.taskBarHeight) + 'px;z-index:1"></div>';
         return template;
     };
     ChartRows.prototype.getSplitProgressResizerNode = function (segment) {
@@ -639,7 +639,7 @@ var ChartRows = /** @class */ (function (_super) {
         }
         else {
             var template = '<div class="' + cls.traceMilestone + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight : this.taskBarHeight - 6)) + 'px;height:' +
-                ((this.parent.renderBaseline ? this.taskBarHeight : this.taskBarHeight - 6)) + 'px;position:absolute;transform: rotate(45deg);top:' + (this.parent.rowHeight > 40 ? 0 : 1) + 'px;left:' + 1 + 'px;"> </div>';
+                ((this.parent.renderBaseline ? this.taskBarHeight : this.taskBarHeight - 6)) + 'px;position:absolute;transform: rotate(45deg);left:' + 1 + 'px;"> </div>';
             milestoneNode = this.createDivElement(template);
         }
         return milestoneNode;
@@ -669,7 +669,7 @@ var ChartRows = /** @class */ (function (_super) {
         var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         var template = '<div class="' + cls.baselineMilestoneContainer + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight : this.taskBarHeight - 10)) + 'px;height:' +
             ((this.parent.renderBaseline ? this.taskBarHeight : this.taskBarHeight - 10)) + 'px;position:absolute;transform:rotate(45deg);' + (this.parent.enableRtl ? 'right:' : 'left:') + (this.parent.enableRtl ? (data.ganttProperties.left -
-            (this.milestoneHeight / 2) + 3) : (data.ganttProperties.left - (this.milestoneHeight / 2) + 1)) + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + 'margin-top:' + ((-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) + 2) + 'px"> </div>';
+            (this.milestoneHeight / 2) + 3) : (data.ganttProperties.baselineLeft - (this.milestoneHeight / 2) + 1)) + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + 'margin-top:' + ((-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) + 2) + 'px"> </div>';
         return this.createDivElement(template);
     };
     /**
@@ -1017,16 +1017,16 @@ var ChartRows = /** @class */ (function (_super) {
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarLeftResizer = function () {
-        var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
+        var lResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 5 : -2;
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.icon + '"' +
-            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;z-index:1"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarRightResizer = function () {
-        var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
+        var rResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? -17 : -10;
         var template = '<div class="' + cls.taskBarRightResizer + ' ' + cls.icon + '"' +
             'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
-            'height:' + (this.taskBarHeight) + 'px;"></div>';
+            'height:' + (this.taskBarHeight) + 'px;z-index:1"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarProgressResizer = function () {
@@ -1040,8 +1040,10 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.getLeftPointNode = function () {
         var data = this.templateData;
-        var pointerLeft = -((this.parent.isAdaptive ? 14 : 2) + this.connectorPointWidth);
-        var mileStoneLeft = -(this.connectorPointWidth + 2);
+        var left = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 12 : 0;
+        var mileStoneLeftValue = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 6 : 3;
+        var pointerLeft = -(3 + this.connectorPointWidth + left);
+        var mileStoneLeft = -(this.connectorPointWidth + 4 + mileStoneLeftValue);
         var pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         var marginTop;
         if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
@@ -1060,7 +1062,8 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.getRightPointNode = function () {
         var data = this.templateData;
-        var pointerRight = this.parent.isAdaptive ? 10 : -2;
+        var right = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? -12 : 0;
+        var pointerRight = -(3 + right);
         var pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         var marginTop;
         if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
@@ -1070,7 +1073,7 @@ var ChartRows = /** @class */ (function (_super) {
             marginTop = 'margin-top:' + this.connectorPointMargin + 'px';
         }
         var template = '<div class="' + cls.rightConnectorPointOuterDiv + '" style="' +
-            ((data.ganttProperties.isMilestone) ? ('left:' + (this.milestoneHeight - 2) + 'px;margin-top:' +
+            ((data.ganttProperties.isMilestone) ? ('left:' + ((!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? (this.milestoneHeight + 5) : this.milestoneHeight - 2) + 'px;margin-top:' +
                 pointerTop + 'px;') : ('left:' + (data.ganttProperties.width + pointerRight) + 'px;' + marginTop + ';')) + '">' +
             '<div class="' + cls.connectorPointRight + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
             '" style="width:' + this.connectorPointWidth + 'px;height:' + this.connectorPointWidth + 'px;">' +
@@ -1243,7 +1246,7 @@ var ChartRows = /** @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.initChartHelperPrivateVariable = function () {
-        var taskbarHeightValue = this.parent.renderBaseline ? 0.45 : 0.62;
+        var taskbarHeightValue = this.parent.renderBaseline ? 0.45 : ((!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 0.7 : 0.62);
         var taskBarMarginTopValue = this.parent.renderBaseline ? 4 : 2;
         var milestoneHeightValue = this.parent.renderBaseline ? 1.13 : 0.82;
         this.baselineColor = !isNullOrUndefined(this.parent.baselineColor) &&
@@ -1265,8 +1268,8 @@ var ChartRows = /** @class */ (function (_super) {
         this.milestoneMarginTop = Math.floor((this.parent.rowHeight - this.milestoneHeight) / 2);
         this.milesStoneRadius = Math.floor((this.milestoneHeight) / 2);
         this.baselineTop = -(Math.floor((this.parent.rowHeight - (this.taskBarHeight + this.taskBarMarginTop))) - 4);
-        this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 10;
-        this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2)) - 1;
+        this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 8;
+        this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2));
     };
     /**
      * Function used to refresh Gantt rows.
@@ -1552,11 +1555,24 @@ var ChartRows = /** @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.setAriaRowIndex = function (tempTemplateData, tRow) {
+        var _this = this;
         var dataSource = this.parent.treeGrid.getCurrentViewRecords();
         var visualData = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
             getValue('virtualScrollModule.visualData', this.parent.treeGrid) : dataSource;
-        var index = visualData.indexOf(tempTemplateData);
-        tRow.setAttribute('aria-rowindex', index.toString());
+        var index;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            var gridData = this.parent.treeGrid.grid.contentModule['rows'];
+            var data = gridData.filter(function (x) {
+                if (x['data'][_this.parent.taskFields.id] === tempTemplateData.ganttProperties.taskId) {
+                    return x;
+                }
+            })[0];
+            tRow.setAttribute('aria-rowindex', data['index'].toString());
+        }
+        else {
+            index = visualData.indexOf(tempTemplateData);
+            tRow.setAttribute('aria-rowindex', index.toString());
+        }
     };
     /**
      * To trigger query taskbar info event.
@@ -1628,7 +1644,7 @@ var ChartRows = /** @class */ (function (_super) {
                 getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor;
             args.taskbarBorderColor = isNullOrUndefined(childTask) ? null : taskbarElement.classList.contains(cls.traceChildTaskBar) ?
                 getComputedStyle(taskbarElement).backgroundColor :
-                getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderColor;
+                getComputedStyle(taskbarElement.querySelector(classCollections[0])).outlineColor;
             args.progressBarBgColor = isNullOrUndefined(progressTask) ? null :
                 taskbarElement.classList.contains(cls.traceChildProgressBar) ?
                     getComputedStyle(taskbarElement).backgroundColor :
@@ -1677,7 +1693,7 @@ var ChartRows = /** @class */ (function (_super) {
      */
     ChartRows.prototype.updateQueryTaskbarInfoArgs = function (args, rowElement, taskBarElement) {
         var trElement = args.rowElement;
-        var taskbarElement = args.taskbarElement;
+        var taskbarElement = this.parent.enableVirtualization ? args.rowElement : args.taskbarElement;
         var classCollections = this.getClassName(args);
         var segmentRowElement;
         if (args.data.ganttProperties.segments && args.data.ganttProperties.segments.length > 0) {
@@ -1698,18 +1714,6 @@ var ChartRows = /** @class */ (function (_super) {
             }
         }
         else if (taskbarElement) {
-            if (taskbarElement && this.parent.enableVirtualization && !args.data.expanded) {
-                var childElement = trElement.querySelector('.' + cls.collapseParent);
-                if (childElement) {
-                    for (var i = 0; i < childElement.childNodes.length; i++) {
-                        var taskbar = childElement.childNodes[i];
-                        var mainTaskbar = taskbar.querySelector('.' + cls.traceChildTaskBar);
-                        if (mainTaskbar) {
-                            mainTaskbar.style.backgroundColor = args.taskbarBgColor;
-                        }
-                    }
-                }
-            }
             if (taskbarElement.querySelector(classCollections[0]) &&
                 getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor !== args.taskbarBgColor) {
                 taskbarElement.querySelector(classCollections[0]).style.backgroundColor = args.taskbarBgColor;
@@ -1932,7 +1936,9 @@ var ChartRows = /** @class */ (function (_super) {
                 this.triggerQueryTaskbarInfoByIndex(tr, data);
             }
             var dataId = this.parent.viewType === 'ProjectView' ? data.ganttProperties.taskId : data.ganttProperties.rowUniqueID;
-            this.parent.treeGrid.grid.setRowData(dataId, data);
+            if (!this.parent.ganttChartModule.isExpandAll && !this.parent.ganttChartModule.isCollapseAll) {
+                this.parent.treeGrid.grid.setRowData(dataId, data);
+            }
             if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && !data.expanded && this.parent.enableMultiTaskbar && !this.parent.allowTaskbarOverlap) {
                 this.updateDragDropRecords(selectedItem, tr);
             }
@@ -1956,6 +1962,10 @@ var ChartRows = /** @class */ (function (_super) {
         addClass([cloneElement], 'collpse-parent-border');
         var id = tRow.querySelector('.' + cls.taskBarMainContainer).getAttribute('rowUniqueId');
         var ganttData = this.parent.getRecordByID(id);
+        var mainTaskbar = (cloneElement.querySelector('.e-gantt-child-taskbar'));
+        if (this.parent.queryTaskbarInfo) {
+            this.triggerQueryTaskbarInfoByIndex(mainTaskbar, ganttData);
+        }
         var zIndex = "";
         if (ganttData && !isNullOrUndefined(ganttData.ganttProperties.eOverlapIndex)) {
             zIndex = (ganttData.ganttProperties.eOverlapIndex).toString();

package/src/gantt/renderer/connector-line.js

@@ -10,6 +10,7 @@ var ConnectorLine = /** @class */ (function () {
         this.transform = '';
         this.connectorLinePath = '';
         this.arrowPath = '';
+        this.taskLineValue = 0;
         this.expandedRecords = [];
         this.parent = ganttObj;
         this.dependencyViewContainer =
@@ -57,7 +58,7 @@ var ConnectorLine = /** @class */ (function () {
     };
     ConnectorLine.prototype.getTaskbarMidpoint = function (isMilestone) {
         return Math.floor(isMilestone ?
-            (this.parent.chartRowsModule.milestoneMarginTop + (this.parent.chartRowsModule.milestoneHeight / 2)) + 1 :
+            (this.parent.chartRowsModule.milestoneMarginTop + (this.parent.chartRowsModule.milestoneHeight / 2)) :
             (this.parent.chartRowsModule.taskBarMarginTop + (this.parent.chartRowsModule.taskBarHeight / 2))) + 1;
     };
     /**
@@ -71,14 +72,45 @@ var ConnectorLine = /** @class */ (function () {
      */
     ConnectorLine.prototype.createConnectorLineObject = function (parentGanttData, childGanttData, predecessor) {
         var connectorObj = {};
-        var updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
-            this.parent.flatData : this.expandedRecords;
-        var parentIndex = updatedRecords.indexOf(parentGanttData);
-        var childIndex = updatedRecords.indexOf(childGanttData);
+        var updatedRecords;
+        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps &&
+            this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) {
+            updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
+                this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData'] : this.expandedRecords;
+        }
+        else {
+            updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
+                this.parent.flatData : this.expandedRecords;
+        }
+        var parentIndex;
+        var childIndex;
+        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps &&
+            this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) {
+            var parentData = this.parent.flatData.filter(function (data) {
+                return data.ganttProperties.taskId.toString() == parentGanttData.ganttProperties.taskId.toString();
+            })[0];
+            var childData = this.parent.flatData.filter(function (data) {
+                return data.ganttProperties.taskId.toString() == childGanttData.ganttProperties.taskId.toString();
+            })[0];
+            parentIndex = parentData.index;
+            childIndex = childData.index;
+        }
+        else {
+            parentIndex = updatedRecords.indexOf(parentGanttData);
+            childIndex = updatedRecords.indexOf(childGanttData);
+        }
         var parentGanttRecord = parentGanttData.ganttProperties;
         var childGanttRecord = childGanttData.ganttProperties;
-        var currentData = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
-            this.parent.currentViewData : this.parent.getExpandedRecords(this.parent.currentViewData);
+        var currentData;
+        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps &&
+            this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) {
+            currentData = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
+                this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData'] : this.parent.getExpandedRecords(this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData']);
+        }
+        else {
+            currentData = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
+                this.parent.currentViewData : this.parent.getExpandedRecords(this.parent.currentViewData);
+        }
         connectorObj.parentIndexInCurrentView = currentData.indexOf(parentGanttData);
         connectorObj.childIndexInCurrentView = currentData.indexOf(childGanttData);
         var isVirtualScroll = this.parent.virtualScrollModule && this.parent.enableVirtualization;
@@ -818,10 +850,10 @@ var ConnectorLine = /** @class */ (function () {
      * @private
      */
     ConnectorLine.prototype.getConnectorLineTooltipInnerTd = function (fromTaskName, fromPredecessorText, toTaskName, toPredecessorText) {
-        var innerTd = '<tr  id="fromPredecessor"><td style="padding: 4px;">' + this.parent.localeObj.getConstant('from') + '</td><td> ';
+        var innerTd = '<tr  id="fromPredecessor"><td style="padding: 4px;width: 30px;">' + this.parent.localeObj.getConstant('from') + '</td><td> ';
         innerTd = innerTd + fromTaskName + ' </td><td style="padding: 2px;"> ' + this.parent.localeObj.getConstant(fromPredecessorText) + ' </td> </tr>';
         innerTd = innerTd + '<tr id="toPredecessor"><td style="padding: 4px;">' + this.parent.localeObj.getConstant('to') + '</td><td> ' + toTaskName;
-        innerTd = innerTd + ' </td><td style="padding: 2px;"> ' + this.parent.localeObj.getConstant(toPredecessorText) + ' </td></tr></tbody><table>';
+        innerTd = innerTd + ' </td><td style="padding: 2px;width: 30px;"> ' + this.parent.localeObj.getConstant(toPredecessorText) + ' </td></tr></tbody><table>';
         return innerTd;
     };
     /**
@@ -864,8 +896,17 @@ var ConnectorLine = /** @class */ (function () {
         if (isNullOrUndefined(id)) {
             return null;
         }
-        return this.parent.viewType === 'ResourceView' ? this.parent.flatData[this.parent.getTaskIds().indexOf('T' + id.toString())] :
-            this.parent.flatData[this.parent.ids.indexOf(id.toString())];
+        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps &&
+            this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth) {
+            var a = this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData'].filter(function (data) {
+                return data.ganttProperties.taskId.toString() === id.toString();
+            })[0];
+            return a;
+        }
+        else {
+            return this.parent.viewType === 'ResourceView' ? this.parent.flatData[this.parent.getTaskIds().indexOf('T' + id.toString())] :
+                this.parent.flatData[this.parent.ids.indexOf(id.toString())];
+        }
     };
     /**
      * Method to remove connector line from DOM

package/src/gantt/renderer/edit-tooltip.js

@@ -50,6 +50,7 @@ var EditTooltip = /** @class */ (function () {
      * @returns {void} .
      */
     EditTooltip.prototype.updateTooltipPosition = function (args) {
+        args.element.style.visibility = 'visible';
         var parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
         if (isNullOrUndefined(parentWithZoomStyle)) {
             var containerPosition = this.parent.getOffsetRect(this.parent.chartPane);
@@ -59,8 +60,8 @@ var EditTooltip = /** @class */ (function () {
                 tooltipPositionX += leftEnd - (tooltipPositionX + args.element.offsetWidth);
             }
             args.element.style.left = tooltipPositionX + 'px';
+            args.element.style.visibility = 'visible';
         }
-        args.element.style.visibility = 'visible';
     };
     /**
      * To show/hide taskbar edit tooltip.

package/src/gantt/renderer/timeline.js

@@ -74,7 +74,9 @@ var Timeline = /** @class */ (function () {
      */
     Timeline.prototype.refreshTimelineByTimeSpan = function () {
         this.validateTimelineProp();
-        this.parent.ganttChartModule.chartTimelineContainer.innerHTML = '';
+        if (!this.parent.pdfExportModule || (this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport) || (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps && !this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+            this.parent.ganttChartModule.chartTimelineContainer.innerHTML = '';
+        }
         this.createTimelineSeries();
     };
     /**
@@ -391,7 +393,10 @@ var Timeline = /** @class */ (function () {
         this.customTimelineSettings.topTier.format = this.validateFormat(this.topTier, this.customTimelineSettings.topTier.format);
         this.customTimelineSettings.weekStartDay = this.customTimelineSettings.weekStartDay >= 0 &&
             this.customTimelineSettings.weekStartDay <= 6 ? this.customTimelineSettings.weekStartDay : 0;
-        this.checkCurrentZoomingLevel();
+        if (!(this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps &&
+            this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+            this.checkCurrentZoomingLevel();
+        }
     };
     /**
      * To find the current zooming level of the Gantt control.
@@ -638,13 +643,15 @@ var Timeline = /** @class */ (function () {
             table = createElement('table', { className: cls.timelineHeaderTableContainer, styles: 'display: block;' });
             thead = createElement('thead', { className: cls.timelineHeaderTableBody, styles: 'display:block; border-collapse:collapse' });
             tr = createElement('tr', { innerHTML: this.createTimelineTemplate(tier) });
-            td = createElement('th');
-            div = createElement('div', { styles: 'width: 20px' });
-            td.appendChild(div);
-            tr.appendChild(td);
-            thead.appendChild(tr);
-            table.appendChild(thead);
-            this.parent.ganttChartModule.chartTimelineContainer.appendChild(table);
+            if (!this.parent.pdfExportModule || (this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport) || (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps && !this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+                td = createElement('th');
+                div = createElement('div', { styles: 'width: 20px' });
+                td.appendChild(div);
+                tr.appendChild(td);
+                thead.appendChild(tr);
+                table.appendChild(thead);
+                this.parent.ganttChartModule.chartTimelineContainer.appendChild(table);
+            }
             tier = 'bottomTier';
             tr = null;
         }

package/src/gantt/renderer/tooltip.js

@@ -88,8 +88,8 @@ var Tooltip = /** @class */ (function () {
                     if (taskbarTemplateNode) {
                         append(taskbarTemplateNode, tooltipTemplate);
                     }
-                    argsData.content = this.toolTipObj.content = taskbarTemplateNode ? tooltipTemplate :
-                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'taskbar'), data, parent, args);
+                    argsData.content = this.toolTipObj.content = taskbarTemplateNode ? tooltipTemplate : data ?
+                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'taskbar'), data, parent, args) : "";
                 }
                 else if (args.target.classList.contains('e-baseline-bar') ||
                     args.target.classList.contains('e-baseline-gantt-milestone')) {
@@ -101,8 +101,8 @@ var Tooltip = /** @class */ (function () {
                     if (baseLineTemplateNode) {
                         append(baseLineTemplateNode, baselineTemplate);
                     }
-                    argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baselineTemplate :
-                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'baseline'), data, parent, args);
+                    argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baselineTemplate : data ?
+                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'baseline'), data, parent, args) : "";
                 }
                 else if (args.target.classList.contains('e-event-markers')) {
                     argsData.content = this.toolTipObj.content = parent.tooltipModule.getTooltipContent('marker', data, parent, args);
@@ -169,7 +169,7 @@ var Tooltip = /** @class */ (function () {
     // eslint-disable-next-line
     Tooltip.prototype.tooltipCloseHandler = function (args) {
         this.tooltipMouseEvent = null;
-        if (!this.parent.isAdaptive) {
+        if (!this.parent.isAdaptive && !isNullOrUndefined(this.currentTarget)) {
             EventHandler.remove(this.currentTarget, 'mousemove', this.mouseMoveHandler);
         }
         this.currentTarget = null;