@syncfusion/ej2-gantt 20.2.38 → 20.2.44

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

@@ -366,7 +366,7 @@ class DateProcessor {
             if (hour < this.parent.defaultStartTime) {
                 this.setTime(this.parent.defaultStartTime, cloneDate);
             }
-            else if (hour >= this.parent.defaultEndTime) {
+            else if (hour > this.parent.defaultEndTime) {
                 cloneDate.setDate(cloneDate.getDate() + 1);
                 this.setTime(this.parent.defaultStartTime, cloneDate);
             }
@@ -400,7 +400,7 @@ class DateProcessor {
             if (hour > this.parent.defaultEndTime) {
                 this.setTime(this.parent.defaultEndTime, cloneDate);
             }
-            else if (hour <= this.parent.defaultStartTime && !ganttProp.isMilestone) {
+            else if (hour <= this.parent.defaultStartTime && !isNullOrUndefined(ganttProp) && !ganttProp.isMilestone) {
                 cloneDate.setDate(cloneDate.getDate() - 1);
                 this.setTime(this.parent.defaultEndTime, cloneDate);
             }
@@ -1466,7 +1466,13 @@ class DateProcessor {
             }
             sortDates(taskRange);
             if (!minStartDate || !maxEndDate) {
-                minStartDate = isNullOrUndefined(minStartDate) ? this.getDateFromFormat(new Date()) : minStartDate;
+                if (!minStartDate) {
+                    minStartDate = isNullOrUndefined(minStartDate) ? this.getDateFromFormat(new Date()) : minStartDate;
+                    minStartDate.setHours(0, 0, 0, 0);
+                }
+                else {
+                    minStartDate = isNullOrUndefined(minStartDate) ? this.getDateFromFormat(new Date()) : minStartDate;
+                }
                 maxEndDate = this.getDateFromFormat(new Date(minStartDate.getTime()));
                 maxEndDate.setDate(maxEndDate.getDate() + 20);
             }
@@ -4816,7 +4822,7 @@ class GanttChart {
      * @private
      */
     expandedGanttRow(args) {
-        if (isNullOrUndefined(args['gridRow'])) {
+        if ((isNullOrUndefined(args['gridRow']) || isNullOrUndefined(args['chartRow'])) && this.parent.enableVirtualization) {
             return;
         }
         const record = getValue('data', args);
@@ -5026,6 +5032,23 @@ class GanttChart {
             $target.closest('.e-chart-row') ? $target.closest('.e-chart-row').rowIndex : -1;
         const isTab = (e.action === 'tab') ? true : false;
         const nextElement = this.getNextElement($target, isTab, isInEditedState);
+        this.tempNextElement = nextElement;
+        if (!isNullOrUndefined(nextElement['cellIndex'])) {
+            if (this.parent.allowRowDragAndDrop) {
+                this.childrenIndex = nextElement['cellIndex'];
+                this.nextElementIndex = nextElement['cellIndex'] - 1;
+            }
+            else {
+                this.childrenIndex = nextElement['cellIndex'];
+                this.nextElementIndex = nextElement['cellIndex'];
+            }
+            if (!this.parent.ganttColumns[this.nextElementIndex]['allowEditing'] && this.parent.ganttColumns[this.nextElementIndex]['field'] !== this.parent.taskFields.id) {
+                this.isEditableElement = true;
+            }
+            else {
+                this.isEditableElement = false;
+            }
+        }
         if (nextElement === 'noNextRow') {
             this.manageFocus($target, 'remove', true);
             return;
@@ -5044,7 +5067,7 @@ class GanttChart {
                 if (isTab) {
                     if (this.parent.editSettings.allowNextRowEdit) {
                         const rowData = this.parent.currentViewData[this.focusedRowIndex];
-                        const columnName = this.parent.ganttColumns[nextElement.getAttribute('aria-colindex')].field;
+                        const columnName = this.parent.ganttColumns[nextElement.getAttribute('data-colindex')].field;
                         if (rowData.hasChildRecords) {
                             if (columnName === this.parent.taskFields.endDate || columnName ===
                                 this.parent.taskFields.duration || columnName === this.parent.taskFields.dependency ||
@@ -5058,7 +5081,9 @@ class GanttChart {
                             }
                             else {
                                 this.parent.treeGrid.grid.notify('key-pressed', e);
-                                this.parent.treeGrid.editCell(this.focusedRowIndex, columnName); // eslint-disable-line
+                                if (isInEditedState) {
+                                    this.parent.treeGrid.editCell(this.focusedRowIndex, columnName); // eslint-disable-line
+                                }
                             }
                         }
                         else {
@@ -5073,7 +5098,8 @@ class GanttChart {
                     this.parent.treeGrid.grid.notify('key-pressed', e);
                 }
             }
-            if (!isNullOrUndefined(isInEditedState) && !this.parent.editModule.cellEditModule.isCellEdit) {
+            if (!(this.parent.editModule && this.parent.editModule.cellEditModule
+                && !isNullOrUndefined(this.parent.editModule.cellEditModule.editedColumn))) {
                 if (nextElement) {
                     if ($target.classList.contains('e-rowcell')) {
                         this.manageFocus($target, 'remove', false);
@@ -5277,6 +5303,18 @@ class GanttChart {
                     childElement = element;
                 }
             }
+            if (element.classList.contains('e-right-label-temp-container') || element.classList.contains('e-left-label-temp-container') || element.classList.contains('e-indicator-span')) {
+                if (focus === 'add') {
+                    element.setAttribute('tabIndex', '0');
+                    addClass([element], 'e-active-container');
+                    element.focus();
+                }
+                else {
+                    removeClass([element], 'e-active-container');
+                    element.setAttribute('tabIndex', '-1');
+                    element.blur();
+                }
+            }
             if (focus === 'add' && !isNullOrUndefined(childElement)) {
                 element.setAttribute('tabIndex', '0');
                 addClass([childElement], 'e-active-container');
@@ -6909,6 +6947,7 @@ class GanttTreeGrid {
     }
     composeProperties() {
         this.parent.treeGrid.showColumnMenu = this.parent.showColumnMenu;
+        this.parent.treeGrid.enableCollapseAll = this.parent.collapseAllParentTasks;
         this.parent.treeGrid.columnMenuItems = this.parent.columnMenuItems;
         this.parent.treeGrid.childMapping = isNullOrUndefined(this.parent.taskFields.child) ? '' : this.parent.taskFields.child;
         this.parent.treeGrid.treeColumnIndex = this.parent.treeColumnIndex;
@@ -9639,6 +9678,12 @@ class ChartRows extends DateProcessor {
             }
             const dataId = this.parent.viewType === 'ProjectView' ? data.ganttProperties.taskId : data.ganttProperties.rowUniqueID;
             this.parent.treeGrid.grid.setRowData(dataId, data);
+            let nextEditableElement = this.parent.ganttChartModule.tempNextElement;
+            if (this.parent.ganttChartModule.isEditableElement && nextEditableElement) {
+                this.parent.treeGrid.grid.focusModule.focus();
+                addClass([this.parent.treeGrid.getRows()[tr['ariaRowIndex']].children[this.parent.ganttChartModule.childrenIndex]], 'e-focused');
+                this.parent.ganttChartModule.tempNextElement = null;
+            }
             const row = this.parent.treeGrid.grid.getRowObjectFromUID(this.parent.treeGrid.grid.getDataRows()[index].getAttribute('data-uid'));
             row.data = data;
         }
@@ -11829,7 +11874,7 @@ class Tooltip$1 {
         if (ganttData) {
             data = ganttData.ganttProperties;
             taskName = !isNullOrUndefined(data.taskName) ? '<tr class = "e-gantt-tooltip-rowcell"><td colspan="3">' +
-                data.taskName + '</td></tr>' : '';
+                (this.parent.disableHtmlEncode ? data.taskName.replace(/</g, "&lt;").replace(/>/g, "&gt;") : data.taskName) + '</td></tr>' : '';
         }
         switch (elementType) {
             case 'milestone':
@@ -12695,6 +12740,16 @@ let Gantt = class Gantt extends Component {
             this.renderChartVerticalLines();
         }
     }
+    removeCriticalPathStyles() {
+        const ganttChartElement = this.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);
+        removeClass(this.element.querySelectorAll('.e-line'), criticalConnectorLine);
+        removeClass(this.element.querySelectorAll('.e-connector-line-right-arrow'), criticalConnectorLineRightArrow);
+        removeClass(this.element.querySelectorAll('.e-connector-line-left-arrow'), criticalConnectorLineLeftArrow);
+    }
     wireEvents() {
         if (this.allowKeyboard) {
             this.keyboardModule = new KeyboardEvents(this.element, {
@@ -12857,139 +12912,140 @@ let Gantt = class Gantt extends Component {
      * @private
      */
     getZoomingLevels() {
+        const _WeekStartDay = this.timelineSettings.weekStartDay;
         const zoomingLevels = [
             {
                 topTier: { unit: 'Year', format: 'yyyy', count: 50 },
                 bottomTier: { unit: 'Year', format: 'yyyy', count: 10 }, timelineUnitSize: 99, level: 0,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'yyyy', count: 20 },
                 bottomTier: { unit: 'Year', format: 'yyyy', count: 5 }, timelineUnitSize: 99, level: 1,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'yyyy', count: 5 },
                 bottomTier: { unit: 'Year', format: 'yyyy', count: 1 }, timelineUnitSize: 99, level: 2,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'MMM, yy', count: 1 },
                 bottomTier: {
                     unit: 'Month', formatter: this.displayHalfValue, count: 6
                 }, timelineUnitSize: 66, level: 3,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'MMM, yy', count: 1 },
                 bottomTier: {
                     unit: 'Month', formatter: this.displayHalfValue, count: 6
                 }, timelineUnitSize: 99, level: 4,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'MMM, yy', count: 1 },
                 bottomTier: {
                     unit: 'Month', formatter: this.displayQuarterValue, count: 3
                 }, timelineUnitSize: 66, level: 5,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'yyyy', count: 1 },
                 bottomTier: {
                     unit: 'Month', formatter: this.displayQuarterValue, count: 3
                 }, timelineUnitSize: 99, level: 6,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Year', format: 'yyyy', count: 1 },
                 bottomTier: { unit: 'Month', format: 'MMM yyyy', count: 1 }, timelineUnitSize: 99, level: 7,
-                timelineViewMode: 'Year', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Year', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Month', format: 'MMM, yy', count: 1 },
                 bottomTier: { unit: 'Week', format: 'dd', count: 1 }, timelineUnitSize: 33, level: 8,
-                timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Month', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
                 bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 66, level: 9,
-                timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Month', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
                 bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 99, level: 10,
-                timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Month', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
                 bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 33, level: 11,
-                timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Week', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
                 bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 66, level: 12,
-                timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Week', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
                 bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 99, level: 13,
-                timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Week', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 12 }, timelineUnitSize: 66, level: 14,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 12 }, timelineUnitSize: 99, level: 15,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 6 }, timelineUnitSize: 66, level: 16,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 6 }, timelineUnitSize: 99, level: 17,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 2 }, timelineUnitSize: 66, level: 18,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 2 }, timelineUnitSize: 99, level: 19,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 1 }, timelineUnitSize: 66, level: 20,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
                 bottomTier: { unit: 'Hour', format: 'hh a', count: 1 }, timelineUnitSize: 99, level: 21,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Day', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Hour', format: 'ddd MMM, h a', count: 1 },
                 bottomTier: { unit: 'Minutes', format: 'mm', count: 30 }, timelineUnitSize: 66, level: 22,
-                timelineViewMode: 'Hour', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Hour', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Hour', format: 'ddd MMM, h a', count: 1 },
                 bottomTier: { unit: 'Minutes', format: 'mm', count: 15 }, timelineUnitSize: 66, level: 23,
-                timelineViewMode: 'Hour', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Hour', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Hour', format: 'ddd MMM, h a', count: 1 },
                 bottomTier: { unit: 'Minutes', format: 'mm', count: 1 }, timelineUnitSize: 66, level: 24,
-                timelineViewMode: 'Hour', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Hour', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             }
         ];
         return zoomingLevels;
@@ -13234,9 +13290,18 @@ let Gantt = class Gantt extends Component {
                     }
                     break;
                 case 'timezone':
-                case 'enableCriticalPath':
                     this.dataOperation.checkDataBinding(true);
                     break;
+                case 'enableCriticalPath':
+                    if (this.enableCriticalPath && this.criticalPathModule) {
+                        this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
+                        let criticalModule = this.criticalPathModule;
+                        this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+                    }
+                    else {
+                        this.removeCriticalPathStyles();
+                    }
+                    break;
                 case 'filterSettings':
                     this.treeGrid.filterSettings = getActualProperties(this.filterSettings);
                     this.treeGrid.dataBind();
@@ -15773,6 +15838,9 @@ class CellEdit {
             this.parent.editModule.endEditAction(args);
         }
         this.isCellEdit = false;
+        if (!isNullOrUndefined(this.parent.editModule.cellEditModule.editedColumn)) {
+            this.parent.editModule.cellEditModule.editedColumn = null;
+        }
         if (!isNullOrUndefined(this.parent.toolbarModule)) {
             this.parent.toolbarModule.refreshToolbarItems();
         }
@@ -21281,7 +21349,7 @@ class Edit$2 {
                     if (column.field === this.parent.taskFields.id) {
                         this.updateIDColumnEditParams(column);
                     }
-                    else if (column.field === this.parent.taskFields.progress) {
+                    else if (column.field === this.parent.taskFields.progress && isNullOrUndefined(column.edit)) {
                         this.updateProgessColumnEditParams(column);
                     }
                     else if (column.field === this.parent.taskFields.resourceInfo) {
@@ -23244,6 +23312,7 @@ class Edit$2 {
         eventArgs.modifiedRecords = args.updatedRecordCollection;
         eventArgs.modifiedTaskData = getTaskData(args.updatedRecordCollection, null, null, this.parent);
         setValue('action', args.action, eventArgs);
+        this.parent.isOnDelete = false;
         this.parent.trigger('actionComplete', eventArgs);
         this.deletedTaskDetails = [];
         this.parent.initiateEditAction(false);
@@ -23859,7 +23928,7 @@ class Edit$2 {
                     else {
                         if (this.parent.viewType === 'ProjectView') {
                             if ((rowPosition === 'Top' || rowPosition === 'Bottom') ||
-                                ((rowPosition === 'Above' || rowPosition === 'Below' || rowPosition === 'Child') && !args.data.parentItem)) {
+                                ((rowPosition === 'Above' || rowPosition === 'Below' || rowPosition === 'Child') || isNullOrUndefined(rowPosition) && !args.data.parentItem)) {
                                 if (args.data instanceof Array) {
                                     this.updateRealDataSource(args.data, rowPosition);
                                 }
@@ -27188,10 +27257,7 @@ class CriticalPath {
     /* 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);
+        this.parent.removeCriticalPathStyles();
         for (let i = 0; i < criticalPathIds.length; i++) {
             let criticalData;
             if (this.parent.viewType === 'ProjectView') {
@@ -27226,9 +27292,6 @@ class CriticalPath {
                 }
             }
         }
-        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;
@@ -27557,7 +27620,7 @@ class ContextMenu$2 {
             let rowIndex = -1;
             if (args.gridRow) {
                 // eslint-disable-next-line
-                rowIndex = parseInt(args.gridRow.getAttribute('aria-rowindex'), 0);
+                rowIndex = parseInt(args.gridRow.getAttribute('data-rowindex'), 0);
             }
             else if (args.chartRow) {
                 // eslint-disable-next-line
@@ -28186,7 +28249,7 @@ class RowDD$1 {
             ganttDragelem.remove();
         }
         const gridRow = closest(args.target, '.e-row');
-        const dropIndex = gridRow ? parseInt(gridRow.getAttribute('aria-rowindex'), 10) : args.dropIndex;
+        const dropIndex = gridRow ? parseInt(gridRow.getAttribute('data-rowindex'), 10) : args.dropIndex;
         args.dropIndex = dropIndex;
         args.dropRecord = this.parent.updatedRecords[args.dropIndex];
         this.parent.trigger('rowDrop', args);
@@ -28495,6 +28558,7 @@ class RowDD$1 {
         const proxy = this.parent;
         let tempDataSource;
         let idx;
+        const ganttFields = this.parent.taskFields;
         if (this.parent.dataSource instanceof DataManager) {
             tempDataSource = getValue('dataOperation.dataArray', this.parent);
         }
@@ -28503,7 +28567,12 @@ class RowDD$1 {
         }
         if (tempDataSource.length > 0 && (!isNullOrUndefined(droppedRecord) && !droppedRecord.parentItem)) {
             for (let i = 0; i < Object.keys(tempDataSource).length; i++) {
-                if (tempDataSource[i][this.parent.taskFields.child] === droppedRecord.taskData[this.parent.taskFields.child]) {
+                if (!isNullOrUndefined(droppedRecord.taskData[ganttFields.child]) &&
+                    tempDataSource[i][ganttFields.child] === droppedRecord.taskData[ganttFields.child]) {
+                    idx = i;
+                }
+                else if (isNullOrUndefined(droppedRecord.taskData[ganttFields.child]) &&
+                    droppedRecord.taskData[ganttFields.id] === tempDataSource[i][ganttFields.id]) {
                     idx = i;
                 }
             }