@syncfusion/ej2-gantt 20.1.58 → 20.2.36

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

@@ -390,7 +390,7 @@ class DateProcessor {
      * @returns {Date} .
      * @private
      */
-    checkBaselineEndDate(date) {
+    checkBaselineEndDate(date, ganttProp) {
         if (isNullOrUndefined(date)) {
             return null;
         }
@@ -400,7 +400,7 @@ class DateProcessor {
             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);
             }
@@ -1383,6 +1383,12 @@ class DateProcessor {
      * @private
      */
     calculateProjectDates(editArgs) {
+        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;
+        }
         const sDate = typeof this.parent.projectStartDate === 'string' ?
             new Date(this.parent.projectStartDate) : this.parent.projectStartDate;
         const eDate = typeof this.parent.projectEndDate === 'string' ?
@@ -1578,10 +1584,11 @@ class TaskProcessor extends DateProcessor {
         const mappingData = new DataManager(dataSource).executeLocal(new Query()
             .group(this.parent.taskFields.parentID));
         const rootData = [];
+        let index;
         for (let i = 0; i < mappingData.length; i++) {
             const groupData = mappingData[i];
             if (!isNullOrUndefined(groupData.key)) {
-                const 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;
@@ -1589,7 +1596,9 @@ class TaskProcessor extends DateProcessor {
                     }
                 }
             }
-            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);
     }
@@ -1803,7 +1812,7 @@ class TaskProcessor extends DateProcessor {
         progress = progress ? parseFloat(progress.toString()) ? parseFloat(progress.toString()) : 0 : 0;
         const predecessors = data[taskSettings.dependency];
         const baselineStartDate = this.getDateFromFormat(data[taskSettings.baselineStartDate], true);
-        const baselineEndDate = this.getDateFromFormat(data[taskSettings.baselineEndDate], true);
+        let baselineEndDate = this.getDateFromFormat(data[taskSettings.baselineEndDate], true);
         const ganttData = {};
         const ganttProperties = {};
         const autoSchedule = (this.parent.taskMode === 'Auto') ? true :
@@ -1837,7 +1846,11 @@ class TaskProcessor extends DateProcessor {
         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);
@@ -1858,7 +1871,6 @@ class TaskProcessor extends DateProcessor {
             !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);
@@ -2070,6 +2082,13 @@ class TaskProcessor extends DateProcessor {
                 work = parseFloat(work.toFixed(2));
             }
         }
+        if (ganttData.childRecords.length > 0 && this.parent.isOnEdit) {
+            let childCompletedWorks = 0;
+            for (let 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');
@@ -2565,7 +2584,7 @@ class TaskProcessor extends DateProcessor {
     calculateBaselineWidth(ganttProperties) {
         const baselineStartDate = this.getDateFromFormat(ganttProperties.baselineStartDate);
         const baselineEndDate = this.getDateFromFormat(ganttProperties.baselineEndDate);
-        if (baselineStartDate && baselineEndDate) {
+        if (baselineStartDate && baselineEndDate && (baselineStartDate.getTime() !== baselineEndDate.getTime())) {
             return (this.getTaskWidth(baselineStartDate, baselineEndDate));
         }
         else {
@@ -3687,7 +3706,7 @@ class TaskProcessor extends DateProcessor {
                 }
                 this.updateWorkWithDuration(parentData);
                 let 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)) {
@@ -3758,8 +3777,12 @@ const parentProgressBarInnerDiv = 'e-gantt-parent-progressbar-inner-div';
 const taskLabel = 'e-task-label';
 const childTaskBarInnerDiv = 'e-gantt-child-taskbar-inner-div';
 const childProgressBarInnerDiv = 'e-gantt-child-progressbar-inner-div';
+const criticalChildTaskBarInnerDiv = 'e-gantt-child-critical-taskbar-inner-div';
+const criticalChildProgressBarInnerDiv = 'e-gantt-child-critical-progressbar-inner-div';
 const milestoneTop = 'e-milestone-top';
 const milestoneBottom = 'e-milestone-bottom';
+const criticalMilestoneTop = 'e-critical-milestone-top';
+const criticalMilestoneBottom = 'e-critical-milestone-bottom';
 const baselineBar = 'e-baseline-bar';
 const baselineMilestoneContainer = 'e-baseline-gantt-milestone-container';
 const baselineMilestoneDiv = 'e-baseline-gantt-milestone';
@@ -3795,6 +3818,7 @@ const traceManualUnscheduledTask = 'e-gantt-unscheduled-manualtask';
 const traceParentTaskBar = 'e-gantt-parent-taskbar';
 const traceParentProgressBar = 'e-gantt-parent-progressbar';
 const traceUnscheduledTask = 'e-gantt-unscheduled-task';
+const criticalUnscheduledTask = 'e-gantt-critical-unscheduled-taskbar';
 const taskIndicatorDiv = 'e-indicator-span';
 const leftResizeGripper = 'e-left-resize-gripper';
 const rightResizeGripper = 'e-right-resize-gripper';
@@ -3822,13 +3846,19 @@ const unscheduledMilestoneBottom = 'e-unscheduled-milestone-bottom';
 const dependencyViewContainer = 'e-gantt-dependency-view-container';
 const connectorLineContainer = 'e-connector-line-container';
 const connectorLine = 'e-line';
+const criticalConnectorLine = 'e-criticalconnector-line';
+const criticalConnectorLineRightArrow = 'e-criticalconnector-line-right-arrow';
+const criticalConnectorLineLeftArrow = 'e-criticalconnector-line-left-arrow';
 const connectorLineRightArrow = 'e-connector-line-right-arrow';
 const connectorLineLeftArrow = 'e-connector-line-left-arrow';
 const connectorLineZIndex = 'e-connector-line-z-index';
 const connectorLineHover = 'e-connector-line-hover';
+const criticalConnectorLineHover = 'e-critical-connector-line-hover';
 const connectorLineHoverZIndex = 'e-connector-line-hover-z-index';
 const connectorLineRightArrowHover = 'e-connector-line-right-arrow-hover';
 const connectorLineLeftArrowHover = 'e-connector-line-left-arrow-hover';
+const criticalConnectorLineRightArrowHover = 'e-critical-connector-line-right-arrow-hover';
+const criticalConnectorLineLeftArrowHover = 'e-critical-connector-line-left-arrow-hover';
 
 const connectorPointLeft = 'e-connectorpoint-left';
 const connectorPointRight = 'e-connectorpoint-right';
@@ -3855,6 +3885,7 @@ const editIcon = 'e-edit';
 const indentIcon = 'e-indent';
 const outdentIcon = 'e-outdent';
 const addIcon = 'e-add';
+
 const addAboveIcon = 'e-add-above';
 const addBelowIcon = 'e-add-below';
 //Predecessor touch mode
@@ -4158,6 +4189,10 @@ class GanttChart {
                 this.parent.predecessorModule.createConnectorLinesCollection();
             }
             this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+            if (this.parent.enableCriticalPath) {
+                let 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();
             }
@@ -5035,7 +5070,7 @@ class GanttChart {
                     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);
@@ -5043,7 +5078,7 @@ class GanttChart {
                     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);
                             const fmodule = getValue('focusModule', this.parent.treeGrid.grid);
@@ -5324,6 +5359,9 @@ class Timeline {
         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.
@@ -5450,6 +5488,10 @@ class Timeline {
         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);
+        const criticalModule = this.parent.criticalPathModule;
+        if (this.parent.enableCriticalPath && criticalModule) {
+            criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
         if (this.isZooming || this.isZoomToFit) {
             const args = {
                 requestType: this.isZoomIn ? 'AfterZoomIn' : this.isZoomToFit ? 'AfterZoomToProject' : 'AfterZoomOut',
@@ -5472,6 +5514,9 @@ class Timeline {
             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);
+        }
         const timeDifference = (this.parent.cloneProjectEndDate.getTime() - this.parent.cloneProjectStartDate.getTime());
         const totalDays = (timeDifference / (1000 * 3600 * 24));
         const chartWidth = this.parent.ganttChartModule.chartElement.offsetWidth;
@@ -6103,7 +6148,7 @@ class Timeline {
             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);
@@ -6259,19 +6304,29 @@ class Timeline {
             mode === 'Hour' || mode === 'Minutes') &&
             this.parent.nonWorkingDayIndex.indexOf(day.getDay()) !== -1;
     }
-    calculateQuarterEndDate(date) {
+    calculateQuarterEndDate(date, count) {
         const 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);
+            }
         }
     }
     /**
@@ -6302,7 +6357,7 @@ class Timeline {
             this.customFormat(scheduleWeeks, format, tier, mode, formatter);
         thWidth = (this.getIncrement(scheduleWeeks, count, mode) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth;
         const 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;
         const isWeekendCell = this.isWeekendHeaderCell(mode, tier, scheduleWeeks);
         const textClassName = tier === 'topTier' ? ' e-gantt-top-cell-text' : '';
@@ -6652,8 +6707,9 @@ class Timeline {
             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')) {
+                let 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);
         }
@@ -6889,7 +6945,7 @@ class GanttTreeGrid {
         const scrollWidth = this.getScrollbarWidth();
         const 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');
@@ -8048,7 +8104,7 @@ class ChartRows extends DateProcessor {
                     'border-bottom-right-radius:' + this.getBorderRadius(data.ganttProperties) + 'px;">' +
                     '</div>');
             }
-            let tempDiv = createElement('div');
+            const tempDiv = createElement('div');
             if (this.taskLabelTemplateFunction && !isNullOrUndefined(progressDiv) && progressDiv.length > 0) {
                 const taskLabelTemplateNode = this.taskLabelTemplateFunction(extend({ index: i }, data), this.parent, 'TaskLabelTemplate', this.getTemplateID('TaskLabelTemplate'), false, undefined, progressDiv[0]);
                 if (taskLabelTemplateNode && taskLabelTemplateNode.length > 0) {
@@ -8061,7 +8117,8 @@ class ChartRows extends DateProcessor {
                 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))) {
@@ -8111,7 +8168,7 @@ class ChartRows extends DateProcessor {
                         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) {
@@ -8129,6 +8186,13 @@ class ChartRows extends DateProcessor {
         let splitTasks = '';
         for (let i = 0; i < data.ganttProperties.segments.length; i++) {
             const segment = data.ganttProperties.segments[i];
+            let progressBarVisible;
+            if (!segment.showProgress) {
+                progressBarVisible = 'hidden';
+            }
+            else {
+                progressBarVisible = 'initial';
+            }
             const segmentPosition = (i === 0) ? 'e-segment-first' : (i === data.ganttProperties.segments.length - 1)
                 ? 'e-segment-last' : 'e-segment-inprogress';
             splitTasks += (
@@ -8136,7 +8200,7 @@ class ChartRows extends DateProcessor {
             '<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
@@ -8258,6 +8322,7 @@ class ChartRows extends DateProcessor {
             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');
             }
@@ -8426,6 +8491,7 @@ class ChartRows extends DateProcessor {
             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);
@@ -8686,7 +8752,7 @@ class ChartRows extends DateProcessor {
                 'width:' + data.ganttProperties.progressWidth + 'px;' +
                 'border-top-right-radius:' + this.getBorderRadius(data) + 'px;' +
                 'border-bottom-right-radius:' + this.getBorderRadius(data) + 'px;height:100%;"></div>');
-            let div = createElement('div');
+            const div = createElement('div');
             if (this.taskLabelTemplateFunction) {
                 const parentTaskLabelNode = this.taskLabelTemplateFunction(extend({ index: i }, data), this.parent, 'TaskLabelTemplate', this.getTemplateID('TaskLabelTemplate'), false, undefined, progressBarInnerDiv[0]);
                 if (parentTaskLabelNode && parentTaskLabelNode.length > 0) {
@@ -8699,7 +8765,8 @@ class ChartRows extends DateProcessor {
                 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))) {
@@ -8728,7 +8795,7 @@ class ChartRows extends DateProcessor {
                     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;
             }
             const milestoneTemplate = '<div class="' + parentMilestone + '" style="position:absolute;">' +
@@ -10280,6 +10347,9 @@ class Dependency {
     updateConnectorLineObject(parentGanttRecord, childGanttRecord, predecessor) {
         const 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);
@@ -11350,6 +11420,7 @@ class Splitter$1 {
         this.splitterObject = new Splitter({
             height: null,
             width: this.parent.ganttWidth.toString(),
+            enablePersistence: this.parent.enablePersistence,
             separatorSize: this.parent.splitterSettings.separatorSize,
             paneSettings: [
                 {
@@ -11401,6 +11472,9 @@ class Splitter$1 {
      * @private
      */
     calculateSplitterPosition(splitter$$1, isDynamic) {
+        if (!isNullOrUndefined(this.splitterObject) && this.parent.enablePersistence) {
+            return this.splitterObject.paneSettings[0].size;
+        }
         if (splitter$$1.view === 'Grid') {
             return '100%';
         }
@@ -12097,8 +12171,8 @@ class FocusModule {
                     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)
@@ -12285,6 +12359,7 @@ let Gantt = class Gantt extends Component {
          * @private
          */
         this.isEdit = false;
+        setValue('mergePersistData', this.mergePersistGanttData, this);
     }
     /**
      * To get the module name
@@ -12354,8 +12429,10 @@ let Gantt = class Gantt extends Component {
         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);
@@ -12622,6 +12699,10 @@ let Gantt = class Gantt extends Component {
                 this.updateRowHeightInConnectorLine(this.updatedConnectorLineCollection);
                 this.connectorLineModule.renderConnectorLines(this.updatedConnectorLineCollection);
             }
+            if (this.enableCriticalPath) {
+                let criticalModule = this.criticalPathModule;
+                this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+            }
         }
     }
     keyActionHandler(e) {
@@ -12952,6 +13033,38 @@ let Gantt = class Gantt extends Component {
         const value = this.dateValidationModule.getWorkString(work, workUnit);
         return value;
     }
+    updateTreeColumns() {
+        let temp;
+        var field;
+        let 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'];
+        }
+        let gridColumn;
+        for (let i = 0; i < gridColumns.length; i++) {
+            gridColumn = {};
+            for (let j = 0; j < this.columns.length; j++) {
+                if (this.columns[j]['field'] == gridColumns[i].field) {
+                    for (const prop of Object.keys(this.columns[j])) {
+                        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 .
@@ -12972,6 +13085,9 @@ let Gantt = class Gantt extends Component {
             this.splitterElement.style.height = '100%';
         }
         if (this.isLoad) {
+            if (this.enablePersistence) {
+                this.updateTreeColumns();
+            }
             this.updateCurrentViewData();
             if (!this.enableVirtualization) {
                 this.updateContentHeight();
@@ -13001,7 +13117,14 @@ let Gantt = class Gantt extends Component {
         else {
             this.getCurrentRecords(args);
         }
+        if (this.enableCriticalPath && this.criticalPathModule) {
+            this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
+        }
         this.notify('recordsUpdated', {});
+        if (this.enableCriticalPath && this.criticalPathModule) {
+            let 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);
@@ -13089,6 +13212,7 @@ let Gantt = class Gantt extends Component {
                     }
                     break;
                 case 'timezone':
+                case 'enableCriticalPath':
                     this.dataOperation.checkDataBinding(true);
                     break;
                 case 'filterSettings':
@@ -13256,15 +13380,42 @@ let Gantt = class Gantt extends Component {
         }
     }
     /**
-     * Get the properties to be maintained in the persisted state.
+     * Returns the properties to be maintained in persisted state.
      *
      * @returns {string} .
      * @private
      */
     getPersistData() {
-        const keyEntity = ['allowSelection'];
+        const keyEntity = ['sortSettings',
+            'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'treeColumnIndex', 'currentZoomingLevel', 'cloneProjectStartDate', 'cloneProjectEndDate'];
+        const ignoreOnPersist = {
+            filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent', 'hierarchyMode'],
+            searchSettings: ['fields', 'operator', 'ignoreCase'],
+            sortSettings: [], columns: [], selectedRowIndex: []
+        };
+        const ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',
+            'commandTemplate', 'commands', 'dataSource'];
+        for (let i = 0; i < keyEntity.length; i++) {
+            const currentObject = this[keyEntity[i]];
+            for (let k = 0, val = ignoreOnPersist[keyEntity[i]]; (!isNullOrUndefined(val) && k < val.length); k++) {
+                const objVal = val[k];
+                delete currentObject[objVal];
+            }
+        }
+        this.ignoreInArrays(ignoreOnColumn, this.columns);
         return this.addOnPersist(keyEntity);
     }
+    ignoreInArrays(ignoreOnColumn, columns) {
+        for (let i = 0; i < columns.length; i++) {
+            this.ignoreInColumn(ignoreOnColumn, columns[i]);
+        }
+    }
+    ignoreInColumn(ignoreOnColumn, column) {
+        for (let i = 0; i < ignoreOnColumn.length; i++) {
+            delete column[ignoreOnColumn[i]];
+            column.filter = {};
+        }
+    }
     /**
      * @returns {void} .
      * @private
@@ -13347,6 +13498,12 @@ let Gantt = class Gantt extends Component {
                 args: [this]
             });
         }
+        if (this.enableCriticalPath) {
+            modules.push({
+                member: 'criticalPath',
+                args: [this]
+            });
+        }
         if (this.allowResizing) {
             modules.push({
                 member: 'resize',
@@ -13424,6 +13581,17 @@ let Gantt = class Gantt extends Component {
             this.sortModule.sortColumn(columnName, direction, isMultiSort);
         }
     }
+    mergePersistGanttData() {
+        if (!this.treeGrid) {
+            this.treeGrid = new TreeGrid();
+        }
+        const persist1 = 'mergePersistGridData';
+        this.treeGrid.grid[persist1].apply(this);
+    }
+    mergeColumns(storedColumn, columns) {
+        const persist2 = 'mergeColumns';
+        this.treeGrid.grid[persist2].apply(this, [storedColumn, columns]);
+    }
     /**
      * Clears all the sorted columns of the Gantt.
      *
@@ -13501,7 +13669,7 @@ let Gantt = class Gantt extends Component {
      */
     updateGridLineContainerHeight() {
         if (this.chartVerticalLineContainer) {
-            this.chartVerticalLineContainer.style.height = formatUnit(this.contentHeight);
+            this.chartVerticalLineContainer.style.height = formatUnit(this.getContentHeight());
         }
     }
     /**
@@ -13605,6 +13773,7 @@ let Gantt = class Gantt extends Component {
             progress: 'Progress',
             dependency: 'Dependency',
             notes: 'Notes',
+            criticalPath: 'Critical Path',
             baselineStartDate: 'Baseline Start Date',
             baselineEndDate: 'Baseline End Date',
             taskMode: 'Task Mode',
@@ -14302,6 +14471,34 @@ let Gantt = class Gantt extends Component {
             this.editModule.outdent();
         }
     }
+    /**
+     * To render the critical path tasks in Gantt.
+     *
+     * @returns {void} .
+     * @param {boolean} isCritical- whether to render critical path or not .
+     * @public
+     */
+    showCriticalPath(isCritical) {
+        if (this.criticalPathModule) {
+            this.criticalPathModule.showCriticalPath(isCritical);
+            let criticalModule = this.criticalPathModule;
+            this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
+    }
+    /**
+     * To get all the critical tasks in Gantt.
+     *
+     * @returns {IGanttData[]} .
+     * @public
+     */
+    getCriticalTasks() {
+        if (!isNullOrUndefined(this.criticalPathModule) && this.enableCriticalPath) {
+            return this.criticalPathModule.getCriticalTasks();
+        }
+        else {
+            return null;
+        }
+    }
     /**
      * To perform Zoom in action on Gantt timeline.
      *
@@ -15113,6 +15310,9 @@ __decorate([
 __decorate([
     Property(false)
 ], Gantt.prototype, "enableContextMenu", void 0);
+__decorate([
+    Property(false)
+], Gantt.prototype, "enableCriticalPath", void 0);
 __decorate([
     Property()
 ], Gantt.prototype, "contextMenuItems", void 0);
@@ -15410,7 +15610,7 @@ class CellEdit {
             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;
@@ -15599,7 +15799,7 @@ class CellEdit {
         const ganttProb = args.data.ganttProperties;
         let 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);
@@ -15724,7 +15924,9 @@ class CellEdit {
         const 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)) {
@@ -16445,9 +16647,7 @@ class TaskbarEdit extends DateProcessor {
                     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))
@@ -16709,7 +16909,7 @@ class TaskbarEdit extends DateProcessor {
                 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');
@@ -17586,6 +17786,10 @@ class TaskbarEdit extends DateProcessor {
             else {
                 this.parent.isOnEdit = false;
                 this.cancelTaskbarEditActionInMouseLeave();
+                if (this.parent.enableCriticalPath && this.parent.criticalPathModule) {
+                    let criticalModule = this.parent.criticalPathModule;
+                    criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+                }
             }
         }
         if (this.parent.viewType === 'ResourceView' && this.parent.enableMultiTaskbar && !isNullOrUndefined(this.taskBarEditElement)) {
@@ -18894,7 +19098,7 @@ class DialogEdit {
             }
             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);
             }
@@ -20242,9 +20446,16 @@ class ConnectorLineEdit {
     addHighlight(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.
@@ -20255,9 +20466,16 @@ class ConnectorLineEdit {
     removeHighlight() {
         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;
         }
     }
@@ -21436,6 +21654,9 @@ class Edit$2 {
                 }
                 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);
                 }
@@ -22197,6 +22418,11 @@ class Edit$2 {
                 eventArgs.taskBarEditAction = args.taskBarEditAction;
             }
             this.endEditAction(args);
+            if (this.parent.enableCriticalPath) {
+                let criticalModule = this.parent.criticalPathModule;
+                criticalModule.showCriticalPath(true);
+                criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+            }
             this.parent.trigger('actionComplete', eventArgs);
         }
         else {
@@ -22531,6 +22757,8 @@ class Edit$2 {
             }
             else {
                 this.deleteSelectedItems();
+                const focusingElement = this.parent.element.querySelector('.e-treegrid');
+                focusingElement.focus();
             }
         }
     }
@@ -23400,7 +23628,17 @@ class Edit$2 {
             this.refreshRecordInImmutableMode();
         }
     }
-    refreshRecordInImmutableMode() {
+    refreshRecordInImmutableMode(data, dragged) {
+        if (!dragged && !isNullOrUndefined(data)) {
+            for (let 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;
+                }
+            }
+        }
         for (let i = 0; i < this.parent.modifiedRecords.length; i++) {
             const originalData = this.parent.modifiedRecords[i];
             let treeIndex = this.parent.allowRowDragAndDrop ? 1 : 0;
@@ -23562,7 +23800,13 @@ class Edit$2 {
                             const insertCrud = data.insert(updatedData[addedRecords], null, query);
                             insertCrud.then((e) => {
                                 const changedRecords = 'changedRecords';
-                                const addedRecords = e[0];
+                                let addedRecords;
+                                if (!isNullOrUndefined(e[0])) {
+                                    addedRecords = e[0];
+                                }
+                                else {
+                                    addedRecords = updatedData['addedRecords'][0];
+                                }
                                 /* tslint:disable-next-line */
                                 const updateCrud = data.update(this.parent.taskFields.id, updatedData[changedRecords], null, query);
                                 updateCrud.then(() => {
@@ -24107,7 +24351,7 @@ class Edit$2 {
         this.parent.treeGrid.parentData = [];
         this.parent.treeGrid.refresh();
         if (this.parent.enableImmutableMode) {
-            this.refreshRecordInImmutableMode();
+            this.refreshRecordInImmutableMode(args.data, isDrag);
         }
         if (isDrag) {
             args.requestType = 'rowDropped';
@@ -24719,7 +24963,7 @@ class Filter$1 {
             const 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;
@@ -25365,6 +25609,9 @@ class Selection$1 {
             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 {
@@ -25423,7 +25670,7 @@ class Toolbar$3 {
         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);
@@ -25447,10 +25694,18 @@ class Toolbar$3 {
             }
             const preItems = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
                 'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport', 'CsvExport',
-                'PdfExport', 'Indent', 'Outdent'];
+                'PdfExport', 'Indent', 'Outdent', 'CriticalPath'];
             for (const item of preItems) {
-                const itemStr = item.toLowerCase();
-                const localeName = item[0].toLowerCase() + item.slice(1);
+                let itemStr;
+                let localeName;
+                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),
@@ -25651,6 +25906,14 @@ class Toolbar$3 {
                             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();
@@ -25830,6 +26093,8 @@ class Toolbar$3 {
             disableItems.push(gID + '_edit');
             disableItems.push(gID + '_update');
             disableItems.push(gID + '_cancel');
+            disableItems.push(gID + '_indent');
+            disableItems.push(gID + '_outdent');
         }
         for (let e = 0; e < enableItems.length; e++) {
             let index;
@@ -25947,8 +26212,9 @@ class NonWorkingDay {
         let toDate;
         const container = createElement('div');
         const height = this.parent.contentHeight;
+        // eslint-disable-next-line
         let toolbarHeight = 0;
-        if (!isNullOrUndefined(this.parent.toolbarModule)) {
+        if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
             toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
         }
         const viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
@@ -26053,6 +26319,7 @@ class NonWorkingDay {
     }
     updateHolidayLabelHeight() {
         const height = this.parent.getContentHeight();
+        // eslint-disable-next-line
         let toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
             toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
@@ -26254,6 +26521,737 @@ class DayMarkers {
     }
 }
 
+class CriticalPath {
+    constructor(parent) {
+        this.resourceCollectionIds = [];
+        this.criticalTasks = [];
+        this.parent = parent;
+    }
+    getCriticalTasks() {
+        return this.criticalTasks;
+    }
+    showCriticalPath(isCritical) {
+        const modelIds = this.parent.ids;
+        const totalRecords = this.parent.flatData;
+        if (isCritical && this.parent.flatData.length > 0 && !this.parent.enableMultiTaskbar) {
+            this.parent.enableCriticalPath = true;
+            const parentRecords = this.parent.treeGrid.parentData;
+            let checkEndDateTaskid;
+            let checkEndDate = parentRecords[0].ganttProperties.endDate;
+            let dateDifference = 0;
+            const checkBeyondEnddate = [];
+            const totalPredecessorsCollection = [];
+            const totalPredecessorsCollectionId = [];
+            let predecessorIndex = 0;
+            const taskBeyondEnddate = [];
+            const predecessorTaskBeyondEnddate = [];
+            const collection = [];
+            const collectionTaskId = [];
+            const fromDataObject = [];
+            let 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 (let 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 (let 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 (let 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 (let 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]);
+                }
+            }
+            const predecessorLength = totalPredecessorsCollection.length;
+            const endTask = [];
+            // find the detail collection of predecessor for each taskes that stored in collection.
+            for (let x = 0; x < predecessorLength; x++) {
+                let to = -1;
+                let from = -1;
+                let toPredecessor = -1;
+                let fromPredecessor = -1;
+                const currentIndex = x;
+                const predecessor = totalPredecessorsCollection[x].ganttProperties.predecessor;
+                const individualPredecessorLength = totalPredecessorsCollection[x].ganttProperties.predecessor.length;
+                const taskid = (parseInt(totalPredecessorsCollection[x].ganttProperties.taskId, 10));
+                for (let 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);
+            }
+            const collectionLength = collection.length;
+            let indexEnddate = 0;
+            let num;
+            // find the predecessors connected taskes that does not contains any successor.
+            for (let 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());
+                    }
+                    const 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 (let 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) {
+            let pathIndex;
+            this.parent.enableCriticalPath = false;
+            for (let 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 */
+    slackCalculation(fromDataObject, collection, collectionTaskId, checkEndDate, flatRecords, modelRecordIds) {
+        const fromDateArray = fromDataObject[0]['fromdata'].split(',');
+        const fromDataPredecessor = fromDataObject[0]['fromDataPredecessor'].split(',');
+        let fromDateArray1 = [];
+        let fromTaskIdIndex;
+        let indexFromTaskId;
+        let indexToTaskId;
+        let totaskId;
+        let dateDifference;
+        let prevTaskEnddate;
+        let offsetInMillSec;
+        let ffslack;
+        for (let 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());
+            }
+            const fromIdFlatData = flatRecords[indexFromTaskId].ganttProperties;
+            const 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);
+            }
+        }
+    }
+    getSlackDuration(sDate, eDate, durationUnit, record) {
+        const startDate = this.parent.dateValidationModule.checkStartDate(new Date(sDate));
+        const 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 */
+    finalCriticalPath(collection, taskBeyondEnddate, flatRecords, modelRecordIds, checkEndDate) {
+        let criticalPathIds = [];
+        let index;
+        for (let 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());
+            }
+            const predecessorLength = flatRecords[index].ganttProperties.predecessor;
+            const noSlackValue = 0 + ' ' + flatRecords[index].ganttProperties.durationUnit;
+            for (let i = 0; i < predecessorLength.length; i++) {
+                let toID;
+                if (this.parent.viewType === 'ProjectView') {
+                    toID = this.parent.ids.indexOf(predecessorLength[i].to);
+                }
+                else {
+                    toID = this.resourceCollectionIds.indexOf(predecessorLength[i].to);
+                }
+                let dateDifference;
+                const 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 (let i = 0; i < taskBeyondEnddate.length; i++) {
+                if (this.parent.viewType === 'ProjectView') {
+                    index = modelRecordIds.indexOf(taskBeyondEnddate[i].toString());
+                }
+                else {
+                    index = this.resourceCollectionIds.indexOf(taskBeyondEnddate[i].toString());
+                }
+                if (index !== -1 && flatRecords[index].ganttProperties.progress < 100) {
+                    this.criticalTasks.push(flatRecords[index]);
+                    criticalPathIds = criticalPathIds.concat(taskBeyondEnddate[i]);
+                }
+            }
+        }
+        return criticalPathIds;
+    }
+    /* eslint-disable-next-line */
+    criticalConnectorLine(criticalPathIds, collection, condition, collectionTaskId) {
+        const 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 (let i = 0; i < criticalPathIds.length; i++) {
+            let criticalData;
+            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())];
+            }
+            const index = this.parent.currentViewData.indexOf(criticalData);
+            const element = this.parent.getRowByIndex(index);
+            let taskClass;
+            const 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) {
+            let index = 0;
+            let currentdata;
+            let checking = [];
+            let checkint;
+            for (let 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 (let j = 0; j < checking.length; j++) {
+                        checkint = parseInt(checking[j], 10);
+                        if (criticalPathIds.indexOf(checkint) !== -1) {
+                            const 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);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    getModuleName() {
+        return 'criticalPath';
+    }
+    /**
+     * Destroys the Critical Path of Gantt.
+     *
+     * @returns {void} .
+     * @private
+     */
+    destroy() {
+        if (!this.parent.enableCriticalPath && this.parent.criticalPathModule) {
+            this.parent.criticalPathModule = undefined;
+        }
+    }
+}
+
 // eslint-disable-next-line
 /**
  * The ContextMenu module is used to handle the context menu items & sub-menu items.
@@ -26482,9 +27480,8 @@ class ContextMenu$2 {
     getClickedDate(element) {
         // context menu click position
         const ganttElementPosition = this.parent.getOffsetRect(this.parent.element);
-        const ganttLeft = ganttElementPosition.left - this.parent.element.offsetLeft;
         // task left position
-        const pageLeft = ganttLeft + this.parent.ganttChartModule.chartElement.offsetLeft +
+        const 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.
         const currentTaskDifference = this.clickedPosition - pageLeft;
@@ -26670,7 +27667,7 @@ class ContextMenu$2 {
                     break;
                 case 'Indent':
                     {
-                        if (!this.parent.allowSelection) {
+                        if (!this.parent.allowSelection || !this.parent.editModule || !this.parent.editSettings) {
                             this.hideItems.push(item.text);
                         }
                         else {
@@ -26687,7 +27684,7 @@ class ContextMenu$2 {
                     }
                 case 'Outdent':
                     {
-                        if (!this.parent.allowSelection) {
+                        if (!this.parent.allowSelection || !this.parent.editModule || !this.parent.editSettings) {
                             this.hideItems.push(item.text);
                         }
                         else {
@@ -27921,6 +28918,10 @@ class PdfGanttTheme {
                 //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);
@@ -27937,6 +28938,10 @@ class PdfGanttTheme {
                 //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);
@@ -27955,6 +28960,10 @@ class PdfGanttTheme {
                 //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);
@@ -27971,6 +28980,10 @@ class PdfGanttTheme {
                 //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);
@@ -30081,6 +31094,12 @@ class ExportHelper {
                 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);
             });
@@ -30202,9 +31221,16 @@ class ExportHelper {
                 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);
@@ -30430,13 +31456,13 @@ class ExportValueFormatter {
             if (typeof args.column.format === 'string') {
                 let format;
                 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);
             }
@@ -31951,5 +32977,5 @@ class VirtualScroll$1 {
  * 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.es2015.js.map