@syncfusion/ej2-gantt 20.4.53 → 21.1.35

package/src/gantt/base/tree-grid.js

@@ -1,5 +1,5 @@
 import { TreeGrid } from '@syncfusion/ej2-treegrid';
-import { createElement, isNullOrUndefined, getValue, extend, EventHandler, deleteObject } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, getValue, extend, EventHandler, deleteObject, remove } from '@syncfusion/ej2-base';
 import { setValue } from '@syncfusion/ej2-base';
 import { Deferred, Query } from '@syncfusion/ej2-data';
 import { Column as GanttColumn } from '../models/column';
@@ -26,6 +26,15 @@ var GanttTreeGrid = /** @class */ (function () {
         this.columnMenuOpen = function (args) {
             _this.parent.notify('columnMenuOpen', args);
             _this.parent.trigger('columnMenuOpen', args);
+            document.querySelector(".e-colmenu").addEventListener('mousemove', function (event) {
+                var filPopOptions = document.querySelector(".e-filter-popup");
+                var filOptions = document.querySelector(".e-filter-item");
+                if (!isNullOrUndefined(filPopOptions)) {
+                    if (!filOptions.classList.contains('e-focused')) {
+                        remove(_this.parent.filterModule.filterMenuElement);
+                    }
+                }
+            });
         };
         this.columnMenuClick = function (args) {
             _this.parent.trigger('columnMenuClick', args);
@@ -57,6 +66,7 @@ var GanttTreeGrid = /** @class */ (function () {
         this.parent.treeGrid = new TreeGrid();
         this.parent.treeGrid.allowSelection = false;
         this.parent.treeGrid.allowKeyboard = this.parent.allowKeyboard;
+        this.parent.treeGrid['${enableHtmlSanitizer}'] = this.parent.enableHtmlSanitizer;
         this.parent.treeGrid.enableImmutableMode = this.parent.enableImmutableMode;
         this.treeGridColumns = [];
         if (!this.parent.isLocaleChanged && this.parent.isLoad) {
@@ -247,6 +257,12 @@ var GanttTreeGrid = /** @class */ (function () {
         if (!this.parent.ganttChartModule.isExpandCollapseFromChart && !this.parent.isExpandCollapseLevelMethod) {
             var collapsedArgs = this.createExpandCollapseArgs(args);
             this.parent.ganttChartModule.collapsedGanttRow(collapsedArgs);
+            if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && collapsedArgs['gridRow']) {
+                collapsedArgs['gridRow'].style.height = collapsedArgs['chartRow'].style.height;
+                this.parent.contentHeight = this.parent.enableRtl ? this.parent['element'].getElementsByClassName('e-content')[2].children[0]['offsetHeight'] :
+                    this.parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
+                document.getElementsByClassName('e-chart-rows-container')[0]['style'].height = this.parent.contentHeight + 'px';
+            }
         }
         if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
             this.parent.hideMaskRow();
@@ -260,6 +276,12 @@ var GanttTreeGrid = /** @class */ (function () {
             if (!args['data'].length) {
                 var expandedArgs = this.createExpandCollapseArgs(args);
                 this.parent.ganttChartModule.expandedGanttRow(expandedArgs);
+                if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && args['row']) {
+                    args['row'].style.height = this.parent.rowHeight + 'px';
+                    this.parent.contentHeight = this.parent.enableRtl ? this.parent['element'].getElementsByClassName('e-content')[2].children[0]['offsetHeight'] :
+                        this.parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
+                    document.getElementsByClassName('e-chart-rows-container')[0]['style'].height = this.parent.contentHeight + 'px';
+                }
             }
         }
         if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
@@ -352,6 +374,14 @@ var GanttTreeGrid = /** @class */ (function () {
             this.parent.addDeleteRecord = false;
         }
         this.parent.trigger('actionComplete', updatedArgs);
+        if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && this.parent.showOverAllocation) {
+            for (var i = 0; i < this.parent.currentViewData.length; i++) {
+                if (this.parent.currentViewData[i].hasChildRecords && !this.parent.currentViewData[i].expanded) {
+                    this.parent.chartRowsModule.updateDragDropRecords(this.parent.currentViewData[i]);
+                }
+            }
+            this.parent.ganttChartModule.renderRangeContainer(this.parent.currentViewData);
+        }
         if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
             this.parent.hideMaskRow();
         }

package/src/gantt/base/utils.js

@@ -139,7 +139,7 @@ export function updateDates(record, parent) {
 export function formatString(str, args) {
     var regx;
     for (var i = 0; i < args.length; i++) {
-        // eslint-disable-next-line detect-non-literal-regexp
+        // eslint-disable-next-line security/detect-non-literal-regexp
         regx = new RegExp('\\{' + (i) + '\\}', 'gm');
         str = str.replace(regx, args[i].toString());
     }

package/src/gantt/export/export-helper.js

@@ -437,6 +437,12 @@ var ExportHelper = /** @class */ (function () {
         cell.style.padding.bottom = padding - style.fontSize;
         cell.style.padding.left = 10;
         cell.style.padding.right = 10;
+        if (style.padding) {
+            cell.style.padding = style.padding;
+        }
+        if (style.borders) {
+            cell.style.borders = style.borders;
+        }
     };
     /**
      * @param {PdfDocument} pdfDoc .

package/src/gantt/renderer/chart-rows.d.ts

@@ -268,6 +268,8 @@ export declare class ChartRows extends DateProcessor {
      * @private
      */
     templateCompiler(template: string): Function;
+    updateOverlapped(): void;
+    updateDragDropRecords(data: IGanttData, tr?: Node): void;
     /**
      * To refresh edited TR
      *

package/src/gantt/renderer/chart-rows.js

@@ -11,7 +11,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { createElement, isNullOrUndefined, extend, compile, getValue, setValue } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, extend, compile, getValue, setValue, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { formatUnit, addClass } from '@syncfusion/ej2-base';
 import { isScheduledTask } from '../base/utils';
 import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -178,8 +178,12 @@ var ChartRows = /** @class */ (function (_super) {
                 }
             }
             else {
-                labelString = this.getTaskLabel(this.parent.labelSettings.taskLabel);
+                var field = this.parent.labelSettings.taskLabel;
+                labelString = this.getTaskLabel(field);
                 labelString = labelString === 'isCustomTemplate' ? this.parent.labelSettings.taskLabel : labelString;
+                if (this.parent.enableHtmlSanitizer && typeof (labelString) === 'string') {
+                    labelString = SanitizeHtmlHelper.sanitize(labelString);
+                }
             }
             if (labelString.indexOf('null') === -1) {
                 if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' &&
@@ -191,7 +195,7 @@ var ChartRows = /** @class */ (function (_super) {
                         (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.enableRtl ? 'right;' : 'left;') +
                         'display:' + 'inline-block;' +
                         'width:' + (data.ganttProperties.width - 10) + 'px; height:' +
-                        this.taskBarHeight + 'px;">' + labelString + '</span>';
+                        this.taskBarHeight + 'px;"></span>';
                 }
                 else {
                     taskLabel = '<span class="' + cls.taskLabel + '" style="line-height:' +
@@ -199,7 +203,7 @@ var ChartRows = /** @class */ (function (_super) {
                         (this.parent.enableRtl ? 'right;' : 'left;')) : '') +
                         +(this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
                         +(this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
-                        this.taskBarHeight + 'px;">' + labelString + '</span>';
+                        this.taskBarHeight + 'px;"></span>';
                 }
             }
             var template = !isNullOrUndefined(data.ganttProperties.segments) && data.ganttProperties.segments.length > 0 ?
@@ -225,6 +229,7 @@ var ChartRows = /** @class */ (function (_super) {
                     data.ganttProperties.segments.length === 0))) {
                 if (template !== '' && !isNullOrUndefined(progressDiv) && progressDiv.length > 0) {
                     var templateElement = this.createDivElement(template)[0];
+                    templateElement.innerText = labelString;
                     var childLabel = this.parent.labelSettings.taskLabel;
                     if (childLabel && childLabel['elementRef'])
                         templateElement.appendChild(tempDiv);
@@ -707,6 +712,11 @@ var ChartRows = /** @class */ (function (_super) {
             if (labelString) {
                 labelString = labelString === 'isCustomTemplate' ? field : labelString;
                 leftLabelTemplateNode = this.getLableText(labelString, cls.leftLabelInnerDiv);
+                if (this.parent.enableHtmlSanitizer && typeof (labelString) === 'string') {
+                    labelString = SanitizeHtmlHelper.sanitize(labelString);
+                    labelString = labelString === 'isCustomTemplate' ? field : labelString;
+                    leftLabelTemplateNode = this.getLableText(labelString, cls.leftLabelInnerDiv);
+                }
             }
         }
         if (leftLabelTemplateNode && leftLabelTemplateNode.length > 0) {
@@ -757,6 +767,11 @@ var ChartRows = /** @class */ (function (_super) {
             if (labelString) {
                 labelString = labelString === 'isCustomTemplate' ? field : labelString;
                 rightLabelTemplateNode = this.getLableText(labelString, cls.rightLabelInnerDiv);
+                if (this.parent.enableHtmlSanitizer && typeof (labelString) === 'string') {
+                    labelString = SanitizeHtmlHelper.sanitize(labelString);
+                    labelString = labelString === 'isCustomTemplate' ? field : labelString;
+                    rightLabelTemplateNode = this.getLableText(labelString, cls.rightLabelInnerDiv);
+                }
             }
         }
         if (rightLabelTemplateNode && rightLabelTemplateNode.length > 0) {
@@ -808,7 +823,7 @@ var ChartRows = /** @class */ (function (_super) {
             '<div class="' + cls.manualParentMilestoneBottom + '" style="top:' +
             (this.milesStoneRadius) + 'px;border-right-width:' + this.milesStoneRadius + 'px; border-left-width:' +
             this.milesStoneRadius + 'px; border-top-width:' + this.milesStoneRadius + 'px;"></div></div>';
-        return this.createDivElement(data.ganttProperties.width === 0 ? milestoneTemplate : template);
+        return this.createDivElement(data.ganttProperties.width === 0 ? milestoneTemplate : !data.ganttProperties.isMilestone ? template : null);
     };
     /**
      * To get parent taskbar node.
@@ -852,6 +867,9 @@ var ChartRows = /** @class */ (function (_super) {
             else {
                 labelString = this.getTaskLabel(this.parent.labelSettings.taskLabel);
                 labelString = labelString === 'isCustomTemplate' ? this.parent.labelSettings.taskLabel : labelString;
+                if (this.parent.enableHtmlSanitizer && typeof (labelString) === 'string') {
+                    labelString = SanitizeHtmlHelper.sanitize(labelString);
+                }
             }
             if (labelString.indexOf('null') === -1) {
                 if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' &&
@@ -864,7 +882,7 @@ var ChartRows = /** @class */ (function (_super) {
                         'px; text-align:' + (this.parent.enableRtl ? 'right;' : 'left;') +
                         'display:' + 'inline-block;' +
                         'width:' + (data.ganttProperties.width - 10) + 'px; height:' +
-                        this.taskBarHeight + 'px;">' + labelString + '</span>';
+                        this.taskBarHeight + 'px;"></span>';
                 }
                 else {
                     labelDiv = '<span class="' +
@@ -874,9 +892,10 @@ var ChartRows = /** @class */ (function (_super) {
                         (this.parent.viewType === 'ResourceView' ? 'width:' + (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'display: inline-flex;' : '') +
                         (this.parent.viewType === 'ResourceView' ? 'width:' + (data.ganttProperties.width - 10) : '') + 'px; height:' +
-                        this.taskBarHeight + 'px;">' + labelString + '</span>';
+                        this.taskBarHeight + 'px;"></span>';
                 }
                 var labelElement = this.createDivElement(labelDiv)[0];
+                labelElement.innerText = labelString;
                 var parentLabel = this.parent.labelSettings.taskLabel;
                 if (parentLabel && parentLabel['elementRef'])
                     labelElement.appendChild(div);
@@ -1043,7 +1062,7 @@ var ChartRows = /** @class */ (function (_super) {
         var mileStoneLeft = -(this.connectorPointWidth + 2);
         var pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         var marginTop;
-        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
             marginTop = '';
         }
         else {
@@ -1062,7 +1081,7 @@ var ChartRows = /** @class */ (function (_super) {
         var pointerRight = this.parent.isAdaptive ? 10 : -2;
         var pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         var marginTop;
-        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
             marginTop = '';
         }
         else {
@@ -1351,6 +1370,9 @@ var ChartRows = /** @class */ (function (_super) {
         this.parent.renderTemplates();
         this.triggerQueryTaskbarInfo();
         this.parent.modifiedRecords = [];
+        if (this.parent.viewType == 'ResourceView' && this.parent.showOverAllocation) {
+            this.updateOverlapped();
+        }
         if (collapsedResourceRecord.length) {
             for (var j = 0; j < collapsedResourceRecord.length; j++) {
                 if (collapsedResourceRecord[j].hasChildRecords) {
@@ -1377,22 +1399,37 @@ var ChartRows = /** @class */ (function (_super) {
         var taskbarContainerNode = this.taskbarContainer();
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
-        var connectorLineLeftNode = this.getLeftPointNode();
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
-            taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
+        var connectorLineLeftNode;
+        if (!this.templateData.hasChildRecords && !this.parent.allowParentDependency) {
+            var connectorLineLeftNode_1 = this.getLeftPointNode();
+            taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode_1)[0]);
+        }
+        else if (this.parent.allowParentDependency) {
+            connectorLineLeftNode = this.getLeftPointNode();
+            if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
+                taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
+            }
         }
         if (this.templateData.hasChildRecords) {
             var parentTaskbarTemplateNode = this.getParentTaskbarNode(i, taskbarContainerNode);
+            var milestoneTemplateNode = this.getMilestoneNode(i, taskbarContainerNode);
             if (!this.templateData.ganttProperties.isAutoSchedule) {
                 var manualTaskbar = this.getManualTaskbar();
-                manualTaskbar[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
-                var connectorLineRightNode = this.getRightPointNode();
-                manualTaskbar[0].appendChild([].slice.call(connectorLineRightNode)[0]);
-                taskbarContainerNode[0].appendChild([].slice.call(manualTaskbar)[0]);
+                if (!isNullOrUndefined(manualTaskbar[0])) {
+                    if (this.parent.allowParentDependency) {
+                        manualTaskbar[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
+                        var connectorLineRightNode_1 = this.getRightPointNode();
+                        manualTaskbar[0].appendChild([].slice.call(connectorLineRightNode_1)[0]);
+                    }
+                    taskbarContainerNode[0].appendChild([].slice.call(manualTaskbar)[0]);
+                }
             }
             if (parentTaskbarTemplateNode && parentTaskbarTemplateNode.length > 0) {
                 taskbarContainerNode[0].appendChild([].slice.call(parentTaskbarTemplateNode)[0]);
             }
+            else if (milestoneTemplateNode && milestoneTemplateNode.length > 0) {
+                taskbarContainerNode[0].appendChild([].slice.call(milestoneTemplateNode)[0]);
+            }
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
                 taskBaselineTemplateNode = ((this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.baselineEndDate.getTime()) || ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
@@ -1462,8 +1499,13 @@ var ChartRows = /** @class */ (function (_super) {
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
-            var connectorLineRightNode = this.getRightPointNode();
+        var connectorLineRightNode;
+        if (this.parent.allowParentDependency && ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords)) {
+            connectorLineRightNode = this.getRightPointNode();
+            taskbarContainerNode[0].appendChild([].slice.call(connectorLineRightNode)[0]);
+        }
+        else if (!this.parent.allowParentDependency) {
+            connectorLineRightNode = this.getRightPointNode();
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineRightNode)[0]);
         }
         var rightLabelNode = this.getRightLabelNode(i);
@@ -1484,6 +1526,10 @@ var ChartRows = /** @class */ (function (_super) {
                 else {
                     var text = createElement('Text');
                     text.innerHTML = indicators[indicatorIndex].name;
+                    if (this.parent.enableHtmlSanitizer && typeof (indicators[indicatorIndex].name) === 'string') {
+                        indicators[indicatorIndex].name = SanitizeHtmlHelper.sanitize(indicators[indicatorIndex].name);
+                        text.innerText = indicators[indicatorIndex].name;
+                    }
                     taskIndicatorTextNode = text.childNodes;
                 }
                 taskIndicatorNode[0].appendChild([].slice.call(taskIndicatorTextNode)[0]);
@@ -1577,7 +1623,7 @@ var ChartRows = /** @class */ (function (_super) {
                 getComputedStyle(trElement.querySelector(classCollections[1])).borderBottomColor :
                 (trElement.querySelector('.' + cls.baselineBar) ? getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor : null);
         }
-        else {
+        else if (taskbarElement) {
             var childTask = taskbarElement.querySelector(classCollections[0]);
             var progressTask = taskbarElement.querySelector(classCollections[1]);
             args.taskbarBgColor = isNullOrUndefined(childTask) ? null : taskbarElement.classList.contains(cls.traceChildTaskBar) ?
@@ -1656,7 +1702,7 @@ var ChartRows = /** @class */ (function (_super) {
                 trElement.querySelector('.' + cls.baselineBar).style.backgroundColor = args.baselineColor;
             }
         }
-        else {
+        else if (taskbarElement) {
             if (taskbarElement.querySelector(classCollections[0]) &&
                 getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor !== args.taskbarBgColor) {
                 taskbarElement.querySelector(classCollections[0]).style.backgroundColor = args.taskbarBgColor;
@@ -1758,6 +1804,78 @@ var ChartRows = /** @class */ (function (_super) {
         }
         return null;
     };
+    // to update the eOverlapped property
+    ChartRows.prototype.updateOverlapped = function () {
+        for (var k = 0; k < this.parent.treeGrid.parentData.length; k++) {
+            var childRecords = this.parent.treeGrid.parentData[k].childRecords;
+            for (var i = 0; i < childRecords.length; i++) {
+                if (childRecords[i + 1]) {
+                    childRecords[i].ganttProperties.eOverlapped = undefined;
+                }
+                for (var j = i + 1; j < childRecords.length; j++) {
+                    childRecords[j].ganttProperties.eOverlapped = undefined;
+                    if (childRecords[i].ganttProperties.startDate.getTime() < childRecords[j].ganttProperties.endDate.getTime() &&
+                        childRecords[i].ganttProperties.endDate.getTime() > childRecords[j].ganttProperties.startDate.getTime()) {
+                        childRecords[j].ganttProperties.eOverlapped = true;
+                        childRecords[i].ganttProperties.eOverlapped = true;
+                    }
+                    else {
+                        if (isNullOrUndefined(childRecords[j].ganttProperties.eOverlapped)) {
+                            childRecords[j].ganttProperties.eOverlapped = false;
+                        }
+                        if (isNullOrUndefined(childRecords[i].ganttProperties.eOverlapped)) {
+                            childRecords[i].ganttProperties.eOverlapped = false;
+                        }
+                    }
+                }
+            }
+        }
+    };
+    // To update the row height when allow overallocation set to false
+    ChartRows.prototype.updateDragDropRecords = function (data, tr) {
+        var childRecords = data.childRecords;
+        var rowIndex = this.parent.currentViewData.indexOf(data);
+        var treeGridContentHeight = this.parent.enableRtl ? this.parent['element'].getElementsByClassName('e-content')[2].children[0]['offsetHeight'] :
+            this.parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
+        if (!tr) {
+            tr = this.ganttChartTableBody.childNodes[rowIndex];
+        }
+        tr['style'].height = this.parent.treeGrid.getRowByIndex(rowIndex)['style'].height = this.parent.rowHeight + 'px';
+        this.parent.contentHeight = treeGridContentHeight;
+        var rowIDs = [];
+        var rowCounts = 0;
+        if (data) {
+            for (var i = 0; i < childRecords.length; i++) {
+                for (var j = i + 1; j < childRecords.length; j++) {
+                    var taskbarContainer = tr.getElementsByClassName('e-taskbar-main-container');
+                    for (var k = 0; k < taskbarContainer.length; k++) {
+                        if (childRecords[i].ganttProperties.startDate.getTime() < childRecords[j].ganttProperties.endDate.getTime() &&
+                            childRecords[i].ganttProperties.endDate.getTime() > childRecords[j].ganttProperties.startDate.getTime()) {
+                            if (taskbarContainer[k].getAttribute('rowuniqueid') === childRecords[j]['rowUniqueID'] &&
+                                rowIDs.indexOf(childRecords[j]['rowUniqueID']) == -1) {
+                                rowIDs.push(childRecords[j]['rowUniqueID']);
+                                rowCounts++;
+                                tr.children[0]['style'].verticalAlign = 'baseline';
+                                tr.getElementsByClassName('e-taskbar-main-container')[k]['style'].marginTop = (rowCounts * this.parent.rowHeight) + this.taskBarMarginTop + 'px';
+                                tr['style'].height = this.parent.treeGrid.getRowByIndex(rowIndex)['style'].height = parseInt(tr['style'].height) + this.parent.rowHeight + 'px';
+                            }
+                        }
+                        else {
+                            if (taskbarContainer[k].getAttribute('rowuniqueid') === childRecords[j]['rowUniqueID'] &&
+                                rowIDs.indexOf(childRecords[j]['rowUniqueID']) == -1 && this.parent.rowDragAndDropModule &&
+                                this.parent.rowDragAndDropModule['draggedRecord'] && taskbarContainer[k].getAttribute('rowuniqueid') ===
+                                this.parent.rowDragAndDropModule['draggedRecord']['rowUniqueID'] && this.parent.rowDragAndDropModule['draggedRecord']['rowUniqueID'] === childRecords[j]['rowUniqueID']) {
+                                tr.getElementsByClassName('e-taskbar-main-container')[k]['style'].marginTop =
+                                    this.parent.editModule.taskbarEditModule.draggedRecordMarginTop;
+                            }
+                        }
+                    }
+                }
+            }
+            this.parent.contentHeight = treeGridContentHeight;
+            document.getElementsByClassName('e-chart-rows-container')[0]['style'].height = this.parent.contentHeight + 'px';
+        }
+    };
     /**
      * To refresh edited TR
      *
@@ -1771,14 +1889,22 @@ var ChartRows = /** @class */ (function (_super) {
         var selectedItem = this.parent.currentViewData[index];
         if (index !== -1 && selectedItem) {
             var data = selectedItem;
+            if (!this.parent.allowTaskbarOverlap && this.parent.viewType === 'ResourceView' && data.expanded) {
+                tr['style'].height = this.parent.treeGrid.getRowByIndex(index)['style'].height = this.parent.rowHeight + 'px';
+            }
             if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && !data.expanded && this.parent.enableMultiTaskbar) {
                 tr.replaceChild(this.getResourceParent(data).childNodes[0], tr.childNodes[0]);
             }
             else {
-                tr.replaceChild(this.getGanttChartRow(index, data).childNodes[0], tr.childNodes[0]);
+                if (this.parent.viewType === 'ResourceView' && this.parent.allowTaskbarDragAndDrop && !data.expanded) {
+                    tr.replaceWith(this.getGanttChartRow(index, data));
+                }
+                else {
+                    tr.replaceChild(this.getGanttChartRow(index, data).childNodes[0], tr.childNodes[0]);
+                }
             }
             this.parent.renderTemplates();
-            if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && this.parent.showOverAllocation) {
+            if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && this.parent.showOverAllocation && this.parent.allowTaskbarOverlap) {
                 if (isValidateRange) {
                     this.parent.ganttChartModule.renderRangeContainer(this.parent.currentViewData);
                 }
@@ -1800,6 +1926,12 @@ var ChartRows = /** @class */ (function (_super) {
             }
             var dataId = this.parent.viewType === 'ProjectView' ? data.ganttProperties.taskId : data.ganttProperties.rowUniqueID;
             this.parent.treeGrid.grid.setRowData(dataId, data);
+            if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && !data.expanded && this.parent.enableMultiTaskbar && !this.parent.allowTaskbarOverlap) {
+                this.updateDragDropRecords(selectedItem, tr);
+            }
+            if (this.parent.viewType === 'ResourceView' && data.hasChildRecords && this.parent.showOverAllocation && !this.parent.allowTaskbarOverlap) {
+                this.parent.ganttChartModule.renderRangeContainer(this.parent.currentViewData);
+            }
             var nextEditableElement = this.parent.ganttChartModule.tempNextElement;
             if (this.parent.ganttChartModule.isEditableElement && nextEditableElement) {
                 this.parent.treeGrid.grid.focusModule.focus();
@@ -1813,7 +1945,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getResourceParent = function (record) {
         var chartRows = this.parent.ganttChartModule.getChartRows();
         //Below code is for rendering taskbartemplate in resource view with multi taskbar
-        if (this.parent.initialChartRowElements) {
+        if (this.parent.initialChartRowElements && (!this.parent.allowTaskbarDragAndDrop && this.parent.allowTaskbarOverlap)) {
             for (var j = 0; j < this.parent.initialChartRowElements.length; j++) {
                 if (!isNullOrUndefined(chartRows[j])) {
                     if (!isNullOrUndefined(chartRows[j].childNodes[0].childNodes[1].childNodes[2]) &&
@@ -1841,7 +1973,7 @@ var ChartRows = /** @class */ (function (_super) {
                 var id = chartRows[i].querySelector('.' + cls.taskBarMainContainer).getAttribute('rowUniqueId');
                 var ganttData = this.parent.getRecordByID(id);
                 var zIndex = "";
-                if (ganttData && ganttData.ganttProperties.eOverlapIndex) {
+                if (ganttData && !isNullOrUndefined(ganttData.ganttProperties.eOverlapIndex)) {
                     zIndex = (ganttData.ganttProperties.eOverlapIndex).toString();
                 }
                 var cloneChildElement = cloneElement.cloneNode(true);