@syncfusion/ej2-gantt 20.4.53 → 21.1.35

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

package/src/gantt/renderer/timeline.js

@@ -170,7 +170,7 @@ var Timeline = /** @class */ (function () {
             else {
                 var value = property === 'topTier' ? 'bottomTier' : 'topTier';
                 var assignValue = 'bottomTier';
-                if (newTimeline[assignValue].unit != "None") {
+                if (newTimeline["" + assignValue].unit != "None") {
                     _this.customTimelineSettings[value] = __assign({}, newTimeline[assignValue]);
                 }
             }
@@ -473,7 +473,7 @@ var Timeline = /** @class */ (function () {
             else {
                 secondValue = sortedUnitLevels[i + 1];
             }
-            if (count >= firstValue[tier].count) {
+            if (count >= firstValue["" + tier].count) {
                 currentZoomCollection = sortedUnitLevels[i];
                 checkSameCountLevels = sortedUnitLevels.filter(function (tempLevel) {
                     if (tier === "bottomTier") {
@@ -491,7 +491,7 @@ var Timeline = /** @class */ (function () {
                 }
                 break;
             }
-            else if (count < firstValue[tier].count && count > secondValue[tier].count) {
+            else if (count < firstValue["" + tier].count && count > secondValue["" + tier].count) {
                 currentZoomCollection = sortedUnitLevels[i + 1];
                 checkSameCountLevels = sortedUnitLevels.filter(function (tempLevel) {
                     if (tier === "bottomTier") {

package/src/gantt/renderer/tooltip.js

@@ -1,7 +1,7 @@
 import { Tooltip as TooltipComponent } from '@syncfusion/ej2-popups';
 import { parentsUntil } from '../base/utils';
 import * as cls from '../base/css-constants';
-import { extend, isNullOrUndefined, getValue, EventHandler, closest } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, getValue, EventHandler, closest, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Deferred } from '@syncfusion/ej2-data';
 /**
  * File for handling tooltip in Gantt.
@@ -28,7 +28,7 @@ var Tooltip = /** @class */ (function () {
         this.toolTipObj.position = 'BottomCenter';
         this.toolTipObj.openDelay = 700;
         this.toolTipObj.enableRtl = this.parent.enableRtl;
-        this.toolTipObj.enableHtmlSanitizer = false;
+        this.toolTipObj.enableHtmlSanitizer = this.parent.enableHtmlSanitizer;
         this.toolTipObj.cssClass = cls.ganttTooltip;
         this.toolTipObj.animation = { open: { effect: 'None', delay: 0 }, close: { effect: 'None', delay: 0 } };
         this.toolTipObj.afterOpen = this.updateTooltipPosition.bind(this);
@@ -241,8 +241,12 @@ var Tooltip = /** @class */ (function () {
         var taskName;
         if (ganttData) {
             data = ganttData.ganttProperties;
-            taskName = !isNullOrUndefined(data.taskName) ? '<tr class = "e-gantt-tooltip-rowcell"><td colspan="3">' +
-                (this.parent.disableHtmlEncode ? data.taskName.replace(/</g, "&lt;").replace(/>/g, "&gt;") : data.taskName) + '</td></tr>' : '';
+            var taskNameValue = data.taskName;
+            if (this.parent.enableHtmlSanitizer && typeof (taskNameValue) === 'string') {
+                taskNameValue = SanitizeHtmlHelper.sanitize(taskNameValue);
+            }
+            taskName = !isNullOrUndefined(taskNameValue) ? '<tr class = "e-gantt-tooltip-rowcell"><td colspan="3">' +
+                (this.parent.disableHtmlEncode ? taskNameValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : taskNameValue) + '</td></tr>' : '';
         }
         switch (elementType) {
             case 'milestone':
@@ -254,9 +258,13 @@ var Tooltip = /** @class */ (function () {
                     else if (!isNullOrUndefined(data.startDate)) {
                         milestoneStartDate = data.startDate;
                     }
+                    var sDateValue = this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer && typeof (sDateValue) === 'string') {
+                        sDateValue = SanitizeHtmlHelper.sanitize(sDateValue);
+                    }
                     var sDate = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        sDateValue + '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + sDate + '</tbody></table>';
                     break;
@@ -264,20 +272,28 @@ var Tooltip = /** @class */ (function () {
             case 'taskbar':
                 {
                     var scheduledTask = !ganttData.hasChildRecords || data.isAutoSchedule ? true : false;
+                    var startDateValue = this.parent.getFormatedDate(scheduledTask ? data.startDate : data.autoStartDate, this.parent.getDateFormat());
+                    var endDateValue = this.parent.getFormatedDate(scheduledTask ? data.endDate : data.autoEndDate, this.parent.getDateFormat());
+                    var durationValue = this.parent.getDurationString((scheduledTask ? data.duration : data.autoDuration), data.durationUnit);
+                    var progressValue = data.progress;
+                    if (this.parent.enableHtmlSanitizer) {
+                        startDateValue = typeof (startDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(startDateValue) : startDateValue;
+                        endDateValue = typeof (endDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(endDateValue) : endDateValue;
+                        durationValue = typeof (durationValue) === 'string' ? SanitizeHtmlHelper.sanitize(durationValue) : durationValue;
+                        progressValue = typeof (progressValue) === 'string' ? SanitizeHtmlHelper.sanitize(progressValue) : progressValue;
+                    }
                     var startDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant(scheduledTask ? 'startDate' : 'subTasksStartDate') +
-                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(scheduledTask ? data.startDate : data.autoStartDate, this.parent.getDateFormat()) +
-                        '</td></tr>' : '';
+                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
                     var endDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant(scheduledTask ? 'endDate' : 'subTasksEndDate') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value">' + this.parent.getFormatedDate(scheduledTask ? data.endDate : data.autoEndDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
                     var duration = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
-                        '<td class = "e-gantt-tooltip-value"> ' + this.parent.getDurationString((scheduledTask ? data.duration : data.autoDuration), data.durationUnit) +
+                        '<td class = "e-gantt-tooltip-value"> ' + durationValue +
                         '</td></tr>' : '';
                     var progress = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + data.progress +
+                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + progressValue +
                         '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + startDate + endDate + duration + progress + '</tbody></table>';
@@ -285,82 +301,131 @@ var Tooltip = /** @class */ (function () {
                 }
             case 'baseline':
                 {
+                    var baselineStartDateValue = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
+                    var baselineEndDateValue = this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer) {
+                        baselineStartDateValue = typeof (baselineStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(baselineStartDateValue) : baselineStartDateValue;
+                        baselineEndDateValue = typeof (baselineEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(baselineEndDateValue) : baselineEndDateValue;
+                    }
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('baselineStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat()) + '</td></tr><tr>' +
+                        baselineStartDateValue + '</td></tr><tr>' +
                         '<td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('baselineEndDate') +
                         '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat()) + '</td></tr></tbody></table>';
+                        baselineEndDateValue + '</td></tr></tbody></table>';
                     break;
                 }
             case 'marker':
                 {
                     var markerTooltipElement = parent.tooltipModule.getMarkerTooltipData(args);
+                    var markerTooltipElementValue = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
                     var markerLabel = markerTooltipElement.label ? markerTooltipElement.label : '';
+                    if (this.parent.enableHtmlSanitizer) {
+                        markerLabel = typeof (markerLabel) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel) : markerLabel;
+                        markerTooltipElementValue = typeof (markerTooltipElementValue) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue) : markerTooltipElementValue;
+                    }
                     content = '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
-                        this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat()) +
-                        '</td></tr><tr><td>' +
-                        markerLabel + '</td></tr></tbody></table>';
+                        markerTooltipElementValue + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel) + '</td></tr></tbody></table>';
                     break;
                 }
             case 'connectorLine':
                 {
+                    var fromNameValue = parent.tooltipModule.predecessorTooltipData.fromName;
+                    var fromIdValue = parent.tooltipModule.predecessorTooltipData.fromId;
+                    var toNameValue = parent.tooltipModule.predecessorTooltipData.toName;
+                    var toIdValue = parent.tooltipModule.predecessorTooltipData.toId;
+                    var linkTextValue = parent.tooltipModule.predecessorTooltipData.linkText;
+                    var offsetStringValue = parent.tooltipModule.predecessorTooltipData.offsetString;
+                    if (this.parent.enableHtmlSanitizer) {
+                        fromNameValue = typeof (fromNameValue) === 'string' ? SanitizeHtmlHelper.sanitize(fromNameValue) : fromNameValue;
+                        fromIdValue = typeof (fromIdValue) === 'string' ? SanitizeHtmlHelper.sanitize(fromIdValue) : fromIdValue;
+                        toNameValue = typeof (toNameValue) === 'string' ? SanitizeHtmlHelper.sanitize(toNameValue) : toNameValue;
+                        toIdValue = typeof (toIdValue) === 'string' ? SanitizeHtmlHelper.sanitize(toIdValue) : toIdValue;
+                        linkTextValue = typeof (linkTextValue) === 'string' ? SanitizeHtmlHelper.sanitize(linkTextValue) : linkTextValue;
+                        offsetStringValue = typeof (offsetStringValue) === 'string' ? SanitizeHtmlHelper.sanitize(offsetStringValue) : offsetStringValue;
+                    }
                     content = '<table class = "e-gantt-tooltiptable"><tbody><tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('from') + '</td><td>:</td>' +
-                        '<td class = "e-gantt-tooltip-value">' + parent.tooltipModule.predecessorTooltipData.fromName + ' (' +
-                        parent.tooltipModule.predecessorTooltipData.fromId + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' +
+                        '<td class = "e-gantt-tooltip-value">' + (this.parent.disableHtmlEncode ? fromNameValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromNameValue) + ' (' +
+                        (this.parent.disableHtmlEncode ? (typeof (fromIdValue) === 'string' ? fromIdValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromIdValue) : fromIdValue) + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('to') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        parent.tooltipModule.predecessorTooltipData.toName +
-                        ' (' + parent.tooltipModule.predecessorTooltipData.toId + ')' +
-                        '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('taskLink') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value"> ' + parent.tooltipModule.predecessorTooltipData.linkText +
+                        (this.parent.disableHtmlEncode ? toNameValue.replace(/</g, "&lt;").replace(/>/g, "&gt;") : toNameValue) + ' (' + toIdValue + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('taskLink') +
+                        '</td><td>:</td><td class = "e-gantt-tooltip-value"> ' + linkTextValue +
                         '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('lag') +
                         '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
-                        parent.tooltipModule.predecessorTooltipData.offsetString + '</td></tr></tbody></table>';
+                        offsetStringValue + '</td></tr></tbody></table>';
                     break;
                 }
             case 'indicator':
                 if (args.target.title.length) {
-                    content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + args.target.title + '</tr></tbody></table>';
+                    var titleValue = args.target.title;
+                    if (this.parent.enableHtmlSanitizer && typeof (titleValue) === 'string') {
+                        titleValue = SanitizeHtmlHelper.sanitize(titleValue);
+                    }
+                    content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
                 }
                 break;
             case 'timeline':
-                content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + args.target.title + '</tr></tbody></table>';
+                var timlineTitleValue = args.target.title;
+                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue) === 'string') {
+                    timlineTitleValue = SanitizeHtmlHelper.sanitize(timlineTitleValue);
+                }
+                content = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
                 break;
             case 'manualtaskbar':
                 {
+                    var autoStartDateValue = this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat());
+                    var autoEndDateValue = this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat());
+                    var durationUnitValue = this.parent.getDurationString(data.duration, data.durationUnit);
+                    var manualStartDateValue = this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat());
+                    var manualEndDateValue = this.parent.getFormatedDate(data.endDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer) {
+                        autoStartDateValue = typeof (autoStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoStartDateValue) : autoStartDateValue;
+                        autoEndDateValue = typeof (autoEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoEndDateValue) : autoEndDateValue;
+                        durationUnitValue = typeof (durationUnitValue) === 'string' ? SanitizeHtmlHelper.sanitize(durationUnitValue) : durationUnitValue;
+                        manualStartDateValue = typeof (manualStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(manualStartDateValue) : manualStartDateValue;
+                        manualEndDateValue = typeof (manualEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(manualEndDateValue) : manualEndDateValue;
+                    }
                     var autoStartDate = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoStartDateValue + '</td></tr>' : '';
                     var autoEndDate = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoEndDateValue + '</td></tr>' : '';
                     var durationValue = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
-                        '<td class = "e-gantt-tooltip-value"> ' + this.parent.getDurationString(data.duration, data.durationUnit) +
+                        '<td class = "e-gantt-tooltip-value"> ' + durationUnitValue +
                         '</td></tr>' : '';
                     var manualStartDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('startDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        manualStartDateValue + '</td></tr>' : '';
                     var manualEndDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('endDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.endDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        manualEndDateValue + '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
                     break;
                 }
             case 'manualmilestone':
                 {
+                    var autoStartValue = this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat());
+                    var autoEndValue = this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat());
+                    var dateValue = this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer) {
+                        autoStartValue = typeof (autoStartValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoStartValue) : autoStartValue;
+                        autoEndValue = typeof (autoEndValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoEndValue) : autoEndValue;
+                        dateValue = typeof (dateValue) === 'string' ? SanitizeHtmlHelper.sanitize(dateValue) : dateValue;
+                    }
                     var autoStart = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
-                        this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoStartValue + '</td></tr>' : '';
                     var autoEnd = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        autoEndValue + '</td></tr>' : '';
                     var date = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat()) + '</tr>';
+                        dateValue + '</tr>';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + date + autoStart + autoEnd + '</tbody></table>';
                     break;
@@ -389,6 +454,9 @@ var Tooltip = /** @class */ (function () {
      */
     Tooltip.prototype.getPredecessorTooltipData = function (args) {
         var predeceesorParent = args.target.parentElement.id;
+        if (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
+            predeceesorParent = SanitizeHtmlHelper.sanitize(predeceesorParent);
+        }
         var taskIds = predeceesorParent.match(/ConnectorLineparent(.*)child(.*)/);
         taskIds.shift();
         var fromTask;