@syncfusion/ej2-gantt 20.1.58 → 20.2.36

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

@@ -391,7 +391,7 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
      * @returns {Date} .
      * @private
      */
-    DateProcessor.prototype.checkBaselineEndDate = function (date) {
+    DateProcessor.prototype.checkBaselineEndDate = function (date, ganttProp) {
         if (isNullOrUndefined(date)) {
             return null;
         }
@@ -401,7 +401,7 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
             if (hour > this.parent.defaultEndTime) {
                 this.setTime(this.parent.defaultEndTime, cloneDate);
             }
-            else if (hour <= this.parent.defaultStartTime) {
+            else if (hour <= this.parent.defaultStartTime && !ganttProp.isMilestone) {
                 cloneDate.setDate(cloneDate.getDate() - 1);
                 this.setTime(this.parent.defaultEndTime, cloneDate);
             }
@@ -1390,6 +1390,12 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
      */
     DateProcessor.prototype.calculateProjectDates = function (editArgs) {
         var _this = this;
+        if (this.parent.isLoad && this.parent.enablePersistence &&
+            this.parent.cloneProjectStartDate && this.parent.cloneProjectEndDate) {
+            this.parent.cloneProjectStartDate = this.getDateFromFormat(this.parent.cloneProjectStartDate);
+            this.parent.cloneProjectEndDate = this.getDateFromFormat(this.parent.cloneProjectEndDate);
+            return;
+        }
         var sDate = typeof this.parent.projectStartDate === 'string' ?
             new Date(this.parent.projectStartDate) : this.parent.projectStartDate;
         var eDate = typeof this.parent.projectEndDate === 'string' ?
@@ -1602,10 +1608,11 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
         var mappingData = new DataManager(dataSource).executeLocal(new Query()
             .group(this.parent.taskFields.parentID));
         var rootData = [];
+        var index;
         for (var i = 0; i < mappingData.length; i++) {
             var groupData = mappingData[i];
             if (!isNullOrUndefined(groupData.key)) {
-                var index = this.taskIds.indexOf(groupData.key.toString());
+                index = this.taskIds.indexOf(groupData.key.toString());
                 if (index > -1) {
                     if (!isNullOrUndefined(groupData.key)) {
                         dataSource[index][this.parent.taskFields.child] = groupData.items;
@@ -1613,7 +1620,9 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
-            rootData.push.apply(rootData, groupData.items); // eslint-disable-line
+            if (index !== -1) {
+                rootData.push.apply(rootData, groupData.items); // eslint-disable-line
+            }
         }
         this.hierarchyData = this.dataReorder(dataSource, rootData);
     };
@@ -1874,7 +1883,11 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
         if (baselineEndDate && baselineEndDate.getHours() === 0 && this.parent.defaultEndTime !== 86400) {
             this.setTime(this.parent.defaultEndTime, baselineEndDate);
         }
-        this.parent.setRecordValue('baselineEndDate', this.checkBaselineEndDate(baselineEndDate), ganttProperties, true);
+        if ((ganttProperties.baselineStartDate && baselineEndDate &&
+            (ganttProperties.baselineStartDate.getTime() > baselineEndDate.getTime())) || ganttProperties.isMilestone) {
+            baselineEndDate = ganttProperties.baselineStartDate;
+        }
+        this.parent.setRecordValue('baselineEndDate', this.checkBaselineEndDate(baselineEndDate, ganttProperties), ganttProperties, true);
         this.parent.setRecordValue('progress', progress, ganttProperties, true);
         this.parent.setRecordValue('totalProgress', progress, ganttProperties, true);
         this.parent.setRecordValue('predecessorsName', predecessors, ganttProperties, true);
@@ -1895,7 +1908,6 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             !isNullOrUndefined(taskSettings.child)) {
             this.parent.setRecordValue(taskSettings.child, [], ganttData);
         }
-        this.parent.setRecordValue('baselineEndDate', this.checkBaselineEndDate(baselineEndDate), ganttProperties, true);
         if (!isNullOrUndefined(data[taskSettings.child]) && data[taskSettings.child].length > 0) {
             this.parent.setRecordValue('hasChildRecords', true, ganttData);
             this.parent.setRecordValue('isMilestone', false, ganttProperties, true);
@@ -2108,6 +2120,13 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
                 work = parseFloat(work.toFixed(2));
             }
         }
+        if (ganttData.childRecords.length > 0 && this.parent.isOnEdit) {
+            var childCompletedWorks = 0;
+            for (var i = 0; i < ganttData.childRecords.length; i++) {
+                childCompletedWorks += ganttData.childRecords[i].ganttProperties.work;
+            }
+            work += childCompletedWorks;
+        }
         this.parent.setRecordValue('work', work, ganttData.ganttProperties, true);
         if (!isNullOrUndefined(this.parent.taskFields.work)) {
             this.parent.dataOperation.updateMappingData(ganttData, 'work');
@@ -2604,7 +2623,7 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
     TaskProcessor.prototype.calculateBaselineWidth = function (ganttProperties) {
         var baselineStartDate = this.getDateFromFormat(ganttProperties.baselineStartDate);
         var baselineEndDate = this.getDateFromFormat(ganttProperties.baselineEndDate);
-        if (baselineStartDate && baselineEndDate) {
+        if (baselineStartDate && baselineEndDate && (baselineStartDate.getTime() !== baselineEndDate.getTime())) {
             return (this.getTaskWidth(baselineStartDate, baselineEndDate));
         }
         else {
@@ -3732,7 +3751,7 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
                 }
                 this.updateWorkWithDuration(parentData);
                 var parentWork = parentProp.work;
-                parentWork += childCompletedWorks;
+                parentWork = this.parent.isOnEdit ? parentWork : (parentWork + childCompletedWorks);
                 this.parent.setRecordValue('work', parentWork, parentProp, true);
                 this.parent.setRecordValue('taskType', 'FixedDuration', parentProp, true);
                 if (!isNullOrUndefined(this.parent.taskFields.type)) {
@@ -3804,8 +3823,12 @@ var parentProgressBarInnerDiv = 'e-gantt-parent-progressbar-inner-div';
 var taskLabel = 'e-task-label';
 var childTaskBarInnerDiv = 'e-gantt-child-taskbar-inner-div';
 var childProgressBarInnerDiv = 'e-gantt-child-progressbar-inner-div';
+var criticalChildTaskBarInnerDiv = 'e-gantt-child-critical-taskbar-inner-div';
+var criticalChildProgressBarInnerDiv = 'e-gantt-child-critical-progressbar-inner-div';
 var milestoneTop = 'e-milestone-top';
 var milestoneBottom = 'e-milestone-bottom';
+var criticalMilestoneTop = 'e-critical-milestone-top';
+var criticalMilestoneBottom = 'e-critical-milestone-bottom';
 var baselineBar = 'e-baseline-bar';
 var baselineMilestoneContainer = 'e-baseline-gantt-milestone-container';
 var baselineMilestoneDiv = 'e-baseline-gantt-milestone';
@@ -3841,6 +3864,7 @@ var traceManualUnscheduledTask = 'e-gantt-unscheduled-manualtask';
 var traceParentTaskBar = 'e-gantt-parent-taskbar';
 var traceParentProgressBar = 'e-gantt-parent-progressbar';
 var traceUnscheduledTask = 'e-gantt-unscheduled-task';
+var criticalUnscheduledTask = 'e-gantt-critical-unscheduled-taskbar';
 var taskIndicatorDiv = 'e-indicator-span';
 var leftResizeGripper = 'e-left-resize-gripper';
 var rightResizeGripper = 'e-right-resize-gripper';
@@ -3868,13 +3892,19 @@ var unscheduledMilestoneBottom = 'e-unscheduled-milestone-bottom';
 var dependencyViewContainer = 'e-gantt-dependency-view-container';
 var connectorLineContainer = 'e-connector-line-container';
 var connectorLine = 'e-line';
+var criticalConnectorLine = 'e-criticalconnector-line';
+var criticalConnectorLineRightArrow = 'e-criticalconnector-line-right-arrow';
+var criticalConnectorLineLeftArrow = 'e-criticalconnector-line-left-arrow';
 var connectorLineRightArrow = 'e-connector-line-right-arrow';
 var connectorLineLeftArrow = 'e-connector-line-left-arrow';
 var connectorLineZIndex = 'e-connector-line-z-index';
 var connectorLineHover = 'e-connector-line-hover';
+var criticalConnectorLineHover = 'e-critical-connector-line-hover';
 var connectorLineHoverZIndex = 'e-connector-line-hover-z-index';
 var connectorLineRightArrowHover = 'e-connector-line-right-arrow-hover';
 var connectorLineLeftArrowHover = 'e-connector-line-left-arrow-hover';
+var criticalConnectorLineRightArrowHover = 'e-critical-connector-line-right-arrow-hover';
+var criticalConnectorLineLeftArrowHover = 'e-critical-connector-line-left-arrow-hover';
 
 var connectorPointLeft = 'e-connectorpoint-left';
 var connectorPointRight = 'e-connectorpoint-right';
@@ -3901,6 +3931,7 @@ var editIcon = 'e-edit';
 var indentIcon = 'e-indent';
 var outdentIcon = 'e-outdent';
 var addIcon = 'e-add';
+
 var addAboveIcon = 'e-add-above';
 var addBelowIcon = 'e-add-below';
 //Predecessor touch mode
@@ -4206,6 +4237,10 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                 this.parent.predecessorModule.createConnectorLinesCollection();
             }
             this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+            if (this.parent.enableCriticalPath) {
+                var crtiticalModule = this.parent.criticalPathModule;
+                this.parent.criticalPathModule.criticalConnectorLine(crtiticalModule.criticalPathCollection, crtiticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, crtiticalModule.predecessorCollectionTaskIds);
+            }
             if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation) {
                 this.renderOverAllocationContainer();
             }
@@ -5081,7 +5116,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                     this.parent.treeGrid.grid.notify('key-pressed', e);
                 }
             }
-            if (!isInEditedState) {
+            if (!isNullOrUndefined(isInEditedState) && !this.parent.editModule.cellEditModule.isCellEdit) {
                 if (nextElement) {
                     if ($target.classList.contains('e-rowcell')) {
                         this.manageFocus($target, 'remove', false);
@@ -5089,7 +5124,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                     else {
                         this.manageFocus($target, 'remove', true);
                     }
-                    if (nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) {
+                    if ((nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) || $target.classList.contains('e-right-label-container')) {
                         if (!$target.classList.contains('e-rowcell')) {
                             this.parent.treeGrid.grid.notify('key-pressed', e);
                             var fmodule = getValue('focusModule', this.parent.treeGrid.grid);
@@ -5382,6 +5417,9 @@ var Timeline = /** @__PURE__ @class */ (function () {
         this.totalTimelineWidth = 0;
         this.customTimelineSettings = null;
         this.parent.isTimelineRoundOff = this.isZoomToFit ? false : isNullOrUndefined(this.parent.projectStartDate) ? true : false;
+        if (this.parent.enablePersistence) {
+            this.parent.timelineSettings = this.parent.currentZoomingLevel;
+        }
     };
     /**
      * To render timeline header series.
@@ -5509,6 +5547,10 @@ var Timeline = /** @__PURE__ @class */ (function () {
         this.parent.isTimelineRoundOff = this.isZoomToFit ? false : isNullOrUndefined(this.parent.projectStartDate) ? true : false;
         this.processTimelineUnit();
         this.parent.updateProjectDates(this.parent.cloneProjectStartDate, this.parent.cloneProjectEndDate, this.parent.isTimelineRoundOff);
+        var criticalModule = this.parent.criticalPathModule;
+        if (this.parent.enableCriticalPath && criticalModule) {
+            criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
         if (this.isZooming || this.isZoomToFit) {
             var args = {
                 requestType: this.isZoomIn ? 'AfterZoomIn' : this.isZoomToFit ? 'AfterZoomToProject' : 'AfterZoomOut',
@@ -5531,6 +5573,9 @@ var Timeline = /** @__PURE__ @class */ (function () {
             this.parent.zoomingProjectEndDate = this.parent.cloneProjectEndDate;
         }
         this.parent.dataOperation.calculateProjectDates();
+        if (this.parent.zoomingProjectStartDate > this.parent.cloneProjectStartDate) {
+            this.parent.cloneProjectStartDate = new Date(this.parent.allowUnscheduledTasks ? this.parent.zoomingProjectStartDate : this.parent.cloneProjectStartDate);
+        }
         var timeDifference = (this.parent.cloneProjectEndDate.getTime() - this.parent.cloneProjectStartDate.getTime());
         var totalDays = (timeDifference / (1000 * 3600 * 24));
         var chartWidth = this.parent.ganttChartModule.chartElement.offsetWidth;
@@ -6169,7 +6214,7 @@ var Timeline = /** @__PURE__ @class */ (function () {
             parentTr = this.getHeaterTemplateString(new Date(startDate.toString()), mode, tier, false, count, timelineCell, isFirstCell);
             scheduleDateCollection.push(new Date(startDate.toString()));
             if (isFirstCell) {
-                newTime = this.calculateQuarterEndDate(startDate).getTime();
+                newTime = this.calculateQuarterEndDate(startDate, count).getTime();
             }
             else {
                 increment = this.getIncrement(startDate, count, mode);
@@ -6325,19 +6370,29 @@ var Timeline = /** @__PURE__ @class */ (function () {
             mode === 'Hour' || mode === 'Minutes') &&
             this.parent.nonWorkingDayIndex.indexOf(day.getDay()) !== -1;
     };
-    Timeline.prototype.calculateQuarterEndDate = function (date) {
+    Timeline.prototype.calculateQuarterEndDate = function (date, count) {
         var month = date.getMonth();
-        if (month >= 0 && month <= 2) {
-            return new Date(date.getFullYear(), 3, 1);
-        }
-        else if (month >= 3 && month <= 5) {
-            return new Date(date.getFullYear(), 6, 1);
-        }
-        else if (month >= 6 && month <= 8) {
-            return new Date(date.getFullYear(), 9, 1);
+        if (count === 3) {
+            if (month >= 0 && month <= 2) {
+                return new Date(date.getFullYear(), 3, 1);
+            }
+            else if (month >= 3 && month <= 5) {
+                return new Date(date.getFullYear(), 6, 1);
+            }
+            else if (month >= 6 && month <= 8) {
+                return new Date(date.getFullYear(), 9, 1);
+            }
+            else {
+                return new Date(date.getFullYear() + 1, 0, 1);
+            }
         }
         else {
-            return new Date(date.getFullYear() + 1, 0, 1);
+            if (month >= 0 && month <= 5) {
+                return new Date(date.getFullYear(), 6, 1);
+            }
+            else {
+                return new Date(date.getFullYear() + 1, 0, 1);
+            }
         }
     };
     /**
@@ -6368,7 +6423,7 @@ var Timeline = /** @__PURE__ @class */ (function () {
             this.customFormat(scheduleWeeks, format, tier, mode, formatter);
         thWidth = (this.getIncrement(scheduleWeeks, count, mode) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth;
         var cellWidth = thWidth;
-        thWidth = isLast || isFirstCell ? isLast ? this.calculateWidthBetweenTwoDate(mode, scheduleWeeks, this.timelineRoundOffEndDate) : this.calculateWidthBetweenTwoDate(mode, scheduleWeeks, this.calculateQuarterEndDate(scheduleWeeks))
+        thWidth = isLast || isFirstCell ? isLast ? this.calculateWidthBetweenTwoDate(mode, scheduleWeeks, this.timelineRoundOffEndDate) : this.calculateWidthBetweenTwoDate(mode, scheduleWeeks, this.calculateQuarterEndDate(scheduleWeeks, count))
             : thWidth;
         var isWeekendCell = this.isWeekendHeaderCell(mode, tier, scheduleWeeks);
         var textClassName = tier === 'topTier' ? ' e-gantt-top-cell-text' : '';
@@ -6718,8 +6773,9 @@ var Timeline = /** @__PURE__ @class */ (function () {
             if (type === 'prevTimeSpan' && isFrom === 'publicMethod') {
                 this.parent.ganttChartModule.updateScrollLeft(0);
             }
-            else if (type === 'nextTimeSpan' && isFrom === 'publicMethod') {
-                this.parent.ganttChartModule.updateScrollLeft(this.parent.timelineModule.totalTimelineWidth);
+            else if ((type === 'nextTimeSpan' && isFrom === 'publicMethod') || (type === 'nextTimeSpan' && isFrom === 'TaskbarEditing')) {
+                var currentScrollLeft = document.getElementsByClassName('e-chart-scroll-container e-content')[0].scrollLeft;
+                this.parent.element.querySelector('.e-timeline-header-container').scrollLeft = currentScrollLeft;
             }
             this.parent.timelineModule.timeSpanActionEvent('actionComplete', type, isFrom);
         }
@@ -6958,7 +7014,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 + 1) + 'px);';
+            content.style.cssText += 'width: calc(100% + ' + (scrollWidth + 1) + 'px);'; //actual scrollbar width 17 px but here scrollbar width set to 16px hence adding increment of 1
         }
         else {
             content.classList.add('e-gantt-scroll-padding');
@@ -8449,7 +8505,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 labelString = labelString === 'isCustomTemplate' ? this.parent.labelSettings.taskLabel : labelString;
             }
             if (labelString.indexOf('null') === -1) {
-                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' && !this.isTemplate(this.parent.labelSettings.taskLabel)) {
+                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' &&
+                    !this.isTemplate(this.parent.labelSettings.taskLabel)) {
                     labelString = '';
                 }
                 if (isNaN(parseInt(labelString))) {
@@ -8499,7 +8556,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                         progressDiv[0].querySelectorAll('.e-task-label')[0].children[0])
                         progressDiv[0].querySelectorAll('.e-task-label')[0].children[0].remove();
                     if (progressDiv[0].querySelectorAll('.e-task-label')[0].textContent == '' &&
-                        childLabel && !childLabel['elementRef'] && tempDiv.innerHTML != '')
+                        childLabel && !childLabel['elementRef'] && tempDiv.innerHTML !== '')
                         progressDiv[0].querySelectorAll('.e-task-label')[0].textContent = childLabel;
                 }
                 if (!isNullOrUndefined(taskbarInnerDiv) && taskbarInnerDiv.length > 0) {
@@ -8517,6 +8574,13 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         var splitTasks = '';
         for (var i = 0; i < data.ganttProperties.segments.length; i++) {
             var segment = data.ganttProperties.segments[i];
+            var progressBarVisible = void 0;
+            if (!segment.showProgress) {
+                progressBarVisible = 'hidden';
+            }
+            else {
+                progressBarVisible = 'initial';
+            }
             var segmentPosition = (i === 0) ? 'e-segment-first' : (i === data.ganttProperties.segments.length - 1)
                 ? 'e-segment-last' : 'e-segment-inprogress';
             splitTasks += (
@@ -8524,7 +8588,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             '<div class="' + childTaskBarInnerDiv + ' ' + segmentPosition + ' ' + traceChildTaskBar + ' ' +
                 ' e-segmented-taskbar' +
                 '"style="width:' + segment.width + 'px;position: absolute; left:' + segment.left + 'px;height:' +
-                (this.taskBarHeight) + 'px; overflow: initial;" data-segment-index = "' + i + '" aria-label = "' +
+                (this.taskBarHeight) + 'px; overflow:' + progressBarVisible + ';" data-segment-index = "' + i + '" aria-label = "' +
                 this.generateSpiltTaskAriaLabel(segment, data.ganttProperties) + '"> ' +
                 this.getSplitTaskbarLeftResizerNode() +
                 //split progress bar
@@ -8646,6 +8710,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             this.parent.dataOperation.updateMappingData(mergeData, 'segments');
             if (segments.length === 1) {
                 this.parent.setRecordValue('endDate', endDate, mergeData.ganttProperties, true);
+                this.parent.setRecordValue('EndDate', endDate, mergeData, true);
                 this.parent.setRecordValue('segments', null, mergeData.ganttProperties, true);
                 this.parent.dataOperation.updateMappingData(mergeData, 'segments');
             }
@@ -8814,6 +8879,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             else {
                 startDate = new Date(splitDate.getTime());
                 startDate.setDate(startDate.getDate() + 1 + increment);
+                this.setTime(this.parent.defaultStartTime, startDate);
                 startDate = this.parent.dataOperation.checkStartDate(startDate, ganttProp, false);
                 segmentEndDate = new Date(endDate.getTime());
                 segmentEndDate.setDate(segmentEndDate.getDate() + 1);
@@ -9087,7 +9153,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 labelString = labelString === 'isCustomTemplate' ? this.parent.labelSettings.taskLabel : labelString;
             }
             if (labelString.indexOf('null') === -1) {
-                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' && !this.isTemplate(this.parent.labelSettings.taskLabel)) {
+                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' &&
+                    !this.isTemplate(this.parent.labelSettings.taskLabel)) {
                     labelString = '';
                 }
                 if (isNaN(parseInt(labelString))) {
@@ -9116,7 +9183,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].children[0])
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].children[0].remove();
                 if (progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent == '' &&
-                    parentLabel && !parentLabel['elementRef'] && div.innerHTML != '')
+                    parentLabel && !parentLabel['elementRef'] && div.innerHTML !== '')
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent = parentLabel;
             }
             var milestoneTemplate = '<div class="' + parentMilestone + '" style="position:absolute;">' +
@@ -10672,6 +10739,9 @@ var Dependency = /** @__PURE__ @class */ (function () {
     Dependency.prototype.updateConnectorLineObject = function (parentGanttRecord, childGanttRecord, predecessor) {
         var connectorObj = this.parent.connectorLineModule.createConnectorLineObject(parentGanttRecord, childGanttRecord, predecessor);
         if (connectorObj) {
+            if (childGanttRecord.isCritical && parentGanttRecord.isCritical) {
+                connectorObj.isCritical = true;
+            }
             if ((this.parent.connectorLineIds.length > 0 && this.parent.connectorLineIds.indexOf(connectorObj.connectorLineId) === -1) ||
                 this.parent.connectorLineIds.length === 0) {
                 this.parent.updatedConnectorLineCollection.push(connectorObj);
@@ -11746,6 +11816,7 @@ var Splitter$1 = /** @__PURE__ @class */ (function () {
         this.splitterObject = new Splitter({
             height: null,
             width: this.parent.ganttWidth.toString(),
+            enablePersistence: this.parent.enablePersistence,
             separatorSize: this.parent.splitterSettings.separatorSize,
             paneSettings: [
                 {
@@ -11797,6 +11868,9 @@ var Splitter$1 = /** @__PURE__ @class */ (function () {
      * @private
      */
     Splitter$$1.prototype.calculateSplitterPosition = function (splitter$$1, isDynamic) {
+        if (!isNullOrUndefined(this.splitterObject) && this.parent.enablePersistence) {
+            return this.splitterObject.paneSettings[0].size;
+        }
         if (splitter$$1.view === 'Grid') {
             return '100%';
         }
@@ -12495,8 +12569,8 @@ var FocusModule = /** @__PURE__ @class */ (function () {
                     break;
                 }
             case 'delete':
-                if (ganttObj.selectionModule && ganttObj.editModule && (!ganttObj.editModule.dialogModule.dialogObj ||
-                    (ganttObj.editModule.dialogModule.dialogObj &&
+                if (ganttObj.selectionModule && ganttObj.editModule && ganttObj.editModule.dialogModule &&
+                    (!ganttObj.editModule.dialogModule.dialogObj || (ganttObj.editModule.dialogModule.dialogObj &&
                         !ganttObj.editModule.dialogModule.dialogObj.visible)) && (!ganttObj.editSettings.allowTaskbarEditing
                     || (ganttObj.editSettings.allowTaskbarEditing && !ganttObj.editModule.taskbarEditModule.touchEdit))) {
                     if ((ganttObj.selectionSettings.mode !== 'Cell' && ganttObj.selectionModule.selectedRowIndexes.length)
@@ -12698,6 +12772,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
          * @private
          */
         _this.isEdit = false;
+        setValue('mergePersistData', _this.mergePersistGanttData, _this);
         return _this;
     }
     /**
@@ -12768,8 +12843,10 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         this.dataOperation.getNonWorkingDayIndex();
         this.columnMapping = {};
         this.controlId = this.element.id;
-        this.cloneProjectStartDate = null;
-        this.cloneProjectEndDate = null;
+        this.cloneProjectStartDate = this.enablePersistence && this.cloneProjectStartDate ?
+            this.cloneProjectStartDate : null;
+        this.cloneProjectEndDate = this.enablePersistence && this.cloneProjectEndDate ?
+            this.cloneProjectEndDate : null;
         this.totalHolidayDates = this.dataOperation.getHolidayDates();
         this.ganttChartModule = new GanttChart(this);
         this.timelineModule = new Timeline(this);
@@ -13036,6 +13113,10 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
                 this.updateRowHeightInConnectorLine(this.updatedConnectorLineCollection);
                 this.connectorLineModule.renderConnectorLines(this.updatedConnectorLineCollection);
             }
+            if (this.enableCriticalPath) {
+                var criticalModule = this.criticalPathModule;
+                this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+            }
         }
     };
     Gantt.prototype.keyActionHandler = function (e) {
@@ -13367,6 +13448,39 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         var value = this.dateValidationModule.getWorkString(work, workUnit);
         return value;
     };
+    Gantt.prototype.updateTreeColumns = function () {
+        var temp;
+        var field;
+        var gridColumns = this.treeGrid.grid.getColumns();
+        if (this.treeColumnIndex !== -1 && this.columns[this.treeColumnIndex] &&
+            !isNullOrUndefined(this.columns[this.treeColumnIndex]['template'])) {
+            temp = this.columns[this.treeColumnIndex]['template'];
+            field = this.columns[this.treeColumnIndex]['field'];
+        }
+        var gridColumn;
+        for (var i = 0; i < gridColumns.length; i++) {
+            gridColumn = {};
+            for (var j = 0; j < this.columns.length; j++) {
+                if (this.columns[j]['field'] == gridColumns[i].field) {
+                    for (var _i = 0, _a = Object.keys(this.columns[j]); _i < _a.length; _i++) {
+                        var prop = _a[_i];
+                        if (!isUndefined(this.columns[j][prop])) {
+                            gridColumn[prop] = gridColumns[i][prop];
+                        }
+                        gridColumn.visible = gridColumns[i].visible;
+                        gridColumn.width = gridColumns[i].width;
+                    }
+                    this.columns[j] = (gridColumn);
+                    if (this.columns[j]['type'] !== 'checkbox' && (!isNullOrUndefined(temp) && temp !== '')) {
+                        this.columns[j]['template'] = temp;
+                    }
+                }
+            }
+        }
+        if (this.columns.length > 0) {
+            this.treeGrid.setProperties({ columns: this.columns }, true);
+        }
+    };
     /**
      *
      * @param {object} args .
@@ -13387,6 +13501,9 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             this.splitterElement.style.height = '100%';
         }
         if (this.isLoad) {
+            if (this.enablePersistence) {
+                this.updateTreeColumns();
+            }
             this.updateCurrentViewData();
             if (!this.enableVirtualization) {
                 this.updateContentHeight();
@@ -13416,7 +13533,14 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         else {
             this.getCurrentRecords(args);
         }
+        if (this.enableCriticalPath && this.criticalPathModule) {
+            this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
+        }
         this.notify('recordsUpdated', {});
+        if (this.enableCriticalPath && this.criticalPathModule) {
+            var criticalModule = this.criticalPathModule;
+            this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
         this.initialChartRowElements = this.ganttChartModule.getChartRows();
         this.isLoad = false;
         this.trigger('dataBound', args);
@@ -13505,6 +13629,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
                 case 'timezone':
+                case 'enableCriticalPath':
                     this.dataOperation.checkDataBinding(true);
                     break;
                 case 'filterSettings':
@@ -13672,15 +13797,42 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * Get the properties to be maintained in the persisted state.
+     * Returns the properties to be maintained in persisted state.
      *
      * @returns {string} .
      * @private
      */
     Gantt.prototype.getPersistData = function () {
-        var keyEntity = ['allowSelection'];
+        var keyEntity = ['sortSettings',
+            'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'treeColumnIndex', 'currentZoomingLevel', 'cloneProjectStartDate', 'cloneProjectEndDate'];
+        var ignoreOnPersist = {
+            filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent', 'hierarchyMode'],
+            searchSettings: ['fields', 'operator', 'ignoreCase'],
+            sortSettings: [], columns: [], selectedRowIndex: []
+        };
+        var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',
+            'commandTemplate', 'commands', 'dataSource'];
+        for (var i = 0; i < keyEntity.length; i++) {
+            var currentObject = this[keyEntity[i]];
+            for (var k = 0, val = ignoreOnPersist[keyEntity[i]]; (!isNullOrUndefined(val) && k < val.length); k++) {
+                var objVal = val[k];
+                delete currentObject[objVal];
+            }
+        }
+        this.ignoreInArrays(ignoreOnColumn, this.columns);
         return this.addOnPersist(keyEntity);
     };
+    Gantt.prototype.ignoreInArrays = function (ignoreOnColumn, columns) {
+        for (var i = 0; i < columns.length; i++) {
+            this.ignoreInColumn(ignoreOnColumn, columns[i]);
+        }
+    };
+    Gantt.prototype.ignoreInColumn = function (ignoreOnColumn, column) {
+        for (var i = 0; i < ignoreOnColumn.length; i++) {
+            delete column[ignoreOnColumn[i]];
+            column.filter = {};
+        }
+    };
     /**
      * @returns {void} .
      * @private
@@ -13763,6 +13915,12 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.enableCriticalPath) {
+            modules.push({
+                member: 'criticalPath',
+                args: [this]
+            });
+        }
         if (this.allowResizing) {
             modules.push({
                 member: 'resize',
@@ -13840,6 +13998,17 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             this.sortModule.sortColumn(columnName, direction, isMultiSort);
         }
     };
+    Gantt.prototype.mergePersistGanttData = function () {
+        if (!this.treeGrid) {
+            this.treeGrid = new TreeGrid();
+        }
+        var persist1 = 'mergePersistGridData';
+        this.treeGrid.grid[persist1].apply(this);
+    };
+    Gantt.prototype.mergeColumns = function (storedColumn, columns) {
+        var persist2 = 'mergeColumns';
+        this.treeGrid.grid[persist2].apply(this, [storedColumn, columns]);
+    };
     /**
      * Clears all the sorted columns of the Gantt.
      *
@@ -13917,7 +14086,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
      */
     Gantt.prototype.updateGridLineContainerHeight = function () {
         if (this.chartVerticalLineContainer) {
-            this.chartVerticalLineContainer.style.height = formatUnit(this.contentHeight);
+            this.chartVerticalLineContainer.style.height = formatUnit(this.getContentHeight());
         }
     };
     /**
@@ -14021,6 +14190,7 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             progress: 'Progress',
             dependency: 'Dependency',
             notes: 'Notes',
+            criticalPath: 'Critical Path',
             baselineStartDate: 'Baseline Start Date',
             baselineEndDate: 'Baseline End Date',
             taskMode: 'Task Mode',
@@ -14718,6 +14888,34 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             this.editModule.outdent();
         }
     };
+    /**
+     * To render the critical path tasks in Gantt.
+     *
+     * @returns {void} .
+     * @param {boolean} isCritical- whether to render critical path or not .
+     * @public
+     */
+    Gantt.prototype.showCriticalPath = function (isCritical) {
+        if (this.criticalPathModule) {
+            this.criticalPathModule.showCriticalPath(isCritical);
+            var criticalModule = this.criticalPathModule;
+            this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
+    };
+    /**
+     * To get all the critical tasks in Gantt.
+     *
+     * @returns {IGanttData[]} .
+     * @public
+     */
+    Gantt.prototype.getCriticalTasks = function () {
+        if (!isNullOrUndefined(this.criticalPathModule) && this.enableCriticalPath) {
+            return this.criticalPathModule.getCriticalTasks();
+        }
+        else {
+            return null;
+        }
+    };
     /**
      * To perform Zoom in action on Gantt timeline.
      *
@@ -15529,6 +15727,9 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Gantt.prototype, "enableContextMenu", void 0);
+    __decorate([
+        Property(false)
+    ], Gantt.prototype, "enableCriticalPath", void 0);
     __decorate([
         Property()
     ], Gantt.prototype, "contextMenuItems", void 0);
@@ -15829,7 +16030,7 @@ var CellEdit = /** @__PURE__ @class */ (function () {
             return;
         }
         if (data.hasChildRecords && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
-            data['isManual'] == false) || this.parent.taskMode == 'Auto')) || field === taskSettings.duration
+            data['isManual'] === false) || this.parent.taskMode === 'Auto')) || field === taskSettings.duration
             || field === taskSettings.dependency || field === taskSettings.progress
             || field === taskSettings.work || field === 'taskType')) {
             args.cancel = true;
@@ -16018,7 +16219,7 @@ var CellEdit = /** @__PURE__ @class */ (function () {
         var ganttProb = args.data.ganttProperties;
         var currentValue = args.data[this.parent.taskFields.startDate];
         currentValue = currentValue ? new Date(currentValue.getTime()) : null;
-        currentValue = this.parent.dateValidationModule.checkStartDate(currentValue);
+        currentValue = this.parent.dateValidationModule.checkStartDate(currentValue, ganttData.ganttProperties, ganttData.ganttProperties.isMilestone);
         if (isNullOrUndefined(currentValue)) {
             if (!ganttData.hasChildRecords) {
                 this.parent.setRecordValue('startDate', null, ganttProb, true);
@@ -16143,7 +16344,9 @@ var CellEdit = /** @__PURE__ @class */ (function () {
         var currentDuration = ganttProb.duration;
         if (isNullOrUndefined(currentDuration)) {
             this.parent.setRecordValue('isMilestone', false, ganttProb, true);
-            this.parent.setRecordValue('endDate', null, ganttProb, true);
+            if (args.data[this.parent.taskFields.duration] != null) {
+                this.parent.setRecordValue('endDate', null, ganttProb, true);
+            }
         }
         else {
             if (isNullOrUndefined(startDate) && !isNullOrUndefined(endDate)) {
@@ -16896,9 +17099,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                     addClass([element], [activeParentTask]);
                 }
             }
-            if (isShowProgressResizer) {
-                addClass(this.parent.ganttChartModule.scrollElement.querySelectorAll('.' + connectorLineContainer), [connectorLineZIndex]);
-            }
+            addClass(this.parent.ganttChartModule.scrollElement.querySelectorAll('.' + connectorLineContainer), [connectorLineZIndex]);
             if (!isNullOrUndefined(this.parent.taskFields.dependency)
                 && (element.querySelector('.' + connectorPointLeft)
                     || element.parentElement.querySelector('.' + connectorPointLeft))
@@ -17162,7 +17363,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('left');
             }
-            else if (isConnectorLineEdit && ((mouseY + 20) >
+            else if (isConnectorLineEdit && ((mouseY + 80) >
                 containerPosition.top + this.parent.ganttChartModule.chartBodyContainer.offsetHeight)) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.top;
                 this.startScrollTimer('bottom');
@@ -18040,6 +18241,10 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.parent.isOnEdit = false;
                 this.cancelTaskbarEditActionInMouseLeave();
+                if (this.parent.enableCriticalPath && this.parent.criticalPathModule) {
+                    var criticalModule = this.parent.criticalPathModule;
+                    criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+                }
             }
         }
         if (this.parent.viewType === 'ResourceView' && this.parent.enableMultiTaskbar && !isNullOrUndefined(this.taskBarEditElement)) {
@@ -19353,7 +19558,7 @@ var DialogEdit = /** @__PURE__ @class */ (function () {
             }
             else if (isScheduledTask(ganttProp) || !isNullOrUndefined(ganttProp.startDate)) {
                 if (ganttData.ganttProperties.isMilestone && ganttData.ganttProperties.duration !== 0) {
-                    this.parent.dateValidationModule.calculateStartDate(ganttData);
+                    this.parent.dateValidationModule.checkStartDate(ganttProp.startDate);
                 }
                 this.parent.dateValidationModule.calculateEndDate(ganttData);
             }
@@ -20717,9 +20922,16 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
     ConnectorLineEdit.prototype.addHighlight = function (element) {
         this.connectorLineElement = element;
         addClass([element], [connectorLineHoverZIndex]);
-        addClass(element.querySelectorAll('.' + connectorLine), [connectorLineHover]);
-        addClass(element.querySelectorAll('.' + connectorLineRightArrow), [connectorLineRightArrowHover]);
-        addClass(element.querySelectorAll('.' + connectorLineLeftArrow), [connectorLineLeftArrowHover]);
+        if (element.querySelectorAll('.' + connectorLine)[0].classList.contains('e-criticalconnector-line')) {
+            addClass(element.querySelectorAll('.' + connectorLine), [criticalConnectorLineHover]);
+            addClass(element.querySelectorAll('.' + connectorLineRightArrow), [criticalConnectorLineRightArrowHover]);
+            addClass(element.querySelectorAll('.' + connectorLineLeftArrow), [criticalConnectorLineLeftArrowHover]);
+        }
+        else {
+            addClass(element.querySelectorAll('.' + connectorLine), [connectorLineHover]);
+            addClass(element.querySelectorAll('.' + connectorLineRightArrow), [connectorLineRightArrowHover]);
+            addClass(element.querySelectorAll('.' + connectorLineLeftArrow), [connectorLineLeftArrowHover]);
+        }
     };
     /**
      * To remove connector line highlight class.
@@ -20730,9 +20942,16 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
     ConnectorLineEdit.prototype.removeHighlight = function () {
         if (!isNullOrUndefined(this.connectorLineElement)) {
             removeClass([this.connectorLineElement], [connectorLineHoverZIndex]);
-            removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLine), [connectorLineHover]);
-            removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineRightArrow), [connectorLineRightArrowHover]);
-            removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineLeftArrow), [connectorLineLeftArrowHover]);
+            if (this.connectorLineElement.querySelectorAll('.' + connectorLine)[0].classList.contains(criticalConnectorLineHover)) {
+                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLine), [criticalConnectorLineHover]);
+                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineRightArrow), [criticalConnectorLineRightArrowHover]);
+                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineLeftArrow), [criticalConnectorLineLeftArrowHover]);
+            }
+            else {
+                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLine), [connectorLineHover]);
+                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineRightArrow), [connectorLineRightArrowHover]);
+                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineLeftArrow), [connectorLineLeftArrowHover]);
+            }
             this.connectorLineElement = null;
         }
     };
@@ -21940,6 +22159,9 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 }
                 if ((key === tasks.baselineStartDate || key === tasks.baselineEndDate) &&
                     (ganttData.ganttProperties.baselineStartDate && ganttData.ganttProperties.baselineEndDate)) {
+                    ganttObj.setRecordValue('baselineStartDate', ganttObj.dataOperation.checkBaselineStartDate(ganttData.ganttProperties.baselineStartDate), ganttData.ganttProperties, true);
+                    ganttObj.dataOperation.setTime(this.parent.defaultEndTime, ganttData.ganttProperties.baselineEndDate);
+                    ganttObj.setRecordValue('baselineEndDate', ganttObj.dataOperation.checkBaselineEndDate(ganttData.ganttProperties.baselineEndDate), ganttData.ganttProperties, true);
                     ganttObj.setRecordValue('baselineLeft', ganttObj.dataOperation.calculateBaselineLeft(ganttData.ganttProperties), ganttData.ganttProperties, true);
                     ganttObj.setRecordValue('baselineWidth', ganttObj.dataOperation.calculateBaselineWidth(ganttData.ganttProperties), ganttData.ganttProperties, true);
                 }
@@ -22702,6 +22924,11 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 eventArgs.taskBarEditAction = args.taskBarEditAction;
             }
             this.endEditAction(args);
+            if (this.parent.enableCriticalPath) {
+                var criticalModule = this.parent.criticalPathModule;
+                criticalModule.showCriticalPath(true);
+                criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+            }
             this.parent.trigger('actionComplete', eventArgs);
         }
         else {
@@ -23036,6 +23263,8 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             }
             else {
                 this.deleteSelectedItems();
+                var focusingElement = this.parent.element.querySelector('.e-treegrid');
+                focusingElement.focus();
             }
         }
     };
@@ -23906,7 +24135,17 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             this.refreshRecordInImmutableMode();
         }
     };
-    Edit$$1.prototype.refreshRecordInImmutableMode = function () {
+    Edit$$1.prototype.refreshRecordInImmutableMode = function (data, dragged) {
+        if (!dragged && !isNullOrUndefined(data)) {
+            for (var i = data[0].index + 1; i < this.parent.currentViewData.length; i++) {
+                if (data[0].level < this.parent.currentViewData[i].level) {
+                    this.parent.modifiedRecords.push(this.parent.currentViewData[i]);
+                }
+                else {
+                    break;
+                }
+            }
+        }
         var _loop_1 = function (i) {
             var originalData = this_1.parent.modifiedRecords[i];
             var treeIndex = this_1.parent.allowRowDragAndDrop ? 1 : 0;
@@ -24073,7 +24312,13 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                             var insertCrud = data_2.insert(updatedData_2[addedRecords], null, query_2);
                             insertCrud.then(function (e) {
                                 var changedRecords = 'changedRecords';
-                                var addedRecords = e[0];
+                                var addedRecords;
+                                if (!isNullOrUndefined(e[0])) {
+                                    addedRecords = e[0];
+                                }
+                                else {
+                                    addedRecords = updatedData_2['addedRecords'][0];
+                                }
                                 /* tslint:disable-next-line */
                                 var updateCrud = data_2.update(_this.parent.taskFields.id, updatedData_2[changedRecords], null, query_2);
                                 updateCrud.then(function () {
@@ -24620,7 +24865,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         this.parent.treeGrid.parentData = [];
         this.parent.treeGrid.refresh();
         if (this.parent.enableImmutableMode) {
-            this.refreshRecordInImmutableMode();
+            this.refreshRecordInImmutableMode(args.data, isDrag);
         }
         if (isDrag) {
             args.requestType = 'rowDropped';
@@ -25240,7 +25485,7 @@ var Filter$1 = /** @__PURE__ @class */ (function () {
             var ganttElement = closest(element, '#' + this.parent.element.id)
                 || element.querySelector('#' + this.parent.element.id);
             if ((!(this.filterMenuElement.contains(element)) && !isNullOrUndefined(ganttElement)) || (!(this.filterMenuElement.contains(element)) && (isNullOrUndefined(datePickerElement))
-                && (isNullOrUndefined(dateTimePickerElement)) && ((element.nodeName === 'DIV') || (element.nodeName === 'HTML')))) {
+                && (isNullOrUndefined(dateTimePickerElement)) && ((element.nodeName === 'DIV') || (element.nodeName === 'HTML') || (element.nodeName === 'SPAN') || (element.nodeName === 'BUTTON')))) {
                 remove(this.filterMenuElement);
                 this.parent.treeGrid.grid.notify('filter-menu-close', { isOpen: false });
                 this.filterMenuElement = null;
@@ -25893,6 +26138,9 @@ var Selection$1 = /** @__PURE__ @class */ (function () {
             this.popUpClickHandler(e);
             if (this.parent.selectionSettings.mode !== 'Cell' && isSelected) {
                 if (closest(e.target, 'tr.e-chart-row')) {
+                    if (this.parent.enableVirtualization) {
+                        this.parent.treeGrid.grid.selectionModule.isInteracted = true;
+                    }
                     this.highlightSelectedRows(e, true);
                 }
                 else {
@@ -25952,7 +26200,7 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
         this.predefinedItems = {};
         this.items = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search',
             'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport',
-            'CsvExport', 'PdfExport', 'Indent', 'Outdent'];
+            'CsvExport', 'PdfExport', 'Indent', 'Outdent', 'CriticalPath'];
         this.parent = parent;
         this.id = this.parent.element.id;
         this.parent.on('ui-toolbarupdate', this.propertyChanged, this);
@@ -25976,11 +26224,19 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
             }
             var preItems = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
                 'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport', 'CsvExport',
-                'PdfExport', 'Indent', 'Outdent'];
+                'PdfExport', 'Indent', 'Outdent', 'CriticalPath'];
             for (var _i = 0, preItems_1 = preItems; _i < preItems_1.length; _i++) {
                 var item = preItems_1[_i];
-                var itemStr = item.toLowerCase();
-                var localeName = item[0].toLowerCase() + item.slice(1);
+                var itemStr = void 0;
+                var localeName = void 0;
+                if (item === 'CriticalPath') {
+                    itemStr = "critical-path";
+                    localeName = "criticalPath";
+                }
+                else {
+                    itemStr = item.toLowerCase();
+                    localeName = item[0].toLowerCase() + item.slice(1);
+                }
                 this.predefinedItems[item] = {
                     id: this.parent.element.id + '_' + itemStr, prefixIcon: 'e-' + itemStr,
                     text: this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant(localeName),
@@ -26184,6 +26440,14 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
                             gObj.indent();
                         }
                         break;
+                    case gID + '_critical-path':
+                        if (gObj.enableCriticalPath) {
+                            gObj.enableCriticalPath = false;
+                        }
+                        else {
+                            gObj.enableCriticalPath = true;
+                        }
+                        break;
                     case gID + '_outdent':
                         if (gObj.editModule && gObj.selectionModule.getSelectedRecords().length) {
                             gObj.outdent();
@@ -26363,6 +26627,8 @@ var Toolbar$3 = /** @__PURE__ @class */ (function () {
             disableItems.push(gID + '_edit');
             disableItems.push(gID + '_update');
             disableItems.push(gID + '_cancel');
+            disableItems.push(gID + '_indent');
+            disableItems.push(gID + '_outdent');
         }
         for (var e = 0; e < enableItems.length; e++) {
             var index = void 0;
@@ -26482,8 +26748,9 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
         var toDate;
         var container = createElement('div');
         var height = this.parent.contentHeight;
+        // eslint-disable-next-line
         var toolbarHeight = 0;
-        if (!isNullOrUndefined(this.parent.toolbarModule)) {
+        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;
@@ -26588,6 +26855,7 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
         var height = this.parent.getContentHeight();
+        // eslint-disable-next-line
         var toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
             toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
@@ -26792,6 +27060,738 @@ var DayMarkers = /** @__PURE__ @class */ (function () {
     return DayMarkers;
 }());
 
+var CriticalPath = /** @__PURE__ @class */ (function () {
+    function CriticalPath(parent) {
+        this.resourceCollectionIds = [];
+        this.criticalTasks = [];
+        this.parent = parent;
+    }
+    CriticalPath.prototype.getCriticalTasks = function () {
+        return this.criticalTasks;
+    };
+    CriticalPath.prototype.showCriticalPath = function (isCritical) {
+        var modelIds = this.parent.ids;
+        var totalRecords = this.parent.flatData;
+        if (isCritical && this.parent.flatData.length > 0 && !this.parent.enableMultiTaskbar) {
+            this.parent.enableCriticalPath = true;
+            var parentRecords = this.parent.treeGrid.parentData;
+            var checkEndDateTaskid = void 0;
+            var checkEndDate = parentRecords[0].ganttProperties.endDate;
+            var dateDifference = 0;
+            var checkBeyondEnddate = [];
+            var totalPredecessorsCollection = [];
+            var totalPredecessorsCollectionId = [];
+            var predecessorIndex = 0;
+            var taskBeyondEnddate = [];
+            var predecessorTaskBeyondEnddate = [];
+            var collection = [];
+            var collectionTaskId = [];
+            var fromDataObject = [];
+            var criticalPathIds = [];
+            /* eslint-disable-next-line */
+            if (parentRecords[0].ganttProperties.autoEndDate > parentRecords[0].ganttProperties.endDate && !parentRecords[0].ganttProperties.isAutoSchedule) {
+                checkEndDate = parentRecords[0].ganttProperties.autoEndDate;
+            }
+            checkEndDateTaskid = parentRecords[0].ganttProperties.taskId;
+            // Find the total project endDate
+            for (var i = 1; i < parentRecords.length; i++) {
+                if (parentRecords[i].ganttProperties.endDate >= checkEndDate) {
+                    checkEndDate = parentRecords[i].ganttProperties.endDate;
+                    checkEndDateTaskid = parentRecords[i].ganttProperties.taskId;
+                }
+                if (!parentRecords[i].ganttProperties.isAutoSchedule) {
+                    if (parentRecords[i].ganttProperties.autoEndDate >= checkEndDate) {
+                        checkEndDate = parentRecords[i].ganttProperties.autoEndDate;
+                        checkEndDateTaskid = parentRecords[i].ganttProperties.taskId;
+                    }
+                }
+            }
+            this.maxEndDate = checkEndDate;
+            // find the tasks that ends on total project end date that stored in checkBeyondEnddate
+            // find the tasks with predecessor that stored in totalPredecessorsCollectionId.
+            for (var j = 0; j < totalRecords.length; j++) {
+                totalRecords[j].isCritical = false;
+                totalRecords[j].ganttProperties.isCritical = false;
+                /* eslint-disable-next-line */
+                dateDifference = this.parent.dataOperation.getDuration(totalRecords[j].ganttProperties.endDate, checkEndDate, totalRecords[j].ganttProperties.durationUnit, totalRecords[j].ganttProperties.isAutoSchedule, totalRecords[j].ganttProperties.isMilestone);
+                totalRecords[j].slack = dateDifference + ' ' + totalRecords[j].ganttProperties.durationUnit;
+                totalRecords[j].ganttProperties.slack = dateDifference + ' ' + totalRecords[j].ganttProperties.durationUnit;
+                if (totalRecords[j].ganttProperties.endDate >= checkEndDate) {
+                    checkBeyondEnddate.push(parseInt(totalRecords[j].ganttProperties.taskId, 10));
+                }
+                if (totalRecords[j].ganttProperties.predecessor) {
+                    if (totalRecords[j].ganttProperties.predecessor.length !== 0) {
+                        totalPredecessorsCollection.push(totalRecords[j]);
+                        totalPredecessorsCollectionId.push(parseInt(totalRecords[j].ganttProperties.taskId, 10));
+                    }
+                }
+            }
+            if (this.parent.viewType === 'ResourceView') {
+                for (var i = 0; i < this.parent.taskIds.length; i++) {
+                    this.resourceCollectionIds[i] = this.parent.taskIds[i].slice(1);
+                }
+            }
+            // seperate the predecessor connected taskes from the individual taskes that ends on total project end date
+            for (var k = 0; k < checkBeyondEnddate.length; k++) {
+                if (totalPredecessorsCollectionId.indexOf(checkBeyondEnddate[k]) === -1) {
+                    if (this.parent.viewType === 'ProjectView') {
+                        predecessorIndex = modelIds.indexOf(checkBeyondEnddate[k].toString());
+                    }
+                    else {
+                        predecessorIndex = this.resourceCollectionIds.indexOf(checkBeyondEnddate[k].toString());
+                    }
+                    if (totalRecords[predecessorIndex].ganttProperties.progress < 100) {
+                        totalRecords[predecessorIndex].isCritical = true;
+                        totalRecords[predecessorIndex].ganttProperties.isCritical = true;
+                    }
+                    totalRecords[predecessorIndex]['slack'] = 0 + ' ' + totalRecords[predecessorIndex].ganttProperties.durationUnit;
+                    taskBeyondEnddate.push(checkBeyondEnddate[k]);
+                }
+                else {
+                    predecessorTaskBeyondEnddate.push(checkBeyondEnddate[k]);
+                }
+            }
+            var predecessorLength = totalPredecessorsCollection.length;
+            var endTask = [];
+            // find the detail collection of predecessor for each taskes that stored in collection.
+            for (var x = 0; x < predecessorLength; x++) {
+                var to = -1;
+                var from = -1;
+                var toPredecessor = -1;
+                var fromPredecessor = -1;
+                var currentIndex = x;
+                var predecessor = totalPredecessorsCollection[x].ganttProperties.predecessor;
+                var individualPredecessorLength = totalPredecessorsCollection[x].ganttProperties.predecessor.length;
+                var taskid = (parseInt(totalPredecessorsCollection[x].ganttProperties.taskId, 10));
+                for (var y = 0; y < individualPredecessorLength; y++) {
+                    if (parseInt(predecessor[y].from, 10) === taskid) {
+                        if (to === -1) {
+                            if (!predecessor[y].offset) {
+                                to = predecessor[y].to;
+                                toPredecessor = predecessor[y].type;
+                            }
+                            else {
+                                to = predecessor[y].to + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                toPredecessor = predecessor[y].type;
+                            }
+                        }
+                        else {
+                            if (!predecessor[y].offset) {
+                                to = to + ',' + predecessor[y].to;
+                                toPredecessor = toPredecessor + ',' + predecessor[y].type;
+                            }
+                            else {
+                                to = to + ',' + predecessor[y].to + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                toPredecessor = toPredecessor + ',' + predecessor[y].type;
+                            }
+                        }
+                    }
+                    if (parseInt(predecessor[y].to, 10) === taskid) {
+                        if (from === -1) {
+                            if (!predecessor[y].offset) {
+                                from = predecessor[y].from;
+                                fromPredecessor = predecessor[y].type;
+                            }
+                            else {
+                                from = predecessor[y].from + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                fromPredecessor = predecessor[y].type;
+                            }
+                        }
+                        else {
+                            if (!predecessor[y].offset) {
+                                from = from + ',' + predecessor[y].from;
+                                fromPredecessor = fromPredecessor + ',' + predecessor[y].type;
+                            }
+                            else {
+                                from = from + ',' + predecessor[y].from + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                fromPredecessor = fromPredecessor + ',' + predecessor[y].type;
+                            }
+                        }
+                    }
+                }
+                if (from === -1) {
+                    from = null;
+                    fromPredecessor = null;
+                }
+                if (to === -1) {
+                    to = null;
+                    toPredecessor = null;
+                }
+                /* eslint-disable-next-line */
+                collection.push({ from: from, fromPredecessor: fromPredecessor, taskid: taskid, to: to, toPredecessor: toPredecessor, currentIndex: currentIndex, slack: null, enddate: null });
+                collectionTaskId.push(taskid);
+            }
+            var collectionLength = collection.length;
+            var indexEnddate = 0;
+            var num = void 0;
+            // find the predecessors connected taskes that does not contains any successor.
+            for (var z = 0; z < collectionLength; z++) {
+                if (!collection[z]['to']) {
+                    num = collection[z]['taskid'];
+                    if (this.parent.viewType === 'ProjectView') {
+                        indexEnddate = modelIds.indexOf(num.toString());
+                    }
+                    else {
+                        indexEnddate = this.resourceCollectionIds.indexOf(num.toString());
+                    }
+                    var flatData = totalRecords[indexEnddate].ganttProperties;
+                    /* eslint-disable-next-line */
+                    dateDifference = this.parent.dataOperation.getDuration(flatData.endDate, checkEndDate, 'minute', flatData.isAutoSchedule, flatData.isMilestone);
+                    collection[z]['slack'] = dateDifference;
+                    collection[z]['fs'] = -1;
+                    collection[z]['enddate'] = flatData.endDate;
+                    endTask.push({
+                        fromdata: collection[z]['from'], todateID: collection[z]['taskid'],
+                        fromDataPredecessor: collection[z]['fromPredecessor']
+                    });
+                }
+            }
+            for (var k = 0; k < endTask.length; k++) {
+                fromDataObject.push(endTask[k]);
+                this.slackCalculation(fromDataObject, collection, collectionTaskId, checkEndDate, totalRecords, modelIds);
+            }
+            criticalPathIds = this.finalCriticalPath(collection, taskBeyondEnddate, totalRecords, modelIds, checkEndDate);
+            this.criticalPathCollection = criticalPathIds;
+            this.detailPredecessorCollection = collection;
+            this.predecessorCollectionTaskIds = collectionTaskId;
+        }
+        if (isCritical === false && this.parent.flatData.length > 0 && !this.parent.enableMultiTaskbar) {
+            var pathIndex = void 0;
+            this.parent.enableCriticalPath = false;
+            for (var z = 0; z < this.criticalPathCollection.length; z++) {
+                pathIndex = modelIds.indexOf(this.criticalPathCollection[z].toString());
+                totalRecords[pathIndex].isCritical = false;
+            }
+            this.criticalPathCollection = [];
+            this.detailPredecessorCollection = [];
+            this.predecessorCollectionTaskIds = [];
+        }
+    };
+    /* eslint-disable-next-line */
+    CriticalPath.prototype.slackCalculation = function (fromDataObject, collection, collectionTaskId, checkEndDate, flatRecords, modelRecordIds) {
+        var fromDateArray = fromDataObject[0]['fromdata'].split(',');
+        var fromDataPredecessor = fromDataObject[0]['fromDataPredecessor'].split(',');
+        var fromDateArray1 = [];
+        var fromTaskIdIndex;
+        var indexFromTaskId;
+        var indexToTaskId;
+        var totaskId;
+        var dateDifference;
+        var prevTaskEnddate;
+        var offsetInMillSec;
+        var ffslack;
+        for (var i = 0; i < fromDateArray.length; i++) {
+            fromDateArray1 = fromDateArray[i].split(':');
+            fromTaskIdIndex = collectionTaskId.indexOf(parseInt(fromDateArray1[0], 10));
+            totaskId = collectionTaskId.indexOf(parseInt(fromDataObject[0]['todateID'], 10));
+            if (this.parent.viewType === 'ProjectView') {
+                indexFromTaskId = modelRecordIds.indexOf(fromDateArray1[0].toString());
+                indexToTaskId = modelRecordIds.indexOf(fromDataObject[0]['todateID'].toString());
+            }
+            else {
+                indexFromTaskId = this.resourceCollectionIds.indexOf(fromDateArray1[0].toString());
+                indexToTaskId = this.resourceCollectionIds.indexOf(fromDataObject[0]['todateID'].toString());
+            }
+            var fromIdFlatData = flatRecords[indexFromTaskId].ganttProperties;
+            var toIdFlatData = flatRecords[indexToTaskId].ganttProperties;
+            if (fromDateArray1.length > 1) {
+                if (fromDateArray1[1].indexOf('hour') !== -1) {
+                    offsetInMillSec = parseFloat(fromDateArray1[1]) * 60;
+                }
+                else if (fromDateArray1[1].indexOf('day') !== -1) {
+                    offsetInMillSec = parseFloat(fromDateArray1[1]) * (this.parent.secondsPerDay / 3600) * 60;
+                }
+                else {
+                    offsetInMillSec = parseFloat(fromDateArray1[1]);
+                }
+            }
+            // calculate slack value for the task contains predecessor connection in "finish to start".
+            if (fromDataPredecessor[i] === 'FS') {
+                if (fromIdFlatData.endDate > toIdFlatData.startDate) {
+                    /* eslint-disable-next-line */
+                    dateDifference = -(this.parent.dataOperation.getDuration(toIdFlatData.startDate, fromIdFlatData.endDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone));
+                }
+                else {
+                    /* eslint-disable-next-line */
+                    dateDifference = this.parent.dataOperation.getDuration(fromIdFlatData.endDate, toIdFlatData.startDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone);
+                }
+                // execute if the slack value is not set initially.
+                if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
+                    // execute if the offset value is not given.
+                    if (fromDateArray1.length <= 1) {
+                        if (collection[totaskId]['slack'] + dateDifference < 0) {
+                            collection[fromTaskIdIndex]['slack'] = 0;
+                        }
+                        else {
+                            collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                        }
+                    }
+                }
+                // execute if the current calculated slack value is less than the previous slack value.
+                else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                    // execute if the offset value is not given.
+                    if (fromDateArray1.length <= 1) {
+                        if (collection[totaskId]['slack'] + dateDifference < 0) {
+                            collection[fromTaskIdIndex]['slack'] = 0;
+                        }
+                        else {
+                            collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                        }
+                    }
+                }
+                // execute if the offset value is given.
+                if (fromDateArray1.length > 1) {
+                    collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                    collection[fromTaskIdIndex]['slack'] = collection[fromTaskIdIndex]['slack'] - (offsetInMillSec);
+                    if (collection[fromTaskIdIndex]['slack'] < 0) {
+                        collection[fromTaskIdIndex]['slack'] = 0;
+                    }
+                }
+                collection[fromTaskIdIndex]['fs'] = 1;
+                collection[fromTaskIdIndex]['fsslack'] = collection[fromTaskIdIndex]['slack'];
+                collection[fromTaskIdIndex]['enddate'] = fromIdFlatData.startDate;
+                if (fromIdFlatData.endDate >= checkEndDate && fromIdFlatData.endDate <= checkEndDate) {
+                    collection[fromTaskIdIndex]['slack'] = 0;
+                }
+            }
+            //  calculate slack value for the task contains predecessor connection in "start to start".
+            if (fromDataPredecessor[i] === 'SS') {
+                // It execute if the task is in auto mode.
+                if (fromIdFlatData.isAutoSchedule) {
+                    if (fromIdFlatData.startDate > toIdFlatData.startDate) {
+                        /* eslint-disable-next-line */
+                        dateDifference = -(this.parent.dataOperation.getDuration(toIdFlatData.endDate, fromIdFlatData.startDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone));
+                    }
+                    else {
+                        /* eslint-disable-next-line */
+                        dateDifference = this.parent.dataOperation.getDuration(fromIdFlatData.startDate, toIdFlatData.startDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone);
+                    }
+                    // It execute while the slack value is not set to the corresponding task.
+                    if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
+                        if (fromDateArray1.length <= 1) {
+                            if (collection[totaskId]['slack'] + dateDifference < 0) {
+                                collection[fromTaskIdIndex]['slack'] = 0;
+                            }
+                            else {
+                                collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                            }
+                        }
+                    }
+                    //It execute while already the slack value is set and it is higher than the datedifference. 
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                        if (fromDateArray1.length <= 1) {
+                            if (collection[totaskId]['slack'] + dateDifference < 0) {
+                                collection[fromTaskIdIndex]['slack'] = 0;
+                            }
+                            else {
+                                collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                            }
+                        }
+                    }
+                    // execute if the offset value is given.
+                    if (fromDateArray1.length > 1) {
+                        collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                        collection[fromTaskIdIndex]['slack'] = collection[fromTaskIdIndex]['slack'] - (offsetInMillSec);
+                        if (collection[fromTaskIdIndex]['slack'] < 0) {
+                            collection[fromTaskIdIndex]['slack'] = 0;
+                        }
+                    }
+                    collection[fromTaskIdIndex]['fs'] = 1;
+                    collection[fromTaskIdIndex]['fsslack'] = collection[fromTaskIdIndex]['slack'];
+                    collection[fromTaskIdIndex]['enddate'] = fromIdFlatData.startDate;
+                }
+                // It execute if the task is in not an auto mode task.
+                else if (!fromIdFlatData.isAutoSchedule) {
+                    dateDifference = this.getSlackDuration(fromIdFlatData.endDate, checkEndDate, 'minute', flatRecords[indexFromTaskId]);
+                    if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
+                        collection[fromTaskIdIndex]['slack'] = dateDifference;
+                    }
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                        collection[fromTaskIdIndex]['slack'] = dateDifference;
+                    }
+                }
+                if (fromIdFlatData.endDate >= checkEndDate && fromIdFlatData.endDate <= checkEndDate) {
+                    collection[fromTaskIdIndex]['slack'] = 0;
+                }
+            }
+            //  calculate slack value for the task contains predecessor connection in "finish to finish".
+            if (fromDataPredecessor[i] === 'FF') {
+                // execute if the previous task is from finish to start or finish to finish state.
+                if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1 || collection[totaskId]['fs'] === -1) {
+                    if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1) {
+                        prevTaskEnddate = toIdFlatData.endDate;
+                        ffslack = collection[totaskId]['slack'];
+                    }
+                    if (collection[totaskId]['fs'] === -1) {
+                        prevTaskEnddate = collection[totaskId]['enddate'];
+                        ffslack = collection[totaskId]['slack'];
+                    }
+                    if (prevTaskEnddate > fromIdFlatData.endDate) {
+                        dateDifference = -(this.getSlackDuration(fromIdFlatData.endDate, prevTaskEnddate, 'minute', flatRecords[indexFromTaskId]));
+                    }
+                    else {
+                        dateDifference = this.getSlackDuration(prevTaskEnddate, fromIdFlatData.endDate, 'minute', flatRecords[indexFromTaskId]);
+                    }
+                    // set the slack value if the slack value is not set initially.
+                    if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
+                        // execute if the offset value is not given.
+                        if (fromDateArray1.length <= 1) {
+                            if (ffslack - dateDifference < 0) {
+                                collection[fromTaskIdIndex]['slack'] = 0;
+                            }
+                            else {
+                                collection[fromTaskIdIndex]['slack'] = ffslack - dateDifference;
+                            }
+                        }
+                    }
+                    // overright the slack value if the current calculated slack value is less than the previous slack value.
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                        // execute if the offset value is not given.
+                        if (fromDateArray1.length <= 1) {
+                            if (ffslack - dateDifference < 0) {
+                                collection[fromTaskIdIndex]['slack'] = 0;
+                            }
+                            else {
+                                collection[fromTaskIdIndex]['slack'] = ffslack - dateDifference;
+                            }
+                        }
+                    }
+                    // execute if the offset value is given.
+                    if (fromDateArray1.length > 1) {
+                        collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] - dateDifference;
+                        collection[fromTaskIdIndex]['slack'] = collection[fromTaskIdIndex]['slack'] - (offsetInMillSec);
+                        if (collection[fromTaskIdIndex]['slack'] < 0) {
+                            collection[fromTaskIdIndex]['slack'] = 0;
+                        }
+                    }
+                    collection[fromTaskIdIndex]['ff'] = 1;
+                    collection[fromTaskIdIndex]['enddate'] = prevTaskEnddate;
+                    collection[fromTaskIdIndex]['fsslack'] = ffslack;
+                }
+                if (fromIdFlatData.endDate >= checkEndDate && fromIdFlatData.endDate <= checkEndDate) {
+                    collection[fromTaskIdIndex]['slack'] = 0;
+                }
+            }
+            //  calculate slack value for the task contains predecessor connection in "start to finish".
+            if (fromDataPredecessor[i] === 'SF') {
+                //It execute if the task is an auto mode task.
+                if (fromIdFlatData.isAutoSchedule) {
+                    //execute if the slack value is not set initially.
+                    if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
+                        // execute if the offset value is not given.
+                        if (fromDateArray1.length <= 1) {
+                            // execute if the previous task does no has sucessor.
+                            if (isNullOrUndefined(collection[totaskId]['to'])) {
+                                dateDifference = this.getSlackDuration(fromIdFlatData.endDate, checkEndDate, 'minute', flatRecords[indexFromTaskId]);
+                                collection[fromTaskIdIndex]['slack'] = dateDifference;
+                            }
+                            // execute if the previous task has sucessor.
+                            else if (!isNullOrUndefined(collection[totaskId]['to'])) {
+                                if (toIdFlatData.endDate > fromIdFlatData.startDate) {
+                                    /* eslint-disable-next-line */
+                                    dateDifference = -(this.parent.dataOperation.getDuration(fromIdFlatData.startDate, toIdFlatData.endDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone));
+                                }
+                                else {
+                                    dateDifference = this.getSlackDuration(toIdFlatData.endDate, fromIdFlatData.startDate, 'minute', flatRecords[indexFromTaskId]);
+                                }
+                                if (collection[totaskId]['slack'] + dateDifference < 0) {
+                                    collection[fromTaskIdIndex]['slack'] = 0;
+                                }
+                                else {
+                                    collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                                }
+                            }
+                        }
+                        // execute if the offset value is given.
+                        else if (fromDateArray1.length > 1) {
+                            if (toIdFlatData.endDate >= fromIdFlatData.endDate) {
+                                if (fromIdFlatData.startDate > toIdFlatData.endDate) {
+                                    /* eslint-disable-next-line */
+                                    dateDifference = -(this.getSlackDuration(toIdFlatData.endDate, fromIdFlatData.startDate, 'minute', flatRecords[indexFromTaskId]));
+                                }
+                                else {
+                                    /* eslint-disable-next-line */
+                                    dateDifference = this.parent.dataOperation.getDuration(fromIdFlatData.startDate, toIdFlatData.endDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone);
+                                }
+                            }
+                            else {
+                                dateDifference = this.getSlackDuration(fromIdFlatData.endDate, checkEndDate, 'minute', flatRecords[indexFromTaskId]);
+                            }
+                            collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                            collection[fromTaskIdIndex]['slack'] = collection[fromTaskIdIndex]['slack'] - (offsetInMillSec);
+                            if (collection[fromTaskIdIndex]['slack'] < 0) {
+                                collection[fromTaskIdIndex]['slack'] = 0;
+                            }
+                        }
+                        collection[fromTaskIdIndex]['fs'] = 1;
+                        collection[fromTaskIdIndex]['fsslack'] = collection[fromTaskIdIndex]['slack'];
+                        collection[fromTaskIdIndex]['enddate'] = fromIdFlatData.startDate;
+                    }
+                    else {
+                        if (fromDateArray1.length <= 1) {
+                            if (isNullOrUndefined(collection[totaskId]['to'])) {
+                                /* eslint-disable-next-line */
+                                dateDifference = this.getSlackDuration(fromIdFlatData.endDate, checkEndDate, 'minute', flatRecords[indexFromTaskId]);
+                            }
+                            else if (!isNullOrUndefined(collection[totaskId]['to'])) {
+                                if (toIdFlatData.endDate > fromIdFlatData.startDate) {
+                                    // eslint-disable-next-line
+                                    dateDifference = -(this.parent.dataOperation.getDuration(fromIdFlatData.startDate, toIdFlatData.endDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone));
+                                }
+                                else {
+                                    dateDifference = this.getSlackDuration(toIdFlatData.endDate, fromIdFlatData.startDate, 'minute', flatRecords[indexFromTaskId]);
+                                }
+                            }
+                            // execute if the current calculated slack value is less than the previous slack value.
+                            if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                                if (isNullOrUndefined(collection[totaskId]['to'])) {
+                                    collection[fromTaskIdIndex]['slack'] = dateDifference;
+                                }
+                                else if (!isNullOrUndefined(collection[totaskId]['to'])) {
+                                    if (collection[totaskId]['slack'] + dateDifference < 0) {
+                                        collection[fromTaskIdIndex]['slack'] = 0;
+                                    }
+                                    else {
+                                        collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                                    }
+                                }
+                            }
+                        }
+                        else if (fromDateArray1.length > 1) {
+                            if (toIdFlatData.endDate > fromIdFlatData.endDate) {
+                                if (fromIdFlatData.startDate > toIdFlatData.endDate) {
+                                    /* eslint-disable-next-line */
+                                    dateDifference = -(this.getSlackDuration(toIdFlatData.endDate, fromIdFlatData.startDate, 'minute', flatRecords[indexFromTaskId]));
+                                }
+                                else {
+                                    // eslint-disable-next-line
+                                    dateDifference = this.parent.dataOperation.getDuration(fromIdFlatData.startDate, toIdFlatData.endDate, 'minute', fromIdFlatData.isAutoSchedule, fromIdFlatData.isMilestone);
+                                }
+                            }
+                            else {
+                                /* eslint-disable-next-line */
+                                dateDifference = this.getSlackDuration(fromIdFlatData.endDate, checkEndDate, 'minute', flatRecords[indexFromTaskId]);
+                            }
+                            // execute if the current calculated slack value is less than the previous slack value.
+                            if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                                collection[fromTaskIdIndex]['slack'] = collection[totaskId]['slack'] + dateDifference;
+                                collection[fromTaskIdIndex]['slack'] = collection[fromTaskIdIndex]['slack'] - (offsetInMillSec);
+                                if (collection[fromTaskIdIndex]['slack'] < 0) {
+                                    collection[fromTaskIdIndex]['slack'] = 0;
+                                }
+                            }
+                        }
+                        collection[fromTaskIdIndex]['fs'] = 1;
+                        collection[fromTaskIdIndex]['fsslack'] = collection[fromTaskIdIndex]['slack'];
+                        collection[fromTaskIdIndex]['enddate'] = fromIdFlatData.startDate;
+                    }
+                }
+                //It execute if the task is an auto mode task.
+                else if (!fromIdFlatData.isAutoSchedule) {
+                    dateDifference = this.getSlackDuration(fromIdFlatData.endDate, checkEndDate, 'minute', flatRecords[indexFromTaskId]);
+                    if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
+                        collection[fromTaskIdIndex]['slack'] = dateDifference;
+                    }
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                        collection[fromTaskIdIndex]['slack'] = dateDifference;
+                    }
+                }
+                if (fromIdFlatData.endDate >= checkEndDate && fromIdFlatData.endDate <= checkEndDate) {
+                    collection[fromTaskIdIndex]['slack'] = 0;
+                }
+            }
+            if (collection[fromTaskIdIndex]['from']) {
+                fromDataObject.push({
+                    fromdata: collection[fromTaskIdIndex]['from'], todateID: collection[fromTaskIdIndex]['taskid'],
+                    fromDataPredecessor: collection[fromTaskIdIndex]['fromPredecessor']
+                });
+            }
+        }
+        if (fromDataObject) {
+            fromDataObject.splice(0, 1);
+            if (fromDataObject.length > 0) {
+                this.slackCalculation(fromDataObject, collection, collectionTaskId, checkEndDate, flatRecords, modelRecordIds);
+            }
+        }
+    };
+    CriticalPath.prototype.getSlackDuration = function (sDate, eDate, durationUnit, record) {
+        var startDate = this.parent.dateValidationModule.checkStartDate(new Date(sDate));
+        var endDate = this.parent.dateValidationModule.checkEndDate(new Date(eDate));
+        if (this.parent.dataOperation['getTimeDifference'](startDate, endDate, true) <= 0) {
+            return 0;
+        }
+        else {
+            return this.parent.dataOperation.getDuration(startDate, endDate, durationUnit, record.ganttProperties.isAutoSchedule, true);
+        }
+    };
+    /* eslint-disable-next-line */
+    CriticalPath.prototype.finalCriticalPath = function (collection, taskBeyondEnddate, flatRecords, modelRecordIds, checkEndDate) {
+        var criticalPathIds = [];
+        var index;
+        for (var x = collection.length - 1; x >= 0; x--) {
+            if (this.parent.viewType === 'ProjectView') {
+                index = modelRecordIds.indexOf(collection[x]['taskid'].toString());
+            }
+            else {
+                index = this.resourceCollectionIds.indexOf(collection[x]['taskid'].toString());
+            }
+            var predecessorLength = flatRecords[index].ganttProperties.predecessor;
+            var noSlackValue = 0 + ' ' + flatRecords[index].ganttProperties.durationUnit;
+            for (var i = 0; i < predecessorLength.length; i++) {
+                var toID = void 0;
+                if (this.parent.viewType === 'ProjectView') {
+                    toID = this.parent.ids.indexOf(predecessorLength[i].to);
+                }
+                else {
+                    toID = this.resourceCollectionIds.indexOf(predecessorLength[i].to);
+                }
+                var dateDifference = void 0;
+                var currentData = flatRecords[index].ganttProperties;
+                if (predecessorLength[i].type === 'FS') {
+                    /* eslint-disable-next-line */
+                    dateDifference = this.parent.dataOperation.getDuration(currentData.endDate, flatRecords[toID].ganttProperties.startDate, currentData.durationUnit, currentData.isAutoSchedule, currentData.isMilestone);
+                    if (dateDifference === 0 && index !== toID && flatRecords[index].slack !== noSlackValue) {
+                        flatRecords[index].slack = flatRecords[toID].slack;
+                        flatRecords[index].ganttProperties.slack = flatRecords[toID].slack;
+                    }
+                    else if (dateDifference !== 0 && index !== toID && flatRecords[toID].isCritical) {
+                        flatRecords[index].slack = dateDifference + ' ' + flatRecords[index].ganttProperties.durationUnit;
+                        flatRecords[index].ganttProperties.slack = dateDifference + ' ' + flatRecords[index].ganttProperties.durationUnit;
+                    }
+                }
+                else if (predecessorLength[i].type === 'SF') {
+                    /* eslint-disable-next-line */
+                    dateDifference = this.parent.dataOperation.getDuration(currentData.startDate, flatRecords[toID].ganttProperties.endDate, currentData.durationUnit, currentData.isAutoSchedule, currentData.isMilestone);
+                }
+                else if (predecessorLength[i].type === 'SS') {
+                    /* eslint-disable-next-line */
+                    dateDifference = this.parent.dataOperation.getDuration(currentData.startDate, flatRecords[toID].ganttProperties.startDate, currentData.durationUnit, currentData.isAutoSchedule, currentData.isMilestone);
+                }
+                else {
+                    /* eslint-disable-next-line */
+                    dateDifference = this.parent.dataOperation.getDuration(currentData.endDate, flatRecords[toID].ganttProperties.endDate, currentData.durationUnit, currentData.isAutoSchedule, currentData.isMilestone);
+                }
+                if (parseInt(predecessorLength[i].from, 10) === flatRecords[index][this.parent.taskFields.id] &&
+                    flatRecords[toID].slack === noSlackValue && dateDifference <= 0) {
+                    flatRecords[index].slack = noSlackValue;
+                    flatRecords[index].ganttProperties.slack = noSlackValue;
+                }
+            }
+            if (flatRecords[index].slack === noSlackValue) {
+                if (flatRecords[index].ganttProperties.progress < 100) {
+                    flatRecords[index].isCritical = true;
+                    flatRecords[index].ganttProperties.isCritical = true;
+                    this.criticalTasks.push(flatRecords[index]);
+                    criticalPathIds.push(collection[x]['taskid']);
+                }
+            }
+        }
+        if (taskBeyondEnddate.length > 0) {
+            for (var 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]);
+                }
+            }
+        }
+        return criticalPathIds;
+    };
+    /* eslint-disable-next-line */
+    CriticalPath.prototype.criticalConnectorLine = function (criticalPathIds, collection, condition, collectionTaskId) {
+        var ganttChartElement = this.parent.ganttChartModule.chartElement;
+        removeClass(ganttChartElement.querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
+        removeClass(ganttChartElement.querySelectorAll('.e-gantt-child-progressbar-inner-div'), criticalChildProgressBarInnerDiv);
+        removeClass(ganttChartElement.querySelectorAll('.e-milestone-top'), criticalMilestoneTop);
+        removeClass(ganttChartElement.querySelectorAll('.e-milestone-bottom'), criticalMilestoneBottom);
+        for (var i = 0; i < criticalPathIds.length; i++) {
+            var criticalData = void 0;
+            if (this.parent.viewType === 'ProjectView') {
+                criticalData = this.parent.flatData[this.parent.ids.indexOf(criticalPathIds[i].toString())];
+            }
+            else {
+                criticalData = this.parent.flatData[this.resourceCollectionIds.indexOf(criticalPathIds[i].toString())];
+            }
+            var index = this.parent.currentViewData.indexOf(criticalData);
+            var element = this.parent.getRowByIndex(index);
+            var taskClass = void 0;
+            var columnFields = this.parent.taskFields;
+            /* eslint-disable-next-line */
+            if (this.parent.allowUnscheduledTasks && !criticalData[columnFields.startDate] && !criticalData[columnFields.endDate] && criticalData[columnFields.duration]) {
+                taskClass = criticalUnscheduledTask;
+            }
+            else {
+                taskClass = criticalChildProgressBarInnerDiv;
+            }
+            if (element) {
+                if (element.getElementsByClassName('e-milestone-top')[0]) {
+                    addClass(element.querySelectorAll('.e-milestone-top'), criticalMilestoneTop);
+                }
+                if (element.getElementsByClassName('e-milestone-bottom')[0]) {
+                    addClass(element.querySelectorAll('.e-milestone-bottom'), criticalMilestoneBottom);
+                }
+                if (element.getElementsByClassName('e-gantt-child-taskbar-inner-div').length > 0) {
+                    addClass(element.querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
+                }
+                if (element.getElementsByClassName('e-gantt-child-progressbar-inner-div').length > 0) {
+                    addClass(element.querySelectorAll('.e-gantt-child-progressbar-inner-div'), taskClass);
+                }
+            }
+        }
+        removeClass(this.parent.element.querySelectorAll('.e-line'), criticalConnectorLine);
+        removeClass(this.parent.element.querySelectorAll('.e-connector-line-right-arrow'), criticalConnectorLineRightArrow);
+        removeClass(this.parent.element.querySelectorAll('.e-connector-line-left-arrow'), criticalConnectorLineLeftArrow);
+        if (collection.length !== 0) {
+            var index = 0;
+            var currentdata = void 0;
+            var checking = [];
+            var checkint = void 0;
+            for (var i = 0; i < this.criticalPathCollection.length; i++) {
+                index = collectionTaskId.indexOf(this.criticalPathCollection[i]);
+                currentdata = collection[index];
+                if (index !== -1 && currentdata['to']) {
+                    checking = currentdata['to'].split(',');
+                    for (var j = 0; j < checking.length; j++) {
+                        checkint = parseInt(checking[j], 10);
+                        if (criticalPathIds.indexOf(checkint) !== -1) {
+                            var lineElement = this.parent.element.querySelectorAll('#ConnectorLineparent' +
+                                currentdata['taskid'] + 'child' + checkint);
+                            if (lineElement.length > 0) {
+                                addClass(this.parent.element.querySelectorAll('#ConnectorLineparent' + currentdata['taskid'] + 'child' +
+                                    checkint)[0].querySelectorAll('.e-line'), criticalConnectorLine);
+                                addClass(this.parent.element.querySelectorAll('#ConnectorLineparent' + currentdata['taskid'] + 'child' +
+                                    checkint)[0].querySelectorAll('.e-connector-line-right-arrow'), criticalConnectorLineRightArrow);
+                                addClass(this.parent.element.querySelectorAll('#ConnectorLineparent' + currentdata['taskid'] + 'child' +
+                                    checkint)[0].querySelectorAll('.e-connector-line-left-arrow'), criticalConnectorLineLeftArrow);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+    CriticalPath.prototype.getModuleName = function () {
+        return 'criticalPath';
+    };
+    /**
+     * Destroys the Critical Path of Gantt.
+     *
+     * @returns {void} .
+     * @private
+     */
+    CriticalPath.prototype.destroy = function () {
+        if (!this.parent.enableCriticalPath && this.parent.criticalPathModule) {
+            this.parent.criticalPathModule = undefined;
+        }
+    };
+    return CriticalPath;
+}());
+
 // eslint-disable-next-line
 /**
  * The ContextMenu module is used to handle the context menu items & sub-menu items.
@@ -27023,9 +28023,8 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
     ContextMenu$$1.prototype.getClickedDate = function (element) {
         // context menu click position
         var ganttElementPosition = this.parent.getOffsetRect(this.parent.element);
-        var ganttLeft = ganttElementPosition.left - this.parent.element.offsetLeft;
         // task left position
-        var pageLeft = ganttLeft + this.parent.ganttChartModule.chartElement.offsetLeft +
+        var pageLeft = ganttElementPosition.left + this.parent.ganttChartModule.chartElement.offsetLeft +
             this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft;
         // difference from task start date to current click position.
         var currentTaskDifference = this.clickedPosition - pageLeft;
@@ -27213,7 +28212,7 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
                     break;
                 case 'Indent':
                     {
-                        if (!this.parent.allowSelection) {
+                        if (!this.parent.allowSelection || !this.parent.editModule || !this.parent.editSettings) {
                             this.hideItems.push(item.text);
                         }
                         else {
@@ -27230,7 +28229,7 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
                     }
                 case 'Outdent':
                     {
-                        if (!this.parent.allowSelection) {
+                        if (!this.parent.allowSelection || !this.parent.editModule || !this.parent.editSettings) {
                             this.hideItems.push(item.text);
                         }
                         else {
@@ -28494,6 +29493,10 @@ var PdfGanttTheme = /** @__PURE__ @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(49, 122, 185);
                 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.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(119, 119, 119);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(85, 85, 85);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(33, 82, 125);
@@ -28510,6 +29513,10 @@ var PdfGanttTheme = /** @__PURE__ @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(0, 123, 255);
                 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.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(108, 117, 125);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(73, 80, 87);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(0, 86, 179);
@@ -28528,6 +29535,10 @@ var PdfGanttTheme = /** @__PURE__ @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(0, 120, 214);
                 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.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(118, 118, 118);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(80, 80, 80);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(0, 91, 163);
@@ -28544,6 +29555,10 @@ var PdfGanttTheme = /** @__PURE__ @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(88, 105, 197);
                 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.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(132, 132, 132);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(97, 97, 97);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(63, 81, 181);
@@ -30859,6 +31874,12 @@ var ExportHelper = /** @__PURE__ @class */ (function () {
                 predecessor.milestoneParent = data.milestoneParent;
                 predecessor.milestoneChild = data.milestoneChild;
                 predecessor.lineWidth = _this.parent.connectorLineWidth > 5 ? pixelToPoint(5) : pixelToPoint(_this.parent.connectorLineWidth);
+                if (data.isCritical) {
+                    predecessor.connectorLineColor = _this.ganttStyle.criticalConnectorLineColor;
+                }
+                else {
+                    predecessor.connectorLineColor = _this.ganttStyle.connectorLineColor;
+                }
                 predecessor.connectorLineColor = _this.ganttStyle.connectorLineColor;
                 _this.gantt.predecessorCollection.push(predecessor);
             });
@@ -30982,9 +32003,16 @@ var ExportHelper = /** @__PURE__ @class */ (function () {
                 taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.parentProgressColor);
             }
             else {
-                taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.taskColor);
-                taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.taskBorderColor);
-                taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.progressColor);
+                if (data.isCritical) {
+                    taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskColor);
+                    taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.criticalProgressColor);
+                    taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskBorderColor);
+                }
+                else {
+                    taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.taskColor);
+                    taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.progressColor);
+                    taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.taskBorderColor);
+                }
             }
             taskbar.gridLineColor = new PdfColor(_this.ganttStyle.chartGridLineColor);
             _this.gantt.taskbarCollection.push(taskbar);
@@ -31211,13 +32239,13 @@ var ExportValueFormatter = /** @__PURE__ @class */ (function () {
             if (typeof args.column.format === 'string') {
                 var format = void 0;
                 if (args.column.type === 'date') {
-                    format = { type: 'date', skeleton: args.column.format };
+                    format = { type: 'date', format: args.column.format };
                 }
                 else if (args.column.type === 'time') {
-                    format = { type: 'time', skeleton: args.column.format };
+                    format = { type: 'time', format: args.column.format };
                 }
                 else {
-                    format = { type: 'dateTime', skeleton: args.column.format };
+                    format = { type: 'dateTime', format: args.column.format };
                 }
                 return this.returnFormattedValue(args, format);
             }
@@ -32795,5 +33823,5 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
  * Gantt index file
  */
 
-export { Gantt, PdfHorizontalOverflowType, parentsUntil$1 as parentsUntil, isScheduledTask, isCountRequired, getSwapKey, isRemoteData, getTaskData, updateDates, formatString, getIndex, pixelToPoint, pointToPixel, getUid$1 as getUid, load, rowDataBound, queryCellInfo, toolbarClick, keyPressed, Edit$2 as Edit, Reorder$1 as Reorder, Resize$1 as Resize, Filter$1 as Filter, Sort$1 as Sort, Dependency, Selection$1 as Selection, Toolbar$3 as Toolbar, DayMarkers, ContextMenu$2 as ContextMenu, ExcelExport$1 as ExcelExport, ColumnMenu$1 as ColumnMenu, RowDD$1 as RowDD, PdfExport, VirtualScroll$1 as VirtualScroll, Column, DayWorkingTime, AddDialogFieldSettings, EditDialogFieldSettings, EditSettings, EventMarker, FilterSettings, SearchSettings, Holiday, LabelSettings, SelectionSettings, SplitterSettings, TaskFields, TimelineTierSettings, TimelineSettings, TooltipSettings, SortDescriptor, SortSettings, ResourceFields };
+export { Gantt, PdfHorizontalOverflowType, parentsUntil$1 as parentsUntil, isScheduledTask, isCountRequired, getSwapKey, isRemoteData, getTaskData, updateDates, formatString, getIndex, pixelToPoint, pointToPixel, getUid$1 as getUid, load, rowDataBound, queryCellInfo, toolbarClick, keyPressed, Edit$2 as Edit, Reorder$1 as Reorder, Resize$1 as Resize, Filter$1 as Filter, Sort$1 as Sort, Dependency, Selection$1 as Selection, Toolbar$3 as Toolbar, DayMarkers, CriticalPath, ContextMenu$2 as ContextMenu, ExcelExport$1 as ExcelExport, ColumnMenu$1 as ColumnMenu, RowDD$1 as RowDD, PdfExport, VirtualScroll$1 as VirtualScroll, Column, DayWorkingTime, AddDialogFieldSettings, EditDialogFieldSettings, EditSettings, EventMarker, FilterSettings, SearchSettings, Holiday, LabelSettings, SelectionSettings, SplitterSettings, TaskFields, TimelineTierSettings, TimelineSettings, TooltipSettings, SortDescriptor, SortSettings, ResourceFields };
 //# sourceMappingURL=ej2-gantt.es5.js.map