@syncfusion/ej2-gantt 19.4.55 → 20.1.48

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

@@ -484,7 +484,6 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
             tDuration = this.parent.editModule.taskbarEditModule.sumOfDuration(ganttProperties.segments);
         }
         else {
-            // eslint-disable-next-line
             if (!isNullOrUndefined(ganttProperties.startDate) && !isNullOrUndefined(ganttProperties.endDate) &&
                 (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && !isNullOrUndefined(ganttData.taskData[this.parent.taskFields.milestone])) {
                 tDuration = 1;
@@ -4130,6 +4129,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         this.chartTimelineContainer = null;
         this.rangeViewContainer =
             createElement('div', { className: rangeContainer });
+        this.rangeViewContainer.setAttribute("role", "RangeContainer");
         this.virtualRender = new VirtualContentRenderer(this.parent);
         this.addEventListener();
     }
@@ -4284,6 +4284,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
     GanttChart.prototype.renderTimelineContainer = function () {
         this.chartTimelineContainer =
             createElement('div', { className: timelineHeaderContainer });
+        this.chartTimelineContainer.setAttribute("role", "TimelineHeader");
         this.chartElement.appendChild(this.chartTimelineContainer);
     };
     /**
@@ -4323,8 +4324,19 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         //empty row height
         var emptydivHeight = 36;
         var emptyHeight = this.parent.contentHeight === 0 ? this.parent.flatData.length > 1 ? emptydivHeight : 0 : this.parent.contentHeight;
-        this.chartBodyContent.style.height = formatUnit(emptyHeight);
-        //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
+        var contentElement = this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
+        if (emptyHeight >= contentElement['offsetHeight'] || this.parent.height === 'auto') {
+            this.chartBodyContent.style.height = formatUnit(emptyHeight);
+        }
+        else {
+            var scrollHeight = this.parent.element.getElementsByClassName('e-chart-rows-container')[0]['offsetHeight'];
+            if (contentElement['offsetHeight'] >= scrollHeight) {
+                this.chartBodyContent.style.height = contentElement['offsetHeight'] - 17 + 'px';
+            }
+            else {
+                this.chartBodyContent.style.height = contentElement['offsetHeight'] + 'px';
+            }
+        } //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
         this.chartBodyContent.style.width = formatUnit(this.parent.timelineModule.totalTimelineWidth);
         this.setVirtualHeight();
         this.parent.notify('updateHeight', {});
@@ -4356,7 +4368,21 @@ var GanttChart = /** @__PURE__ @class */ (function () {
             if (this.chartBodyContent.clientHeight < this.chartBodyContainer.clientHeight) {
                 if (lastRow) {
                     addClass(lastRow.querySelectorAll('td'), 'e-lastrow');
-                    this.chartBodyContent.style.height = formatUnit(this.parent.contentHeight + 1);
+                    var emptydivHeight = 36;
+                    var emptyHeight = this.parent.contentHeight === 0 ? this.parent.flatData.length > 1 ? emptydivHeight : 0 : this.parent.contentHeight;
+                    var contentElement = this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
+                    if (emptyHeight >= contentElement['offsetHeight']) {
+                        this.chartBodyContent.style.height = formatUnit(emptyHeight);
+                    }
+                    else {
+                        var scrollHeight = this.parent.element.getElementsByClassName('e-chart-rows-container')[0]['offsetHeight'];
+                        if (contentElement['offsetHeight'] >= scrollHeight) {
+                            this.chartBodyContent.style.height = contentElement['offsetHeight'] - 17 + 'px';
+                        }
+                        else {
+                            this.chartBodyContent.style.height = contentElement['offsetHeight'] + 'px';
+                        }
+                    }
                 }
             }
         }
@@ -4488,7 +4514,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
             var target = e.target;
             var isOnTaskbarElement = e.target.classList.contains(taskBarMainContainer)
                 || closest(e.target, '.' + taskBarMainContainer);
-            if (closest(target, '.e-gantt-parent-taskbar')) {
+            if (closest(target, '.e-gantt-parent-taskbar') && !this.parent.editSettings.allowEditing) {
                 this.chartExpandCollapseRequest(e);
             }
             else if (!isOnTaskbarElement && this.parent.autoFocusTasks) {
@@ -5012,6 +5038,10 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                 $target.classList.contains('e-headercell') || $target.closest('.e-segmented-taskbar')) {
                 e.preventDefault();
             }
+            if (isTab && $target.classList.contains('e-rowdragdrop')) {
+                this.parent.treeGrid.grid.notify('key-pressed', e);
+                return;
+            }
             if ($target.classList.contains('e-rowcell') && (nextElement && nextElement.classList.contains('e-rowcell')) ||
                 $target.classList.contains('e-headercell')) { // eslint-disable-line                                                                                                                                                                                                                                    
                 if (isTab) {
@@ -5054,7 +5084,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                     else {
                         this.manageFocus($target, 'remove', true);
                     }
-                    if (nextElement.classList.contains('e-rowcell')) {
+                    if (nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) {
                         if (!$target.classList.contains('e-rowcell')) {
                             this.parent.treeGrid.grid.notify('key-pressed', e);
                             var fmodule = getValue('focusModule', this.parent.treeGrid.grid);
@@ -5433,6 +5463,9 @@ var Timeline = /** @__PURE__ @class */ (function () {
                 }
             }
         }
+        currentLevel = this.parent.zoomingLevels.findIndex(function (tempLevel) {
+            return tempLevel.level === currentLevel;
+        });
         var newTimeline = this.parent.zoomingLevels[currentLevel];
         var args = {
             requestType: isZoomIn ? 'beforeZoomIn' : 'beforeZoomOut',
@@ -6150,6 +6183,40 @@ var Timeline = /** @__PURE__ @class */ (function () {
         } while ((startDate < endDate));
         return parentTh;
     };
+    Timeline.prototype.updateTimelineAfterZooming = function (endDate, resized) {
+        var timeDiff;
+        var perDayWidth;
+        var totWidth;
+        var contentElement = document.getElementsByClassName('e-chart-scroll-container e-content')[0];
+        if (!isNullOrUndefined(contentElement)) {
+            var contentWidth = contentElement['offsetWidth'];
+            var contentHeight = contentElement['offsetHeight'];
+            var scrollHeight = document.getElementsByClassName('e-chart-rows-container')[0]['offsetHeight'];
+            timeDiff = Math.abs(this.timelineStartDate.getTime() - endDate.getTime());
+            timeDiff = timeDiff / (1000 * 3600 * 24);
+            if (this.bottomTier === 'None') {
+                perDayWidth = this.getPerDayWidth(this.customTimelineSettings.timelineUnitSize, this.customTimelineSettings.topTier.count, this.topTier);
+            }
+            else {
+                perDayWidth = this.getPerDayWidth(this.customTimelineSettings.timelineUnitSize, this.customTimelineSettings.bottomTier.count, this.bottomTier);
+            }
+            if (contentHeight < scrollHeight) {
+                totWidth = (perDayWidth * timeDiff) + 17;
+            }
+            else {
+                totWidth = (perDayWidth * timeDiff);
+            }
+            if (contentWidth >= totWidth) {
+                var widthDiff = contentWidth - totWidth;
+                widthDiff = Math.round(widthDiff / perDayWidth);
+                endDate.setDate(endDate.getDate() + widthDiff);
+                this.parent.timelineModule.timelineEndDate = endDate;
+                if (resized) {
+                    this.parent.updateProjectDates(this.timelineStartDate, this.timelineEndDate, this.parent.isTimelineRoundOff);
+                }
+            }
+        }
+    };
     Timeline.prototype.getTimelineRoundOffEndDate = function (date) {
         var tierMode = this.topTier === 'None' ? this.bottomTier : this.topTier;
         var endDate = new Date(date.toString());
@@ -6164,6 +6231,9 @@ var Timeline = /** @__PURE__ @class */ (function () {
                 endDate.setHours(24, 0, 0, 0);
             }
         }
+        if (this.isZooming || this.parent.isLoad) {
+            this.updateTimelineAfterZooming(endDate, false);
+        }
         return endDate;
     };
     /**
@@ -6233,7 +6303,6 @@ var Timeline = /** @__PURE__ @class */ (function () {
         }
         return increment;
     };
-    
     /**
      * Method to find header cell was weekend or not
      *
@@ -6815,6 +6884,8 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
     GanttTreeGrid.prototype.renderTreeGrid = function () {
         this.composeProperties();
         this.bindEvents();
+        var root = 'root';
+        this.parent.treeGrid[root] = this.parent[root] ? this.parent[root] : this.parent;
         this.parent.treeGrid.appendTo(this.treeGridElement);
         this.wireEvents();
     };
@@ -6878,7 +6949,7 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
         var scrollWidth = this.getScrollbarWidth();
         var isMobile = /Android|Mac|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         if (scrollWidth !== 0) {
-            content.style.cssText += 'width: calc(100% + ' + scrollWidth + 'px);';
+            content.style.cssText += 'width: calc(100% + ' + (scrollWidth + 1) + 'px);';
         }
         else {
             content.classList.add('e-gantt-scroll-padding');
@@ -8222,7 +8293,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         _this.milestoneHeight = 0;
         _this.milesStoneRadius = 0;
         _this.baselineTop = 0;
-        _this.baselineHeight = 3;
+        _this.baselineHeight = 8;
         _this.touchLeftConnectorpoint = '';
         _this.touchRightConnectorpoint = '';
         _this.dropSplit = false;
@@ -8305,7 +8376,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.getIndicatorNode = function (indicator) {
-        var templateString = '<label class="' + label + ' ' + taskIndicatorDiv + '"  style="line-height:'
+        var templateString = '<label class="' + label + ' ' + taskIndicatorDiv + '" role="LabelIndicator" style="line-height:'
             + (this.parent.rowHeight) + 'px;' +
             'left:' + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
         return this.createDivElement(templateString);
@@ -8378,9 +8449,9 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 }
                 else {
                     taskLabel$$1 = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.viewType === 'ResourceView' ? 'left;' : ';') +
-                        'display:' + (this.parent.viewType === 'ResourceView' ? 'inline-flex;' : ';') +
-                        'width:' + (this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'text-align: left;' : '') +
+                        +(this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
+                        +(this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
                 }
             }
@@ -8797,7 +8868,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
      */
     ChartRows.prototype.getTaskBaselineNode = function () {
         var data = this.templateData;
-        var template = '<div class="' + baselineBar + ' ' + '" style="margin-top:' + this.baselineTop +
+        var template = '<div class="' + baselineBar + ' ' + '" role="BaselineBar" style="margin-top:' + this.baselineTop +
             'px;left:' + data.ganttProperties.baselineLeft + 'px;' +
             'width:' + data.ganttProperties.baselineWidth + 'px;height:' +
             this.baselineHeight + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + '"></div>';
@@ -8811,9 +8882,10 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
      */
     ChartRows.prototype.getMilestoneBaselineNode = function () {
         var data = this.templateData;
+        var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         var template = '<div class="' + baselineMilestoneContainer + ' ' + '" style="' +
             'left:' + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
-            'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + 2) +
+            'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) +
             'px">' + '<div class="' + baselineMilestoneDiv + '">' + '<div class="' + baselineMilestoneDiv +
             ' ' + baselineMilestoneTop + '"  ' +
             'style="top:' + (-this.milestoneHeight) + 'px;border-right:' + this.milesStoneRadius +
@@ -8841,7 +8913,9 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
      */
     ChartRows.prototype.getLeftLabelNode = function (i) {
         var leftLabelNode = this.leftLabelContainer();
-        leftLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('left'));
+        if (this.generateTaskLabelAriaLabel('left') !== "") {
+            leftLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('left'));
+        }
         var leftLabelTemplateNode = null;
         if (this.leftTaskLabelTemplateFunction) {
             leftLabelTemplateNode = this.leftTaskLabelTemplateFunction(extend({ index: i }, this.templateData), this.parent, 'LeftLabelTemplate', this.getTemplateID('LeftLabelTemplate'), false, undefined, leftLabelNode[0], this.parent.treeGrid['root']);
@@ -8863,9 +8937,10 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         return leftLabelNode;
     };
     ChartRows.prototype.getLableText = function (labelString, labelDiv) {
+        var leftLabelHeight = this.parent.renderBaseline ? ((this.parent.rowHeight - this.taskBarHeight) / 2) : this.taskBarMarginTop;
         var templateString = createElement('div', {
             className: labelDiv, styles: 'height:' + (this.taskBarHeight) + 'px;' +
-                'margin-top:' + this.taskBarMarginTop + 'px;'
+                'margin-top:' + leftLabelHeight + 'px;'
         });
         var spanElem = createElement('span', { className: label });
         var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
@@ -8884,7 +8959,9 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
      */
     ChartRows.prototype.getRightLabelNode = function (i) {
         var rightLabelNode = this.rightLabelContainer();
-        rightLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('right'));
+        if (this.generateTaskLabelAriaLabel('right') !== "") {
+            rightLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('right'));
+        }
         var rightLabelTemplateNode = null;
         if (this.rightTaskLabelTemplateFunction) {
             rightLabelTemplateNode = this.rightTaskLabelTemplateFunction(extend({ index: i }, this.templateData), this.parent, 'RightLabelTemplate', this.getTemplateID('RightLabelTemplate'), false, undefined, rightLabelNode[0], this.parent.treeGrid['root']);
@@ -8997,8 +9074,10 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 else {
                     labelDiv = this.createDivElement('<span class="' +
                         taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; display:' + (this.parent.viewType === 'ResourceView' ? 'inline-flex;' : ';') + 'width:' +
-                        (this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : ';') + 'px; height:' +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
+                        (this.parent.viewType === 'ResourceView' ? 'width:' + (data.ganttProperties.width - 10) : '') + 'px; height:' +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'display: inline-flex;' : '') +
+                        (this.parent.viewType === 'ResourceView' ? 'width:' + (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>');
                 }
                 progressBarInnerDiv[0].appendChild([].slice.call(labelDiv)[0]);
@@ -9027,10 +9106,10 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         var className = (this.parent.gridLines === 'Horizontal' || this.parent.gridLines === 'Both') ?
             'e-chart-row-border' : '';
         table.innerHTML = '<tr class="' + this.getRowClassName(this.templateData) + ' ' + chartRow + '"' +
-            'style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
+            'role="ChartRow" style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
             this.parent.rowHeight + 'px;">' +
             '<td class="' + chartRowCell + ' ' + className
-            + '" style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
+            + '" role="ChartCell" style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
         return table.childNodes;
     };
     /**
@@ -9095,7 +9174,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     };
     ChartRows.prototype.leftLabelContainer = function () {
         var template = '<div class="' + ((this.leftTaskLabelTemplateFunction) ? leftLabelTempContainer :
-            leftLabelContainer) + ' ' + '" tabindex="-1" style="height:' +
+            leftLabelContainer) + ' ' + '" tabindex="-1" role="LeftLabel" style="height:' +
             (this.parent.rowHeight - 2) + 'px;width:' + this.taskNameWidth(this.templateData) + '"></div>';
         return this.createDivElement(template);
     };
@@ -9107,7 +9186,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         var template = '<div class="' + taskBarMainContainer + ' ' +
             this.parent.getUnscheduledTaskClass(data.ganttProperties) + ' ' +
             ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
-            ' tabindex="-1" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
+            ' tabindex="-1" role="TaskBar" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
             ('width:' + this.milestoneHeight + 'px;height:' +
                 this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;left:' + (data.ganttProperties.left -
                 (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
@@ -9118,26 +9197,26 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     };
     ChartRows.prototype.rightLabelContainer = function () {
         var template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? rightLabelTempContainer :
-            rightLabelContainer) + '" ' + ' tabindex="-1" style="left:' + this.getRightLabelLeft(this.templateData) + 'px;height:'
+            rightLabelContainer) + '" ' + ' tabindex="-1" role="RightLabel" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
             + (this.parent.rowHeight - 2) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarLeftResizer = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + taskBarLeftResizer + ' ' + icon + '"' +
-            ' style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            ' role="LeftResizer" style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarRightResizer = function () {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + taskBarRightResizer + ' ' + icon + '"' +
-            ' style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
+            ' role="RightResizer" style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarProgressResizer = function () {
         var template = '<div class="' + childProgressResizer + '"' +
-            ' style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
+            ' role="ProgressResizer" style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + progressBarHandler + '"' +
             '><div class="' + progressHandlerElement + '"></div>' +
             '<div class="' + progressBarHandlerAfter + '"></div></div>';
@@ -9335,10 +9414,13 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.initChartHelperPrivateVariable = function () {
+        var taskbarHeightValue = this.parent.renderBaseline ? 0.45 : 0.62;
+        var taskBarMarginTopValue = this.parent.renderBaseline ? 4 : 2;
+        var milestoneHeightValue = this.parent.renderBaseline ? 1.13 : 0.82;
         this.baselineColor = !isNullOrUndefined(this.parent.baselineColor) &&
             this.parent.baselineColor !== '' ? this.parent.baselineColor : null;
         this.taskBarHeight = isNullOrUndefined(this.parent.taskbarHeight) || this.parent.taskbarHeight >= this.parent.rowHeight ?
-            Math.floor(this.parent.rowHeight * 0.62) : this.parent.taskbarHeight; // 0.62 -- Standard Ratio.
+            Math.floor(this.parent.rowHeight * taskbarHeightValue) : this.parent.taskbarHeight; // 0.62 -- Standard Ratio.
         if (this.parent.renderBaseline) {
             var height = void 0;
             if ((this.taskBarHeight + this.baselineHeight) <= this.parent.rowHeight) {
@@ -9349,11 +9431,11 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             }
             this.taskBarHeight = height;
         }
-        this.milestoneHeight = Math.floor(this.taskBarHeight * 0.82); // 0.82 -- Standard Ratio.
-        this.taskBarMarginTop = Math.floor((this.parent.rowHeight - this.taskBarHeight) / 2);
+        this.milestoneHeight = Math.floor(this.taskBarHeight * milestoneHeightValue); // 0.82 -- Standard Ratio.
+        this.taskBarMarginTop = Math.floor((this.parent.rowHeight - this.taskBarHeight) / taskBarMarginTopValue);
         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))) - 1);
+        this.baselineTop = -(Math.floor((this.parent.rowHeight - (this.taskBarHeight + this.taskBarMarginTop))) - 4);
         this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 8;
         this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2));
     };
@@ -9547,6 +9629,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             var indicators = this.templateData.ganttProperties.indicators;
             for (var indicatorIndex = 0; indicatorIndex < indicators.length; indicatorIndex++) {
                 taskIndicatorNode = this.getIndicatorNode(indicators[indicatorIndex]);
+                taskIndicatorNode[0].setAttribute('aria-label', indicators[indicatorIndex].name);
                 if (indicators[indicatorIndex].name.indexOf('$') > -1 || indicators[indicatorIndex].name.indexOf('#') > -1) {
                     taskIndicatorTextFunction = this.templateCompiler(indicators[indicatorIndex].name);
                     taskIndicatorTextNode = taskIndicatorTextFunction(extend({ index: i }, this.templateData), this.parent, 'indicatorLabelText');
@@ -10771,7 +10854,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
         for (var i = 0; i < childNodes.length; i++) {
             var innerChild = childNodes[i].childNodes;
             for (var j = 0; j < innerChild.length; j++) {
-                var ariaString = this.parent.connectorLineModule.generateAriaLabel(ariaConnector[i]);
+                var ariaString = 'Connector Line ' + this.parent.connectorLineModule.generateAriaLabel(ariaConnector[i]);
                 innerChild[j].setAttribute('aria-label', ariaString);
             }
         }
@@ -11028,7 +11111,11 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
         var connectorContainer = '';
         var isVirtual = this.parent.virtualScrollModule && this.parent.enableVirtualization;
         var connectorLine$$1 = this.getPosition(data, this.getParentPosition(data), height);
-        var heightValue = isVirtual ? connectorLine$$1.height : height;
+        var isMilestoneValue = 0;
+        if (this.parent.renderBaseline) {
+            isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
+        }
+        var heightValue = isVirtual ? connectorLine$$1.height : (height + isMilestoneValue);
         if (this.getParentPosition(data)) {
             connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
             var div = '<div class="' + connectorLineContainer +
@@ -11056,7 +11143,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType1">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
@@ -11077,7 +11164,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType2') {
                 div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.top : ((data.parentIndex * data.rowHeight) +
-                    this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType2">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
@@ -11108,7 +11195,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType3">';
                 div = div + rightArrow;
                 div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
@@ -11138,7 +11225,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType4">';
                 div = div + rightArrow;
                 div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
@@ -11164,7 +11251,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType4">';
                 div = div + rightArrow;
                 div = div + 'left:' + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
@@ -11177,7 +11264,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType3">';
                 div = div + rightArrow;
                 div = div + 'left:10px;' + duplicateStingTwo;
@@ -11190,7 +11277,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType2') {
                 div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType2">';
                 div = div + eLine;
                 div = div + 'width:' + (setInnerChildWidthSSType2 + 1) + 'px;' +
@@ -11211,7 +11298,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             if (this.getParentPosition(data) === 'SSType1') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) +
-                        this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                        this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
                 div = div + eLine;
                 div = div + 'width:' + (data.parentLeft - data.childLeft + 21) + 'px;' +
@@ -11228,7 +11315,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType1') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType1">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
@@ -11252,7 +11339,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType2') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType2">';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'width:' +
@@ -11278,7 +11365,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -11301,7 +11388,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType4">';
                 div = div + leftArrow;
                 div = div + ('left:' + ((data.childLeft + data.childWidth) -
@@ -11330,7 +11417,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;width:1px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
                     'height:' + heightValue + 'px;position:absolute" data-connectortype="SFType4">';
                 div = div + duplicateStingFour + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
@@ -11358,7 +11445,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -11376,7 +11463,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType1') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType1">';
                 div = div + eLine;
                 div = div + 'width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -11401,7 +11488,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType2') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType2">';
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
@@ -11645,6 +11732,7 @@ var Splitter$1 = /** @__PURE__ @class */ (function () {
                         _this.splitterObject.paneSettings[1].size = null;
                         _this.splitterObject.paneSettings[1].size = _this.getSpliterPositionInPercentage(_this.splitterPreviousPositionChart);
                     }
+                    _this.parent.timelineModule.updateTimelineAfterZooming(_this.parent.timelineModule.timelineEndDate, true);
                     callBackPromise.resolve(splitterResizedArgs);
                 });
                 return callBackPromise;
@@ -11927,6 +12015,7 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
      * @returns {void} .
      */
     Tooltip$$1.prototype.updateTooltipPosition = function (args) {
+        args.element.style.visibility = 'visible';
         if (isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
             return;
         }
@@ -11956,7 +12045,6 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
             tooltipPositionY = tooltipPositionY + 10;
         }
         args.element.style.top = tooltipPositionY + 'px';
-        args.element.style.visibility = 'visible';
     };
     /**
      * Method to get mouse pointor position
@@ -11998,9 +12086,16 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
         switch (elementType) {
             case 'milestone':
                 {
-                    var sDate = !isNullOrUndefined(data.startDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                    var milestoneStartDate = void 0;
+                    if (args.target.className.includes('e-baseline-gantt-milestone') && !isNullOrUndefined(data.baselineStartDate)) {
+                        milestoneStartDate = data.baselineStartDate;
+                    }
+                    else if (!isNullOrUndefined(data.startDate)) {
+                        milestoneStartDate = data.startDate;
+                    }
+                    var sDate = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
                     content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + sDate + '</tbody></table>';
                     break;
@@ -12742,25 +12837,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
      * @returns {void} .
      */
     Gantt.prototype.calculateDimensions = function () {
-        var settingsHeight;
-        if (typeof (this.height) !== 'number' && this.height.indexOf('%') !== -1 && (this.element.parentElement &&
-            !this.element.parentElement.style.height || this.element.parentElement.style.height.indexOf('%') !== -1)) {
-            var ganttHeight = void 0;
-            if (this.element.parentElement.style.height.indexOf('%') == -1) {
-                ganttHeight = Number(this.height.split("%")[0]);
-            }
-            else {
-                ganttHeight = Number(this.element.parentElement.style.height.split("%")[0]);
-            }
-            ganttHeight = (ganttHeight * window.innerHeight) / 100;
-            if (this.height === '100%') {
-                ganttHeight = ganttHeight - 16;
-            }
-            settingsHeight = this.validateDimentionValue(ganttHeight);
-        }
-        else {
-            settingsHeight = this.validateDimentionValue(this.height);
-        }
+        var settingsHeight = this.validateDimentionValue(this.height);
         var settingsWidth = this.validateDimentionValue(this.width);
         if (!isNullOrUndefined(this.width) && typeof (this.width) === 'string' && this.width.indexOf('%') !== -1) {
             settingsWidth = this.width;
@@ -12903,40 +12980,6 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
      */
     Gantt.prototype.windowResize = function () {
         if (!isNullOrUndefined(this.element)) {
-            var settingsHeight = void 0;
-            if (this.height.indexOf('%') !== -1) {
-                var ganttHeight = Number(this.height.split("%")[0]);
-                if (this.element.parentElement && (this.element.parentElement.style.height)) {
-                    var containerHeight = void 0;
-                    if (this.element.parentElement.style.height.indexOf('%') == -1) {
-                        containerHeight = Number(this.element.parentElement.style.height.split("px")[0]);
-                        ganttHeight = (ganttHeight * containerHeight) / 100;
-                    }
-                    else {
-                        containerHeight = Number(this.element.parentElement.style.height.split("%")[0]);
-                        ganttHeight = (window.innerHeight * containerHeight) / 100;
-                    }
-                }
-                else {
-                    ganttHeight = Number(this.height.split("%")[0]);
-                    ganttHeight = (ganttHeight * window.innerHeight) / 100;
-                }
-                if (this.height === '100%') {
-                    ganttHeight = ganttHeight - 16;
-                }
-                var toolbarHeight = 0;
-                if (!isNullOrUndefined(this.toolbarModule) && !isNullOrUndefined(this.toolbarModule.element)) {
-                    toolbarHeight = this.toolbarModule.element.offsetHeight;
-                }
-                var contentHeight = ganttHeight - this.ganttChartModule.chartTimelineContainer.offsetHeight - toolbarHeight;
-                settingsHeight = this.validateDimentionValue(ganttHeight);
-                this.element.style.height = settingsHeight;
-                this.element.querySelectorAll('.e-content')[0]['style'].height = contentHeight + 'px';
-                this.element.querySelectorAll('.e-content')[2]['style'].height = contentHeight + 'px';
-            }
-            else {
-                settingsHeight = this.validateDimentionValue(this.height);
-            }
             this.updateContentHeight();
             this.ganttChartModule.updateWidthAndHeight(); // Updating chart scroll conatiner height for row mismatch
             this.treeGridModule.ensureScrollBar();
@@ -13282,6 +13325,18 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Gantt.prototype.treeDataBound = function (args) {
+        this.element.getElementsByClassName('e-chart-root-container')[0]['style'].height = '100%';
+        var gridHeight = this.element.getElementsByClassName('e-gridcontent')[0]['style'].height;
+        var timelineContainer = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
+        gridHeight = 'calc(100% - ' + timelineContainer + 'px)';
+        // eslint-disable-next-line
+        this.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+        if (!isNullOrUndefined(this.toolbarModule) && !isNullOrUndefined(this.toolbarModule.element)) {
+            this.splitterElement.style.height = 'calc(100% - ' + this.toolbarModule.element.offsetHeight + 'px)';
+        }
+        else {
+            this.splitterElement.style.height = '100%';
+        }
         if (this.isLoad) {
             this.updateCurrentViewData();
             if (!this.enableVirtualization) {
@@ -13301,8 +13356,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
                     removeClass(this.treeGrid.element.querySelectorAll('.e-headercell'), timelineSingleHeaderOuterDiv);
                     removeClass(this.treeGrid.element.querySelectorAll('.e-columnheader'), timelineSingleHeaderOuterDiv);
                 }
-                this.treeGrid.height = this.ganttHeight - toolbarHeight -
-                    this.treeGrid.grid.getHeaderContent().offsetHeight;
+                this.treeGrid.height = '100%';
                 this.notify('tree-grid-created', {});
                 this.createGanttPopUpElement();
                 this.hideSpinner();
@@ -13813,7 +13867,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
      */
     Gantt.prototype.updateGridLineContainerHeight = function () {
         if (this.chartVerticalLineContainer) {
-            this.chartVerticalLineContainer.style.height = formatUnit(this.getContentHeight());
+            this.chartVerticalLineContainer.style.height = formatUnit(this.contentHeight);
         }
     };
     /**
@@ -15724,7 +15778,8 @@ var CellEdit = /** @__PURE__ @class */ (function () {
             args.cancel = true;
             return;
         }
-        if (data.hasChildRecords && (field === taskSettings.endDate || field === taskSettings.duration
+        if (data.hasChildRecords && ((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')) {
             args.cancel = true;
@@ -19866,7 +19921,8 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
                 disabled = true;
             }
             if (this.editedRecord.hasChildRecords) {
-                if (column.field === this.parent.taskFields.endDate || column.field === this.parent.taskFields.duration ||
+                if ((column.field === this.parent.taskFields.endDate && ((!isNullOrUndefined(this.editedRecord['isManual']) &&
+                    this.editedRecord['isManual'] == false) || this.parent.taskMode == 'Auto')) || column.field === this.parent.taskFields.duration ||
                     column.field === this.parent.taskFields.progress || column.field === this.parent.taskFields.work ||
                     column.field === 'taskType') {
                     disabled = true;
@@ -23701,7 +23757,15 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         }
         /* data Source update */
         if (!isNullOrUndefined(parentItem)) {
-            childIndex = parentItem.childRecords.indexOf(this.addRowSelectedItem);
+            if (rowPosition == 'Above') {
+                childIndex = parentItem.childRecords.indexOf(this.addRowSelectedItem);
+            }
+            else if (rowPosition == 'Below') {
+                childIndex = parentItem.childRecords.indexOf(this.addRowSelectedItem) + 1;
+            }
+            else {
+                childIndex = parentItem.childRecords.length;
+            }
             /*Child collection update*/
             parentItem.childRecords.splice(childIndex, 0, record);
             if ((this.parent.dataSource instanceof DataManager &&
@@ -23709,12 +23773,9 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 !isNullOrUndefined(this.parent.dataSource)) {
                 var child = this.parent.taskFields.child;
                 if (parentItem.taskData[child] && parentItem.taskData[child].length > 0) {
-                    if (rowPosition === 'Above') {
+                    if (rowPosition === 'Above' || rowPosition === 'Below') {
                         parentItem.taskData[child].splice(childIndex, 0, record.taskData);
                     }
-                    else if (rowPosition === 'Below') {
-                        parentItem.taskData[child].splice(childIndex + 1, 0, record.taskData);
-                    }
                     else {
                         parentItem.taskData[child].push(record.taskData);
                     }
@@ -23780,11 +23841,27 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         }
     };
     Edit$$1.prototype.refreshRecordInImmutableMode = function () {
+        var _loop_1 = function (i) {
+            var originalData = this_1.parent.modifiedRecords[i];
+            var treeIndex = this_1.parent.allowRowDragAndDrop ? 1 : 0;
+            var uniqueTaskID = this_1.parent.taskFields.id;
+            originalIndex = this_1.parent.currentViewData.findIndex(function (data) {
+                return (data[uniqueTaskID] == originalData[uniqueTaskID]);
+            });
+            if (this_1.parent.treeGrid.getRows()[originalIndex]) {
+                this_1.parent.treeGrid.renderModule.cellRender({
+                    data: originalData, cell: this_1.parent.treeGrid.getRows()[originalIndex].cells[this_1.parent.treeColumnIndex + treeIndex],
+                    column: this_1.parent.treeGrid.grid.getColumns()[this_1.parent.treeColumnIndex],
+                    requestType: 'rowDragAndDrop'
+                });
+                this_1.parent.treeGrid.renderModule.RowModifier({
+                    data: originalData, row: this_1.parent.treeGrid.getRows()[originalIndex], rowHeight: this_1.parent.rowHeight
+                });
+            }
+        };
+        var this_1 = this, originalIndex;
         for (var i = 0; i < this.parent.modifiedRecords.length; i++) {
-            var originalData = this.parent.modifiedRecords[i];
-            var dataId = this.parent.viewType === 'ProjectView' ?
-                originalData.ganttProperties.taskId : originalData.ganttProperties.rowUniqueID;
-            this.parent.treeGrid.grid.setRowData(dataId, originalData);
+            _loop_1(i);
         }
     };
     /**
@@ -24162,6 +24239,9 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         }
         this.addSuccess(args);
         args = this.constructTaskAddedEventArgs(cAddedRecord, args.modifiedRecords, 'add');
+        if (this.dialogModule.isAddNewResource && !this.parent.isEdit && this.parent.taskFields.work) {
+            this.parent.dataOperation.updateWorkWithDuration(cAddedRecord[0]);
+        }
         this.parent.trigger('actionComplete', args);
         if (this.dialogModule.dialog && !this.dialogModule.dialogObj.isDestroyed) {
             this.dialogModule.dialogObj.hide();
@@ -24538,15 +24618,18 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
                     draggedRec[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.parentID];
                     draggedRec.taskData[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.parentID];
+                    draggedRec.ganttProperties['parentId'] = droppedRec[this.parent.taskFields.parentID];
                 }
                 else {
                     draggedRec[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.id];
                     draggedRec.taskData[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.id];
+                    draggedRec.ganttProperties['parentId'] = droppedRec[this.parent.taskFields.id];
                 }
             }
             else {
                 draggedRec[this.parent.taskFields.parentID] = null;
                 draggedRec.taskData[this.parent.taskFields.parentID] = null;
+                draggedRec.ganttProperties['parentId'] = null;
             }
         }
     };
@@ -25085,11 +25168,13 @@ var Filter$1 = /** @__PURE__ @class */ (function () {
         // ...
     };
     Filter$$1.prototype.closeFilterOnContextClick = function (element) {
+        var datePickerElement = document.querySelector('body > div.e-datepicker');
+        var dateTimePickerElement = document.querySelector('body > div.e-datetimepicker');
         if (this.filterMenuElement && document.body.contains(this.filterMenuElement)) {
             var ganttElement = closest(element, '#' + this.parent.element.id)
                 || element.querySelector('#' + this.parent.element.id);
-            if ((!(this.filterMenuElement.contains(element)) && !isNullOrUndefined(ganttElement)) || element.nodeName === 'HTML'
-                || ((element.nodeName === 'DIV') && (!element.classList.contains('e-day')))) {
+            if ((!(this.filterMenuElement.contains(element)) && !isNullOrUndefined(ganttElement)) || (!(this.filterMenuElement.contains(element)) && (isNullOrUndefined(datePickerElement))
+                && (isNullOrUndefined(dateTimePickerElement)) && ((element.nodeName === 'DIV') || (element.nodeName === 'HTML')))) {
                 remove(this.filterMenuElement);
                 this.parent.treeGrid.grid.notify('filter-menu-close', { isOpen: false });
                 this.filterMenuElement = null;
@@ -25408,8 +25493,9 @@ var Selection$1 = /** @__PURE__ @class */ (function () {
         }
         this.addRemoveClass(index);
         this.selectedRowIndexes = extend([], this.getSelectedRowIndexes(), [], true);
-        if (this.selectedRowIndexes.length == 0) {
-            this.parent.setProperties({ selectedRowIndex: -1 }, true);
+        this.parent.setProperties({ selectedRowIndex: -1 }, true);
+        if (this.selectedRowIndexes.length === 1) {
+            this.parent.setProperties({ selectedRowIndex: this.selectedRowIndexes[0] }, true);
         }
         if (!isNullOrUndefined(this.parent.toolbarModule)) {
             this.parent.toolbarModule.refreshToolbarItems();
@@ -26291,6 +26377,7 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
             this.nonworkingContainer = createElement('div', {
                 className: nonworkingContainer
             });
+            this.nonworkingContainer.setAttribute("role", "NonWorkingDays");
             this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
         }
     };
@@ -26328,8 +26415,11 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
         var toDate;
         var container = createElement('div');
         var height = this.parent.contentHeight;
-        var scrollElement = this.parent.ganttChartModule.scrollElement;
-        var viewportHeight = parseInt(scrollElement.style.height, 10);
+        var toolbarHeight = 0;
+        if (!isNullOrUndefined(this.parent.toolbarModule)) {
+            toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
+        }
+        var viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
         for (var i = 0; i < this.parent.holidays.length; i++) {
             if (this.parent.holidays[i].from && this.parent.holidays[i].to) {
                 fromDate = this.parent.dateValidationModule.getDateFromFormat(this.parent.holidays[i].from);
@@ -26422,9 +26512,12 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
         return container;
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
-        var height = this.parent.contentHeight;
-        var scrollElement = this.parent.ganttChartModule.scrollElement;
-        var viewportHeight = parseInt(scrollElement.style.height, 10);
+        var height = this.parent.getContentHeight();
+        var toolbarHeight = 0;
+        if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
+            toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
+        }
+        var viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
         var top = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
         var labels = this.holidayContainer.querySelectorAll('.' + holidayLabel);
         for (var i = 0; i < labels.length; i++) {
@@ -26481,6 +26574,7 @@ var EventMarker$1 = /** @__PURE__ @class */ (function () {
                 this.eventMarkersContainer = createElement('div', {
                     className: eventMarkersContainer
                 });
+                this.eventMarkersContainer.setAttribute("role", "EventMarker");
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';
@@ -27564,10 +27658,12 @@ var RowDD$1 = /** @__PURE__ @class */ (function () {
             }
         }
         if (!args.cancel) {
-            args.cancel = true;
             args.requestType = 'beforeDrop';
             this.parent.trigger('actionBegin', args);
-            this.dropRows(args, true); // method to update the data collections based on drop action
+            if (!args.cancel) {
+                this.dropRows(args, true); // method to update the data collections based on drop action
+                args.cancel = true;
+            }
         }
     };
     RowDD$$1.prototype.dropRows = function (args, isByMethod) {
@@ -27664,33 +27760,55 @@ var RowDD$1 = /** @__PURE__ @class */ (function () {
                         var data_1 = gObj.flatData;
                         var startIndex = void 0;
                         var endIndex = void 0;
+                        var ganttData_1 = this_1.parent.dataSource;
+                        var uniqueTaskID_1 = this_1.parent.taskFields.id;
                         if (draggedRecord.index < droppedRecord.index) {
                             startIndex = draggedRecord.index;
-                            endIndex = droppedRecord.index;
+                            var _loop_2 = function (i_1) {
+                                var currentData = this_1.parent.currentViewData.filter(function (e) {
+                                    return e[uniqueTaskID_1] === ganttData_1[i_1][uniqueTaskID_1];
+                                })[0];
+                                if (currentData.index > droppedRecord.index) {
+                                    endIndex = currentData.index;
+                                    return "break";
+                                }
+                            };
+                            for (var i_1 = 0; i_1 < ganttData_1.length; i_1++) {
+                                var state_2 = _loop_2(i_1);
+                                if (state_2 === "break")
+                                    break;
+                            }
                         }
                         else {
                             startIndex = droppedRecord.index;
-                            var rootChildRecord = draggedRecord;
-                            if (rootChildRecord.childRecords.length > 0) {
-                                do {
-                                    rootChildRecord = rootChildRecord.childRecords[rootChildRecord.childRecords.length - 1];
-                                } while (rootChildRecord.childRecords.length > 0);
+                            var _loop_3 = function (i_2) {
+                                var currentData = this_1.parent.currentViewData.filter(function (e) {
+                                    return e[uniqueTaskID_1] === ganttData_1[i_2][uniqueTaskID_1];
+                                })[0];
+                                if (currentData.index > draggedRecord.index) {
+                                    endIndex = currentData.index;
+                                    return "break";
+                                }
+                            };
+                            for (var i_2 = 0; i_2 < ganttData_1.length; i_2++) {
+                                var state_3 = _loop_3(i_2);
+                                if (state_3 === "break")
+                                    break;
                             }
-                            endIndex = rootChildRecord.index;
                         }
-                        var _loop_2 = function (i_1) {
-                            if (!isNullOrUndefined(data_1[i_1])) {
-                                data_1[i_1].index = i_1;
-                                if (!isNullOrUndefined(data_1[i_1].parentItem)) {
+                        var _loop_4 = function (i_3) {
+                            if (!isNullOrUndefined(data_1[i_3])) {
+                                data_1[i_3].index = i_3;
+                                if (!isNullOrUndefined(data_1[i_3].parentItem)) {
                                     var updatedParent = data_1.filter(function (e) {
-                                        return e.uniqueID === data_1[i_1].parentUniqueID;
+                                        return e.uniqueID === data_1[i_3].parentUniqueID;
                                     })[0];
-                                    data_1[i_1].parentItem.index = updatedParent.index;
+                                    data_1[i_3].parentItem.index = updatedParent.index;
                                 }
                             }
                         };
-                        for (var i_1 = startIndex; i_1 <= endIndex; i_1++) {
-                            _loop_2(i_1);
+                        for (var i_3 = startIndex; i_3 <= endIndex; i_3++) {
+                            _loop_4(i_3);
                         }
                     }
                     gObj.rowDragAndDropModule.refreshDataSource();