@syncfusion/ej2-gantt 22.2.12 → 23.1.36

package/dist/es6/ej2-gantt.es2015.js

@@ -510,7 +510,7 @@ class DateProcessor {
         }
         else {
             if ((!isNullOrUndefined(this.parent.taskFields.milestone)) && (!isNullOrUndefined(ganttProperties.startDate)) && !isNullOrUndefined(ganttProperties.endDate) &&
-                (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && !isNullOrUndefined(ganttData.taskData[this.parent.taskFields.milestone])) {
+                (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && (ganttData.taskData[this.parent.taskFields.milestone] === false)) {
                 tDuration = 1;
             }
             else {
@@ -1632,7 +1632,9 @@ class TaskProcessor extends DateProcessor {
         dataManager.executeQuery(queryManager).then((e) => {
             this.dataArray = e.result;
             this.processTimeline();
-            this.cloneDataSource();
+            if (this.parent.loadChildOnDemand || (!this.parent.loadChildOnDemand && !(this.parent.taskFields.hasChildMapping))) {
+                this.cloneDataSource();
+            }
             this.parent.renderGantt(isChange);
         }).catch((e) => {
             // Trigger action failure event
@@ -1671,6 +1673,9 @@ class TaskProcessor extends DateProcessor {
             const data = [];
             for (let i = 0; i < this.dataArray.length; i++) {
                 const tempData = this.dataArray[i];
+                if (tempData['parentItem']) {
+                    delete tempData['parentItem'];
+                }
                 data.push(extend({}, {}, tempData, true));
                 if (!isNullOrUndefined(tempData[taskIdMapping])) {
                     this.taskIds.push(tempData[taskIdMapping].toString());
@@ -1680,7 +1685,12 @@ class TaskProcessor extends DateProcessor {
                 this.parent.setProperties({ taskFields: { child: 'Children' } }, true);
             }
             this.constructDataSource(data);
-            hierarchicalData = this.hierarchyData;
+            if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping && this.hierarchyData.length === 0) {
+                hierarchicalData = this.dataArray;
+            }
+            else {
+                hierarchicalData = this.hierarchyData;
+            }
         }
         else {
             hierarchicalData = this.dataArray;
@@ -1889,7 +1899,12 @@ class TaskProcessor extends DateProcessor {
         if (!isNullOrUndefined(data[taskSettings.id])) {
             id = data[taskSettings.id];
             name = data[taskSettings.name];
-            this.addTaskData(ganttData, data, isLoad);
+            if (!this.parent.loadChildOnDemand && taskSettings.hasChildMapping && data['taskData']) {
+                ganttData['taskData'] = data['taskData'];
+            }
+            else {
+                this.addTaskData(ganttData, data, isLoad);
+            }
         }
         else if (!isNullOrUndefined(data[resourceFields.id])) {
             id = data[resourceFields.id];
@@ -1927,6 +1942,9 @@ class TaskProcessor extends DateProcessor {
         this.parent.setRecordValue('notes', notes, ganttProperties, true);
         this.parent.setRecordValue('cssClass', data[taskSettings.cssClass], ganttProperties, true);
         this.parent.setRecordValue('parentItem', this.getCloneParent(parentItem), ganttData);
+        if (!this.parent.loadChildOnDemand && taskSettings.hasChildMapping && this.parent.currentViewData.length > 0) {
+            this.parent.setRecordValue('parentItem', ganttData.parentItem, this.parent.currentViewData[this.taskIds.indexOf(data[taskSettings.id].toString())]);
+        }
         const parentUniqId = ganttData.parentItem ? ganttData.parentItem.uniqueID : null;
         this.parent.setRecordValue('parentUniqueID', parentUniqId, ganttData);
         if (this.parent.viewType === 'ResourceView' && !isNullOrUndefined(taskSettings.parentID)
@@ -1934,7 +1952,12 @@ class TaskProcessor extends DateProcessor {
             this.parent.setRecordValue('parentId', ganttData.parentItem.taskId, ganttProperties, true);
         }
         this.parent.setRecordValue('level', level, ganttData);
-        this.parent.setRecordValue('uniqueID', getUid(this.parent.element.id + '_data_'), ganttData);
+        if (!this.parent.loadChildOnDemand && taskSettings.hasChildMapping && data['uniqueID']) {
+            this.parent.setRecordValue('uniqueID', data['uniqueID'], ganttData);
+        }
+        else {
+            this.parent.setRecordValue('uniqueID', getUid(this.parent.element.id + '_data_'), ganttData);
+        }
         this.parent.setRecordValue('uniqueID', ganttData.uniqueID, ganttProperties, true);
         this.parent.setRecordValue('childRecords', [], ganttData);
         if (this.parent.dataSource instanceof Object && isCountRequired(this.parent) &&
@@ -1949,7 +1972,12 @@ class TaskProcessor extends DateProcessor {
             }
         }
         else {
-            this.parent.setRecordValue('hasChildRecords', false, ganttData);
+            if (!this.parent.loadChildOnDemand && taskSettings.hasChildMapping && ganttData.taskData[taskSettings.hasChildMapping]) {
+                this.parent.setRecordValue('hasChildRecords', true, ganttData);
+            }
+            else {
+                this.parent.setRecordValue('hasChildRecords', false, ganttData);
+            }
         }
         if (ganttData.hasChildRecords) {
             this.parent.setRecordValue('autoStartDate', ganttData.ganttProperties.startDate, ganttProperties);
@@ -2560,7 +2588,12 @@ class TaskProcessor extends DateProcessor {
         }
         else {
             this.updateDurationValue(duration, ganttProperties);
-            this.calculateEndDate(ganttData);
+            if (this.parent.autoCalculateDateScheduling) {
+                this.calculateEndDate(ganttData);
+            }
+            else {
+                this.parent.setRecordValue('endDate', endDate, ganttProperties, true);
+            }
         }
     }
     /**
@@ -3338,7 +3371,7 @@ class TaskProcessor extends DateProcessor {
      */
     updateDurationValue(duration, ganttProperties) {
         const tempDuration = this.getDurationValue(duration);
-        if (!isNaN(getValue('duration', tempDuration))) {
+        if (!isNaN(getValue('duration', tempDuration)) && !(this.parent.viewType === "ResourceView" && tempDuration["duration"] === 0)) {
             this.parent.setRecordValue('duration', getValue('duration', tempDuration), ganttProperties, true);
         }
         if (!isNullOrUndefined(getValue('durationUnit', tempDuration))) {
@@ -3722,7 +3755,14 @@ class TaskProcessor extends DateProcessor {
      * @private
      */
     reUpdateGanttDataPosition() {
-        const flatData = this.parent.flatData;
+        let flatData;
+        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) {
+            flatData = this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData'];
+        }
+        else {
+            flatData = this.parent.flatData;
+        }
         const length = flatData.length;
         for (let i = 0; i < length; i++) {
             const data = flatData[i];
@@ -3868,7 +3908,12 @@ class TaskProcessor extends DateProcessor {
                 let childCompletedWorks = 0;
                 let childData;
                 for (let count = 0; count < childLength; count++) {
-                    childData = childRecords[count];
+                    if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+                        childData = this.parent.currentViewData.filter(item => item.ganttProperties.taskId === childRecords[count][this.parent.taskFields.id])[0];
+                    }
+                    else {
+                        childData = childRecords[count];
+                    }
                     if (this.parent.isOnDelete && childData.isDelete) {
                         if (childLength === 1 && this.parent.viewType === 'ProjectView') {
                             deleteUpdate = true;
@@ -4399,6 +4444,7 @@ class GanttChart {
     constructor(parent) {
         this.isExpandCollapseFromChart = false;
         this.isExpandAll = false;
+        this.isCollapseAll = false;
         this.isGanttElement = false;
         this.parent = parent;
         this.chartTimelineContainer = null;
@@ -4748,6 +4794,42 @@ class GanttChart {
         if (this.parent.editSettings.allowTaskbarEditing) {
             this.parent.notify('chartMouseUp', e);
         }
+        if (!this.parent.editSettings.allowEditing) {
+            let isTaskbarEdited = false;
+            if (this.parent.editSettings.allowTaskbarEditing &&
+                getValue('editModule.taskbarEditModule.isMouseDragged', this.parent) &&
+                getValue('editModule.taskbarEditModule.taskBarEditAction', this.parent)) {
+                isTaskbarEdited = true;
+            }
+            if (!isTaskbarEdited) {
+                /** Expand/collapse action */
+                const target = e.target;
+                const isOnTaskbarElement = e.target.classList.contains(taskBarMainContainer)
+                    || closest(e.target, '.' + taskBarMainContainer);
+                if (closest(target, '.e-gantt-parent-taskbar') && !this.parent.editSettings.allowEditing) {
+                    this.chartExpandCollapseRequest(e);
+                }
+                else if (!isOnTaskbarElement && this.parent.autoFocusTasks) {
+                    this.scrollToTarget(e); /** Scroll to task */
+                }
+            }
+        }
+        if (e.type === "touchend") {
+            var resizeCheck = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-taskbar-resize-div');
+            if (!isNullOrUndefined(resizeCheck)) {
+                resizeCheck.remove();
+            }
+            var Check = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-clone-taskbar');
+            if (!isNullOrUndefined(Check)) {
+                var clonetbody = Check.parentElement;
+                var cloneTable = clonetbody.parentElement;
+                cloneTable.remove();
+            }
+            var falseline = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-gantt-false-line');
+            if (!isNullOrUndefined(falseline)) {
+                this.parent.editModule.taskbarEditModule.removeFalseLine(true);
+            }
+        }
     }
     /**
      *
@@ -5141,10 +5223,23 @@ class GanttChart {
         if ((isNullOrUndefined(args['gridRow']) && this.parent.enableVirtualization) || isNullOrUndefined(args['chartRow'])) {
             return;
         }
-        const record = getValue('data', args);
+        let record;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            record = this.parent.currentViewData.filter(item => item.ganttProperties[this.parent.taskFields.id] === args['data'][this.parent.taskFields.id])[0];
+        }
+        else {
+            record = getValue('data', args);
+        }
         if (this.isExpandCollapseFromChart) {
             this.expandCollapseChartRows('collapse', getValue('chartRow', args), record, null);
-            this.parent.treeGrid.collapseRow(getValue('gridRow', args), record);
+            const idField = this.parent.taskFields.id;
+            if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+                const gridRec = this.parent.treeGrid.getCurrentViewRecords().filter(function (item) { return item[idField] == args['data'][idField]; })[0];
+                this.parent.treeGrid.collapseRow(getValue('gridRow', args), gridRec);
+            }
+            else {
+                this.parent.treeGrid.collapseRow(getValue('gridRow', args), record);
+            }
             this.isExpandCollapseFromChart = false;
         }
         else {
@@ -5191,10 +5286,23 @@ class GanttChart {
         if ((isNullOrUndefined(args['gridRow']) && this.parent.enableVirtualization) || isNullOrUndefined(args['chartRow'])) {
             return;
         }
-        const record = getValue('data', args);
+        let record;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            record = this.parent.currentViewData.filter(item => item.ganttProperties.taskId == args['data'][this.parent.taskFields.id])[0];
+        }
+        else {
+            record = getValue('data', args);
+        }
         if (this.isExpandCollapseFromChart) {
             this.expandCollapseChartRows('expand', getValue('chartRow', args), record, null);
-            this.parent.treeGrid.expandRow(getValue('gridRow', args), record);
+            const idField = this.parent.taskFields.id;
+            if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+                const gridRec = this.parent.treeGrid.getCurrentViewRecords().filter(function (item) { return item[idField] == args['data'][idField]; })[0];
+                this.parent.treeGrid.expandRow(getValue('gridRow', args), gridRec);
+            }
+            else {
+                this.parent.treeGrid.expandRow(getValue('gridRow', args), record);
+            }
             this.isExpandCollapseFromChart = false;
         }
         else {
@@ -5293,9 +5401,11 @@ class GanttChart {
             this.parent.treeGrid.expandAll();
         }
         else {
+            this.isCollapseAll = true;
             this.parent.treeGrid.collapseAll();
         }
         this.isExpandAll = false;
+        this.isCollapseAll = false;
     }
     /**
      * Public method to expand particular level of rows.
@@ -5778,7 +5888,7 @@ class GanttChart {
                     childElement = element;
                 }
             }
-            if (element.classList.contains('e-right-label-temp-container') || element.classList.contains('e-left-label-temp-container') || element.classList.contains('e-indicator-span')) {
+            if (element.classList.contains('e-right-label-temp-container') || element.classList.contains('e-left-label-temp-container') || element.classList.contains('e-indicator-span') || element.classList.contains("e-timeline-header-container")) {
                 if (focus === 'add') {
                     element.setAttribute('tabIndex', '0');
                     addClass([element], 'e-active-container');
@@ -5842,7 +5952,13 @@ class GanttChart {
                 recordIndex = this.parent.flatData.indexOf(record);
             }
             else {
-                recordIndex = this.parent.currentViewData.indexOf(record);
+                if (this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings &&
+                    this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth && this.parent.pdfExportModule.isPdfExport) {
+                    recordIndex = this.parent.ids.indexOf(record.ganttProperties.taskId.toString());
+                }
+                else {
+                    recordIndex = this.parent.currentViewData.indexOf(record);
+                }
             }
         }
         return recordIndex;
@@ -5917,7 +6033,9 @@ class Timeline {
      */
     refreshTimelineByTimeSpan() {
         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();
     }
     /**
@@ -6231,7 +6349,10 @@ class Timeline {
         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.
@@ -6476,13 +6597,15 @@ class Timeline {
             table = createElement('table', { className: timelineHeaderTableContainer, styles: 'display: block;' });
             thead = createElement('thead', { className: 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;
         }
@@ -7520,6 +7643,11 @@ class GanttTreeGrid {
         this.wireEvents();
     }
     composeProperties() {
+        this.parent.treeGrid.hasChildMapping = this.parent.taskFields.hasChildMapping;
+        this.parent.treeGrid.loadChildOnDemand = this.parent.loadChildOnDemand;
+        this.parent.treeGrid['isFromGantt'] = true;
+        this.parent.treeGrid.parentIdMapping = this.parent.taskFields.parentID;
+        this.parent.treeGrid.idMapping = this.parent.taskFields.id;
         this.parent.treeGrid.showColumnMenu = this.parent.showColumnMenu;
         this.parent.treeGrid.enableCollapseAll = this.parent.collapseAllParentTasks;
         this.parent.treeGrid.columnMenuItems = this.parent.columnMenuItems;
@@ -7536,8 +7664,14 @@ class GanttTreeGrid {
             this.parent.treeGrid.dataSource = { result: this.parent.flatData, count: count };
         }
         else {
-            this.parent.treeGrid.hasChildMapping = null;
-            this.parent.treeGrid.dataSource = this.parent.flatData;
+            if (!this.parent.treeGrid.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+                this.parent.autoCalculateDateScheduling = false;
+                this.parent.treeGrid.dataSource = this.parent.dataSource;
+            }
+            else {
+                this.parent.treeGrid.hasChildMapping = null;
+                this.parent.treeGrid.dataSource = this.parent.flatData;
+            }
         }
         this.parent.treeGrid.expandStateMapping = this.parent.taskFields.expandState;
         const isGantt = 'isGantt';
@@ -7698,7 +7832,7 @@ class GanttTreeGrid {
                 collapsedArgs = this.createExpandCollapseArgs(args, null);
                 this.parent.ganttChartModule.collapsedGanttRow(collapsedArgs);
             }
-            if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && collapsedArgs['gridRow']) {
+            if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && !this.parent.ganttChartModule.isCollapseAll && collapsedArgs['gridRow']) {
                 collapsedArgs['gridRow'].style.height = collapsedArgs['chartRow'].style.height;
                 this.parent.contentHeight = this.parent.enableRtl ? this.parent['element'].getElementsByClassName('e-content')[2].children[0]['offsetHeight'] :
                     this.parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
@@ -7728,7 +7862,7 @@ class GanttTreeGrid {
                 expandedArgs = this.createExpandCollapseArgs(args, null);
                 this.parent.ganttChartModule.expandedGanttRow(expandedArgs);
             }
-            if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && args['row']) {
+            if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && !this.parent.ganttChartModule.isExpandAll && args['row']) {
                 args['row'].style.height = this.parent.rowHeight + 'px';
                 this.parent.contentHeight = this.parent.enableRtl ? this.parent['element'].getElementsByClassName('e-content')[2].children[0]['offsetHeight'] :
                     this.parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
@@ -8292,6 +8426,9 @@ class GanttTreeGrid {
         if (!isNullOrUndefined(ganttProp)) {
             return this.parent.dataOperation.getDurationString(ganttProp.duration, ganttProp.durationUnit);
         }
+        else if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            return this.parent.dataOperation.getDurationString(parseInt(data[this.parent.taskFields.duration]), this.parent.durationUnit);
+        }
         return '';
     } // eslint-disable-next-line
     resourceValueAccessor(field, data, column) {
@@ -8328,12 +8465,7 @@ class GanttTreeGrid {
     }
     updateScrollTop(args) {
         let newScrollTop;
-        if (getValue('top', args) > (this.parent.flatData.length * this.parent.rowHeight)) {
-            newScrollTop = getValue('top', args) - document.getElementsByClassName('e-chart-scroll-container e-content')[0]['offsetHeight'];
-        }
-        else {
-            newScrollTop = getValue('top', args);
-        }
+        newScrollTop = getValue('top', args);
         this.treeGridElement.querySelector('.e-content').scrollTop = newScrollTop;
         this.previousScroll.top = this.treeGridElement.querySelector('.e-content').scrollTop;
     }
@@ -8645,6 +8777,9 @@ __decorate$12([
 __decorate$12([
     Property(null)
 ], TaskFields.prototype, "parentID", void 0);
+__decorate$12([
+    Property(null)
+], TaskFields.prototype, "hasChildMapping", void 0);
 __decorate$12([
     Property(null)
 ], TaskFields.prototype, "startDate", void 0);
@@ -9144,16 +9279,16 @@ class ChartRows extends DateProcessor {
         return splitTasks;
     }
     getSplitTaskbarLeftResizerNode() {
-        const lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
+        const lResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 5 : -2;
         const template = '<div class="' + taskBarLeftResizer + ' ' + 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;
     }
     getSplitTaskbarRightResizerNode(segment) {
-        const rResizerLeft = this.parent.isAdaptive ? -2 : -10;
+        const rResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? -17 : -10;
         const template = '<div class="' + taskBarRightResizer + ' ' + 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;
     }
     getSplitProgressResizerNode(segment) {
@@ -9478,7 +9613,7 @@ class ChartRows extends DateProcessor {
         }
         else {
             const template = '<div class="' + 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;
@@ -9856,16 +9991,16 @@ class ChartRows extends DateProcessor {
         return this.createDivElement(template);
     }
     childTaskbarLeftResizer() {
-        const lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
+        const lResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 5 : -2;
         const template = '<div class="' + taskBarLeftResizer + ' ' + 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);
     }
     childTaskbarRightResizer() {
-        const rResizerLeft = this.parent.isAdaptive ? -2 : -10;
+        const rResizerLeft = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? -17 : -10;
         const template = '<div class="' + taskBarRightResizer + ' ' + 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);
     }
     childTaskbarProgressResizer() {
@@ -9879,8 +10014,10 @@ class ChartRows extends DateProcessor {
     }
     getLeftPointNode() {
         const data = this.templateData;
-        const pointerLeft = -((this.parent.isAdaptive ? 14 : 2) + this.connectorPointWidth);
-        const mileStoneLeft = -(this.connectorPointWidth + 2);
+        let left = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 12 : 0;
+        let mileStoneLeftValue = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 6 : 3;
+        const pointerLeft = -(3 + this.connectorPointWidth + left);
+        const mileStoneLeft = -(this.connectorPointWidth + 4 + mileStoneLeftValue);
         const pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         let marginTop;
         if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
@@ -9899,7 +10036,8 @@ class ChartRows extends DateProcessor {
     }
     getRightPointNode() {
         const data = this.templateData;
-        const pointerRight = this.parent.isAdaptive ? 10 : -2;
+        let right = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? -12 : 0;
+        const pointerRight = -(3 + right);
         const pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         let marginTop;
         if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
@@ -9909,7 +10047,7 @@ class ChartRows extends DateProcessor {
             marginTop = 'margin-top:' + this.connectorPointMargin + 'px';
         }
         const template = '<div class="' + 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="' + connectorPointRight + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
             '" style="width:' + this.connectorPointWidth + 'px;height:' + this.connectorPointWidth + 'px;">' +
@@ -10082,7 +10220,7 @@ class ChartRows extends DateProcessor {
      * @private
      */
     initChartHelperPrivateVariable() {
-        let taskbarHeightValue = this.parent.renderBaseline ? 0.45 : 0.62;
+        let taskbarHeightValue = this.parent.renderBaseline ? 0.45 : ((!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? 0.7 : 0.62);
         let taskBarMarginTopValue = this.parent.renderBaseline ? 4 : 2;
         let milestoneHeightValue = this.parent.renderBaseline ? 1.13 : 0.82;
         this.baselineColor = !isNullOrUndefined(this.parent.baselineColor) &&
@@ -10104,8 +10242,8 @@ class ChartRows extends DateProcessor {
         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.
@@ -10393,8 +10531,20 @@ class ChartRows extends DateProcessor {
         const dataSource = this.parent.treeGrid.getCurrentViewRecords();
         const visualData = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
             getValue('virtualScrollModule.visualData', this.parent.treeGrid) : dataSource;
-        const index = visualData.indexOf(tempTemplateData);
-        tRow.setAttribute('aria-rowindex', index.toString());
+        let index;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            let gridData = this.parent.treeGrid.grid.contentModule['rows'];
+            const data = gridData.filter((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.
@@ -10769,8 +10919,11 @@ class ChartRows extends DateProcessor {
                 this.triggerQueryTaskbarInfoByIndex(tr, data);
             }
             const dataId = this.parent.viewType === 'ProjectView' ? data.ganttProperties.taskId : data.ganttProperties.rowUniqueID;
-            this.parent.treeGrid.grid.setRowData(dataId, data);
-            if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && !data.expanded && this.parent.enableMultiTaskbar && !this.parent.allowTaskbarOverlap) {
+            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.parent.ganttChartModule.isCollapseAll && !this.parent.ganttChartModule.isExpandAll) {
                 this.updateDragDropRecords(selectedItem, tr);
             }
             if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && this.parent.showOverAllocation && !this.parent.allowTaskbarOverlap) {
@@ -10963,6 +11116,7 @@ class Dependency {
         this.parentRecord = [];
         this.parentIds = [];
         this.parentPredecessors = [];
+        this.validatedParentIds = [];
         this.parent = gantt;
         this.dateValidateModule = this.parent.dateValidationModule;
     }
@@ -11576,14 +11730,32 @@ class Dependency {
      * @private
      */
     createConnectorLinesCollection(records) {
-        const ganttRecords = records ? records : this.parent.currentViewData;
+        let ganttRecords = records ? records : this.parent.currentViewData;
+        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 && this.parent.pdfExportModule.isPdfExport) {
+            ganttRecords = this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneCurrentViewData'];
+        }
         const recordLength = ganttRecords.length;
         let count;
         let ganttRecord;
         let predecessorsCollection;
-        this.parent.connectorLineModule.expandedRecords = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
-            this.parent.updatedRecords : this.parent.getExpandedRecords(this.parent.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 && this.parent.pdfExportModule.isPdfExport) {
+            this.parent.connectorLineModule.expandedRecords = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
+                this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData'] : this.parent.getExpandedRecords(this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData']);
+        }
+        else {
+            this.parent.connectorLineModule.expandedRecords = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
+                this.parent.updatedRecords : this.parent.getExpandedRecords(this.parent.updatedRecords);
+        }
         for (count = 0; count < recordLength; count++) {
+            if (this.parent.editModule && this.parent.editModule.deletedTaskDetails.length > 0) {
+                if (ganttRecords[count].parentItem) {
+                    const parentItem = this.parent.getRecordByID(ganttRecords[count].parentItem.taskId.toString());
+                    this.parent.setRecordValue('parentItem', this.parent.dataOperation.getCloneParent(parentItem), ganttRecords[count]);
+                }
+                ganttRecords[count].index = count;
+            }
             ganttRecord = ganttRecords[count];
             predecessorsCollection = ganttRecord.ganttProperties.predecessor;
             if (predecessorsCollection) {
@@ -11731,36 +11903,35 @@ class Dependency {
                     this.validatePredecessor(record, undefined, 'successor');
                 }
             }
-            if (record && record.ganttProperties.taskId !== this.isValidatedParentTaskID && ganttProp) {
-                let validUpdate = false;
-                let predecessorNames = ganttProp.ganttProperties.predecessorsName ?
-                    ganttProp.ganttProperties.predecessorsName.split(',').length : ganttProp.ganttProperties.predecessorsName;
-                let predecessorLength = ganttProp.ganttProperties.predecessor ?
-                    ganttProp.ganttProperties.predecessor.length : ganttProp.ganttProperties.predecessor;
-                if ((predecessorLength && predecessorNames !== predecessorLength)) {
-                    validUpdate = true;
-                }
-                else if (record.hasChildRecords && record.ganttProperties.predecessor.length > 0 && ganttProp.hasChildRecords && !ganttProp.ganttProperties.predecessor) {
-                    validUpdate = true;
-                }
-                if ((taskBarModule.taskBarEditAction !== 'ParentDrag' && taskBarModule.taskBarEditAction !== 'ChildDrag')) {
-                    if (!ganttProp.hasChildRecords && record.hasChildRecords) {
+            if (record && !record.hasChildRecords && record.parentItem && this.validatedParentIds.indexOf(record.parentItem.taskId) == -1) {
+                this.validatedParentIds.push(record.parentItem.taskId);
+            }
+            
+            let validUpdate = true;
+            if (record && record.hasChildRecords && this.validatedParentIds.indexOf(record.ganttProperties.taskId.toString()) !== -1) {
+                validUpdate = false;
+            }
+            if (validUpdate) {
+                if (record && record.ganttProperties.taskId !== this.isValidatedParentTaskID && ganttProp) {
+                    if ((taskBarModule.taskBarEditAction !== 'ParentDrag' && taskBarModule.taskBarEditAction !== 'ChildDrag')) {
+                        if (!ganttProp.hasChildRecords && record.hasChildRecords) {
+                            this.parent.editModule['updateChildItems'](record);
+                            this.isValidatedParentTaskID = record.ganttProperties.taskId;
+                        }
+                    }
+                    else if ((!record.hasChildRecords && taskBarModule.taskBarEditAction == 'ChildDrag') ||
+                        (record.hasChildRecords && taskBarModule.taskBarEditAction == 'ParentDrag')) {
                         this.parent.editModule['updateChildItems'](record);
                         this.isValidatedParentTaskID = record.ganttProperties.taskId;
                     }
+                    if (!ganttProp.hasChildRecords) {
+                        this.parent.dataOperation.updateParentItems(record, true);
+                    }
                 }
-                else if ((record.hasChildRecords && taskBarModule.taskBarEditAction == 'ChildDrag') ||
-                    (validUpdate && taskBarModule.taskBarEditAction == 'ParentDrag')) {
+                else if (record && record.hasChildRecords && !ganttProp) {
                     this.parent.editModule['updateChildItems'](record);
-                    this.isValidatedParentTaskID = record.ganttProperties.taskId;
-                }
-                if (!ganttProp.hasChildRecords) {
-                    this.parent.dataOperation.updateParentItems(record, true);
                 }
             }
-            else if (record && record.hasChildRecords && !ganttProp) {
-                this.parent.editModule['updateChildItems'](record);
-            }
         }
     }
     /**
@@ -11841,7 +12012,7 @@ class ConnectorLine {
     }
     getTaskbarMidpoint(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;
     }
     /**
@@ -11855,14 +12026,45 @@ class ConnectorLine {
      */
     createConnectorLineObject(parentGanttData, childGanttData, predecessor) {
         const connectorObj = {};
-        const updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
-            this.parent.flatData : this.expandedRecords;
-        const parentIndex = updatedRecords.indexOf(parentGanttData);
-        const childIndex = updatedRecords.indexOf(childGanttData);
+        let 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;
+        }
+        let parentIndex;
+        let 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) {
+            let parentData = this.parent.flatData.filter((data) => {
+                return data.ganttProperties.taskId.toString() == parentGanttData.ganttProperties.taskId.toString();
+            })[0];
+            let childData = this.parent.flatData.filter((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);
+        }
         const parentGanttRecord = parentGanttData.ganttProperties;
         const childGanttRecord = childGanttData.ganttProperties;
-        const currentData = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
-            this.parent.currentViewData : this.parent.getExpandedRecords(this.parent.currentViewData);
+        let 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);
         const isVirtualScroll = this.parent.virtualScrollModule && this.parent.enableVirtualization;
@@ -12647,8 +12849,17 @@ class ConnectorLine {
         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) {
+            let a = this.parent.pdfExportModule.helper.beforeSinglePageExport['cloneFlatData'].filter((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
@@ -12974,8 +13185,8 @@ class Tooltip$1 {
                     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')) {
@@ -12987,8 +13198,8 @@ class Tooltip$1 {
                     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);
@@ -13055,7 +13266,7 @@ class Tooltip$1 {
     // eslint-disable-next-line
     tooltipCloseHandler(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;
@@ -14035,6 +14246,7 @@ let Gantt = class Gantt extends Component {
         createSpinner({ target: this.element }, this.createElement);
         this.trigger('load', {});
         this.element.classList.add(root);
+        this.rowHeight = (!isNullOrUndefined(document.body.className) && document.body.className.includes("e-bigger")) ? (this.rowHeight === 36) ? 46 : this.rowHeight : this.rowHeight;
         if (this.isAdaptive) {
             this.element.classList.add(adaptive);
         }
@@ -14578,6 +14790,37 @@ let Gantt = class Gantt extends Component {
     }
     updateCurrentViewData() {
         this.currentViewData = this.treeGrid.getCurrentViewRecords().slice();
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping && this.currentViewData.length > 0) {
+            this.autoCalculateDateScheduling = false;
+            this.flatData = [];
+            this.dataOperation.taskIds = [];
+            this.ids = [];
+            this.dataOperation.recordIndex = 0;
+            this.dataOperation.dataArray = this.currentViewData;
+            this.dataOperation.cloneDataSource();
+            if (this.predecessorModule && this.taskFields.dependency) {
+                this.predecessorModule['parentIds'] = [];
+                this.predecessorModule['parentRecord'] = [];
+                this.predecessorModule.updatePredecessors();
+            }
+            let gridData = this.treeGrid.grid.contentModule['rows'];
+            const data = gridData.filter((x) => {
+                if (x['data'][this.taskFields.id] === this.flatData[0].ganttProperties.taskId) {
+                    return x;
+                }
+            })[0];
+            let index = data['index'];
+            for (let i = 0; i < this.flatData.length; i++) {
+                this.flatData[i].index = index;
+                index++;
+            }
+            this.currentViewData = this.flatData;
+            this.treeGrid.grid.currentViewData = this.flatData;
+            if (!isNullOrUndefined(this.treeGrid['virtualScrollModule'])) {
+                this.treeGrid['virtualScrollModule'].visualData = this.flatData;
+                this.updatedRecords = this.flatData;
+            }
+        }
     }
     /**
      * @param {IGanttData} records -Defines the delete record collections.
@@ -14597,7 +14840,7 @@ let Gantt = class Gantt extends Component {
      * @private
      */
     updateContentHeight(args) {
-        if (!this.allowTaskbarOverlap && this.viewType === 'ResourceView' && !this.isLoad) {
+        if ((!this.allowTaskbarOverlap && !this.ganttChartModule.isCollapseAll && !this.ganttChartModule.isExpandAll) && this.viewType === 'ResourceView' && !this.isLoad) {
             return;
         }
         else {
@@ -14961,6 +15204,9 @@ let Gantt = class Gantt extends Component {
         else {
             this.getCurrentRecords(args);
         }
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping) {
+            this.updateContentHeight();
+        }
         if (this.enableCriticalPath && this.criticalPathModule) {
             this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
         }
@@ -14976,6 +15222,9 @@ let Gantt = class Gantt extends Component {
         }
         this.initialChartRowElements = this.ganttChartModule.getChartRows();
         this.isLoad = false;
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping) {
+            this.autoCalculateDateScheduling = true;
+        }
         this.trigger('dataBound', args);
     }
     /**
@@ -15239,7 +15488,14 @@ let Gantt = class Gantt extends Component {
                     if (prop === 'locale') {
                         this.isLocaleChanged = true;
                     }
-                    isRefresh = true;
+                    if (prop === 'taskFields') {
+                        if (!isNullOrUndefined(newProp.taskFields.child)) {
+                            return;
+                        }
+                    }
+                    if (prop !== 'allowTaskbarDragAndDrop') {
+                        isRefresh = true;
+                    }
                     break;
                 case 'validateManualTasksOnLinking':
                     this.validateManualTasksOnLinking = newProp.validateManualTasksOnLinking;
@@ -15919,6 +16175,9 @@ let Gantt = class Gantt extends Component {
      * @returns {Promise<any>} .
      */
     pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
+        if (pdfExportProperties && pdfExportProperties.fitToWidthSettings && pdfExportProperties.fitToWidthSettings.isFitToWidth) {
+            pdfExportProperties.pageOrientation == 'Landscape';
+        }
         return this.pdfExportModule ? this.pdfExportModule.export(pdfExportProperties, isMultipleExport, pdfDoc, isBlob)
             : null;
     }
@@ -16007,14 +16266,17 @@ let Gantt = class Gantt extends Component {
         this.isTimelineRoundOff = isTimelineRoundOff;
         this.timelineModule.refreshTimelineByTimeSpan();
         this.dataOperation.reUpdateGanttDataPosition();
-        this.timelineModule.updateChartByNewTimeline();
-        this.ganttChartModule.chartBodyContent.style.width = formatUnit(this.timelineModule.totalTimelineWidth);
-        this.ganttChartModule.updateLastRowBottomWidth();
-        if (this.taskFields.dependency) {
-            this.ganttChartModule.reRenderConnectorLines();
-        }
-        if (isFrom !== 'beforeAdd') {
-            this.notify('selectRowByIndex', {});
+        if (!this.pdfExportModule || (this.pdfExportModule && !this.pdfExportModule.isPdfExport) || (this.pdfExportModule && this.pdfExportModule.isPdfExport && this.pdfExportModule.helper.exportProps &&
+            this.pdfExportModule.helper.exportProps.fitToWidthSettings && !this.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+            this.timelineModule.updateChartByNewTimeline();
+            this.ganttChartModule.chartBodyContent.style.width = formatUnit(this.timelineModule.totalTimelineWidth);
+            this.ganttChartModule.updateLastRowBottomWidth();
+            if (this.taskFields.dependency) {
+                this.ganttChartModule.reRenderConnectorLines();
+            }
+            if (isFrom !== 'beforeAdd') {
+                this.notify('selectRowByIndex', {});
+            }
         }
     }
     /**
@@ -16593,7 +16855,13 @@ let Gantt = class Gantt extends Component {
      */
     getRowByID(id) {
         const record = this.getRecordByID(id.toString());
-        const index = this.updatedRecords.indexOf(record);
+        let index;
+        if (!this.loadChildOnDemand && this.taskFields.hasChildMapping) {
+            index = this.updatedRecords.map(item => item[this.taskFields.id]).indexOf(record.ganttProperties.taskId);
+        }
+        else {
+            index = this.updatedRecords.indexOf(record);
+        }
         if (index !== -1) {
             return this.getRowByIndex(index);
         }
@@ -17054,6 +17322,9 @@ __decorate([
 __decorate([
     Property(true)
 ], Gantt.prototype, "enableVirtualMaskRow", void 0);
+__decorate([
+    Property(false)
+], Gantt.prototype, "loadChildOnDemand", void 0);
 __decorate([
     Property(true)
 ], Gantt.prototype, "UpdateOffsetOnTaskbarEdit", void 0);
@@ -17557,7 +17828,7 @@ class CellEdit {
             args.cancel = true;
             return;
         }
-        if (data.hasChildRecords && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
+        if (data.hasChildRecords && !this.parent.allowParentDependency && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
             data['isManual'] === false) || this.parent.taskMode === 'Auto')) || field === taskSettings.duration
             || field === taskSettings.dependency || field === taskSettings.progress || field === taskSettings.work || field === 'taskType')) {
             if ((field === taskSettings.dependency && !this.parent.allowParentDependency) || field !== taskSettings.dependency) {
@@ -17856,6 +18127,9 @@ class CellEdit {
      * @returns {void} .
      */
     durationEdited(args) {
+        if (parseInt(args.data[this.parent.taskFields.duration]) < 0) {
+            args.data[this.parent.taskFields.duration] = 0;
+        }
         const ganttProb = args.data.ganttProperties;
         const durationString = args.data[this.parent.taskFields.duration];
         this.parent.dataOperation.updateDurationValue(durationString, ganttProb);
@@ -18123,6 +18397,7 @@ class EditTooltip {
      * @returns {void} .
      */
     updateTooltipPosition(args) {
+        args.element.style.visibility = 'visible';
         const parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
         if (isNullOrUndefined(parentWithZoomStyle)) {
             const containerPosition = this.parent.getOffsetRect(this.parent.chartPane);
@@ -18132,8 +18407,8 @@ class EditTooltip {
                 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.
@@ -18364,13 +18639,10 @@ class TaskbarEdit extends DateProcessor {
     mouseDownHandler(e) {
         if (this.parent.editSettings.allowTaskbarEditing && !this.parent.readOnly) {
             this.canDrag = false;
-            if (this.parent.isAdaptive && this.taskBarEditElement) {
+            if (this.taskBarEditElement) {
                 const targetElement = this.getElementByPosition(e);
                 const element = parentsUntil$1(targetElement, taskBarMainContainer);
-                if (element && element.innerHTML === this.taskBarEditElement.innerHTML &&
-                    !(targetElement.classList.contains(connectorPointLeft) ||
-                        targetElement.classList.contains(connectorPointRight)) &&
-                    !this.tapPointOnFocus) {
+                if ((element && element.innerHTML === this.taskBarEditElement.innerHTML || this.taskBarEditElement.classList.contains("e-segmented-taskbar") || this.taskBarEditElement.classList.contains("collpse-parent-border"))) {
                     this.updateTaskBarEditElement(e);
                     this.canDrag = true;
                     e.preventDefault();
@@ -18393,7 +18665,7 @@ class TaskbarEdit extends DateProcessor {
             }
             return;
         }
-        if (this.tapPointOnFocus && element && element.innerHTML !== this.taskBarEditElement.innerHTML) {
+        if (this.tapPointOnFocus && !isNullOrUndefined(this.taskBarEditElement) && element && element.innerHTML !== this.taskBarEditElement.innerHTML) {
             this.connectorSecondRecord = this.parent.ganttChartModule.getRecordByTaskBar(element);
             this.connectorSecondAction = 'ConnectorPointLeftDrag';
             this.connectorSecondElement = element;
@@ -18404,8 +18676,16 @@ class TaskbarEdit extends DateProcessor {
             this.showHideActivePredecessors(false);
             this.initPublicProp();
         }
-        else if (targetElement.classList.contains(connectorPointLeftHover) ||
-            targetElement.classList.contains(connectorPointRightHover)) {
+        else if (targetElement.classList.contains(connectorPointLeftHover)) {
+            this.canDrag = false;
+            this.multipleSelectionEnabled();
+            this.showHideTaskBarEditingElements(targetElement, this.taskBarEditElement);
+            this.tapPointOnFocus = true;
+            this.taskBarEditAction = 'ConnectorPointLeftDrag';
+            this.connectorSecondRecord = this.taskBarEditRecord;
+            this.taskBarEditingAction(e, false);
+        }
+        else if (targetElement.classList.contains(connectorPointRightHover)) {
             this.canDrag = false;
             this.multipleSelectionEnabled();
             this.showHideTaskBarEditingElements(targetElement, this.taskBarEditElement);
@@ -18535,7 +18815,7 @@ class TaskbarEdit extends DateProcessor {
             }
         }
         if (this.parent.editSettings.allowTaskbarEditing && element) {
-            this.showHideTaskBarEditingElements(element, this.taskBarEditElement);
+            this.showHideTaskBarEditingElements(element, this.editElement);
             this.editElement = element;
             this.realTaskbarElement = this.editElement;
             const index = this.editElement.getAttribute('data-segment-index');
@@ -18616,7 +18896,7 @@ class TaskbarEdit extends DateProcessor {
         else {
             if (this.parent.isAdaptive) {
                 if (this.taskBarEditElement) {
-                    this.showHideTaskBarEditingElements(element, this.taskBarEditElement);
+                    this.showHideTaskBarEditingElements(element, this.editElement);
                 }
                 this.initPublicProp();
             }
@@ -18676,8 +18956,12 @@ class TaskbarEdit extends DateProcessor {
                 && isShowConnectorPoints) {
                 const connectorElement = !isNullOrUndefined(element.querySelector('.' + connectorPointLeft)) ?
                     element : element.parentElement;
-                addClass([connectorElement.querySelector('.' + connectorPointLeft)], [connectorPointLeftHover]);
-                addClass([connectorElement.querySelector('.' + connectorPointRight)], [connectorPointRightHover]);
+                if (!isNullOrUndefined(connectorElement.querySelector('.' + connectorPointLeft))) {
+                    addClass([connectorElement.querySelector('.' + connectorPointLeft)], [connectorPointLeftHover]);
+                }
+                if (!isNullOrUndefined(connectorElement.querySelector('.' + connectorPointRight))) {
+                    addClass([connectorElement.querySelector('.' + connectorPointRight)], [connectorPointRightHover]);
+                }
             }
         }
         else if (!fadeConnectorLine) {
@@ -18804,7 +19088,8 @@ class TaskbarEdit extends DateProcessor {
             const item = this.taskBarEditRecord.ganttProperties;
             this.previousItem = this.parent.timelineModule.extendFunction(item, this.previousItemProperty);
             if (this.taskBarEditAction !== 'ConnectorPointLeftDrag' &&
-                this.taskBarEditAction !== 'ConnectorPointRightDrag') {
+                this.taskBarEditAction !== 'ConnectorPointRightDrag' &&
+                !(this.parent.viewType == 'ResourceView' && this.taskBarEditAction == 'ParentDrag')) {
                 this.editTooltip.showHideTaskbarEditTooltip(true, this.segmentIndex);
             }
             this.taskBarEditElement.setAttribute('aria-grabbed', 'true');
@@ -18841,6 +19126,7 @@ class TaskbarEdit extends DateProcessor {
         this.dragMouseLeave = false;
         this.isMouseDragCheck();
         if (this.isMouseDragged && this.taskBarEditAction) {
+            event.preventDefault();
             if (!isNullOrUndefined(this.taskbarElement) && !isNullOrUndefined(this.editElement) && (this.taskBarEditAction !== "ConnectorPointRightDrag" && this.taskBarEditAction !== "ConnectorPointLeftDrag") && !(this.parent.viewType === 'ResourceView' && this.currentData.hasChildRecords)) {
                 var currentElement = this.editElement.parentElement;
                 currentElement.style.setProperty("position", "absolute");
@@ -18929,9 +19215,7 @@ class TaskbarEdit extends DateProcessor {
                 this.taskBarEditAction === 'ConnectorPointRightDrag') {
                 this.updateConnectorLineSecondProperties(e);
                 this.triggerDependencyEvent(e);
-                if (!this.parent.isAdaptive) {
-                    this.drawFalseLine();
-                }
+                this.drawFalseLine();
             }
             if (this.parent.viewType == 'ResourceView' && this.parent.allowTaskbarDragAndDrop) {
                 if (this.dragMoveY > this.mouseMoveY) {
@@ -18943,7 +19227,12 @@ class TaskbarEdit extends DateProcessor {
                     this.currentItemTop = this.currentItemTop + this.mouseMoveY;
                 }
                 const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
-                this.dragMoveY = e.pageY - containerPosition.top + this.parent.ganttChartModule.scrollObject.previousScroll.top;
+                if (this.parent.isAdaptive || e.touches) {
+                    this.dragMoveY = e.touches[0].pageY - containerPosition.top + this.parent.ganttChartModule.scrollObject.previousScroll.top;
+                }
+                else {
+                    this.dragMoveY = e.pageY - containerPosition.top + this.parent.ganttChartModule.scrollObject.previousScroll.top;
+                }
                 this.topValue = this.currentItemTop;
                 this.currentItemPrevTop = (this.currentItemPrevTop === 0 ||
                     this.topValue == this.currentItemTop) ? this.topValue :
@@ -19329,6 +19618,7 @@ class TaskbarEdit extends DateProcessor {
                         if (this.segmentIndex === 0) {
                             this.parent.setRecordValue('width', item.width - differenceWidth, item, true);
                             this.parent.setRecordValue('left', item.left + differenceWidth, item, true);
+                            segment.width = segment.width - differenceWidth;
                             for (let i = 1; i < item.segments.length; i++) {
                                 const segment = segments[i];
                                 segment.left = segment.left - differenceWidth;
@@ -19809,6 +20099,7 @@ class TaskbarEdit extends DateProcessor {
         const traceParentTaskBar$$1 = this.taskBarEditElement.querySelector('.' + traceParentTaskBar);
         const traceParentProgressBar$$1 = this.taskBarEditElement.querySelector('.' + traceParentProgressBar);
         const traceConnectorPointRight = this.taskBarEditElement.querySelector('.' + rightConnectorPointOuterDiv);
+        const segmentConnectorPointRight = taskBarMainContainer$$1.querySelector('.' + rightConnectorPointOuterDiv);
         const manualParentTaskbar = this.taskBarEditElement;
         const manualTaskbar = this.taskBarEditElement.querySelector('.' + manualParentTaskBar);
         const manualParentRight = this.taskBarEditElement.querySelector('.' + manualParentRightResizer);
@@ -19835,6 +20126,9 @@ class TaskbarEdit extends DateProcessor {
                 }
                 taskBarMainContainer$$1.style.setProperty(position, (item.left) + 'px');
                 taskBarMainContainer$$1.style.width = (width) + 'px';
+                if (segmentedTaskBarContainer && segmentConnectorPointRight) {
+                    segmentConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width + 2)) + 'px';
+                }
                 if (this.parent.viewType === 'ResourceView' && this.parent.allowTaskbarDragAndDrop && this.parent.rowDragAndDropModule &&
                     (this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'MilestoneDrag')) {
                     taskBarMainContainer$$1.style.setProperty('top', (this.topValue) + 'px');
@@ -19951,9 +20245,9 @@ class TaskbarEdit extends DateProcessor {
                 }
                 if (segmentedTaskBarContainer) {
                     taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
-                    traceChildProgressBar$$1.style.width = (segment.progressWidth) + 'px';
+                    traceChildProgressBar$$1.style.width = (segment.width) + 'px';
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.setProperty(position, segment.progressWidth - 10 + 'px');
+                        childProgressResizer$$1.style.setProperty(position, segment.width - 10 + 'px');
                     }
                 }
             }
@@ -20023,9 +20317,6 @@ class TaskbarEdit extends DateProcessor {
             this.taskBarEditAction === 'ConnectorPointRightDrag') && this.drawPredecessor && (!this.connectorSecondRecord.hasChildRecords ||
             this.connectorSecondRecord.hasChildRecords && this.parent.allowParentDependency)) {
             this.parent.connectorLineEditModule.updatePredecessor(this.connectorSecondRecord, this.finalPredecessor);
-            if (this.parent.UpdateOffsetOnTaskbarEdit) {
-                this.parent.connectorLineEditModule['calculateOffset'](this.connectorSecondRecord);
-            }
         }
         else {
             if (x1 !== x2 || (Math.abs(y1 - resMouseY) >= (this.parent.rowHeight - this.parent.taskbarHeight) / 2)) {
@@ -20315,6 +20606,7 @@ class TaskbarEdit extends DateProcessor {
     updateConnectorLineSecondProperties(e) {
         const target = this.getElementByPosition(e);
         const element = parentsUntil$1(target, taskBarMainContainer);
+        const isBigger = document.body.className.includes("e-bigger");
         this.connectorSecondAction = null;
         let scrollTop = 0;
         if (parentsUntil$1(target, connectorPointLeft)) {
@@ -20337,20 +20629,20 @@ class TaskbarEdit extends DateProcessor {
             if ((this.parent.virtualScrollModule && this.parent.enableVirtualization &&
                 !this.elementOffsetLeft) || !this.parent.enableVirtualization) {
                 if (!this.parent.allowParentDependency) {
-                    this.elementOffsetLeft = this.realTaskbarElement.offsetLeft;
+                    this.elementOffsetLeft = this.realTaskbarElement.offsetLeft - ((isBigger) ? 10 : 0);
                     this.elementOffsetTop = this.realTaskbarElement.parentElement.offsetTop + this.realTaskbarElement.offsetHeight / 3 + scrollTop;
                 }
                 else {
                     if (this.taskBarEditElement.children[0].classList.contains('e-manualparent-main-container')) {
-                        this.elementOffsetLeft = this.realTaskbarElement.children[0]['offsetLeft'] + this.realTaskbarElement.offsetLeft;
+                        this.elementOffsetLeft = this.realTaskbarElement.children[0]['offsetLeft'] + this.realTaskbarElement.offsetLeft - ((isBigger) ? 10 : 0);
                         this.elementOffsetTop = ((this.realTaskbarElement.parentElement.offsetTop + this.realTaskbarElement.offsetHeight / 3 - 5) + this.taskBarEditElement.children[0]['offsetTop']) + scrollTop;
                     }
                     else {
-                        this.elementOffsetLeft = this.realTaskbarElement.offsetLeft;
+                        this.elementOffsetLeft = this.realTaskbarElement.offsetLeft - ((isBigger) ? 10 : 0);
                         this.elementOffsetTop = this.realTaskbarElement.parentElement.offsetTop + this.realTaskbarElement.offsetHeight / 3 + scrollTop;
                     }
                 }
-                this.elementOffsetWidth = this.realTaskbarElement.offsetWidth;
+                this.elementOffsetWidth = this.realTaskbarElement.offsetWidth + ((isBigger) ? 20 : 0);
                 this.elementOffsetHeight = this.realTaskbarElement.offsetHeight;
             }
             this.showHideTaskBarEditingElements(element, this.highlightedSecondElement, true);
@@ -20458,18 +20750,16 @@ class TaskbarEdit extends DateProcessor {
     // Get XY coordinates for touch and non-touch device
     getCoordinate(event) {
         const coordinates = {};
-        if (this.parent.isAdaptive && event && event.type !== 'click') {
+        const e = event;
+        coordinates.pageX = e.pageX;
+        coordinates.pageY = e.pageY;
+        if (event && event.type !== 'click') {
             const e = event;
             if (e.type === 'touchmove' || e.type === 'touchstart' || e.type === 'touchend') {
                 coordinates.pageX = e.changedTouches[0].pageX;
                 coordinates.pageY = e.changedTouches[0].pageY;
             }
         }
-        else if (event) {
-            const e = event;
-            coordinates.pageX = e.pageX;
-            coordinates.pageY = e.pageY;
-        }
         return coordinates;
     }
     // Get current target element by mouse position
@@ -21417,7 +21707,7 @@ class DialogEdit {
             if (!isNullOrUndefined(tasks.endDate) && tasks.endDate !== colName) {
                 this.updateScheduleFields(dialog, ganttProp, 'endDate');
             }
-            if (!isNullOrUndefined(tasks.duration) && tasks.duration !== colName) {
+            if (!isNullOrUndefined(tasks.duration) && tasks.duration !== colName || ganttProp.duration >= 0) {
                 this.updateScheduleFields(dialog, ganttProp, 'duration');
             }
             if (!isNullOrUndefined(tasks.work) && tasks.work !== colName) {
@@ -21575,17 +21865,33 @@ class DialogEdit {
         const ganttProp = currentData.ganttProperties;
         const taskSettings = ganttObj.taskFields;
         if (taskSettings.duration === columnName) {
-            if (!isNullOrUndefined(value) && value !== '') {
+            if (!isNullOrUndefined(value) && value !== '' && parseInt(value) >= 0) {
                 ganttObj.dataOperation.updateDurationValue(value, ganttProp);
                 this.parent.setRecordValue(taskSettings.duration, value, currentData);
                 this.parent.setRecordValue('taskData.' + taskSettings.duration, ganttProp.duration, currentData);
+                this.validateDuration(currentData);
             }
             else {
                 if (ganttObj.allowUnscheduledTasks) {
-                    this.parent.setRecordValue('duration', null, ganttProp, true);
+                    if ((ganttProp.startDate && ganttProp.endDate && ganttProp.startDate.getTime() > ganttProp.endDate.getTime()) || value.indexOf('-') !== -1) {
+                        this.parent.setRecordValue('duration', 0, ganttProp, true);
+                        if (ganttProp.endDate) {
+                            this.parent.setRecordValue('startDate', ganttProp.endDate, ganttProp, true);
+                        }
+                    }
+                    else {
+                        if (value === "") {
+                            this.parent.setRecordValue('duration', null, ganttProp, true);
+                            if (ganttProp.endDate) {
+                                this.parent.setRecordValue('endDate', null, ganttProp, true);
+                            }
+                        }
+                        else {
+                            this.parent.setRecordValue('duration', ganttProp.duration, ganttProp, true);
+                        }
+                    }
                 }
             }
-            this.validateDuration(currentData);
             this.parent.editModule.updateResourceRelatedFields(currentData, 'duration');
         }
         if (taskSettings.startDate === columnName) {
@@ -21593,13 +21899,15 @@ class DialogEdit {
                 let startDate = this.parent.dateValidationModule.getDateFromFormat(value);
                 startDate = this.parent.dateValidationModule.checkStartDate(startDate, ganttProp);
                 this.parent.setRecordValue('startDate', startDate, ganttProp, true);
+                this.validateStartDate(currentData);
             }
             else {
                 if (ganttObj.allowUnscheduledTasks && !(currentData.hasChildRecords)) {
                     this.parent.setRecordValue('startDate', null, ganttProp, true);
+                    this.parent.setRecordValue('duration', null, ganttProp, true);
+                    this.parent.setRecordValue('isMilestone', false, ganttProp, true);
                 }
             }
-            this.validateStartDate(currentData);
         }
         if (taskSettings.endDate === columnName) {
             if (value !== '') {
@@ -21614,13 +21922,15 @@ class DialogEdit {
                 if (isNullOrUndefined(ganttProp.startDate) || endDate.getTime() > (ganttProp.startDate).getTime()) {
                     this.parent.setRecordValue('endDate', endDate, ganttProp, true);
                 }
+                this.validateEndDate(currentData);
             }
             else {
                 if (ganttObj.allowUnscheduledTasks) {
                     this.parent.setRecordValue('endDate', null, ganttProp, true);
+                    this.parent.setRecordValue('duration', null, ganttProp, true);
+                    this.parent.setRecordValue('isMilestone', false, ganttProp, true);
                 }
             }
-            this.validateEndDate(currentData);
         }
         if (taskSettings.work === columnName) {
             if (!isNullOrUndefined(value) && value !== '') {
@@ -22022,7 +22332,7 @@ class DialogEdit {
                     let eDate = getValue('endDate', selectedItem);
                     let duration = getValue('duration', selectedItem);
                     const startDate = !isNullOrUndefined(gridData) && gridData.length > 0 ?
-                        !isNullOrUndefined(taskFields.endDate) ? new Date(getValue('endDate', gridData[0]).getTime()) :
+                        (!isNullOrUndefined(taskFields.endDate) && !isNullOrUndefined(gridData[0].endDate)) ? new Date(getValue('endDate', gridData[0]).getTime()) :
                             new Date(getValue('startDate', gridData[0]).getTime()) :
                         !isNullOrUndefined(this.beforeOpenArgs.rowData.ganttProperties.startDate) &&
                             new Date(this.beforeOpenArgs.rowData.ganttProperties.startDate.getTime());
@@ -24682,10 +24992,11 @@ class Edit$2 {
                 this.parent.predecessorModule.isValidatedParentTaskID = '';
             }
             if (this.parent.allowParentDependency && ganttRecord.hasChildRecords && this.parent.previousRecords[ganttRecord.uniqueID].ganttProperties.startDate &&
-                (args.action === "DrawConnectorLine") || (args.action === "DialogEditing")) {
+                (args.action === "DrawConnectorLine")) {
                 this.updateChildItems(ganttRecord);
             }
             this.updateParentItemOnEditing();
+            this.parent.dataOperation.updateParentItems(ganttRecord, true);
         }
         /** Update parent up-to zeroth level */
         if (ganttRecord.parentItem) {
@@ -24698,6 +25009,10 @@ class Edit$2 {
                 this.updateParentItemOnEditing();
             }
         }
+        if (this.parent.UpdateOffsetOnTaskbarEdit && this.parent.connectorLineEditModule && args.data) {
+            this.parent.connectorLineEditModule['calculateOffset'](args.data);
+        }
+        this.parent.predecessorModule['validatedParentIds'] = [];
         this.initiateSaveAction(args);
     }
     updateParentItemOnEditing() {
@@ -24717,7 +25032,7 @@ class Edit$2 {
      */
     updateParentChildRecord(data) {
         const ganttRecord = data;
-        if (ganttRecord.hasChildRecords && this.taskbarMoved && this.parent.taskMode === 'Auto' && (!isNullOrUndefined(this.parent.editModule.cellEditModule) && !this.parent.editModule.cellEditModule.isResourceCellEdited)) {
+        if (ganttRecord.hasChildRecords && this.taskbarMoved && (ganttRecord[this.parent.taskFields.manual] === false || this.parent.taskMode === 'Auto') && (!isNullOrUndefined(this.parent.editModule.cellEditModule) && !this.parent.editModule.cellEditModule.isResourceCellEdited)) {
             this.updateChildItems(ganttRecord);
         }
         if (!isNullOrUndefined(this.parent.editModule.cellEditModule)) {
@@ -25192,6 +25507,11 @@ class Edit$2 {
                 this.updateScheduleDatesOnEditing(args);
             }
         }
+        if (this.parent.enableCriticalPath) {
+            let criticalModule = this.parent.criticalPathModule;
+            criticalModule.showCriticalPath(true);
+            criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
         if (!this.parent.editSettings.allowTaskbarEditing || (this.parent.editSettings.allowTaskbarEditing &&
             !this.taskbarEditModule.dependencyCancel)) {
             eventArgs.requestType = 'save';
@@ -25205,11 +25525,6 @@ class Edit$2 {
                 eventArgs.taskBarEditAction = args.taskBarEditAction;
             }
             this.endEditAction(args);
-            if (this.parent.enableCriticalPath) {
-                let criticalModule = this.parent.criticalPathModule;
-                criticalModule.showCriticalPath(true);
-                criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
-            }
             this.parent.trigger('actionComplete', eventArgs);
             if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
                 this.parent.hideMaskRow();
@@ -25395,7 +25710,9 @@ class Edit$2 {
             if (!this.parent.taskFields.parentID) {
                 const deleteRecordIDs = [];
                 deleteRecordIDs.push(deletedRow.ganttProperties.rowUniqueID.toString());
-                this.parent.editModule.removeFromDataSource(deleteRecordIDs);
+                if (this.parent.viewType === 'ProjectView') {
+                    this.parent.editModule.removeFromDataSource(deleteRecordIDs);
+                }
             }
             const flatRecordIndex = this.parent.flatData.indexOf(deletedRow);
             if (gObj.taskFields.parentID) {
@@ -28512,7 +28829,20 @@ class Selection$1 {
      * @returns {Object[]} .
      */
     getSelectedRecords() {
-        return this.parent.treeGrid.getSelectedRecords();
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            let selectedRows = [];
+            let selectedIndexes = this.parent.selectionModule.getSelectedRowIndexes();
+            for (let i = 0; i < selectedIndexes.length; i++) {
+                const rec = this.parent.currentViewData.filter((data) => {
+                    return data.index == selectedIndexes[i];
+                })[0];
+                selectedRows.push(rec);
+            }
+            return selectedRows;
+        }
+        else {
+            return this.parent.treeGrid.getSelectedRecords();
+        }
     }
     /**
      * Get the selected records for cell selection.
@@ -29166,7 +29496,15 @@ class Toolbar$3 {
         let disableItems = [];
         const edit = gObj.editSettings;
         const gID = this.id;
-        const ind = gObj.selectedRowIndex;
+        let ind = gObj.selectedRowIndex;
+        if (!this.parent.loadChildOnDemand && this.parent.taskFields.hasChildMapping) {
+            for (let i = 0; i < gObj.updatedRecords.length; i++) {
+                if (gObj.updatedRecords[i].index === ind) {
+                    ind = i;
+                    break;
+                }
+            }
+        }
         let previousGanttRecord;
         const isSelected = gObj.selectionModule ? gObj.selectionModule.selectedRowIndexes.length === 1 ||
             gObj.selectionModule.getSelectedRowCellIndexes().length === 1 ? true : false : false;
@@ -29696,6 +30034,7 @@ class DayMarkers {
 /** @hidden */
 class CriticalPath {
     constructor(parent) {
+        this.validatedids = [];
         this.resourceCollectionIds = [];
         this.criticalTasks = [];
         this.parent = parent;
@@ -29722,6 +30061,7 @@ class CriticalPath {
             const collectionTaskId = [];
             const fromDataObject = [];
             let criticalPathIds = [];
+            this.criticalTasks = [];
             /* eslint-disable-next-line */
             if (parentRecords[0].ganttProperties.autoEndDate > parentRecords[0].ganttProperties.endDate && !parentRecords[0].ganttProperties.isAutoSchedule) {
                 checkEndDate = parentRecords[0].ganttProperties.autoEndDate;
@@ -29914,6 +30254,7 @@ class CriticalPath {
                 this.slackCalculation(fromDataObject, collection, collectionTaskId, checkEndDate, totalRecords, modelIds);
             }
             criticalPathIds = this.finalCriticalPath(collection, taskBeyondEnddate, totalRecords, modelIds, checkEndDate);
+            this.validatedids = [];
             this.criticalPathCollection = criticalPathIds;
             this.detailPredecessorCollection = collection;
             this.predecessorCollectionTaskIds = collectionTaskId;
@@ -30293,73 +30634,69 @@ class CriticalPath {
             return this.parent.dataOperation.getDuration(startDate, endDate, durationUnit, record.ganttProperties.isAutoSchedule, true);
         }
     }
-    /* eslint-disable-next-line */
-    finalCriticalPath(collection, taskBeyondEnddate, flatRecords, modelRecordIds, checkEndDate) {
-        let criticalPathIds = [];
-        let index;
-        let predecessorFrom;
-        const slackindexes = [];
-        const indexes = [];
-        for (let z = flatRecords.length - 1; z >= 0; z--) {
-            if (flatRecords[parseInt(z.toString(), 10)].slack === '0 day') {
-                const index1 = flatRecords[parseInt(z.toString(), 10)].index;
-                slackindexes.push(index1);
-            }
-        }
-        const num = 0;
-        indexes.push(slackindexes[parseInt(num.toString(), 10)]);
-        for (let j = 0; j < indexes.length; j++) {
-            const i = flatRecords[indexes[parseInt(j.toString(), 10)]].ganttProperties.predecessor;
-            if (!isNullOrUndefined(i)) {
-                for (let f = i.length - 1; f >= 0; f--) {
-                    if (this.parent.viewType === 'ProjectView') {
-                        const q = modelRecordIds.indexOf(i[parseInt(f.toString(), 10)]['from']);
-                        for (let k = 0; k < indexes.length; k++) {
-                            const item = indexes[parseInt(j.toString(), 10)];
-                            if (item !== q) {
-                                indexes.push(q);
-                            }
-                            break;
-                        }
+    updateCriticalTasks(record, criticalPathIds) {
+        for (let i = 0; i < record.ganttProperties.predecessor.length; i++) {
+            let fromRecord;
+            if (this.parent.viewType === 'ProjectView') {
+                fromRecord = this.parent.getRecordByID(record.ganttProperties.predecessor[i].from);
+            }
+            else {
+                let resourceIndex = this.resourceCollectionIds.indexOf(record.ganttProperties.predecessor[i].from.toString());
+                fromRecord = this.parent.flatData[resourceIndex];
+            }
+            let durationDiff;
+            if (record.ganttProperties.endDate.getTime() >= this.maxEndDate.getTime()) {
+                record.ganttProperties.slack = record.slack = 0 + ' ' + record.ganttProperties.durationUnit;
+                if (record.ganttProperties.progress < 100) {
+                    record.isCritical = true;
+                    record.ganttProperties.isCritical = true;
+                    if (criticalPathIds.indexOf(parseInt(record.ganttProperties.taskId)) == -1) {
+                        criticalPathIds.push(parseInt(record.ganttProperties.taskId));
                     }
-                    else {
-                        const q = this.resourceCollectionIds.indexOf(i[parseInt(f.toString(), 10)]['from']);
-                        for (let k = 0; k < indexes.length; k++) {
-                            const item = indexes[parseInt(j.toString(), 10)];
-                            if (item !== q) {
-                                indexes.push(q);
-                            }
-                            break;
-                        }
+                }
+            }
+            if (fromRecord) {
+                if (record.ganttProperties.predecessor[i].type == 'FS') {
+                    durationDiff = this.parent.dataOperation.getDuration(fromRecord.ganttProperties.endDate, record.ganttProperties.startDate, fromRecord.ganttProperties.durationUnit, fromRecord.ganttProperties.isAutoSchedule, true);
+                }
+                else if (record.ganttProperties.predecessor[i].type == 'SS') {
+                    durationDiff = this.parent.dataOperation.getDuration(fromRecord.ganttProperties.startDate, record.ganttProperties.startDate, fromRecord.ganttProperties.durationUnit, fromRecord.ganttProperties.isAutoSchedule, true);
+                }
+                else if (record.ganttProperties.predecessor[i].type == 'FF') {
+                    durationDiff = this.parent.dataOperation.getDuration(fromRecord.ganttProperties.endDate, record.ganttProperties.endDate, fromRecord.ganttProperties.durationUnit, fromRecord.ganttProperties.isAutoSchedule, true);
+                }
+                else if (record.ganttProperties.predecessor[i].type == 'SF') {
+                    durationDiff = this.parent.dataOperation.getDuration(record.ganttProperties.endDate, fromRecord.ganttProperties.startDate, fromRecord.ganttProperties.durationUnit, fromRecord.ganttProperties.isAutoSchedule, true);
+                }
+                if (durationDiff == 0 && this.validatedids.indexOf(parseInt(fromRecord.ganttProperties.taskId)) == -1 && fromRecord.ganttProperties.taskId != record.ganttProperties.taskId) {
+                    fromRecord.ganttProperties.slack = record.ganttProperties.slack;
+                    fromRecord.slack = record.slack;
+                    fromRecord.isCritical = record.ganttProperties.isCritical;
+                    fromRecord.ganttProperties.isCritical = record.ganttProperties.isCritical;
+                    if (criticalPathIds.indexOf(parseInt(fromRecord.ganttProperties.taskId)) == -1 && fromRecord.ganttProperties.isCritical && fromRecord.ganttProperties.progress < 100) {
+                        this.validatedids.push(parseInt(fromRecord.ganttProperties.taskId));
+                        criticalPathIds.push(parseInt(fromRecord.ganttProperties.taskId));
+                    }
+                    if (fromRecord.ganttProperties.predecessorsName) {
+                        this.updateCriticalTasks(fromRecord, criticalPathIds);
                     }
                 }
             }
         }
-        for (let x = 0; x < indexes.length; x++) {
+    }
+    /* eslint-disable-next-line */
+    finalCriticalPath(collection, taskBeyondEnddate, flatRecords, modelRecordIds, checkEndDate) {
+        let criticalPathIds = [];
+        let index;
+        let predecessorFrom;
+        for (let x = collection.length - 1; x >= 0; x--) {
             if (this.parent.viewType === 'ProjectView') {
-                index = modelRecordIds.indexOf(flatRecords[indexes[parseInt(x.toString(), 10)]]['ganttProperties']['taskId'].toString());
+                index = modelRecordIds.indexOf(collection[x]['taskid'].toString());
             }
             else {
-                index = this.resourceCollectionIds.indexOf(flatRecords[indexes[parseInt(x.toString(), 10)]]['TaskID'].toString());
+                index = this.resourceCollectionIds.indexOf(collection[x]['taskid'].toString());
             }
             const predecessorLength = flatRecords[index].ganttProperties.predecessor;
-            if (isNullOrUndefined(predecessorLength)) {
-                if (taskBeyondEnddate.length > 0) {
-                    for (let i = 0; i < taskBeyondEnddate.length; i++) {
-                        if (this.parent.viewType === 'ProjectView') {
-                            index = modelRecordIds.indexOf(taskBeyondEnddate[i].toString());
-                        }
-                        else {
-                            index = this.resourceCollectionIds.indexOf(taskBeyondEnddate[i].toString());
-                        }
-                        if (index !== -1 && flatRecords[index].ganttProperties.progress < 100) {
-                            this.criticalTasks.push(flatRecords[index]);
-                            criticalPathIds = criticalPathIds.concat(taskBeyondEnddate[i]);
-                        }
-                    }
-                }
-                break;
-            }
             const noSlackValue = 0 + ' ' + flatRecords[index].ganttProperties.durationUnit;
             for (let i = predecessorLength.length - 1; i >= 0; i--) {
                 let toID;
@@ -30372,6 +30709,7 @@ class CriticalPath {
                 let dateDifference;
                 const currentData = flatRecords[index].ganttProperties;
                 if (predecessorLength[i].type === 'FS') {
+                    /* eslint-disable-next-line */
                     if (predecessorLength[i].to != currentData.taskId.toString() || this.parent.viewType === 'ResourceView') {
                         /* eslint-disable-next-line */
                         dateDifference = this.parent.dataOperation.getDuration(currentData.endDate, flatRecords[toID].ganttProperties.startDate, currentData.durationUnit, currentData.isAutoSchedule, currentData.isMilestone);
@@ -30423,8 +30761,28 @@ class CriticalPath {
                     flatRecords[index].isCritical = true;
                     flatRecords[index].ganttProperties.isCritical = true;
                     this.criticalTasks.push(flatRecords[index]);
-                    const num = flatRecords[parseInt(index.toString(), 10)]['ganttProperties']['taskId'];
-                    criticalPathIds.push(num);
+                    if (criticalPathIds.indexOf(collection[x]['taskid']) === -1) {
+                        criticalPathIds.push(collection[x]['taskid']);
+                    }
+                }
+            }
+            if (flatRecords[index].ganttProperties.predecessor.length > 0) {
+                this.updateCriticalTasks(flatRecords[index], criticalPathIds);
+            }
+        }
+        if (taskBeyondEnddate.length > 0) {
+            for (let i = 0; i < taskBeyondEnddate.length; i++) {
+                if (this.parent.viewType === 'ProjectView') {
+                    index = modelRecordIds.indexOf(taskBeyondEnddate[i].toString());
+                }
+                else {
+                    index = this.resourceCollectionIds.indexOf(taskBeyondEnddate[i].toString());
+                }
+                if (index !== -1 && flatRecords[index].ganttProperties.progress < 100) {
+                    this.criticalTasks.push(flatRecords[index]);
+                    if (criticalPathIds.indexOf(taskBeyondEnddate[i]) === -1) {
+                        criticalPathIds = criticalPathIds.concat(taskBeyondEnddate[i]);
+                    }
                 }
             }
         }
@@ -30469,7 +30827,7 @@ class CriticalPath {
                 }
             }
             /* eslint-disable-next-line */
-            if (this.parent.allowUnscheduledTasks && !criticalData[columnFields.startDate] && !criticalData[columnFields.endDate] && criticalData[columnFields.duration]) {
+            if (this.parent.allowUnscheduledTasks && criticalData && !criticalData[columnFields.startDate] && !criticalData[columnFields.endDate] && criticalData[columnFields.duration]) {
                 taskClass = criticalUnscheduledTask;
             }
             else {
@@ -31516,8 +31874,16 @@ class RowDD$1 {
         const dragElement = this.parent.element.querySelector('.e-ganttdrag');
         const ganttTop = this.parent.element.getClientRects()[0].top;
         const ganttLeft = this.parent.element.getClientRects()[0].left;
-        const left = getValue('event', args.originalEvent).clientX - ganttLeft;
-        const top = getValue('event', args.originalEvent).clientY - ganttTop;
+        let left;
+        let top;
+        if (this.parent.isAdaptive) {
+            left = args.originalEvent.event.touches[0].clientX - ganttLeft;
+            top = args.originalEvent.event.touches[0].clientY - ganttTop;
+        }
+        else {
+            left = getValue('event', args.originalEvent).clientX - ganttLeft;
+            top = getValue('event', args.originalEvent).clientY - ganttTop;
+        }
         dragElement.style.left = left + 20 + 'px';
         dragElement.style.top = top + 20 + 'px';
         this.parent.trigger('rowDrag', args);
@@ -32370,6 +32736,8 @@ class PdfGanttTheme {
                 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);
@@ -32390,6 +32758,8 @@ class PdfGanttTheme {
                 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);
@@ -32412,6 +32782,8 @@ class PdfGanttTheme {
                 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);
@@ -32432,6 +32804,8 @@ class PdfGanttTheme {
                 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);
@@ -32926,7 +33300,7 @@ class PdfTreeGridLayouter extends ElementLayouter {
         let startColumn = 0;
         let endColumn = 0;
         let cellWidths = 0;
-        const availableWidth = this.currentGraphics.clientSize.width - this.currentBounds.x;
+        const availableWidth = pointToPixel(this.currentGraphics.clientSize.width) - this.currentBounds.x;
         for (let i = 0; i < this.treegrid.columns.count; i++) {
             cellWidths += this.treegrid.columns.getColumn(i).width;
             if (cellWidths >= availableWidth) {
@@ -33154,6 +33528,7 @@ class PdfTreeGridLayouter extends ElementLayouter {
                 let 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;
@@ -33506,12 +33881,15 @@ class PdfTreeGrid extends PdfLayoutElement {
                         colSpan = cell.columnSpan;
                         currentCellIndex = j;
                         cell.isCellMergeStart = true;
+                        let 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;
@@ -33576,15 +33954,12 @@ class PdfTreeGrid extends PdfLayoutElement {
                         colSpan = cell.columnSpan;
                         currentCellIndex = j;
                         cell.isCellMergeStart = true;
-                        let 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;
@@ -33787,11 +34162,11 @@ class PdfTreeGridCell {
             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;
         }
@@ -34427,8 +34802,99 @@ class PdfTreeGridColumnCollection {
  */
 class ExportHelper {
     constructor(parent) {
+        this.totalColumnWidth = 0;
+        this.beforeSinglePageExport = {};
+        this.baselineHeight = 8;
         this.parent = parent;
     }
+    processToFit() {
+        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();
+        const timeDifference = (this.parent.cloneProjectEndDate.getTime() - this.parent.cloneProjectStartDate.getTime());
+        const totalDays = (timeDifference / (1000 * 3600 * 24));
+        let chartsideWidth;
+        let 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;
+            }
+        }
+        const pdfwidth = (this.parent.pdfExportModule['pdfPageDimensions'].width * chartsideWidth) / 100;
+        const chartWidth = pdfwidth;
+        const perDayWidth = chartWidth / totalDays;
+        let zoomingLevel;
+        let firstValue;
+        let secondValue;
+        const zoomingCollections = [...this.parent.zoomingLevels];
+        const sortedCollectons = zoomingCollections.sort((a, b) => (!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 (let 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;
+            }
+        }
+        const 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);
+        const numberOfCells = this.parent.timelineModule['calculateNumberOfTimelineCells'](newTimeline);
+        const scrollHeight = this.parent.pdfExportModule['pdfPageDimensions'].height; //17 is horizontal scrollbar width
+        const contentHeight = this.parent.pdfExportModule['pdfPageDimensions'].height;
+        const 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 .
@@ -34450,11 +34916,16 @@ class ExportHelper {
         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;
     }
     processHeaderContent() {
         this.rowIndex++;
@@ -34508,7 +34979,9 @@ class ExportHelper {
             this.renderEmptyGantt();
         }
         else {
-            this.flatData.forEach((data) => {
+            let flatData;
+            flatData = this.flatData;
+            flatData.forEach((data) => {
                 this.row = this.gantt.rows.addRow();
                 if (data.hasChildRecords) {
                     this.gantt.rows.getRow(this.rowIndex).isParentRow = true;
@@ -34517,6 +34990,9 @@ class ExportHelper {
                 else {
                     this.processRecordRow(data);
                 }
+                if (this.exportProps.fitToWidthSettings && this.exportProps.fitToWidthSettings.isFitToWidth) {
+                    this.row.height = 33.33;
+                }
                 this.rowIndex++;
             });
         }
@@ -34567,7 +35043,7 @@ class ExportHelper {
                 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;
@@ -34630,7 +35106,9 @@ class ExportHelper {
      * @returns {void} .
      */
     processTaskbar() {
-        this.flatData.forEach((data) => {
+        let flatData;
+        flatData = this.flatData;
+        flatData.forEach((data) => {
             const taskbar = this.gantt.taskbar.add();
             const ganttProp = data.ganttProperties;
             taskbar.left = ganttProp.left;
@@ -34661,7 +35139,22 @@ class ExportHelper {
             taskbar.startDate = ganttProp.startDate;
             taskbar.endDate = ganttProp.endDate;
             taskbar.height = this.parent.chartRowsModule.taskBarHeight;
+            if (this.parent.renderBaseline) {
+                let height;
+                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) {
@@ -34692,6 +35185,7 @@ class ExportHelper {
                     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);
@@ -34699,6 +35193,8 @@ class ExportHelper {
                     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);
             const taskStyle = {};
@@ -34707,6 +35203,8 @@ class ExportHelper {
             taskStyle.taskBorderColor = taskbar.taskBorderColor;
             taskStyle.progressColor = taskbar.progressColor;
             taskStyle.milestoneColor = taskbar.milestoneColor;
+            taskStyle.baselineColor = taskbar.baselineColor;
+            taskStyle.baselineBorderColor = taskbar.baselineBorderColor;
             const args = {
                 taskbar: taskStyle,
                 data: data
@@ -34718,6 +35216,8 @@ class ExportHelper {
                 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;
             }
         });
     }
@@ -34865,6 +35365,26 @@ class ExportHelper {
         const widths = [];
         const treeColumnIndex = 0;
         const tWidth = (this.pdfDoc.pageSettings.width - 82);
+        if (this.exportProps && this.exportProps.fitToWidthSettings && this.exportProps.fitToWidthSettings.isFitToWidth) {
+            let gridWidth;
+            if (this.exportProps.fitToWidthSettings.gridWidth) {
+                gridWidth = parseInt(this.exportProps.fitToWidthSettings.gridWidth.split('%')[0]);
+            }
+            else {
+                if (this.exportProps.fitToWidthSettings.chartWidth) {
+                    let chartWidth = parseInt(this.exportProps.fitToWidthSettings.chartWidth.split('%')[0]);
+                    gridWidth = 100 - chartWidth;
+                }
+                else {
+                    gridWidth = 30;
+                }
+            }
+            const pdfwidth = (this.parent.pdfExportModule['pdfPageDimensions'].width * gridWidth) / 100;
+            const perColumnWidth = pdfwidth / this.gantt.columns.columns.length;
+            for (let 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;
         }
@@ -34979,6 +35499,8 @@ class ExportValueFormatter {
  */
 class PdfGanttTaskbarCollection {
     constructor(parent) {
+        /** Defines the task baselineHeight . */
+        this.baselineHeight = 8;
         /**
          * @private
          */
@@ -35025,6 +35547,7 @@ class PdfGanttTaskbarCollection {
         //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) {
@@ -35032,6 +35555,11 @@ class PdfGanttTaskbarCollection {
                 startPoint.y = pixelToPoint(this.parent.timelineModule.isSingleTier ? 45 : 60);
             }
             isNextPage = true;
+            const graphics = page.graphics;
+            const 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
@@ -35055,9 +35583,13 @@ class PdfGanttTaskbarCollection {
         if (!taskbar.isMilestone) {
             const taskbarPen = new PdfPen(taskbar.taskBorderColor);
             const taskBrush = new PdfSolidBrush(taskbar.taskColor);
+            const baselinePen = new PdfPen(taskbar.baselineBorderColor);
+            const baselineBrush = new PdfSolidBrush(taskbar.baselineColor);
             const progressPen = new PdfPen(taskbar.progressColor);
             const progressBrush = new PdfSolidBrush(taskbar.progressColor);
-            const adjustHeight = pixelToPoint((this.parent.rowHeight - this.height) / 2.0);
+            const adjustHeightforTaskbar = pixelToPoint((this.parent.rowHeight - this.height) / 2.0);
+            var adjustHeightforBaseline = pixelToPoint((this.parent.rowHeight - this.height) / 4.5);
+            const adjustHeight = this.parent.renderBaseline ? adjustHeightforBaseline : adjustHeightforTaskbar;
             pageIndex = page.section.indexOf(page);
             const startDate = isNullOrUndefined(this.unscheduleStarteDate) ? this.startDate : this.unscheduleStarteDate;
             const endDate = isNullOrUndefined(this.unscheduleEndDate) ? this.endDate : this.unscheduleEndDate;
@@ -35071,6 +35603,9 @@ class PdfGanttTaskbarCollection {
                     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));
@@ -35102,6 +35637,9 @@ class PdfGanttTaskbarCollection {
                     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) {
@@ -35133,6 +35671,9 @@ class PdfGanttTaskbarCollection {
                     this.taskStartPoint = Object.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));
@@ -35154,6 +35695,9 @@ class PdfGanttTaskbarCollection {
                     this.taskStartPoint = Object.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) {
                     let progressBoundsWidth = 0;
@@ -35179,6 +35723,9 @@ class PdfGanttTaskbarCollection {
         }
         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;
@@ -35337,13 +35884,20 @@ class PdfGanttTaskbarCollection {
             const pageIndex = page.section.indexOf(page);
             this.taskStartPoint = Object.assign({}, startPoint);
             const milestonePen = new PdfPen(this.milestoneColor);
-            const adjustHeight = pixelToPoint(((this.parent.rowHeight - this.height) / 2.0));
+            const adjustHeightforBaselineMilesone = pixelToPoint(((this.parent.rowHeight - this.height) / 3.0));
+            const adjustHeightforMilesone = pixelToPoint(((this.parent.rowHeight - this.height) / 2.0));
+            const adjustHeight = this.parent.renderBaseline ? adjustHeightforBaselineMilesone : adjustHeightforMilesone;
             const milestoneBrush = new PdfSolidBrush(this.milestoneColor);
+            const baselinePen = new PdfPen(this.baselineBorderColor);
+            const baselineBrush = new PdfSolidBrush(this.baselineColor);
             taskGraphics.save(); //saving graphics state
-            const height = Math.floor(this.parent.chartRowsModule.taskBarHeight * 0.6);
+            const 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;
@@ -35373,7 +35927,7 @@ class PdfTimeline {
      * @returns {void}
      */
     drawTimeline(page, startPoint, detail) {
-        let remainWidth = Math.floor(detail.totalWidth);
+        let remainWidth = pointToPixel(Math.floor(detail.totalWidth));
         let renderWidth = 0;
         this.topTierPoint.x = startPoint.x;
         this.topTierPoint.y = startPoint.y;
@@ -35401,7 +35955,7 @@ class PdfTimeline {
                 //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++;
@@ -35427,7 +35981,7 @@ class PdfTimeline {
                 //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) {
@@ -35458,7 +36012,7 @@ class PdfTimeline {
                     //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;
                 }
             }
         }
@@ -35471,7 +36025,7 @@ class PdfTimeline {
                     //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;
                 }
             }
         }
@@ -35518,7 +36072,10 @@ class PdfTimeline {
         const e = eventArgs.timelineCell;
         const rectPen = new PdfPen(eventArgs.timelineCell.borderColor);
         const 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);
+        }
         let font = new PdfStandardFont(ganttStyle.fontFamily, e.fontSize, e.fontStyle);
         if (ganttStyle.font) {
             font = ganttStyle.font;
@@ -35527,7 +36084,13 @@ class PdfTimeline {
         const pLeft = ganttStyle.timeline.padding ? eventArgs.timelineCell.padding.left : 0;
         const 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);
     }
 }
 
@@ -35682,7 +36245,9 @@ class PdfGanttPredecessor {
                 }
                 break;
         }
-        let midPoint = Math.round((this.parent.rowHeight - 1) / 2.0);
+        const midPointforTaskbar = Math.round((this.parent.rowHeight - 1) / 2.0);
+        const midPointforBaseline = Math.round((this.parent.rowHeight - 10) / 2.0);
+        let midPoint = this.parent.renderBaseline ? midPointforBaseline : midPointforTaskbar;
         midPoint = pixelToPoint(midPoint);
         /* eslint-disable-next-line */
         let point1, point2, point3, point4, point5, point6;
@@ -36145,6 +36710,7 @@ class PdfGantt extends PdfTreeGrid {
         let pageData;
         this.headerDetails.forEach((detail, index) => {
             const 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;
@@ -36155,6 +36721,11 @@ class PdfGantt extends PdfTreeGrid {
                 const task = this.taskbarCollection[i];
                 const rowHeight = this.rows.getRow(i + 1).height;
                 const pdfPage = this.result.page.section.getPages()[this.startPageIndex];
+                const graphics = pdfPage.graphics;
+                const 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 */
                 const isNextPage = task.drawTaskbar(pdfPage, taskbarPoint, detail, cumulativeWidth, rowHeight, this.taskbarCollection[i]);
                 if (isNextPage) {
@@ -36286,11 +36857,23 @@ class PdfExport {
         if (isNullOrUndefined(pdfExportProperties)) {
             pdfExportProperties = {};
         }
-        if (pdfExportProperties.exportType === 'CurrentViewData') {
-            data = this.parent.currentViewData;
+        if (pdfExportProperties.fitToWidthSettings && pdfExportProperties.fitToWidthSettings.isFitToWidth) {
+            if (pdfExportProperties.exportType === 'CurrentViewData') {
+                this.helper.beforeSinglePageExport['cloneFlatData'] = extend([], this.parent.currentViewData, null, true);
+            }
+            else {
+                this.helper.beforeSinglePageExport['cloneFlatData'] = extend([], this.parent.flatData, null, true);
+            }
+            this.helper.beforeSinglePageExport['cloneCurrentViewData'] = extend([], this.parent.currentViewData, null, true);
+            data = this.helper.beforeSinglePageExport['cloneFlatData'];
         }
         else {
-            data = this.parent.flatData;
+            if (pdfExportProperties.exportType === 'CurrentViewData') {
+                data = this.parent.currentViewData;
+            }
+            else {
+                data = this.parent.flatData;
+            }
         }
         this.initGantt();
         if (!isNullOrUndefined(pdfDoc)) {
@@ -36314,6 +36897,7 @@ class PdfExport {
         const section = this.pdfDocument.sections.add();
         this.processSectionExportProperties(section, pdfExportProperties);
         const pdfPage = section.pages.add();
+        this.pdfPageDimensions = pdfPage.getClientSize();
         /* eslint-disable-next-line */
         return new Promise((resolve, reject) => {
             this.helper.processGridExport(data, this.gantt, pdfExportProperties);
@@ -36324,6 +36908,26 @@ class PdfExport {
             format.break = PdfLayoutBreakType.FitElement;
             const layouter = this.gantt.drawGrid(pdfPage, 0, 0, format);
             this.gantt.drawChart(layouter);
+            if (this.helper.exportProps && this.helper.exportProps.fitToWidthSettings && this.helper.exportProps.fitToWidthSettings.isFitToWidth) {
+                this.parent.zoomingProjectStartDate = this.helper.beforeSinglePageExport['zoomingProjectStartDate'];
+                this.parent.zoomingProjectEndDate = this.helper.beforeSinglePageExport['zoomingProjectEndDate'];
+                this.parent.cloneProjectStartDate = this.helper.beforeSinglePageExport['cloneProjectStartDate'];
+                this.parent.cloneProjectEndDate = this.helper.beforeSinglePageExport['cloneProjectEndDate'];
+                this.parent.timelineModule.customTimelineSettings = this.helper.beforeSinglePageExport['customTimelineSettings'];
+                this.parent.isTimelineRoundOff = this.helper.beforeSinglePageExport['isTimelineRoundOff'];
+                this.parent.timelineModule.topTier = this.helper.beforeSinglePageExport['topTier'];
+                this.parent.timelineModule.topTierCellWidth = this.helper.beforeSinglePageExport['topTierCellWidth'];
+                this.parent.timelineModule.topTierCollection = this.helper.beforeSinglePageExport['topTierCollection'];
+                this.parent.timelineModule.bottomTier = this.helper.beforeSinglePageExport['bottomTier'];
+                this.parent.timelineModule.bottomTierCellWidth = this.helper.beforeSinglePageExport['bottomTierCellWidth'];
+                this.parent.timelineModule.bottomTierCollection = this.helper.beforeSinglePageExport['bottomTierCollection'];
+                this.parent.timelineModule.totalTimelineWidth = this.helper.beforeSinglePageExport['totalTimelineWidth'];
+                this.parent.timelineModule.timelineStartDate = this.helper.beforeSinglePageExport['timelineStartDate'];
+                this.parent.timelineModule.timelineEndDate = this.helper.beforeSinglePageExport['timelineEndDate'];
+                this.parent.timelineModule.timelineRoundOffEndDate = this.helper.beforeSinglePageExport['timelineRoundOffEndDate'];
+                this.parent.perDayWidth = this.helper.beforeSinglePageExport['perDayWidth'];
+                this.parent.updatedConnectorLineCollection = this.helper.beforeSinglePageExport['updatedConnectorLineCollection'];
+            }
             if (!isMultipleExport) {
                 if (!this.isBlob) {
                     // save the PDF