@syncfusion/ej2-gantt 20.4.54 → 21.1.35

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);

package/src/gantt/renderer/connector-line.js

@@ -303,9 +303,16 @@ var ConnectorLine = /** @class */ (function () {
      * @private
      */
     ConnectorLine.prototype.getHeightValue = function (data) {
-        return (data.parentIndex * data.rowHeight) > (data.childIndex * data.rowHeight) ?
-            ((data.parentIndex * data.rowHeight) - (data.childIndex * data.rowHeight)) :
-            ((data.childIndex * data.rowHeight) - (data.parentIndex * data.rowHeight));
+        if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation && !this.parent.allowTaskbarOverlap) {
+            return (data.parentIndex * this.parent.rowHeight) > (data.childIndex * this.parent.rowHeight) ?
+                ((data.parentIndex * this.parent.rowHeight) - (data.childIndex * this.parent.rowHeight)) :
+                ((data.childIndex * this.parent.rowHeight) - (data.parentIndex * this.parent.rowHeight));
+        }
+        else {
+            return (data.parentIndex * data.rowHeight) > (data.childIndex * data.rowHeight) ?
+                ((data.parentIndex * data.rowHeight) - (data.childIndex * data.rowHeight)) :
+                ((data.childIndex * data.rowHeight) - (data.parentIndex * data.rowHeight));
+        }
     };
     /**
      * To get sstype2 inner element width.
@@ -382,7 +389,30 @@ var ConnectorLine = /** @class */ (function () {
         var heightValue = isVirtual ? connectorLine.height : (height + isMilestoneValue);
         var borderTopWidth = 0;
         var addTop = 0;
-        if (this.parent.currentViewData[data.parentIndex] && this.parent.currentViewData[data.childIndex]) {
+        var parentOverlapTopValue = 0;
+        var childOverlapTopValue = 0;
+        var count = 0;
+        if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation && !this.parent.allowTaskbarOverlap) {
+            for (var i = 0; i < this.parent.currentViewData.length; i++) {
+                if (this.parent.getRowByIndex(i).style.display != 'none') {
+                    if (count < data.parentIndex) {
+                        count++;
+                        parentOverlapTopValue = parentOverlapTopValue + this.parent.getRowByIndex(i).offsetHeight;
+                    }
+                }
+            }
+            count = 0;
+            for (var j = 0; j < this.parent.currentViewData.length; j++) {
+                if (this.parent.getRowByIndex(j).style.display != 'none') {
+                    if (count < data.childIndex) {
+                        count++;
+                        childOverlapTopValue = childOverlapTopValue + this.parent.getRowByIndex(j).offsetHeight;
+                    }
+                }
+            }
+            heightValue = Math.abs(parentOverlapTopValue - childOverlapTopValue);
+        }
+        if (this.parent.currentViewData[data.parentIndex] && this.parent.currentViewData[data.childIndex] && this.parent.allowParentDependency) {
             var fromRecordIsParent = this.parent.currentViewData[data.parentIndex].hasChildRecords;
             var toRecordIsParent = this.parent.currentViewData[data.childIndex].hasChildRecords;
             var fromRecordIsManual = this.parent.currentViewData[data.parentIndex].ganttProperties.isAutoSchedule;
@@ -475,7 +505,7 @@ var ConnectorLine = /** @class */ (function () {
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType1">';
                 div = div + eLine;
                 div = div + direction + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
@@ -495,7 +525,7 @@ var ConnectorLine = /** @class */ (function () {
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType2') {
-                div = div + direction + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine.top : ((data.parentIndex * data.rowHeight) + addTop +
+                div = div + direction + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine.top : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop +
                     this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType2">';
                 div = div + eLine;
@@ -527,7 +557,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType3') {
                 div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType3">';
                 div = div + rightArrow;
                 div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
@@ -557,7 +587,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType4') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType4">';
                 div = div + rightArrow;
                 div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
@@ -583,7 +613,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType4') {
                 div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType4">';
                 div = div + rightArrow;
                 div = div + direction + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
@@ -596,7 +626,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType3') {
                 div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType3">';
                 div = div + rightArrow;
                 div = div + direction + '10px;' + duplicateStingTwo;
@@ -609,7 +639,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType2') {
                 div = div + direction + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType2">';
                 div = div + eLine;
                 div = div + 'width:' + (setInnerChildWidthSSType2 + 1) + 'px;' +
@@ -629,7 +659,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType1') {
                 div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop +
                         this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
                 div = div + eLine;
@@ -647,7 +677,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType1') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType1">';
                 div = div + eLine;
                 div = div + direction + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
@@ -671,7 +701,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType2') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType2">';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'width:' +
@@ -697,7 +727,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType3') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -720,7 +750,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType4') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType4">';
                 div = div + leftArrow;
                 div = div + (direction + ((data.childLeft + data.childWidth) -
@@ -749,7 +779,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType4') {
                 div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
                     'height:' + heightValue + 'px;position:absolute" data-connectortype="SFType4">';
                 div = div + duplicateStingFour + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
@@ -777,7 +807,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType3') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? childOverlapTopValue : (data.childIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -795,7 +825,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType1') {
                 div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType1">';
                 div = div + eLine;
                 div = div + 'width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -820,7 +850,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType2') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType2">';
                 div = div + eLine;
                 div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +

package/src/gantt/renderer/edit-tooltip.js

@@ -73,15 +73,12 @@ var EditTooltip = /** @class */ (function () {
             this.parent.tooltipModule.toolTipObj.close();
             this.updateTooltip(segmentIndex);
             if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointLeftDrag') {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + cls.connectorPointLeft));
             }
             else if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointRightDrag') {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + cls.connectorPointRight));
             }
             else {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.taskBarEditElement);
             }
         }

package/src/gantt/renderer/event-marker.js

@@ -1,4 +1,4 @@
-import { createElement, formatUnit, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, formatUnit, remove, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constants';
 var EventMarker = /** @class */ (function () {
     function EventMarker(gantt) {
@@ -65,6 +65,9 @@ var EventMarker = /** @class */ (function () {
                 });
                 var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
                 spanElement[property] = this.parent.eventMarkers[i].label;
+                if (this.parent.enableHtmlSanitizer && typeof (spanElement[property]) === 'string') {
+                    spanElement[property] = SanitizeHtmlHelper.sanitize(spanElement[property]);
+                }
                 if (this.parent.enableRtl) {
                     spanElement.style.right = '5px';
                 }

package/src/gantt/renderer/nonworking-day.js

@@ -1,4 +1,4 @@
-import { createElement, formatUnit, remove } from '@syncfusion/ej2-base';
+import { createElement, formatUnit, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constants';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 var NonWorkingDay = /** @class */ (function () {
@@ -91,6 +91,9 @@ var NonWorkingDay = /** @class */ (function () {
             });
             var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
             spanElement[property] = this.parent.holidays[i].label ? this.parent.holidays[i].label : '';
+            if (this.parent.enableHtmlSanitizer && typeof (spanElement[property]) === 'string') {
+                spanElement[property] = SanitizeHtmlHelper.sanitize(spanElement[property]);
+            }
             holidayDiv.appendChild(spanElement);
             if (this.parent.holidays[i].cssClass) {
                 holidayDiv.classList.add(this.parent.holidays[i].cssClass);