@syncfusion/ej2-gantt 20.1.58 → 20.2.36

package/src/gantt/actions/dependency.js

@@ -588,6 +588,9 @@ var Dependency = /** @class */ (function () {
     Dependency.prototype.updateConnectorLineObject = function (parentGanttRecord, childGanttRecord, predecessor) {
         var connectorObj = this.parent.connectorLineModule.createConnectorLineObject(parentGanttRecord, childGanttRecord, predecessor);
         if (connectorObj) {
+            if (childGanttRecord.isCritical && parentGanttRecord.isCritical) {
+                connectorObj.isCritical = true;
+            }
             if ((this.parent.connectorLineIds.length > 0 && this.parent.connectorLineIds.indexOf(connectorObj.connectorLineId) === -1) ||
                 this.parent.connectorLineIds.length === 0) {
                 this.parent.updatedConnectorLineCollection.push(connectorObj);

package/src/gantt/actions/dialog-edit.js

@@ -919,7 +919,7 @@ var DialogEdit = /** @class */ (function () {
             }
             else if (isScheduledTask(ganttProp) || !isNullOrUndefined(ganttProp.startDate)) {
                 if (ganttData.ganttProperties.isMilestone && ganttData.ganttProperties.duration !== 0) {
-                    this.parent.dateValidationModule.calculateStartDate(ganttData);
+                    this.parent.dateValidationModule.checkStartDate(ganttProp.startDate);
                 }
                 this.parent.dateValidationModule.calculateEndDate(ganttData);
             }

package/src/gantt/actions/edit.js

@@ -472,6 +472,9 @@ var Edit = /** @class */ (function () {
                 }
                 if ((key === tasks.baselineStartDate || key === tasks.baselineEndDate) &&
                     (ganttData.ganttProperties.baselineStartDate && ganttData.ganttProperties.baselineEndDate)) {
+                    ganttObj.setRecordValue('baselineStartDate', ganttObj.dataOperation.checkBaselineStartDate(ganttData.ganttProperties.baselineStartDate), ganttData.ganttProperties, true);
+                    ganttObj.dataOperation.setTime(this.parent.defaultEndTime, ganttData.ganttProperties.baselineEndDate);
+                    ganttObj.setRecordValue('baselineEndDate', ganttObj.dataOperation.checkBaselineEndDate(ganttData.ganttProperties.baselineEndDate), ganttData.ganttProperties, true);
                     ganttObj.setRecordValue('baselineLeft', ganttObj.dataOperation.calculateBaselineLeft(ganttData.ganttProperties), ganttData.ganttProperties, true);
                     ganttObj.setRecordValue('baselineWidth', ganttObj.dataOperation.calculateBaselineWidth(ganttData.ganttProperties), ganttData.ganttProperties, true);
                 }
@@ -1234,6 +1237,11 @@ var Edit = /** @class */ (function () {
                 eventArgs.taskBarEditAction = args.taskBarEditAction;
             }
             this.endEditAction(args);
+            if (this.parent.enableCriticalPath) {
+                var criticalModule = this.parent.criticalPathModule;
+                criticalModule.showCriticalPath(true);
+                criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+            }
             this.parent.trigger('actionComplete', eventArgs);
         }
         else {
@@ -1568,6 +1576,8 @@ var Edit = /** @class */ (function () {
             }
             else {
                 this.deleteSelectedItems();
+                var focusingElement = this.parent.element.querySelector('.e-treegrid');
+                focusingElement.focus();
             }
         }
     };
@@ -2438,7 +2448,17 @@ var Edit = /** @class */ (function () {
             this.refreshRecordInImmutableMode();
         }
     };
-    Edit.prototype.refreshRecordInImmutableMode = function () {
+    Edit.prototype.refreshRecordInImmutableMode = function (data, dragged) {
+        if (!dragged && !isNullOrUndefined(data)) {
+            for (var i = data[0].index + 1; i < this.parent.currentViewData.length; i++) {
+                if (data[0].level < this.parent.currentViewData[i].level) {
+                    this.parent.modifiedRecords.push(this.parent.currentViewData[i]);
+                }
+                else {
+                    break;
+                }
+            }
+        }
         var _loop_1 = function (i) {
             var originalData = this_1.parent.modifiedRecords[i];
             var treeIndex = this_1.parent.allowRowDragAndDrop ? 1 : 0;
@@ -2605,7 +2625,13 @@ var Edit = /** @class */ (function () {
                             var insertCrud = data_2.insert(updatedData_2[addedRecords], null, query_2);
                             insertCrud.then(function (e) {
                                 var changedRecords = 'changedRecords';
-                                var addedRecords = e[0];
+                                var addedRecords;
+                                if (!isNullOrUndefined(e[0])) {
+                                    addedRecords = e[0];
+                                }
+                                else {
+                                    addedRecords = updatedData_2['addedRecords'][0];
+                                }
                                 /* tslint:disable-next-line */
                                 var updateCrud = data_2.update(_this.parent.taskFields.id, updatedData_2[changedRecords], null, query_2);
                                 updateCrud.then(function () {
@@ -3152,7 +3178,7 @@ var Edit = /** @class */ (function () {
         this.parent.treeGrid.parentData = [];
         this.parent.treeGrid.refresh();
         if (this.parent.enableImmutableMode) {
-            this.refreshRecordInImmutableMode();
+            this.refreshRecordInImmutableMode(args.data, isDrag);
         }
         if (isDrag) {
             args.requestType = 'rowDropped';

package/src/gantt/actions/filter.js

@@ -191,7 +191,7 @@ var Filter = /** @class */ (function () {
             var ganttElement = closest(element, '#' + this.parent.element.id)
                 || element.querySelector('#' + this.parent.element.id);
             if ((!(this.filterMenuElement.contains(element)) && !isNullOrUndefined(ganttElement)) || (!(this.filterMenuElement.contains(element)) && (isNullOrUndefined(datePickerElement))
-                && (isNullOrUndefined(dateTimePickerElement)) && ((element.nodeName === 'DIV') || (element.nodeName === 'HTML')))) {
+                && (isNullOrUndefined(dateTimePickerElement)) && ((element.nodeName === 'DIV') || (element.nodeName === 'HTML') || (element.nodeName === 'SPAN') || (element.nodeName === 'BUTTON')))) {
                 remove(this.filterMenuElement);
                 this.parent.treeGrid.grid.notify('filter-menu-close', { isOpen: false });
                 this.filterMenuElement = null;

package/src/gantt/actions/keyboard.js

@@ -170,8 +170,8 @@ var FocusModule = /** @class */ (function () {
                     break;
                 }
             case 'delete':
-                if (ganttObj.selectionModule && ganttObj.editModule && (!ganttObj.editModule.dialogModule.dialogObj ||
-                    (ganttObj.editModule.dialogModule.dialogObj &&
+                if (ganttObj.selectionModule && ganttObj.editModule && ganttObj.editModule.dialogModule &&
+                    (!ganttObj.editModule.dialogModule.dialogObj || (ganttObj.editModule.dialogModule.dialogObj &&
                         !ganttObj.editModule.dialogModule.dialogObj.visible)) && (!ganttObj.editSettings.allowTaskbarEditing
                     || (ganttObj.editSettings.allowTaskbarEditing && !ganttObj.editModule.taskbarEditModule.touchEdit))) {
                     if ((ganttObj.selectionSettings.mode !== 'Cell' && ganttObj.selectionModule.selectedRowIndexes.length)

package/src/gantt/actions/selection.js

@@ -467,6 +467,9 @@ var Selection = /** @class */ (function () {
             this.popUpClickHandler(e);
             if (this.parent.selectionSettings.mode !== 'Cell' && isSelected) {
                 if (closest(e.target, 'tr.e-chart-row')) {
+                    if (this.parent.enableVirtualization) {
+                        this.parent.treeGrid.grid.selectionModule.isInteracted = true;
+                    }
                     this.highlightSelectedRows(e, true);
                 }
                 else {

package/src/gantt/actions/taskbar-edit.js

@@ -342,9 +342,7 @@ var TaskbarEdit = /** @class */ (function (_super) {
                     addClass([element], [cls.activeParentTask]);
                 }
             }
-            if (isShowProgressResizer) {
-                addClass(this.parent.ganttChartModule.scrollElement.querySelectorAll('.' + cls.connectorLineContainer), [cls.connectorLineZIndex]);
-            }
+            addClass(this.parent.ganttChartModule.scrollElement.querySelectorAll('.' + cls.connectorLineContainer), [cls.connectorLineZIndex]);
             if (!isNullOrUndefined(this.parent.taskFields.dependency)
                 && (element.querySelector('.' + cls.connectorPointLeft)
                     || element.parentElement.querySelector('.' + cls.connectorPointLeft))
@@ -608,7 +606,7 @@ var TaskbarEdit = /** @class */ (function (_super) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('left');
             }
-            else if (isConnectorLineEdit && ((mouseY + 20) >
+            else if (isConnectorLineEdit && ((mouseY + 80) >
                 containerPosition.top + this.parent.ganttChartModule.chartBodyContainer.offsetHeight)) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.top;
                 this.startScrollTimer('bottom');
@@ -1486,6 +1484,10 @@ var TaskbarEdit = /** @class */ (function (_super) {
             else {
                 this.parent.isOnEdit = false;
                 this.cancelTaskbarEditActionInMouseLeave();
+                if (this.parent.enableCriticalPath && this.parent.criticalPathModule) {
+                    var criticalModule = this.parent.criticalPathModule;
+                    criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+                }
             }
         }
         if (this.parent.viewType === 'ResourceView' && this.parent.enableMultiTaskbar && !isNullOrUndefined(this.taskBarEditElement)) {

package/src/gantt/actions/toolbar.js

@@ -8,7 +8,7 @@ var Toolbar = /** @class */ (function () {
         this.predefinedItems = {};
         this.items = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search',
             'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport',
-            'CsvExport', 'PdfExport', 'Indent', 'Outdent'];
+            'CsvExport', 'PdfExport', 'Indent', 'Outdent', 'CriticalPath'];
         this.parent = parent;
         this.id = this.parent.element.id;
         this.parent.on('ui-toolbarupdate', this.propertyChanged, this);
@@ -32,11 +32,19 @@ var Toolbar = /** @class */ (function () {
             }
             var preItems = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
                 'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport', 'CsvExport',
-                'PdfExport', 'Indent', 'Outdent'];
+                'PdfExport', 'Indent', 'Outdent', 'CriticalPath'];
             for (var _i = 0, preItems_1 = preItems; _i < preItems_1.length; _i++) {
                 var item = preItems_1[_i];
-                var itemStr = item.toLowerCase();
-                var localeName = item[0].toLowerCase() + item.slice(1);
+                var itemStr = void 0;
+                var localeName = void 0;
+                if (item === 'CriticalPath') {
+                    itemStr = "critical-path";
+                    localeName = "criticalPath";
+                }
+                else {
+                    itemStr = item.toLowerCase();
+                    localeName = item[0].toLowerCase() + item.slice(1);
+                }
                 this.predefinedItems[item] = {
                     id: this.parent.element.id + '_' + itemStr, prefixIcon: 'e-' + itemStr,
                     text: this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant(localeName),
@@ -240,6 +248,14 @@ var Toolbar = /** @class */ (function () {
                             gObj.indent();
                         }
                         break;
+                    case gID + '_critical-path':
+                        if (gObj.enableCriticalPath) {
+                            gObj.enableCriticalPath = false;
+                        }
+                        else {
+                            gObj.enableCriticalPath = true;
+                        }
+                        break;
                     case gID + '_outdent':
                         if (gObj.editModule && gObj.selectionModule.getSelectedRecords().length) {
                             gObj.outdent();
@@ -419,6 +435,8 @@ var Toolbar = /** @class */ (function () {
             disableItems.push(gID + '_edit');
             disableItems.push(gID + '_update');
             disableItems.push(gID + '_cancel');
+            disableItems.push(gID + '_indent');
+            disableItems.push(gID + '_outdent');
         }
         for (var e = 0; e < enableItems.length; e++) {
             var index = void 0;

package/src/gantt/base/css-constants.d.ts

@@ -36,8 +36,12 @@ export declare const parentProgressBarInnerDiv: string;
 export declare const taskLabel: string;
 export declare const childTaskBarInnerDiv: string;
 export declare const childProgressBarInnerDiv: string;
+export declare const criticalChildTaskBarInnerDiv: string;
+export declare const criticalChildProgressBarInnerDiv: string;
 export declare const milestoneTop: string;
 export declare const milestoneBottom: string;
+export declare const criticalMilestoneTop: string;
+export declare const criticalMilestoneBottom: string;
 export declare const baselineBar: string;
 export declare const baselineMilestoneContainer: string;
 export declare const baselineMilestoneDiv: string;
@@ -73,6 +77,7 @@ export declare const traceManualUnscheduledTask: string;
 export declare const traceParentTaskBar: string;
 export declare const traceParentProgressBar: string;
 export declare const traceUnscheduledTask: string;
+export declare const criticalUnscheduledTask: string;
 export declare const taskIndicatorDiv: string;
 export declare const leftResizeGripper: string;
 export declare const rightResizeGripper: string;
@@ -95,13 +100,19 @@ export declare const unscheduledMilestoneBottom: string;
 export declare const dependencyViewContainer: string;
 export declare const connectorLineContainer: string;
 export declare const connectorLine: string;
+export declare const criticalConnectorLine: string;
+export declare const criticalConnectorLineRightArrow: string;
+export declare const criticalConnectorLineLeftArrow: string;
 export declare const connectorLineRightArrow: string;
 export declare const connectorLineLeftArrow: string;
 export declare const connectorLineZIndex: string;
 export declare const connectorLineHover: string;
+export declare const criticalConnectorLineHover: string;
 export declare const connectorLineHoverZIndex: string;
 export declare const connectorLineRightArrowHover: string;
 export declare const connectorLineLeftArrowHover: string;
+export declare const criticalConnectorLineRightArrowHover: string;
+export declare const criticalConnectorLineLeftArrowHover: string;
 export declare const connectorTouchPoint: string;
 export declare const connectorPointLeft: string;
 export declare const connectorPointRight: string;
@@ -127,6 +138,7 @@ export declare const editIcon: string;
 export declare const indentIcon: string;
 export declare const outdentIcon: string;
 export declare const addIcon: string;
+export declare const criticalPathIcon: string;
 export declare const addAboveIcon: string;
 export declare const addBelowIcon: string;
 export declare const activeParentTask: string;

package/src/gantt/base/css-constants.js

@@ -38,8 +38,12 @@ export var parentProgressBarInnerDiv = 'e-gantt-parent-progressbar-inner-div';
 export var taskLabel = 'e-task-label';
 export var childTaskBarInnerDiv = 'e-gantt-child-taskbar-inner-div';
 export var childProgressBarInnerDiv = 'e-gantt-child-progressbar-inner-div';
+export var criticalChildTaskBarInnerDiv = 'e-gantt-child-critical-taskbar-inner-div';
+export var criticalChildProgressBarInnerDiv = 'e-gantt-child-critical-progressbar-inner-div';
 export var milestoneTop = 'e-milestone-top';
 export var milestoneBottom = 'e-milestone-bottom';
+export var criticalMilestoneTop = 'e-critical-milestone-top';
+export var criticalMilestoneBottom = 'e-critical-milestone-bottom';
 export var baselineBar = 'e-baseline-bar';
 export var baselineMilestoneContainer = 'e-baseline-gantt-milestone-container';
 export var baselineMilestoneDiv = 'e-baseline-gantt-milestone';
@@ -75,6 +79,7 @@ export var traceManualUnscheduledTask = 'e-gantt-unscheduled-manualtask';
 export var traceParentTaskBar = 'e-gantt-parent-taskbar';
 export var traceParentProgressBar = 'e-gantt-parent-progressbar';
 export var traceUnscheduledTask = 'e-gantt-unscheduled-task';
+export var criticalUnscheduledTask = 'e-gantt-critical-unscheduled-taskbar';
 export var taskIndicatorDiv = 'e-indicator-span';
 export var leftResizeGripper = 'e-left-resize-gripper';
 export var rightResizeGripper = 'e-right-resize-gripper';
@@ -102,13 +107,19 @@ export var unscheduledMilestoneBottom = 'e-unscheduled-milestone-bottom';
 export var dependencyViewContainer = 'e-gantt-dependency-view-container';
 export var connectorLineContainer = 'e-connector-line-container';
 export var connectorLine = 'e-line';
+export var criticalConnectorLine = 'e-criticalconnector-line';
+export var criticalConnectorLineRightArrow = 'e-criticalconnector-line-right-arrow';
+export var criticalConnectorLineLeftArrow = 'e-criticalconnector-line-left-arrow';
 export var connectorLineRightArrow = 'e-connector-line-right-arrow';
 export var connectorLineLeftArrow = 'e-connector-line-left-arrow';
 export var connectorLineZIndex = 'e-connector-line-z-index';
 export var connectorLineHover = 'e-connector-line-hover';
+export var criticalConnectorLineHover = 'e-critical-connector-line-hover';
 export var connectorLineHoverZIndex = 'e-connector-line-hover-z-index';
 export var connectorLineRightArrowHover = 'e-connector-line-right-arrow-hover';
 export var connectorLineLeftArrowHover = 'e-connector-line-left-arrow-hover';
+export var criticalConnectorLineRightArrowHover = 'e-critical-connector-line-right-arrow-hover';
+export var criticalConnectorLineLeftArrowHover = 'e-critical-connector-line-left-arrow-hover';
 export var connectorTouchPoint = 'e-connectortouchpoint';
 export var connectorPointLeft = 'e-connectorpoint-left';
 export var connectorPointRight = 'e-connectorpoint-right';
@@ -135,6 +146,7 @@ export var editIcon = 'e-edit';
 export var indentIcon = 'e-indent';
 export var outdentIcon = 'e-outdent';
 export var addIcon = 'e-add';
+export var criticalPathIcon = 'e-critical-path';
 export var addAboveIcon = 'e-add-above';
 export var addBelowIcon = 'e-add-below';
 //Predecessor touch mode

package/src/gantt/base/date-processor.d.ts

@@ -48,7 +48,7 @@ export declare class DateProcessor {
      * @returns {Date} .
      * @private
      */
-    checkBaselineEndDate(date: Date): Date;
+    checkBaselineEndDate(date: Date, ganttProp?: ITaskData): Date;
     /**
      * To calculate start date value from duration and end date
      *

package/src/gantt/base/date-processor.js

@@ -189,7 +189,7 @@ var DateProcessor = /** @class */ (function () {
      * @returns {Date} .
      * @private
      */
-    DateProcessor.prototype.checkBaselineEndDate = function (date) {
+    DateProcessor.prototype.checkBaselineEndDate = function (date, ganttProp) {
         if (isNullOrUndefined(date)) {
             return null;
         }
@@ -199,7 +199,7 @@ var DateProcessor = /** @class */ (function () {
             if (hour > this.parent.defaultEndTime) {
                 this.setTime(this.parent.defaultEndTime, cloneDate);
             }
-            else if (hour <= this.parent.defaultStartTime) {
+            else if (hour <= this.parent.defaultStartTime && !ganttProp.isMilestone) {
                 cloneDate.setDate(cloneDate.getDate() - 1);
                 this.setTime(this.parent.defaultEndTime, cloneDate);
             }
@@ -1188,6 +1188,12 @@ var DateProcessor = /** @class */ (function () {
      */
     DateProcessor.prototype.calculateProjectDates = function (editArgs) {
         var _this = this;
+        if (this.parent.isLoad && this.parent.enablePersistence &&
+            this.parent.cloneProjectStartDate && this.parent.cloneProjectEndDate) {
+            this.parent.cloneProjectStartDate = this.getDateFromFormat(this.parent.cloneProjectStartDate);
+            this.parent.cloneProjectEndDate = this.getDateFromFormat(this.parent.cloneProjectEndDate);
+            return;
+        }
         var sDate = typeof this.parent.projectStartDate === 'string' ?
             new Date(this.parent.projectStartDate) : this.parent.projectStartDate;
         var eDate = typeof this.parent.projectEndDate === 'string' ?

package/src/gantt/base/enum.d.ts

@@ -59,7 +59,9 @@ export declare type ToolbarItem =
 /** To indent a selected record */
 'Indent' | 
 /** To outdent a selected record */
-'Outdent';
+'Outdent' | 
+/** To enable critical path */
+'CriticalPath';
 /**
  * Defines the schedule header mode. They are
  * * none - Define the default mode header.

package/src/gantt/base/gantt-chart.js

@@ -93,6 +93,10 @@ var GanttChart = /** @class */ (function () {
                 this.parent.predecessorModule.createConnectorLinesCollection();
             }
             this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+            if (this.parent.enableCriticalPath) {
+                var crtiticalModule = this.parent.criticalPathModule;
+                this.parent.criticalPathModule.criticalConnectorLine(crtiticalModule.criticalPathCollection, crtiticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, crtiticalModule.predecessorCollectionTaskIds);
+            }
             if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation) {
                 this.renderOverAllocationContainer();
             }
@@ -968,7 +972,7 @@ var GanttChart = /** @class */ (function () {
                     this.parent.treeGrid.grid.notify('key-pressed', e);
                 }
             }
-            if (!isInEditedState) {
+            if (!isNullOrUndefined(isInEditedState) && !this.parent.editModule.cellEditModule.isCellEdit) {
                 if (nextElement) {
                     if ($target.classList.contains('e-rowcell')) {
                         this.manageFocus($target, 'remove', false);
@@ -976,7 +980,7 @@ var GanttChart = /** @class */ (function () {
                     else {
                         this.manageFocus($target, 'remove', true);
                     }
-                    if (nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) {
+                    if ((nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) || $target.classList.contains('e-right-label-container')) {
                         if (!$target.classList.contains('e-rowcell')) {
                             this.parent.treeGrid.grid.notify('key-pressed', e);
                             var fmodule = getValue('focusModule', this.parent.treeGrid.grid);

package/src/gantt/base/gantt-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, createElement, Complex, addClass, removeClass, Event, EmitType, formatUnit, Browser } from '@syncfusion/ej2-base';import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, L10n, ModuleDeclaration, EventHandler } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEvents, KeyboardEventArgs, Collection, append, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner, Dialog } from '@syncfusion/ej2-popups';import { RowDragEventArgs } from '@syncfusion/ej2-grids';import { TaskProcessor } from './task-processor';import { GanttChart } from './gantt-chart';import { Timeline } from '../renderer/timeline';import { GanttTreeGrid } from './tree-grid';import { Toolbar } from '../actions/toolbar';import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs } from './interface';import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';import { TaskFieldsModel, TimelineSettingsModel, SplitterSettingsModel, SortSettings, SortSettingsModel } from '../models/models';import { EventMarkerModel, AddDialogFieldSettingsModel, EditDialogFieldSettingsModel, EditSettingsModel } from '../models/models';import { HolidayModel, DayWorkingTimeModel, FilterSettingsModel, SelectionSettingsModel } from '../models/models';import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings, LabelSettingsModel } from '../models/models';import { SearchSettingsModel, SearchSettings, ResourceFields, ResourceFieldsModel } from '../models/models';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { DateProcessor } from './date-processor';import { ChartRows } from '../renderer/chart-rows';import { Dependency } from '../actions/dependency';import * as cls from './css-constants';import { Query, DataManager } from '@syncfusion/ej2-data';import { Column, ColumnModel } from '../models/column';import { TreeGrid, FilterSettingsModel as TreeGridFilterSettingModel } from '@syncfusion/ej2-treegrid';import { Sort } from '../actions/sort';import { CellSelectEventArgs, ISelectedCell, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { CellDeselectEventArgs, IIndex, FailureEventArgs } from '@syncfusion/ej2-grids';import { HeaderCellInfoEventArgs, ColumnMenuClickEventArgs, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuItemModel, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { RowDD } from '../actions/rowdragdrop';import { Filter } from '../actions/filter';import { PageEventArgs, FilterEventArgs, SortEventArgs, ResizeArgs, ColumnDragEventArgs, getActualProperties } from '@syncfusion/ej2-grids';import { RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';import { ConnectorLine } from '../renderer/connector-line';import { ConnectorLineEdit } from '../actions/connector-line-edit';import { Edit } from '../actions/edit';import { Splitter } from './splitter';import { ResizeEventArgs, ResizingEventArgs } from '@syncfusion/ej2-layouts';import { TooltipSettingsModel } from '../models/tooltip-settings-model';import { Tooltip } from '../renderer/tooltip';import { ToolbarItem, ColumnMenuItem, RowPosition, DurationUnit, SortDirection } from './enum';import { GridLine, ContextMenuItem, ScheduleMode, ViewType } from './enum';import { Selection } from '../actions/selection';import { ExcelExport } from '../actions/excel-export';import { DayMarkers } from '../actions/day-markers';import { ContextMenu } from './../actions/context-menu';import { RowSelectingEventArgs } from './interface';import { ContextMenuOpenEventArgs as CMenuOpenEventArgs, ContextMenuClickEventArgs as CMenuClickEventArgs } from './interface';import { ColumnMenu } from '../actions/column-menu';import { ITaskbarClickEventArgs, RecordDoubleClickEventArgs, IMouseMoveEventArgs } from './interface';import { PdfExport } from '../actions/pdf-export';import { WorkUnit, TaskType } from './enum';import { FocusModule } from '../actions/keyboard';import { VirtualScroll } from '../actions/virtual-scroll';import { isCountRequired } from './utils';import { TaskbarEdit } from '../actions/taskbar-edit';
+import { Component, createElement, Complex, addClass, removeClass, Event, EmitType, formatUnit, Browser } from '@syncfusion/ej2-base';import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, L10n, ModuleDeclaration, EventHandler } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEvents, KeyboardEventArgs, Collection, append, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner, Dialog } from '@syncfusion/ej2-popups';import { RowDragEventArgs, GridColumn } from '@syncfusion/ej2-grids';import { TaskProcessor } from './task-processor';import { GanttChart } from './gantt-chart';import { Timeline } from '../renderer/timeline';import { GanttTreeGrid } from './tree-grid';import { Toolbar } from '../actions/toolbar';import { CriticalPath } from '../actions/critical-path';import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs } from './interface';import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';import { TaskFieldsModel, TimelineSettingsModel, SplitterSettingsModel, SortSettings, SortSettingsModel } from '../models/models';import { EventMarkerModel, AddDialogFieldSettingsModel, EditDialogFieldSettingsModel, EditSettingsModel } from '../models/models';import { HolidayModel, DayWorkingTimeModel, FilterSettingsModel, SelectionSettingsModel } from '../models/models';import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings, LabelSettingsModel } from '../models/models';import { SearchSettingsModel, SearchSettings, ResourceFields, ResourceFieldsModel } from '../models/models';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { DateProcessor } from './date-processor';import { ChartRows } from '../renderer/chart-rows';import { Dependency } from '../actions/dependency';import * as cls from './css-constants';import { Query, DataManager } from '@syncfusion/ej2-data';import { Column, ColumnModel } from '../models/column';import { TreeGrid, FilterSettingsModel as TreeGridFilterSettingModel } from '@syncfusion/ej2-treegrid';import { Sort } from '../actions/sort';import { CellSelectEventArgs, ISelectedCell, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { CellDeselectEventArgs, IIndex, FailureEventArgs } from '@syncfusion/ej2-grids';import { HeaderCellInfoEventArgs, ColumnMenuClickEventArgs, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuItemModel, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { RowDD } from '../actions/rowdragdrop';import { Filter } from '../actions/filter';import { PageEventArgs, FilterEventArgs, SortEventArgs, ResizeArgs, ColumnDragEventArgs, getActualProperties } from '@syncfusion/ej2-grids';import { RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';import { ConnectorLine } from '../renderer/connector-line';import { ConnectorLineEdit } from '../actions/connector-line-edit';import { Edit } from '../actions/edit';import { Splitter } from './splitter';import { ResizeEventArgs, ResizingEventArgs } from '@syncfusion/ej2-layouts';import { TooltipSettingsModel } from '../models/tooltip-settings-model';import { Tooltip } from '../renderer/tooltip';import { ToolbarItem, ColumnMenuItem, RowPosition, DurationUnit, SortDirection } from './enum';import { GridLine, ContextMenuItem, ScheduleMode, ViewType } from './enum';import { Selection } from '../actions/selection';import { ExcelExport } from '../actions/excel-export';import { DayMarkers } from '../actions/day-markers';import { ContextMenu } from './../actions/context-menu';import { RowSelectingEventArgs } from './interface';import { ContextMenuOpenEventArgs as CMenuOpenEventArgs, ContextMenuClickEventArgs as CMenuClickEventArgs } from './interface';import { ColumnMenu } from '../actions/column-menu';import { ITaskbarClickEventArgs, RecordDoubleClickEventArgs, IMouseMoveEventArgs } from './interface';import { PdfExport } from '../actions/pdf-export';import { WorkUnit, TaskType } from './enum';import { FocusModule } from '../actions/keyboard';import { VirtualScroll } from '../actions/virtual-scroll';import { isCountRequired } from './utils';import { TaskbarEdit } from '../actions/taskbar-edit';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -519,6 +519,13 @@ export interface GanttModel extends ComponentModel{
      */
     enableContextMenu?: boolean;
 
+    /**
+     * It highlights the critical tasks in the Gantt Chart that affect the project’s end date.
+     *
+     * @default false
+     */
+    enableCriticalPath?: boolean;
+
     /**
      * `contextMenuItems` defines both built-in and custom context menu items.
      * {% codeBlock src='gantt/contextMenuItems/index.md' %}{% endcodeBlock %}

package/src/gantt/base/gantt.d.ts

@@ -10,6 +10,7 @@ import { GanttChart } from './gantt-chart';
 import { Timeline } from '../renderer/timeline';
 import { GanttTreeGrid } from './tree-grid';
 import { Toolbar } from '../actions/toolbar';
+import { CriticalPath } from '../actions/critical-path';
 import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';
 import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';
 import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';
@@ -246,6 +247,10 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * The `dayMarkersModule` is used to manipulate event markers operation in Gantt.
      */
     dayMarkersModule: DayMarkers;
+    /**
+     * The `criticalPathModule` is used to determine the critical path  in Gantt.
+     */
+    criticalPathModule: CriticalPath;
     /** @hidden */
     isConnectorLineUpdate: boolean;
     /** @hidden */
@@ -738,6 +743,12 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @default false
      */
     enableContextMenu: boolean;
+    /**
+     * It highlights the critical tasks in the Gantt Chart that affect the project’s end date.
+     *
+     * @default false
+     */
+    enableCriticalPath: boolean;
     /**
      * `contextMenuItems` defines both built-in and custom context menu items.
      * {% codeBlock src='gantt/contextMenuItems/index.md' %}{% endcodeBlock %}
@@ -1374,6 +1385,7 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @returns {string} .
      */
     getWorkString(work: number, workUnit: string): string;
+    private updateTreeColumns;
     /**
      *
      * @param {object} args .
@@ -1398,12 +1410,14 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
     onPropertyChanged(newProp: GanttModel, oldProp: GanttModel): void;
     private updateOverAllocationCotainer;
     /**
-     * Get the properties to be maintained in the persisted state.
+     * Returns the properties to be maintained in persisted state.
      *
      * @returns {string} .
      * @private
      */
     getPersistData(): string;
+    private ignoreInArrays;
+    private ignoreInColumn;
     /**
      * @returns {void} .
      * @private
@@ -1432,6 +1446,8 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @returns {void} .
      */
     sortColumn(columnName: string, direction: SortDirection, isMultiSort?: boolean): void;
+    private mergePersistGanttData;
+    private mergeColumns;
     /**
      * Clears all the sorted columns of the Gantt.
      *
@@ -1781,6 +1797,21 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
      * @public
      */
     outdent(): void;
+    /**
+     * To render the critical path tasks in Gantt.
+     *
+     * @returns {void} .
+     * @param {boolean} isCritical- whether to render critical path or not .
+     * @public
+     */
+    private showCriticalPath;
+    /**
+     * To get all the critical tasks in Gantt.
+     *
+     * @returns {IGanttData[]} .
+     * @public
+     */
+    getCriticalTasks(): IGanttData[];
     /**
      * To perform Zoom in action on Gantt timeline.
      *