@syncfusion/ej2-gantt 20.4.53 → 21.1.35

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

@@ -1,6 +1,6 @@
-import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, append, classList, closest, compile, createElement, deleteObject, extend, formatUnit, getValue, isNullOrUndefined, isObject, isObjectArray, isUndefined, merge, remove, removeClass, setValue } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, classList, closest, compile, createElement, deleteObject, extend, formatUnit, getValue, isNullOrUndefined, isObject, isObjectArray, isUndefined, merge, remove, removeClass, setValue } from '@syncfusion/ej2-base';
 import { Dialog, Tooltip, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
-import { Edit, ForeignKey, Grid, Page, Predicate, Toolbar, ValueFormatter, click, filterAfterOpen, getActualProperties, getCustomDateFormat, getForeignData, getObject, getUid, parentsUntil, setCssInGridPopUp } from '@syncfusion/ej2-grids';
+import { Edit, ForeignKey, Grid, Page, Predicate, Toolbar, ValueFormatter, click, filterAfterOpen, getActualProperties, getCustomDateFormat, getFilterMenuPostion, getForeignData, getObject, getUid, parentsUntil, setCssInGridPopUp } from '@syncfusion/ej2-grids';
 import { CacheAdaptor, DataManager, DataUtil, Deferred, ODataAdaptor, ODataV4Adaptor, Query, RemoteSaveAdaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor } from '@syncfusion/ej2-data';
 import { ColumnMenu, ContextMenu, Edit as Edit$1, ExcelExport, Filter, Reorder, Resize, RowDD, Selection, Sort, TreeGrid, VirtualScroll } from '@syncfusion/ej2-treegrid';
 import { Splitter } from '@syncfusion/ej2-layouts';
@@ -149,7 +149,7 @@ function updateDates(record, parent) {
 function formatString(str, args) {
     let regx;
     for (let 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());
     }
@@ -259,32 +259,37 @@ class DateProcessor {
             }
         }
         let tStartDate;
-        do {
-            tStartDate = new Date(cloneStartDate.getTime());
-            const holidayLength = this.parent.totalHolidayDates.length;
-            // check holidays and weekends
-            if (this.isValidateNonWorkDays(ganttProp)) {
-                const startTime = (!validateAsMilestone || isLoad) ? this.parent.defaultStartTime : this.parent.defaultEndTime;
-                if (!this.parent.includeWeekend) {
-                    const tempDate = new Date(cloneStartDate.getTime());
-                    cloneStartDate = this.getNextWorkingDay(cloneStartDate);
-                    if (tempDate.getTime() !== cloneStartDate.getTime()) {
-                        this.setTime(startTime, cloneStartDate);
+        if (this.parent.autoCalculateDateScheduling) {
+            do {
+                tStartDate = new Date(cloneStartDate.getTime());
+                const holidayLength = this.parent.totalHolidayDates.length;
+                // check holidays and weekends
+                if (this.isValidateNonWorkDays(ganttProp)) {
+                    const startTime = (!validateAsMilestone || isLoad) ? this.parent.defaultStartTime : this.parent.defaultEndTime;
+                    if (!this.parent.includeWeekend) {
+                        const tempDate = new Date(cloneStartDate.getTime());
+                        cloneStartDate = this.getNextWorkingDay(cloneStartDate);
+                        if (tempDate.getTime() !== cloneStartDate.getTime()) {
+                            this.setTime(startTime, cloneStartDate);
+                        }
                     }
-                }
-                for (let count = 0; count < holidayLength; count++) {
-                    const holidayFrom = this.getDateFromFormat(new Date(this.parent.totalHolidayDates[count]));
-                    const holidayTo = new Date(holidayFrom.getTime());
-                    holidayFrom.setHours(0, 0, 0, 0);
-                    holidayTo.setHours(23, 59, 59, 59);
-                    if (cloneStartDate.getTime() >= holidayFrom.getTime() && cloneStartDate.getTime() < holidayTo.getTime()) {
-                        cloneStartDate.setDate(cloneStartDate.getDate() + 1);
-                        this.setTime(startTime, cloneStartDate);
+                    for (let count = 0; count < holidayLength; count++) {
+                        const holidayFrom = this.getDateFromFormat(new Date(this.parent.totalHolidayDates[count]));
+                        const holidayTo = new Date(holidayFrom.getTime());
+                        holidayFrom.setHours(0, 0, 0, 0);
+                        holidayTo.setHours(23, 59, 59, 59);
+                        if (cloneStartDate.getTime() >= holidayFrom.getTime() && cloneStartDate.getTime() < holidayTo.getTime()) {
+                            cloneStartDate.setDate(cloneStartDate.getDate() + 1);
+                            this.setTime(startTime, cloneStartDate);
+                        }
                     }
                 }
-            }
-        } while (tStartDate.getTime() !== cloneStartDate.getTime());
-        return new Date(cloneStartDate.getTime());
+            } while (tStartDate.getTime() !== cloneStartDate.getTime());
+            return new Date(cloneStartDate.getTime());
+        }
+        else {
+            return new Date(cloneStartDate.getTime());
+        }
     }
     /**
      * To update given date value to valid end date
@@ -319,36 +324,44 @@ class DateProcessor {
             }
         }
         let tempCheckDate;
-        do {
-            tempCheckDate = new Date(cloneEndDate.getTime());
-            const holidayLength = this.parent.totalHolidayDates.length;
-            if (this.isValidateNonWorkDays(ganttProp)) {
-                if (!this.parent.includeWeekend) {
-                    const tempDate = new Date(cloneEndDate.getTime());
-                    cloneEndDate = this.getPreviousWorkingDay(cloneEndDate);
-                    if (tempDate.getTime() !== cloneEndDate.getTime()) {
-                        this.setTime(this.parent.defaultEndTime, cloneEndDate);
-                    }
-                }
-                for (let count = 0; count < holidayLength; count++) {
-                    const holidayFrom = this.getDateFromFormat(new Date(this.parent.totalHolidayDates[count]));
-                    const holidayTo = new Date(holidayFrom.getTime());
-                    const tempHoliday = new Date(cloneEndDate.getTime());
-                    tempHoliday.setMinutes(cloneEndDate.getMilliseconds() - 2);
-                    holidayFrom.setHours(0, 0, 0, 0);
-                    holidayTo.setHours(23, 59, 59, 59);
-                    if (cloneEndDate.getTime() >= holidayFrom.getTime() && cloneEndDate.getTime() < holidayTo.getTime() ||
-                        tempHoliday.getTime() >= holidayFrom.getTime() && tempHoliday.getTime() < holidayTo.getTime()) {
-                        cloneEndDate.setDate(cloneEndDate.getDate() - 1);
-                        if (!(cloneEndDate.getTime() === holidayFrom.getTime() && this.parent.defaultEndTime === 86400 &&
-                            this.getSecondsInDecimal(cloneEndDate) === 0)) {
+        if (this.parent.autoCalculateDateScheduling) {
+            do {
+                tempCheckDate = new Date(cloneEndDate.getTime());
+                const holidayLength = this.parent.totalHolidayDates.length;
+                if (this.isValidateNonWorkDays(ganttProp)) {
+                    if (!this.parent.includeWeekend) {
+                        const tempDate = new Date(cloneEndDate.getTime());
+                        cloneEndDate = this.getPreviousWorkingDay(cloneEndDate);
+                        if (tempDate.getTime() !== cloneEndDate.getTime()) {
                             this.setTime(this.parent.defaultEndTime, cloneEndDate);
                         }
                     }
+                    for (let count = 0; count < holidayLength; count++) {
+                        const holidayFrom = this.getDateFromFormat(new Date(this.parent.totalHolidayDates[count]));
+                        const holidayTo = new Date(holidayFrom.getTime());
+                        const tempHoliday = new Date(cloneEndDate.getTime());
+                        tempHoliday.setMinutes(cloneEndDate.getMilliseconds() - 2);
+                        holidayFrom.setHours(0, 0, 0, 0);
+                        holidayTo.setHours(23, 59, 59, 59);
+                        if (cloneEndDate.getTime() >= holidayFrom.getTime() && cloneEndDate.getTime() < holidayTo.getTime() ||
+                            tempHoliday.getTime() >= holidayFrom.getTime() && tempHoliday.getTime() < holidayTo.getTime()) {
+                            cloneEndDate.setDate(cloneEndDate.getDate() - 1);
+                            if (!(cloneEndDate.getTime() === holidayFrom.getTime() && this.parent.defaultEndTime === 86400 &&
+                                this.getSecondsInDecimal(cloneEndDate) === 0)) {
+                                this.setTime(this.parent.defaultEndTime, cloneEndDate);
+                            }
+                        }
+                    }
                 }
+            } while (tempCheckDate.getTime() !== cloneEndDate.getTime());
+            return new Date(cloneEndDate.getTime());
+        }
+        else {
+            if (!isNullOrUndefined(cloneEndDate)) {
+                this.setTime(this.parent.defaultEndTime, cloneEndDate);
             }
-        } while (tempCheckDate.getTime() !== cloneEndDate.getTime());
-        return new Date(cloneEndDate.getTime());
+            return new Date(cloneEndDate.getTime());
+        }
     }
     /**
      * To validate the baseline start date
@@ -463,6 +476,13 @@ class DateProcessor {
             }
             this.parent.setRecordValue('endDate', tempEndDate, ganttProp, true);
         }
+        else {
+            tempEndDate = ganttData[this.parent.taskFields.endDate];
+            if (!isNullOrUndefined(tempEndDate)) {
+                this.setTime(this.parent.defaultEndTime, tempEndDate);
+            }
+            this.parent.setRecordValue('endDate', tempEndDate, ganttProp, true);
+        }
         if (this.parent.taskFields.endDate) {
             this.parent.dataOperation.updateMappingData(ganttData, 'endDate');
         }
@@ -529,9 +549,9 @@ class DateProcessor {
      */
     getNonworkingTime(sDate, eDate, isAutoSchedule, isCheckTimeZone) {
         isCheckTimeZone = isNullOrUndefined(isCheckTimeZone) ? true : isCheckTimeZone;
-        const weekendCount = !this.parent.includeWeekend && isAutoSchedule ? this.getWeekendCount(sDate, eDate) : 0;
+        const weekendCount = (!this.parent.includeWeekend && this.parent.autoCalculateDateScheduling) && isAutoSchedule ? this.getWeekendCount(sDate, eDate) : 0;
         const totalHours = this.getNumberOfSeconds(sDate, eDate, isCheckTimeZone);
-        const holidaysCount = isAutoSchedule ? this.getHolidaysCount(sDate, eDate) : 0;
+        const holidaysCount = isAutoSchedule && this.parent.autoCalculateDateScheduling ? this.getHolidaysCount(sDate, eDate) : 0;
         const totWorkDays = (totalHours - (weekendCount * 86400) - (holidaysCount * 86400)) / 86400; // working days between two dates
         const nonWorkHours = this.getNonWorkingSecondsOnDate(sDate, eDate, isAutoSchedule);
         const totalNonWorkTime = (totWorkDays * (86400 - this.parent.secondsPerDay)) +
@@ -722,6 +742,9 @@ class DateProcessor {
                                     if (!isNullOrUndefined(data.ganttProperties.startDate))
                                         sDate = data.ganttProperties.startDate;
                                 }
+                                else {
+                                    sDate = this.getProjectStartDate(ganttProp);
+                                }
                             });
                         }
                         else {
@@ -1000,6 +1023,9 @@ class DateProcessor {
     /*Check given date is on holidays*/
     isOnHolidayOrWeekEnd(date, checkWeekEnd) {
         checkWeekEnd = !isNullOrUndefined(checkWeekEnd) ? checkWeekEnd : this.parent.includeWeekend;
+        if (!this.parent.autoCalculateDateScheduling) {
+            checkWeekEnd = true;
+        }
         if (!checkWeekEnd && this.parent.nonWorkingDayIndex.indexOf(date.getDay()) !== -1) {
             return true;
         }
@@ -1029,8 +1055,8 @@ class DateProcessor {
         let startRangeIndex = -1;
         let endRangeIndex = -1;
         let totNonWrkSecs = 0;
-        const startOnHoliday = isAutoSchedule ? this.isOnHolidayOrWeekEnd(startDate, null) : false;
-        const endOnHoliday = isAutoSchedule ? this.isOnHolidayOrWeekEnd(endDate, null) : false;
+        const startOnHoliday = isAutoSchedule && this.parent.autoCalculateDateScheduling ? this.isOnHolidayOrWeekEnd(startDate, null) : false;
+        const endOnHoliday = isAutoSchedule && this.parent.autoCalculateDateScheduling ? this.isOnHolidayOrWeekEnd(endDate, null) : false;
         for (let i = 0; i < this.parent.nonWorkingTimeRanges.length; i++) {
             const val = this.parent.nonWorkingTimeRanges[i];
             if (sHour >= val.from && sHour <= val.to) {
@@ -1690,7 +1716,7 @@ class TaskProcessor extends DateProcessor {
     constructResourceViewDataSource(resources, data, unassignedTasks) {
         for (let i = 0; i < data.length; i++) {
             const tempData = data[i];
-            var child = this.parent.taskFields.child != null ? this.parent.taskFields.child : 'Children';
+            const child = this.parent.taskFields.child != null ? this.parent.taskFields.child : 'Children';
             const resourceData = tempData && tempData[this.parent.taskFields.resourceInfo];
             const resourceIdMapping = this.parent.resourceFields.id;
             if ((!tempData[child] || tempData[child].length === 0) && resourceData && resourceData.length) {
@@ -1767,7 +1793,7 @@ class TaskProcessor extends DateProcessor {
                 }
             }
             const ganttData = this.createRecord(tempData, level, parentItem, true);
-            if (!this.parent.enableValidation) {
+            if (!this.parent.enableValidation || !this.parent.autoCalculateDateScheduling) {
                 this.updateTaskLeftWidth(ganttData);
             }
             ganttData.index = this.recordIndex++;
@@ -1801,6 +1827,9 @@ class TaskProcessor extends DateProcessor {
                     this.parent.setRecordValue('autoDuration', this.calculateAutoDuration(parentProp), parentProp, true);
                     this.updateAutoWidthLeft(parentData);
                 }
+                if (!this.parent.allowParentDependency) {
+                    this.resetDependency(parentData);
+                }
                 this.updateWidthLeft(parentData);
                 this.updateTaskData(parentData);
             }
@@ -1913,6 +1942,9 @@ class TaskProcessor extends DateProcessor {
         if (!isNullOrUndefined(data[taskSettings.child]) && data[taskSettings.child].length > 0) {
             this.parent.setRecordValue('hasChildRecords', true, ganttData);
             this.parent.setRecordValue('isMilestone', false, ganttProperties, true);
+            if (!this.parent.allowParentDependency) {
+                this.resetDependency(ganttData);
+            }
         }
         else {
             this.parent.setRecordValue('hasChildRecords', false, ganttData);
@@ -2311,6 +2343,16 @@ class TaskProcessor extends DateProcessor {
                 }
             }
         }
+        if (!this.parent.autoCalculateDateScheduling) {
+            if (!isNullOrUndefined(ganttData.ganttProperties.startDate)) {
+                ganttData[this.parent.taskFields.startDate] = ganttData.ganttProperties.startDate;
+                ganttData.taskData[this.parent.taskFields.startDate] = ganttData.ganttProperties.startDate;
+            }
+            if (!isNullOrUndefined(ganttData.ganttProperties.endDate)) {
+                ganttData[this.parent.taskFields.endDate] = ganttData.ganttProperties.endDate;
+                ganttData.taskData[this.parent.taskFields.endDate] = ganttData.ganttProperties.endDate;
+            }
+        }
         if (!isNullOrUndefined(segments)) {
             this.parent.setRecordValue('segments', this.setSegmentsInfo(ganttData, true), ganttProperties, true);
         }
@@ -3297,7 +3339,7 @@ class TaskProcessor extends DateProcessor {
                 const rangeObj = {};
                 if (this._isInStartDateRange(cStartDate, tStartDate, tEndDate) || this._isInEndDateRange(cEndDate, tStartDate, tEndDate)) {
                     if ((tStartDate.getTime() > cStartDate.getTime() && tStartDate.getTime() < cEndDate.getTime()
-                        && tEndDate.getTime() > cStartDate.getTime() && tEndDate.getTime() > cEndDate.getTime())
+                        && tEndDate.getTime() > cStartDate.getTime() && tEndDate.getTime() >= cEndDate.getTime())
                         || (cStartDate.getTime() === tStartDate.getTime() && cEndDate.getTime() <= tEndDate.getTime())) {
                         rangeObj.from = tStartDate;
                         rangeObj.to = cEndDate;
@@ -3578,7 +3620,7 @@ class TaskProcessor extends DateProcessor {
      */
     updateTaskLeftWidth(data) {
         const task = data.ganttProperties;
-        if (!data.hasChildRecords) {
+        if (!data.hasChildRecords || !this.parent.autoCalculateDateScheduling) {
             this.updateWidthLeft(data);
         }
         this.parent.setRecordValue('baselineLeft', this.calculateBaselineLeft(task), task, true);
@@ -3590,7 +3632,12 @@ class TaskProcessor extends DateProcessor {
             childData = parentItem.childRecords;
         }
         if (parentItem && childData.indexOf(data) === childData.length - 1 && !data.hasChildRecords && this.parent.enableValidation) {
-            this.updateParentItems(parentItem);
+            if (this.parent.autoCalculateDateScheduling || this.parent.viewType === "ResourceView") {
+                this.updateParentItems(parentItem);
+            }
+            if (!this.parent.autoCalculateDateScheduling) {
+                this.updateWidthLeft(parentItem);
+            }
         }
         else if (parentItem && !this.parent.enableValidation) {
             this.updateWidthLeft(parentItem);
@@ -3705,7 +3752,7 @@ class TaskProcessor extends DateProcessor {
         }
         if (childGanttRecord.hasChildRecords) {
             setValue('totalProgress', childGanttRecord.ganttProperties.totalProgress, progressValues);
-            setValue('totalDuration', childGanttRecord.ganttProperties.totalDuration, progressValues);
+            setValue('totalDuration', childGanttRecord.ganttProperties.totalDuration ? childGanttRecord.ganttProperties.totalDuration : 0, progressValues);
         }
         else {
             setValue('totalProgress', childGanttRecord.ganttProperties.progress * durationInDay, progressValues);
@@ -3733,107 +3780,119 @@ class TaskProcessor extends DateProcessor {
         const parentData = isParent ? cloneParent : this.parent.getParentTask(cloneParent);
         let deleteUpdate = false;
         const ganttProp = parentData.ganttProperties;
-        if (parentData.childRecords.length > 0) {
-            const previousStartDate = ganttProp.isAutoSchedule ? ganttProp.startDate : ganttProp.autoStartDate;
-            const previousEndDate = ganttProp.isAutoSchedule ? ganttProp.endDate :
-                ganttProp.autoEndDate;
-            const childRecords = parentData.childRecords;
-            const childLength = childRecords.length;
-            let totalDuration = 0;
-            let progressValues = {};
-            let minStartDate = null;
-            let maxEndDate = null;
-            let milestoneCount = 0;
-            let totalProgress = 0;
-            let childCompletedWorks = 0;
-            let childData;
-            for (let count = 0; count < childLength; count++) {
-                childData = childRecords[count];
-                if (this.parent.isOnDelete && childData.isDelete) {
-                    if (childLength === 1 && this.parent.viewType === 'ProjectView') {
-                        deleteUpdate = true;
+        if (this.parent.autoCalculateDateScheduling || this.parent.viewType === "ResourceView") {
+            if (parentData.childRecords.length > 0) {
+                const previousStartDate = ganttProp.isAutoSchedule ? ganttProp.startDate : ganttProp.autoStartDate;
+                const previousEndDate = ganttProp.isAutoSchedule ? ganttProp.endDate :
+                    ganttProp.autoEndDate;
+                const childRecords = parentData.childRecords;
+                const childLength = childRecords.length;
+                let totalDuration = 0;
+                let progressValues = {};
+                let minStartDate = null;
+                let maxEndDate = null;
+                let milestoneCount = 0;
+                let totalProgress = 0;
+                let childCompletedWorks = 0;
+                let childData;
+                for (let count = 0; count < childLength; count++) {
+                    childData = childRecords[count];
+                    if (this.parent.isOnDelete && childData.isDelete) {
+                        if (childLength === 1 && this.parent.viewType === 'ProjectView') {
+                            deleteUpdate = true;
+                        }
+                        continue;
                     }
-                    continue;
-                }
-                let startDate = this.getValidStartDate(childData.ganttProperties);
-                if (parentData.hasChildRecords && !ganttProp.isAutoSchedule && !isNullOrUndefined(childData.ganttProperties.autoStartDate)) {
-                    startDate = childData.ganttProperties.autoStartDate;
-                }
-                let endDate = this.getValidEndDate(childData.ganttProperties);
-                if (parentData.hasChildRecords && !ganttProp.isAutoSchedule && !isNullOrUndefined(childData.ganttProperties.autoEndDate)) {
-                    endDate = childData.ganttProperties.autoEndDate;
-                }
-                if (isNullOrUndefined(minStartDate)) {
-                    minStartDate = this.getDateFromFormat(startDate);
-                }
-                if (isNullOrUndefined(maxEndDate)) {
-                    maxEndDate = this.getDateFromFormat(endDate);
-                }
-                if (!isNullOrUndefined(endDate) && this.compareDates(endDate, maxEndDate) === 1) {
-                    maxEndDate = this.getDateFromFormat(endDate);
-                }
-                if (!isNullOrUndefined(startDate) && this.compareDates(startDate, minStartDate) === -1) {
-                    minStartDate = this.getDateFromFormat(startDate);
-                }
-                if (!childData.ganttProperties.isMilestone && isScheduledTask(childData.ganttProperties)) {
-                    progressValues = this.getParentProgress(childData);
-                    totalProgress += getValue('totalProgress', progressValues);
-                    if (childData[this.parent.taskFields.duration] < 1) {
-                        if (typeof (getValue('totalDuration', progressValues)) != 'object') {
+                    let startDate = this.getValidStartDate(childData.ganttProperties);
+                    if (parentData.hasChildRecords && !ganttProp.isAutoSchedule && !isNullOrUndefined(childData.ganttProperties.autoStartDate)) {
+                        startDate = childData.ganttProperties.autoStartDate;
+                    }
+                    let endDate = this.getValidEndDate(childData.ganttProperties);
+                    if (parentData.hasChildRecords && !ganttProp.isAutoSchedule && !isNullOrUndefined(childData.ganttProperties.autoEndDate)) {
+                        endDate = childData.ganttProperties.autoEndDate;
+                    }
+                    if (isNullOrUndefined(minStartDate)) {
+                        minStartDate = this.getDateFromFormat(startDate);
+                    }
+                    if (isNullOrUndefined(maxEndDate)) {
+                        maxEndDate = this.getDateFromFormat(endDate);
+                    }
+                    if (!isNullOrUndefined(endDate) && this.compareDates(endDate, maxEndDate) === 1) {
+                        maxEndDate = this.getDateFromFormat(endDate);
+                    }
+                    if (!isNullOrUndefined(startDate) && this.compareDates(startDate, minStartDate) === -1) {
+                        minStartDate = this.getDateFromFormat(startDate);
+                    }
+                    if (!childData.ganttProperties.isMilestone && isScheduledTask(childData.ganttProperties)) {
+                        progressValues = this.getParentProgress(childData);
+                        totalProgress += getValue('totalProgress', progressValues);
+                        if (childData[this.parent.taskFields.duration] < 1) {
                             totalDuration += getValue('totalDuration', progressValues);
                             totalDuration = Number(totalDuration.toFixed(4));
                         }
+                        else {
+                            totalDuration += getValue('totalDuration', progressValues);
+                        }
                     }
                     else {
-                        totalDuration += getValue('totalDuration', progressValues);
+                        milestoneCount++;
                     }
+                    childCompletedWorks += childData.ganttProperties.work;
                 }
-                else {
-                    milestoneCount++;
-                }
-                childCompletedWorks += childData.ganttProperties.work;
-            }
-            if (!deleteUpdate) {
-                if (this.compareDates(previousStartDate, minStartDate) !== 0) {
-                    this.parent.setRecordValue(ganttProp.isAutoSchedule ? 'startDate' : 'autoStartDate', minStartDate, parentData.ganttProperties, true);
-                }
-                if (this.compareDates(previousEndDate, maxEndDate) !== 0) {
-                    this.parent.setRecordValue(ganttProp.isAutoSchedule ? 'endDate' : 'autoEndDate', maxEndDate, parentData.ganttProperties, true);
-                }
-                let taskCount;
-                if (this.parent.isOnDelete && childData.isDelete) {
-                    taskCount = childLength - milestoneCount - 1;
-                }
-                else {
-                    taskCount = childLength - milestoneCount;
-                }
-                const parentProgress = (taskCount > 0 && totalDuration > 0) ? (totalProgress / totalDuration) : 0;
-                const parentProp = parentData.ganttProperties;
-                const milestone = (taskCount === 0) && minStartDate && maxEndDate &&
-                    minStartDate.getTime() === maxEndDate.getTime() ? true : false;
-                this.parent.setRecordValue('isMilestone', milestone, parentProp, true);
-                if (parentProp.isAutoSchedule) {
-                    this.calculateDuration(parentData);
-                }
-                this.updateWorkWithDuration(parentData);
-                let parentWork = parentProp.work;
-                parentWork = this.parent.isOnEdit ? parentWork : (parentWork + childCompletedWorks);
-                this.parent.setRecordValue('work', parentWork, parentProp, true);
-                this.parent.setRecordValue('taskType', 'FixedDuration', parentProp, true);
-                if (!isNullOrUndefined(this.parent.taskFields.type)) {
-                    this.updateMappingData(parentData, 'type');
-                }
-                this.parent.setRecordValue('progress', Math.floor(parentProgress), parentProp, true);
-                this.parent.setRecordValue('totalProgress', totalProgress, parentProp, true);
-                this.parent.setRecordValue('totalDuration', totalDuration, parentProp, true);
-                if (!parentProp.isAutoSchedule) {
-                    this.parent.setRecordValue('autoDuration', this.calculateAutoDuration(parentProp), parentProp, true);
-                    this.updateAutoWidthLeft(parentData);
+                if (!deleteUpdate) {
+                    let taskCount;
+                    if (this.parent.isOnDelete && childData.isDelete) {
+                        taskCount = childLength - milestoneCount - 1;
+                    }
+                    else {
+                        taskCount = childLength - milestoneCount;
+                    }
+                    const parentProgress = (taskCount > 0 && totalDuration > 0) ? (totalProgress / totalDuration) : 0;
+                    const parentProp = parentData.ganttProperties;
+                    const milestone = (taskCount === 0) && minStartDate && maxEndDate &&
+                        minStartDate.getTime() === maxEndDate.getTime() ? true : false;
+                    if (this.compareDates(previousStartDate, minStartDate) !== 0) {
+                        this.parent.setRecordValue(ganttProp.isAutoSchedule ? 'startDate' : 'autoStartDate', minStartDate, parentData.ganttProperties, true);
+                        if ((((!isNullOrUndefined(ganttProp.autoDuration)) ? ganttProp.autoDuration === 0 : ganttProp.duration === 0)) && parentData['isManual'] && milestone) {
+                            this.parent.setRecordValue('startDate', minStartDate, parentData.ganttProperties, true);
+                        }
+                    }
+                    if (this.compareDates(previousEndDate, maxEndDate) !== 0) {
+                        this.parent.setRecordValue(ganttProp.isAutoSchedule ? 'endDate' : 'autoEndDate', maxEndDate, parentData.ganttProperties, true);
+                        if ((((!isNullOrUndefined(ganttProp.autoDuration)) ? ganttProp.autoDuration === 0 : ganttProp.duration === 0)) && parentData['isManual'] && milestone) {
+                            this.parent.setRecordValue('endDate', maxEndDate, parentData.ganttProperties, true);
+                        }
+                    }
+                    this.parent.setRecordValue('isMilestone', milestone, parentProp, true);
+                    if (parentProp.isAutoSchedule) {
+                        this.calculateDuration(parentData);
+                    }
+                    this.updateWorkWithDuration(parentData);
+                    let parentWork = parentProp.work;
+                    parentWork = this.parent.isOnEdit ? parentWork : (parentWork + childCompletedWorks);
+                    this.parent.setRecordValue('work', parentWork, parentProp, true);
+                    this.parent.setRecordValue('taskType', 'FixedDuration', parentProp, true);
+                    if (!isNullOrUndefined(this.parent.taskFields.type)) {
+                        this.updateMappingData(parentData, 'type');
+                    }
+                    this.parent.setRecordValue('progress', Math.floor(parentProgress), parentProp, true);
+                    this.parent.setRecordValue('totalProgress', totalProgress, parentProp, true);
+                    this.parent.setRecordValue('totalDuration', totalDuration, parentProp, true);
+                    if (!parentProp.isAutoSchedule) {
+                        this.parent.setRecordValue('autoDuration', this.calculateAutoDuration(parentProp), parentProp, true);
+                        this.updateAutoWidthLeft(parentData);
+                    }
+                    if (!this.parent.allowParentDependency) {
+                        this.resetDependency(parentData);
+                    }
+                    this.updateWidthLeft(parentData);
+                    this.updateTaskData(parentData);
                 }
-                this.updateWidthLeft(parentData);
-                this.updateTaskData(parentData);
             }
         }
+        else {
+            parentData.ganttProperties.endDate = parentData.taskData[this.parent.taskFields.endDate];
+        }
         if (deleteUpdate && parentData.childRecords.length === 1 && parentData.ganttProperties.duration === 0) {
             this.parent.setRecordValue('isMilestone', true, parentData.ganttProperties, true);
             this.updateWidthLeft(parentData);
@@ -3841,7 +3900,9 @@ class TaskProcessor extends DateProcessor {
         }
         const parentItem = this.parent.getParentTask(parentData.parentItem);
         if (parentItem) {
-            this.updateParentItems(parentItem);
+            if (this.parent.autoCalculateDateScheduling || this.parent.viewType === "ResourceView") {
+                this.updateParentItems(parentItem);
+            }
         }
         deleteUpdate = false;
     }
@@ -4092,20 +4153,30 @@ class ChartScroll {
         }
     }
     removeShimmer() {
-        let parent = this.parent;
+        const parent = this.parent;
         setTimeout(function () {
             parent.hideMaskRow();
+            if (parent.viewType === 'ResourceView' && !parent.allowTaskbarOverlap && parent.showOverAllocation) {
+                for (let i = 0; i < parent.currentViewData.length; i++) {
+                    const tr = parent.chartRowsModule.ganttChartTableBody.childNodes[i];
+                    if (tr['style'].display !== 'none' && parent.currentViewData[i].hasChildRecords && !parent.currentViewData[i].expanded) {
+                        parent.treeGrid.getRowByIndex(i)['style'].height = tr['style'].height;
+                    }
+                }
+                parent.contentHeight = parent.enableRtl ? parent['element'].getElementsByClassName('e-content')[2].children[0]['offsetHeight'] :
+                    parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
+                document.getElementsByClassName('e-chart-rows-container')[0]['style'].height = parent.contentHeight + 'px';
+            }
         }, 0);
     }
-    ;
     updateShimmer() {
-        let parent = this.parent;
+        const parent = this.parent;
         setTimeout(function () {
             parent.showMaskRow();
         }, 0);
     }
     updateSpinner() {
-        let parent = this.parent;
+        const parent = this.parent;
         this.parent.showSpinner();
         window.clearTimeout(this.isScrolling);
         this.isScrolling = setTimeout(function () {
@@ -4137,11 +4208,11 @@ class ChartScroll {
             scrollArgs.scrollDirection = 'Horizontal';
             scrollArgs.action = 'HorizontalScroll';
         }
-        if ((scrollArgs.scrollDirection != 'Horizontal' && !isNullOrUndefined(scrollArgs.scrollDirection)) && this.parent.enableVirtualization === true && (this.parent.isToolBarClick
+        if ((scrollArgs.scrollDirection !== 'Horizontal' && !isNullOrUndefined(scrollArgs.scrollDirection)) && this.parent.enableVirtualization === true && (this.parent.isToolBarClick
             || isNullOrUndefined(this.parent.isToolBarClick))) {
             this.parent.isVirtualScroll = true;
             if (this.parent.showIndicator || isNullOrUndefined(this.parent.showIndicator)) {
-                if (!this.parent.enableVirtualMaskRow && this.parent.enableVirtualization && this.parent.loadingIndicator.indicatorType === "Spinner") {
+                if (!this.parent.enableVirtualMaskRow && this.parent.enableVirtualization && this.parent.loadingIndicator.indicatorType === 'Spinner') {
                     this.updateSpinner();
                 }
             }
@@ -4185,11 +4256,12 @@ class ChartScroll {
      * To set scroll left for chart scroll container
      *
      * @param {number} scrollLeft  - To set scroll left for scroll container
+     * @param {number} leftSign - specifies left sign
      * @returns {void} .
      */
     setScrollLeft(scrollLeft, leftSign) {
         if (leftSign) {
-            scrollLeft = leftSign == -1 && this.parent.enableRtl ? -scrollLeft : scrollLeft;
+            scrollLeft = leftSign === -1 && this.parent.enableRtl ? -scrollLeft : scrollLeft;
         }
         this.element.scrollLeft = scrollLeft;
         this.parent.ganttChartModule.chartTimelineContainer.scrollLeft = this.element.scrollLeft;
@@ -4345,9 +4417,11 @@ class GanttChart {
                 }
                 else {
                     if (this.parent.viewType === 'ProjectView') {
-                        this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[1].setAttribute('tabindex', '-1');
+                        if (!isNullOrUndefined(this.parent.chartRowsModule.ganttChartTableBody.children[parseInt(i.toString(), 10)].children[0].children[1].children[1])) {
+                            this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[1].setAttribute('tabindex', '-1');
+                        }
                     }
-                    else if (this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[0]) {
+                    else if (this.parent.chartRowsModule.ganttChartTableBody.children[parseInt(i.toString(), 10)].children[0].children[1].children[0]) {
                         this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[0].setAttribute('tabindex', '-1');
                     }
                 }
@@ -4400,7 +4474,14 @@ class GanttChart {
             Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight));
     }
     renderRange(rangeCollection, currentRecord) {
-        const topValue = this.getTopValue(currentRecord);
+        let topValue = 0;
+        let rowIndex = this.parent.currentViewData.indexOf(currentRecord);
+        if (!this.parent.allowTaskbarOverlap && this.parent.enableMultiTaskbar) {
+            topValue = !currentRecord.expanded ? this.parent.getRowByIndex(rowIndex).offsetTop : this.parent.getRowByIndex(rowIndex).offsetTop + this.parent.rowHeight;
+        }
+        else {
+            topValue = this.getTopValue(currentRecord);
+        }
         const sameIDElement = this.rangeViewContainer.querySelector('.' + 'rangeContainer' + currentRecord.ganttProperties.rowUniqueID);
         if (sameIDElement) {
             sameIDElement.remove();
@@ -4413,7 +4494,14 @@ class GanttChart {
             return;
         }
         for (let i = 0; i < rangeCollection.length; i++) {
-            const height = this.getRangeHeight(currentRecord);
+            let height;
+            if (!this.parent.allowTaskbarOverlap && !currentRecord.expanded && this.parent.enableMultiTaskbar) {
+                height = parseInt(this.parent.chartRowsModule.ganttChartTableBody.childNodes[rowIndex].style.height) -
+                    (this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight);
+            }
+            else {
+                height = this.getRangeHeight(currentRecord);
+            }
             const leftDiv = createElement('div', {
                 className: rangeChildContainer + ' ' + 'e-leftarc', styles: (this.parent.enableRtl ? 'right:' : 'left:') +
                     `${(this.parent.enableRtl ? rangeCollection[i].left + rangeCollection[i].width - 5 : rangeCollection[i].left)}px;
@@ -5719,7 +5807,7 @@ class Timeline {
             else {
                 const value = property === 'topTier' ? 'bottomTier' : 'topTier';
                 const assignValue = 'bottomTier';
-                if (newTimeline[assignValue].unit != "None") {
+                if (newTimeline[`${assignValue}`].unit != "None") {
                     this.customTimelineSettings[value] = Object.assign({}, newTimeline[assignValue]);
                 }
             }
@@ -6020,7 +6108,7 @@ class Timeline {
             else {
                 secondValue = sortedUnitLevels[i + 1];
             }
-            if (count >= firstValue[tier].count) {
+            if (count >= firstValue[`${tier}`].count) {
                 currentZoomCollection = sortedUnitLevels[i];
                 checkSameCountLevels = sortedUnitLevels.filter((tempLevel) => {
                     if (tier === "bottomTier") {
@@ -6038,7 +6126,7 @@ class Timeline {
                 }
                 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((tempLevel) => {
                     if (tier === "bottomTier") {
@@ -7115,6 +7203,15 @@ class GanttTreeGrid {
         this.columnMenuOpen = (args) => {
             this.parent.notify('columnMenuOpen', args);
             this.parent.trigger('columnMenuOpen', args);
+            document.querySelector(".e-colmenu").addEventListener('mousemove', (event) => {
+                const filPopOptions = document.querySelector(".e-filter-popup");
+                const filOptions = document.querySelector(".e-filter-item");
+                if (!isNullOrUndefined(filPopOptions)) {
+                    if (!filOptions.classList.contains('e-focused')) {
+                        remove(this.parent.filterModule.filterMenuElement);
+                    }
+                }
+            });
         };
         this.columnMenuClick = (args) => {
             this.parent.trigger('columnMenuClick', args);
@@ -7146,6 +7243,7 @@ class GanttTreeGrid {
         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) {
@@ -7336,6 +7434,12 @@ class GanttTreeGrid {
         if (!this.parent.ganttChartModule.isExpandCollapseFromChart && !this.parent.isExpandCollapseLevelMethod) {
             const 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();
@@ -7349,6 +7453,12 @@ class GanttTreeGrid {
             if (!args['data'].length) {
                 const 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") {
@@ -7441,6 +7551,14 @@ class GanttTreeGrid {
             this.parent.addDeleteRecord = false;
         }
         this.parent.trigger('actionComplete', updatedArgs);
+        if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && this.parent.showOverAllocation) {
+            for (let 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();
         }
@@ -8586,8 +8704,12 @@ class ChartRows extends DateProcessor {
                 }
             }
             else {
-                labelString = this.getTaskLabel(this.parent.labelSettings.taskLabel);
+                const 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' &&
@@ -8599,7 +8721,7 @@ class ChartRows extends DateProcessor {
                         (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$$1 = '<span class="' + taskLabel + '" style="line-height:' +
@@ -8607,7 +8729,7 @@ class ChartRows extends DateProcessor {
                         (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>';
                 }
             }
             const template = !isNullOrUndefined(data.ganttProperties.segments) && data.ganttProperties.segments.length > 0 ?
@@ -8633,6 +8755,7 @@ class ChartRows extends DateProcessor {
                     data.ganttProperties.segments.length === 0))) {
                 if (template !== '' && !isNullOrUndefined(progressDiv) && progressDiv.length > 0) {
                     let templateElement = this.createDivElement(template)[0];
+                    templateElement.innerText = labelString;
                     let childLabel = this.parent.labelSettings.taskLabel;
                     if (childLabel && childLabel['elementRef'])
                         templateElement.appendChild(tempDiv);
@@ -9115,6 +9238,11 @@ class ChartRows extends DateProcessor {
             if (labelString) {
                 labelString = labelString === 'isCustomTemplate' ? field : labelString;
                 leftLabelTemplateNode = this.getLableText(labelString, leftLabelInnerDiv);
+                if (this.parent.enableHtmlSanitizer && typeof (labelString) === 'string') {
+                    labelString = SanitizeHtmlHelper.sanitize(labelString);
+                    labelString = labelString === 'isCustomTemplate' ? field : labelString;
+                    leftLabelTemplateNode = this.getLableText(labelString, leftLabelInnerDiv);
+                }
             }
         }
         if (leftLabelTemplateNode && leftLabelTemplateNode.length > 0) {
@@ -9165,6 +9293,11 @@ class ChartRows extends DateProcessor {
             if (labelString) {
                 labelString = labelString === 'isCustomTemplate' ? field : labelString;
                 rightLabelTemplateNode = this.getLableText(labelString, rightLabelInnerDiv);
+                if (this.parent.enableHtmlSanitizer && typeof (labelString) === 'string') {
+                    labelString = SanitizeHtmlHelper.sanitize(labelString);
+                    labelString = labelString === 'isCustomTemplate' ? field : labelString;
+                    rightLabelTemplateNode = this.getLableText(labelString, rightLabelInnerDiv);
+                }
             }
         }
         if (rightLabelTemplateNode && rightLabelTemplateNode.length > 0) {
@@ -9216,7 +9349,7 @@ class ChartRows extends DateProcessor {
             '<div class="' + 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.
@@ -9260,6 +9393,9 @@ class ChartRows extends DateProcessor {
             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' &&
@@ -9272,7 +9408,7 @@ class ChartRows extends DateProcessor {
                         '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="' +
@@ -9282,9 +9418,10 @@ class ChartRows extends DateProcessor {
                         (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>';
                 }
                 let labelElement = this.createDivElement(labelDiv)[0];
+                labelElement.innerText = labelString;
                 let parentLabel = this.parent.labelSettings.taskLabel;
                 if (parentLabel && parentLabel['elementRef'])
                     labelElement.appendChild(div);
@@ -9451,7 +9588,7 @@ class ChartRows extends DateProcessor {
         const mileStoneLeft = -(this.connectorPointWidth + 2);
         const pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         let marginTop;
-        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
             marginTop = '';
         }
         else {
@@ -9470,7 +9607,7 @@ class ChartRows extends DateProcessor {
         const pointerRight = this.parent.isAdaptive ? 10 : -2;
         const pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
         let marginTop;
-        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords) && this.parent.allowParentDependency) {
             marginTop = '';
         }
         else {
@@ -9759,6 +9896,9 @@ class ChartRows extends DateProcessor {
         this.parent.renderTemplates();
         this.triggerQueryTaskbarInfo();
         this.parent.modifiedRecords = [];
+        if (this.parent.viewType == 'ResourceView' && this.parent.showOverAllocation) {
+            this.updateOverlapped();
+        }
         if (collapsedResourceRecord.length) {
             for (let j = 0; j < collapsedResourceRecord.length; j++) {
                 if (collapsedResourceRecord[j].hasChildRecords) {
@@ -9785,22 +9925,37 @@ class ChartRows extends DateProcessor {
         const taskbarContainerNode = this.taskbarContainer();
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
-        const connectorLineLeftNode = this.getLeftPointNode();
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
+        let connectorLineLeftNode;
+        if (!this.templateData.hasChildRecords && !this.parent.allowParentDependency) {
+            const connectorLineLeftNode = this.getLeftPointNode();
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[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) {
             const parentTaskbarTemplateNode = this.getParentTaskbarNode(i, taskbarContainerNode);
+            const milestoneTemplateNode = this.getMilestoneNode(i, taskbarContainerNode);
             if (!this.templateData.ganttProperties.isAutoSchedule) {
                 const manualTaskbar = this.getManualTaskbar();
-                manualTaskbar[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
-                const 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]);
+                        const connectorLineRightNode = this.getRightPointNode();
+                        manualTaskbar[0].appendChild([].slice.call(connectorLineRightNode)[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()))
@@ -9870,8 +10025,13 @@ class ChartRows extends DateProcessor {
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
-            const connectorLineRightNode = this.getRightPointNode();
+        let 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]);
         }
         const rightLabelNode = this.getRightLabelNode(i);
@@ -9892,6 +10052,10 @@ class ChartRows extends DateProcessor {
                 else {
                     const 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]);
@@ -9984,7 +10148,7 @@ class ChartRows extends DateProcessor {
                 getComputedStyle(trElement.querySelector(classCollections[1])).borderBottomColor :
                 (trElement.querySelector('.' + baselineBar) ? getComputedStyle(trElement.querySelector('.' + baselineBar)).backgroundColor : null);
         }
-        else {
+        else if (taskbarElement) {
             const childTask = taskbarElement.querySelector(classCollections[0]);
             const progressTask = taskbarElement.querySelector(classCollections[1]);
             args.taskbarBgColor = isNullOrUndefined(childTask) ? null : taskbarElement.classList.contains(traceChildTaskBar) ?
@@ -10063,7 +10227,7 @@ class ChartRows extends DateProcessor {
                 trElement.querySelector('.' + 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;
@@ -10165,6 +10329,78 @@ class ChartRows extends DateProcessor {
         }
         return null;
     }
+    // to update the eOverlapped property
+    updateOverlapped() {
+        for (let k = 0; k < this.parent.treeGrid.parentData.length; k++) {
+            let childRecords = this.parent.treeGrid.parentData[k].childRecords;
+            for (let i = 0; i < childRecords.length; i++) {
+                if (childRecords[i + 1]) {
+                    childRecords[i].ganttProperties.eOverlapped = undefined;
+                }
+                for (let 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
+    updateDragDropRecords(data, tr) {
+        let childRecords = data.childRecords;
+        let rowIndex = this.parent.currentViewData.indexOf(data);
+        let 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;
+        let rowIDs = [];
+        let rowCounts = 0;
+        if (data) {
+            for (let i = 0; i < childRecords.length; i++) {
+                for (let j = i + 1; j < childRecords.length; j++) {
+                    let taskbarContainer = tr.getElementsByClassName('e-taskbar-main-container');
+                    for (let 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
      *
@@ -10178,14 +10414,22 @@ class ChartRows extends DateProcessor {
         const selectedItem = this.parent.currentViewData[index];
         if (index !== -1 && selectedItem) {
             const 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);
                 }
@@ -10207,6 +10451,12 @@ class ChartRows extends DateProcessor {
             }
             const 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);
+            }
             let nextEditableElement = this.parent.ganttChartModule.tempNextElement;
             if (this.parent.ganttChartModule.isEditableElement && nextEditableElement) {
                 this.parent.treeGrid.grid.focusModule.focus();
@@ -10220,7 +10470,7 @@ class ChartRows extends DateProcessor {
     getResourceParent(record) {
         const 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 (let j = 0; j < this.parent.initialChartRowElements.length; j++) {
                 if (!isNullOrUndefined(chartRows[j])) {
                     if (!isNullOrUndefined(chartRows[j].childNodes[0].childNodes[1].childNodes[2]) &&
@@ -10248,7 +10498,7 @@ class ChartRows extends DateProcessor {
                 const id = chartRows[i].querySelector('.' + taskBarMainContainer).getAttribute('rowUniqueId');
                 const ganttData = this.parent.getRecordByID(id);
                 let zIndex = "";
-                if (ganttData && ganttData.ganttProperties.eOverlapIndex) {
+                if (ganttData && !isNullOrUndefined(ganttData.ganttProperties.eOverlapIndex)) {
                     zIndex = (ganttData.ganttProperties.eOverlapIndex).toString();
                 }
                 const cloneChildElement = cloneElement.cloneNode(true);
@@ -10395,7 +10645,9 @@ class Dependency {
         for (let count = length; count >= 0; count--) {
             const ganttData = predecessorTasks[count];
             const ganttProp = ganttData.ganttProperties;
-            this.ensurePredecessorCollectionHelper(ganttData, ganttProp);
+            if ((!ganttData.hasChildRecords && !this.parent.allowParentDependency) || this.parent.allowParentDependency) {
+                this.ensurePredecessorCollectionHelper(ganttData, ganttProp);
+            }
         }
     }
     /**
@@ -10557,18 +10809,26 @@ class Dependency {
                 offsetUnit: offsetUnits.durationUnit,
                 offset: offsetUnits.duration
             };
-            let fromData = this.parent.connectorLineModule.getRecordByID(obj.to);
-            let toData = this.parent.connectorLineModule.getRecordByID(obj.from);
-            let isValid;
-            if (this.parent.connectorLineEditModule && toData && fromData) {
-                isValid = this.parent.connectorLineEditModule.validateParentPredecessor(toData, fromData);
-                if (isValid)
+            const isOwnParent = this.checkIsParent(match[0]);
+            if (!this.parent.allowParentDependency) {
+                if (!isOwnParent) {
                     collection.push(obj);
+                }
             }
             else {
-                collection.push(obj);
+                let fromData = this.parent.connectorLineModule.getRecordByID(obj.to);
+                let toData = this.parent.connectorLineModule.getRecordByID(obj.from);
+                let isValid;
+                if (this.parent.connectorLineEditModule && toData && fromData) {
+                    isValid = this.parent.connectorLineEditModule.validateParentPredecessor(toData, fromData);
+                    if (isValid)
+                        collection.push(obj);
+                }
+                else {
+                    collection.push(obj);
+                }
+                match.splice(0);
             }
-            match.splice(0);
         });
         return collection;
     }
@@ -10691,7 +10951,9 @@ class Dependency {
         const length = predecessorsCollection.length;
         for (let count = 0; count < length; count++) {
             ganttRecord = predecessorsCollection[count];
-            this.updatePredecessorHelper(ganttRecord, predecessorsCollection);
+            if ((!ganttRecord.hasChildRecords && !this.parent.allowParentDependency) || this.parent.allowParentDependency) {
+                this.updatePredecessorHelper(ganttRecord, predecessorsCollection);
+            }
         }
     }
     /**
@@ -10740,12 +11002,16 @@ class Dependency {
      * @private
      */
     updatedRecordsDateByPredecessor() {
+        if (!this.parent.autoCalculateDateScheduling) {
+            return;
+        }
         const flatData = this.parent.flatData;
         const totLength = this.parent.flatData.length;
         for (let count = 0; count < totLength; count++) {
             if (flatData[count].ganttProperties.predecessorsName) {
                 this.validatePredecessorDates(flatData[count]);
-                if (flatData[count].hasChildRecords && this.parent.editModule && !this.parent.allowUnscheduledTasks) {
+                if (flatData[count].hasChildRecords && this.parent.editModule && !this.parent.allowUnscheduledTasks
+                    && this.parent.allowParentDependency) {
                     this.parent.editModule['updateChildItems'](flatData[count]);
                 }
             }
@@ -10790,7 +11056,7 @@ class Dependency {
                 const predecessor = predecessors[count];
                 parentGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor.from);
                 record = this.parent.connectorLineModule.getRecordByID(predecessor.to);
-                if (this.parent.isLoad && this.parentPredecessors.indexOf(ganttRecord) == -1
+                if (this.parent.allowParentDependency && this.parent.isLoad && this.parentPredecessors.indexOf(ganttRecord) == -1
                     && (ganttRecord.hasChildRecords || record.hasChildRecords)) {
                     this.parentPredecessors.push(ganttRecord);
                 }
@@ -11471,9 +11737,16 @@ class ConnectorLine {
      * @private
      */
     getHeightValue(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.
@@ -11547,10 +11820,33 @@ class ConnectorLine {
         if (this.parent.renderBaseline) {
             isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
         }
-        const heightValue = isVirtual ? connectorLine$$1.height : (height + isMilestoneValue);
+        let heightValue = isVirtual ? connectorLine$$1.height : (height + isMilestoneValue);
         let borderTopWidth = 0;
         let addTop = 0;
-        if (this.parent.currentViewData[data.parentIndex] && this.parent.currentViewData[data.childIndex]) {
+        let parentOverlapTopValue = 0;
+        let childOverlapTopValue = 0;
+        let count = 0;
+        if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation && !this.parent.allowTaskbarOverlap) {
+            for (let 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 (let 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) {
             let fromRecordIsParent = this.parent.currentViewData[data.parentIndex].hasChildRecords;
             let toRecordIsParent = this.parent.currentViewData[data.childIndex].hasChildRecords;
             let fromRecordIsManual = this.parent.currentViewData[data.parentIndex].ganttProperties.isAutoSchedule;
@@ -11643,7 +11939,7 @@ class ConnectorLine {
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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 ?
@@ -11663,7 +11959,7 @@ class ConnectorLine {
                     '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$$1.top : ((data.parentIndex * data.rowHeight) + addTop +
+                div = div + direction + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.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;
@@ -11695,7 +11991,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FSType3') {
                 div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.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) +
@@ -11725,7 +12021,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FSType4') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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;' +
@@ -11751,7 +12047,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType4') {
                 div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.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;
@@ -11764,7 +12060,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType3') {
                 div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.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;
@@ -11777,7 +12073,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType2') {
                 div = div + direction + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.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;' +
@@ -11797,7 +12093,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType1') {
                 div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.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;
@@ -11815,7 +12111,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType1') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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) -
@@ -11839,7 +12135,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType2') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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:' +
@@ -11865,7 +12161,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType3') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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;
@@ -11888,7 +12184,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType4') {
                 div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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) -
@@ -11917,7 +12213,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType4') {
                 div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.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) +
@@ -11945,7 +12241,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType3') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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;
@@ -11963,7 +12259,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType1') {
                 div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.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>';
@@ -11988,7 +12284,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType2') {
                 div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.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) +
@@ -12381,7 +12677,7 @@ class Tooltip$1 {
         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 = ganttTooltip;
         this.toolTipObj.animation = { open: { effect: 'None', delay: 0 }, close: { effect: 'None', delay: 0 } };
         this.toolTipObj.afterOpen = this.updateTooltipPosition.bind(this);
@@ -12594,8 +12890,12 @@ class Tooltip$1 {
         let 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>' : '';
+            let 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':
@@ -12607,9 +12907,13 @@ class Tooltip$1 {
                     else if (!isNullOrUndefined(data.startDate)) {
                         milestoneStartDate = data.startDate;
                     }
-                    const sDate = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                    let sDateValue = this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat());
+                    if (this.parent.enableHtmlSanitizer && typeof (sDateValue) === 'string') {
+                        sDateValue = SanitizeHtmlHelper.sanitize(sDateValue);
+                    }
+                    let 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$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + sDate + '</tbody></table>';
                     break;
@@ -12617,20 +12921,28 @@ class Tooltip$1 {
             case 'taskbar':
                 {
                     const scheduledTask = !ganttData.hasChildRecords || data.isAutoSchedule ? true : false;
-                    const startDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    let startDateValue = this.parent.getFormatedDate(scheduledTask ? data.startDate : data.autoStartDate, this.parent.getDateFormat());
+                    let endDateValue = this.parent.getFormatedDate(scheduledTask ? data.endDate : data.autoEndDate, this.parent.getDateFormat());
+                    let durationValue = this.parent.getDurationString((scheduledTask ? data.duration : data.autoDuration), data.durationUnit);
+                    let 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;
+                    }
+                    let 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>' : '';
-                    const endDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
+                    let 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>' : '';
-                    const duration = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
+                    let 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>' : '';
-                    const progress = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + data.progress +
+                    let progress = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + progressValue +
                         '</td></tr>' : '';
                     content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + startDate + endDate + duration + progress + '</tbody></table>';
@@ -12638,82 +12950,131 @@ class Tooltip$1 {
                 }
             case 'baseline':
                 {
+                    let baselineStartDateValue = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
+                    let 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$$1 = '<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':
                 {
                     const markerTooltipElement = parent.tooltipModule.getMarkerTooltipData(args);
-                    const markerLabel = markerTooltipElement.label ? markerTooltipElement.label : '';
+                    let markerTooltipElementValue = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
+                    let 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$$1 = '<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':
                 {
+                    let fromNameValue = parent.tooltipModule.predecessorTooltipData.fromName;
+                    let fromIdValue = parent.tooltipModule.predecessorTooltipData.fromId;
+                    let toNameValue = parent.tooltipModule.predecessorTooltipData.toName;
+                    let toIdValue = parent.tooltipModule.predecessorTooltipData.toId;
+                    let linkTextValue = parent.tooltipModule.predecessorTooltipData.linkText;
+                    let 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$$1 = '<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$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + args.target.title + '</tr></tbody></table>';
+                    let titleValue = args.target.title;
+                    if (this.parent.enableHtmlSanitizer && typeof (titleValue) === 'string') {
+                        titleValue = SanitizeHtmlHelper.sanitize(titleValue);
+                    }
+                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
                 }
                 break;
             case 'timeline':
-                content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + args.target.title + '</tr></tbody></table>';
+                let timlineTitleValue = args.target.title;
+                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue) === 'string') {
+                    timlineTitleValue = SanitizeHtmlHelper.sanitize(timlineTitleValue);
+                }
+                content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
                 break;
             case 'manualtaskbar':
                 {
-                    const autoStartDate = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    let autoStartDateValue = this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat());
+                    let autoEndDateValue = this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat());
+                    let durationUnitValue = this.parent.getDurationString(data.duration, data.durationUnit);
+                    let manualStartDateValue = this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat());
+                    let 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;
+                    }
+                    let 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>' : '';
-                    const autoEndDate = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        autoStartDateValue + '</td></tr>' : '';
+                    let 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>' : '';
-                    const durationValue = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        autoEndDateValue + '</td></tr>' : '';
+                    let 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>' : '';
-                    const manualStartDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    let 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>' : '';
-                    const manualEndDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        manualStartDateValue + '</td></tr>' : '';
+                    let 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$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
                     break;
                 }
             case 'manualmilestone':
                 {
-                    const autoStart = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    let autoStartValue = this.parent.getFormatedDate(data.autoStartDate, this.parent.getDateFormat());
+                    let autoEndValue = this.parent.getFormatedDate(data.autoEndDate, this.parent.getDateFormat());
+                    let 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;
+                    }
+                    let 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>' : '';
-                    const autoEnd = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        autoStartValue + '</td></tr>' : '';
+                    let 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>' : '';
-                    const date = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                        autoEndValue + '</td></tr>' : '';
+                    let 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$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + date + autoStart + autoEnd + '</tbody></table>';
                     break;
@@ -12741,7 +13102,10 @@ class Tooltip$1 {
      * @private
      */
     getPredecessorTooltipData(args) {
-        const predeceesorParent = args.target.parentElement.id;
+        let predeceesorParent = args.target.parentElement.id;
+        if (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
+            predeceesorParent = SanitizeHtmlHelper.sanitize(predeceesorParent);
+        }
         const taskIds = predeceesorParent.match(/ConnectorLineparent(.*)child(.*)/);
         taskIds.shift();
         let fromTask;
@@ -12780,7 +13144,7 @@ class Tooltip$1 {
      */
     templateCompiler(template, parent, data, propName) {
         const tooltipFunction = parent.chartRowsModule.templateCompiler(template);
-        const templateID = parent.chartRowsModule.getTemplateID(propName);
+        let templateID = parent.chartRowsModule.getTemplateID(propName);
         const templateNode = tooltipFunction(extend({ index: 0 }, data), parent, propName, templateID, true);
         return templateNode;
     }
@@ -13020,7 +13384,6 @@ class FocusModule {
                     const top = containerPosition.top + (containerPosition.height / 2);
                     const left = containerPosition.left + (containerPosition.width / 2);
                     this.setActiveElement(e.target);
-                    // eslint-disable-next-line security/detect-non-literal-fs-filename
                     contextMenu.open(top, left);
                     e.preventDefault();
                     break;
@@ -13383,6 +13746,12 @@ let Gantt = class Gantt extends Component {
             this.treeGrid.isReact = true;
             this.treeGrid.grid.isReact = true;
         }
+        if (this.isVue) {
+            this.treeGrid.isVue = true;
+            this.treeGrid.grid.isVue = true;
+            this.treeGrid.vueInstance = this.vueInstance;
+            this.treeGrid.grid.vueInstance = this.vueInstance;
+        }
         createSpinner({ target: this.element }, this.createElement);
         this.trigger('load', {});
         this.element.classList.add(root);
@@ -13408,13 +13777,13 @@ let Gantt = class Gantt extends Component {
     }
     hideMaskRow() {
         let isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
-        if (!isNullOrUndefined(this.contentMaskTable) && isTablePresent != 0) {
+        if (!isNullOrUndefined(this.contentMaskTable) && (isTablePresent != 0 || this.contentMaskTable)) {
             const maskTable = this.contentMaskTable;
             remove(maskTable);
             this.contentMaskTable = null;
         }
         isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
-        if (!isNullOrUndefined(this.headerMaskTable) && isTablePresent != 0) {
+        if (!isNullOrUndefined(this.headerMaskTable) && (isTablePresent != 0 || this.headerMaskTable)) {
             const maskTable = this.headerMaskTable;
             remove(maskTable);
             this.headerMaskTable = null;
@@ -13427,8 +13796,8 @@ let Gantt = class Gantt extends Component {
         }
         if (this.element.querySelectorAll('.' + timelineHeaderTableContainer).length != 0) {
             for (var i = 0; i < this.singleTier; i++) {
-                if (!isNullOrUndefined(this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i])) {
-                    this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i]['style'].visibility = "visible";
+                if (!isNullOrUndefined(this.element.querySelectorAll('.' + timelineHeaderTableContainer)[parseInt(i.toString(), 10)])) {
+                    this.element.querySelectorAll('.' + timelineHeaderTableContainer)[parseInt(i.toString(), 10)]['style'].visibility = "visible";
                 }
             }
         }
@@ -13450,7 +13819,7 @@ let Gantt = class Gantt extends Component {
                 if (this.element.querySelectorAll('.' + timelineHeaderTableContainer).length != 0) {
                     this.singleTier = this.timelineModule.isSingleTier ? 1 : 2;
                     for (var i = 0; i < this.singleTier; i++) {
-                        this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i]['style'].visibility = "hidden";
+                        this.element.querySelectorAll('.' + timelineHeaderTableContainer)[parseInt(i.toString(), 10)]['style'].visibility = "hidden";
                     }
                 }
                 if (this.singleTier === 0) {
@@ -13569,7 +13938,7 @@ let Gantt = class Gantt extends Component {
         }
         this.topBottomHeader = 0;
         for (let i = 0; i < row.length; i++) {
-            tbody.appendChild(this.applyTimelineMaskRow(row[i]));
+            tbody.appendChild(this.applyTimelineMaskRow(row[parseInt(i.toString(), 10)]));
             this.topBottomHeader = this.topBottomHeader + 1;
         }
         table.appendChild(tbody);
@@ -13583,11 +13952,11 @@ let Gantt = class Gantt extends Component {
         maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
         maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
         for (let i = 0; i < maskRow.childNodes.length - 1; i++) {
-            maskRow.childNodes[i]['style']['width'] = 166 + 'px';
+            maskRow.childNodes[parseInt(i.toString(), 10)]['style']['width'] = 166 + 'px';
         }
         const maskCells = [].slice.call(maskRow.childNodes);
         for (let i = 0; i < maskCells.length; i++) {
-            const maskCell = maskCells[i];
+            const maskCell = maskCells[parseInt(i.toString(), 10)];
             switch (this.topBottomHeader) {
                 case 0:
                     if (this.enableRtl) {
@@ -13604,7 +13973,7 @@ let Gantt = class Gantt extends Component {
                     maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
                     const innerMaskCells = [].slice.call(maskCell.childNodes);
                     for (let i = 0; i < innerMaskCells.length; i++) {
-                        const htmlInner = innerMaskCells[i];
+                        const htmlInner = innerMaskCells[parseInt(i.toString(), 10)];
                         if (i === 0) {
                             if (this.enableRtl) {
                                 htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
@@ -13656,7 +14025,7 @@ let Gantt = class Gantt extends Component {
             else if (this.columnLoop === 4) {
                 this.columnLoop = 1;
             }
-            tbody.appendChild(this.applyMaskRow(row[j]));
+            tbody.appendChild(this.applyMaskRow(row[parseInt(j.toString(), 10)]));
         }
         table.appendChild(tbody);
         table.style.width = 100 + '%';
@@ -13677,7 +14046,7 @@ let Gantt = class Gantt extends Component {
         }
         const maskCells = [].slice.call(maskRow.childNodes);
         for (let i = 0; i < maskCells.length; i++) {
-            const maskCell = maskCells[i];
+            const maskCell = maskCells[parseInt(i.toString(), 10)];
             switch (this.columnLoop) {
                 case 1:
                     if (i === 0) {
@@ -13775,7 +14144,7 @@ let Gantt = class Gantt extends Component {
             this.predecessorModule['parentIds'] = [];
             this.predecessorModule['parentRecord'] = [];
             this.predecessorModule.updatePredecessors();
-            if (this.isInPredecessorValidation && this.enableValidation) {
+            if (this.isInPredecessorValidation && this.enableValidation && this.autoCalculateDateScheduling) {
                 this.predecessorModule.updatedRecordsDateByPredecessor();
             }
         }
@@ -13788,7 +14157,9 @@ let Gantt = class Gantt extends Component {
             if (this.enableValidation) {
                 this.dataOperation.updateGanttData();
             }
-            this.predecessorModule.updateParentPredecessor();
+            if (this.allowParentDependency) {
+                this.predecessorModule.updateParentPredecessor();
+            }
             if (this.dataSource instanceof Object && isCountRequired(this)) {
                 const count = getValue('count', this.dataSource);
                 this.treeGrid.dataSource = { result: this.flatData, count: count };
@@ -13801,7 +14172,9 @@ let Gantt = class Gantt extends Component {
             if (this.enableValidation) {
                 this.dataOperation.updateGanttData();
             }
-            this.predecessorModule.updateParentPredecessor();
+            if (this.allowParentDependency) {
+                this.predecessorModule.updateParentPredecessor();
+            }
             this.treeGridPane.classList.remove('e-temp-content');
             remove(this.treeGridPane.querySelector('.e-gantt-temp-header'));
             this.notify('dataReady', {});
@@ -13918,22 +14291,27 @@ let Gantt = class Gantt extends Component {
      * @private
      */
     updateContentHeight(args) {
-        if (this.virtualScrollModule && this.enableVirtualization && !isNullOrUndefined(args)) {
-            const length = getValue('result.length', args);
-            this.contentHeight = length * this.rowHeight;
+        if (!this.allowTaskbarOverlap && this.viewType === 'ResourceView' && !this.isLoad) {
+            return;
         }
         else {
-            const expandedRecords = this.virtualScrollModule && this.enableVirtualization ?
-                this.currentViewData : this.getExpandedRecords(this.currentViewData);
-            let height;
-            const chartRow$$1 = !isNullOrUndefined(this.ganttChartModule.getChartRows()) ? this.ganttChartModule.getChartRows()[0] : null;
-            if (!isNullOrUndefined(chartRow$$1) && chartRow$$1.getBoundingClientRect().height > 0) {
-                height = chartRow$$1.getBoundingClientRect().height;
+            if (this.virtualScrollModule && this.enableVirtualization && !isNullOrUndefined(args)) {
+                const length = getValue('result.length', args);
+                this.contentHeight = length * this.rowHeight;
             }
             else {
-                height = this.rowHeight;
+                const expandedRecords = this.virtualScrollModule && this.enableVirtualization ?
+                    this.currentViewData : this.getExpandedRecords(this.currentViewData);
+                let height;
+                const chartRow$$1 = !isNullOrUndefined(this.ganttChartModule.getChartRows()) ? this.ganttChartModule.getChartRows()[0] : null;
+                if (!isNullOrUndefined(chartRow$$1) && chartRow$$1.getBoundingClientRect().height > 0) {
+                    height = chartRow$$1.getBoundingClientRect().height;
+                }
+                else {
+                    height = this.rowHeight;
+                }
+                this.contentHeight = expandedRecords.length * height;
             }
-            this.contentHeight = expandedRecords.length * height;
         }
     }
     /**
@@ -14446,7 +14824,6 @@ let Gantt = class Gantt extends Component {
                     this.chartRowsModule.refreshGanttRows();
                     break;
                 case 'includeWeekend':
-                case 'dayWorkingTime':
                 case 'allowUnscheduledTasks':
                 case 'holidays':
                     this.isLoad = true;
@@ -14538,6 +14915,11 @@ let Gantt = class Gantt extends Component {
                 case 'enableRtl':
                 case 'readOnly':
                 case 'viewType':
+                case 'taskFields':
+                case 'dayWorkingTime':
+                case 'allowTaskbarDragAndDrop':
+                case 'allowTaskbarOverlap':
+                case 'allowParentDependency':
                     if (prop === 'locale') {
                         this.isLocaleChanged = true;
                     }
@@ -14552,6 +14934,9 @@ let Gantt = class Gantt extends Component {
             }
         }
         if (isRefresh) {
+            if (this.isLoad && this.contentMaskTable) {
+                this.contentMaskTable = null;
+            }
             this.refresh();
         }
     }
@@ -14679,7 +15064,7 @@ let Gantt = class Gantt extends Component {
                 args: [this]
             });
         }
-        if (this.allowRowDragAndDrop) {
+        if (this.allowRowDragAndDrop || this.allowTaskbarDragAndDrop) {
             modules.push({
                 member: 'rowDragAndDrop',
                 args: [this]
@@ -15214,10 +15599,11 @@ let Gantt = class Gantt extends Component {
      * @param  {PdfExportProperties} pdfExportProperties - Defines the export properties of the Gantt.
      * @param  {isMultipleExport} isMultipleExport - Define to enable multiple export.
      * @param  {pdfDoc} pdfDoc - Defined the Pdf Document if multiple export is enabled.
+     * @param  {boolean} isBlob - If the 'isBlob' parameter is set to true, the method returns PDF data as a blob instead of exporting it as a down-loadable PDF file. The default value is false.
      * @returns {Promise<any>} .
      */
-    pdfExport(pdfExportProperties, isMultipleExport, pdfDoc) {
-        return this.pdfExportModule ? this.pdfExportModule.export(pdfExportProperties, isMultipleExport, pdfDoc)
+    pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
+        return this.pdfExportModule ? this.pdfExportModule.export(pdfExportProperties, isMultipleExport, pdfDoc, isBlob)
             : null;
     }
     /**
@@ -15249,7 +15635,7 @@ let Gantt = class Gantt extends Component {
      * @private
      */
     renderWorkingDayCell(args) {
-        const includeWeekend = this.taskMode !== 'Auto' ? true : this.includeWeekend ? true : false;
+        const includeWeekend = this.taskMode !== 'Auto' ? true : (this.includeWeekend || !this.autoCalculateDateScheduling) ? true : false;
         const nonWorkingDays = !includeWeekend ? this.nonWorkingDayIndex : [];
         const holidays = this.totalHolidayDates;
         if (nonWorkingDays.length > 0 && nonWorkingDays.indexOf(args.date.getDay()) !== -1) {
@@ -15259,7 +15645,12 @@ let Gantt = class Gantt extends Component {
             const tempDate = new Date(args.date.getTime());
             tempDate.setHours(0, 0, 0);
             if (holidays.indexOf(tempDate.getTime()) !== -1) {
-                args.isDisabled = true;
+                if (!this.autoCalculateDateScheduling) {
+                    args.isDisabled = false;
+                }
+                else {
+                    args.isDisabled = true;
+                }
             }
         }
     }
@@ -15376,8 +15767,8 @@ let Gantt = class Gantt extends Component {
             const id = ganttData.rowUniqueID;
             const task = this.getRecordByID(id);
             let isValid = false;
-            if (isNullOrUndefined(value) || (!isNullOrUndefined(value) && !isNullOrUndefined(ganttData[field]) && (value instanceof Date ? value.getTime() !==
-                ganttData[field].getTime() : ganttData[field] !== value))) {
+            if (isNullOrUndefined(value) || (!isNullOrUndefined(value) && !isNullOrUndefined(ganttData[`${field}`]) && (value instanceof Date ? value.getTime() !==
+                ganttData[`${field}`].getTime() : ganttData[`${field}`] !== value))) {
                 isValid = true;
             }
             if (task && ((this.editedRecords.indexOf(task) === -1 && isValid) || this.editedRecords.length === 0)) {
@@ -16324,6 +16715,12 @@ __decorate([
 __decorate([
     Property(false)
 ], Gantt.prototype, "enableImmutableMode", void 0);
+__decorate([
+    Property(true)
+], Gantt.prototype, "allowParentDependency", void 0);
+__decorate([
+    Property(false)
+], Gantt.prototype, "enableHtmlSanitizer", void 0);
 __decorate([
     Property(true)
 ], Gantt.prototype, "disableHtmlEncode", void 0);
@@ -16333,6 +16730,12 @@ __decorate([
 __decorate([
     Property(true)
 ], Gantt.prototype, "enableVirtualMaskRow", void 0);
+__decorate([
+    Property(true)
+], Gantt.prototype, "UpdateOffsetOnTaskbarEdit", void 0);
+__decorate([
+    Property(true)
+], Gantt.prototype, "autoCalculateDateScheduling", void 0);
 __decorate([
     Property(true)
 ], Gantt.prototype, "autoFocusTasks", void 0);
@@ -16381,6 +16784,12 @@ __decorate([
 __decorate([
     Property(false)
 ], Gantt.prototype, "renderBaseline", void 0);
+__decorate([
+    Property(false)
+], Gantt.prototype, "allowTaskbarDragAndDrop", void 0);
+__decorate([
+    Property(true)
+], Gantt.prototype, "allowTaskbarOverlap", void 0);
 __decorate([
     Property('Horizontal')
 ], Gantt.prototype, "gridLines", void 0);
@@ -16823,8 +17232,10 @@ class CellEdit {
         }
         if (data.hasChildRecords && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
             data['isManual'] === false) || this.parent.taskMode === 'Auto')) || field === taskSettings.duration
-            || field === taskSettings.progress || field === taskSettings.work || field === 'taskType')) {
-            args.cancel = true;
+            || field === taskSettings.dependency || field === taskSettings.progress || field === taskSettings.work || field === 'taskType')) {
+            if ((field === taskSettings.dependency && !this.parent.allowParentDependency) || field !== taskSettings.dependency) {
+                args.cancel = true;
+            }
         }
         else {
             const callBackPromise = new Deferred();
@@ -16874,7 +17285,7 @@ class CellEdit {
     }
     isValueChange(args, field) {
         const data = getValue('data', args);
-        const editedValue = data[field];
+        const editedValue = data[`${field}`];
         const previousValue = getValue('previousData', args);
         if ((isNullOrUndefined(editedValue) && !isNullOrUndefined(previousValue)) || (!isNullOrUndefined(editedValue) && isNullOrUndefined(previousValue))) {
             return true;
@@ -17042,7 +17453,7 @@ class CellEdit {
         const ganttSegments = [];
         const segments = ganttProp.segments;
         for (let i = 0; i < segments.length; i++) {
-            const segment = segments[i];
+            const segment = segments[parseInt(i.toString(), 10)];
             let endDate = segment.endDate;
             endDate = (!isNullOrUndefined(ganttProp.endDate)) && endDate.getTime() <
                 ganttProp.endDate.getTime() && i !== segments.length - 1 ? endDate : ganttProp.endDate;
@@ -17241,7 +17652,7 @@ class CellEdit {
                     }
                 }
                 if (!isNullOrUndefined(index) && index !== -1) {
-                    editedResources.push(previousResource[index]);
+                    editedResources.push(previousResource[parseInt(index.toString(), 10)]);
                 }
                 else {
                     const resource = resourceData.filter((resourceInfo) => {
@@ -17300,7 +17711,7 @@ class CellEdit {
     typeEdited(args, editedObj) {
         const key = 'taskType';
         const ganttProb = args.data.ganttProperties;
-        const taskType = editedObj[key];
+        const taskType = editedObj[`${key}`];
         this.parent.setRecordValue('taskType', taskType, ganttProb, true);
         //this.parent.dataOperation.updateMappingData(args.data, 'taskType');
         this.updateEditedRecord(args);
@@ -17408,15 +17819,12 @@ class EditTooltip {
             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('.' + connectorPointLeft));
             }
             else if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointRightDrag') {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + connectorPointRight));
             }
             else {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.taskBarEditElement);
             }
         }
@@ -17581,6 +17989,10 @@ class TaskbarEdit extends DateProcessor {
         this.elementOffsetWidth = 0;
         this.elementOffsetHeight = 0;
         this.segmentIndex = -1;
+        this.currentItemTop = 0;
+        this.currentItemPrevTop = 0;
+        this.topValue = 0;
+        this.draggedRecordMarginTop = 0;
         this.parent = ganttObj;
         this.initPublicProp();
         this.wireEvents();
@@ -17822,7 +18234,9 @@ class TaskbarEdit extends DateProcessor {
                         if (!isNullOrUndefined(parentRecord) && !parentRecord.expanded) {
                             this.prevZIndex = (this.taskBarEditElement).style.zIndex;
                             (this.taskBarEditElement).style.zIndex = '1000';
-                            addClass([this.taskBarEditElement.querySelector('.e-gantt-child-taskbar')], 'e-collapsed-taskbar-drag');
+                            if (this.taskBarEditElement.querySelector('.e-gantt-child-taskbar')) {
+                                addClass([this.taskBarEditElement.querySelector('.e-gantt-child-taskbar')], 'e-collapsed-taskbar-drag');
+                            }
                         }
                     }
                 }
@@ -17986,9 +18400,20 @@ class TaskbarEdit extends DateProcessor {
                     this.parent.ganttChartModule.scrollObject.previousScroll.left;
             }
             this.tooltipPositionX = this.mouseDownX;
-            this.mouseDownY = e.pageY - containerPosition.top +
+            this.mouseDownY = this.dragMoveY = e.pageY - containerPosition.top +
                 this.parent.ganttChartModule.scrollObject.previousScroll.top;
         }
+        if (this.parent.viewType == "ResourceView" && this.parent.allowTaskbarDragAndDrop) {
+            let toolbarHeight = 0;
+            if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
+                toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
+            }
+            this.topValue = this.parent.getOffsetRect(event.target).top - this.parent.getOffsetRect(this.parent.element).top -
+                parseInt((closest(event.target, '.e-taskbar-main-container'))['style'].marginTop) -
+                this.parent.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'] -
+                toolbarHeight + document.getElementsByClassName('e-chart-scroll-container e-content')[0].scrollTop;
+            this.currentItemPrevTop = this.currentItemTop = this.topValue;
+        }
         if (this.taskBarEditAction === 'ConnectorPointLeftDrag' || this.taskBarEditAction === 'ConnectorPointRightDrag') {
             this.fromPredecessorText = this.taskBarEditAction === 'ConnectorPointLeftDrag' ? 'start' : 'finish';
             this.parent.connectorLineModule.tooltipTable.innerHTML = this.parent.connectorLineModule.getConnectorLineTooltipInnerTd(this.taskBarEditRecord.ganttProperties.taskName, this.fromPredecessorText, '', '');
@@ -18118,6 +18543,22 @@ class TaskbarEdit extends DateProcessor {
                     this.drawFalseLine();
                 }
             }
+            if (this.parent.viewType == 'ResourceView' && this.parent.allowTaskbarDragAndDrop) {
+                if (this.dragMoveY > this.mouseMoveY) {
+                    this.mouseMoveY = this.dragMoveY - this.mouseMoveY;
+                    this.currentItemTop = this.currentItemTop - this.mouseMoveY;
+                }
+                else {
+                    this.mouseMoveY -= this.dragMoveY;
+                    this.currentItemTop = this.currentItemTop + this.mouseMoveY;
+                }
+                const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
+                this.dragMoveY = e.pageY - containerPosition.top + this.parent.ganttChartModule.scrollObject.previousScroll.top;
+                this.topValue = this.currentItemTop;
+                this.currentItemPrevTop = (this.currentItemPrevTop === 0 ||
+                    this.topValue == this.currentItemTop) ? this.topValue :
+                    this.currentItemPrevTop;
+            }
             this.setItemPosition();
             this.updateEditedItem();
             this.editTooltip.updateTooltip(this.segmentIndex);
@@ -18197,12 +18638,12 @@ class TaskbarEdit extends DateProcessor {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('left');
             }
-            else if (isConnectorLineEdit && ((mouseY + 80) >
+            else if (((mouseY + 80) >
                 containerPosition.top + this.parent.ganttChartModule.chartBodyContainer.offsetHeight)) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.top;
                 this.startScrollTimer('bottom');
             }
-            else if (isConnectorLineEdit && ((mouseY - 20) < containerPosition.top)) {
+            else if (((mouseY - 20) < containerPosition.top)) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.top;
                 this.startScrollTimer('top');
             }
@@ -18987,6 +19428,11 @@ class TaskbarEdit extends DateProcessor {
                 taskBarMainContainer$$1.style.width = (width) + 'px';
                 leftLabelContainer$$1.style.width = (item.left) + 'px';
                 taskBarMainContainer$$1.style.setProperty(position, (item.left) + 'px');
+                if (this.parent.viewType === 'ResourceView' && this.parent.allowTaskbarDragAndDrop && this.parent.rowDragAndDropModule &&
+                    (this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'MilestoneDrag')) {
+                    taskBarMainContainer$$1.style.setProperty('top', (this.topValue) + 'px');
+                    taskBarMainContainer$$1.style.zIndex = '4';
+                }
                 if (this.taskBarEditAction === 'LeftResizing' && this.segmentIndex === 0) {
                     const parent = this.taskBarEditElement.parentElement;
                     const segmentedTasks = parent.getElementsByClassName('e-segmented-taskbar');
@@ -19099,7 +19545,8 @@ class TaskbarEdit extends DateProcessor {
         this.previousMouseMove = null;
         this.editTooltip.showHideTaskbarEditTooltip(false, this.segmentIndex);
         if (this.taskBarEditAction && this.isMouseDragged) {
-            if (!this.dragMouseLeave && this.taskBarEditedAction) {
+            if ((!this.dragMouseLeave && this.taskBarEditedAction) || (this.parent.viewType === 'ResourceView' &&
+                this.parent.allowTaskbarDragAndDrop)) {
                 this.taskBarEditedAction(e);
                 this.isMouseDragged = false;
             }
@@ -19208,6 +19655,65 @@ class TaskbarEdit extends DateProcessor {
         const args = extend({}, arg);
         const ganttRecord = args.data;
         const taskData = ganttRecord.ganttProperties;
+        const draggedRecIndex = this.parent.currentViewData.indexOf(ganttRecord);
+        if ((args.taskBarEditAction === 'MilestoneDrag' || args.taskBarEditAction === 'ChildDrag') && this.parent.viewType === "ResourceView"
+            && this.parent.allowTaskbarDragAndDrop && this.dragMoveY > 0) {
+            if (this.parent.rowDragAndDropModule) {
+                let flatRecordCol = this.parent.currentViewData;
+                if (flatRecordCol[this.taskBarEditRecord.parentItem.index] && ((this.parent.editedRecords.indexOf(flatRecordCol[this.taskBarEditRecord.parentItem.index]) === -1))) {
+                    this.parent.editedRecords.push(flatRecordCol[this.taskBarEditRecord.parentItem.index]);
+                }
+                let ganttrec;
+                let resHeight = 0;
+                let rowCount = 0;
+                let childIndex;
+                let droppedRecord;
+                let treeGridrows = this.parent.treeGrid.getRows().length;
+                for (let i = 0; i < treeGridrows; i++) {
+                    if (resHeight < this.dragMoveY && this.parent.getRowByIndex(i).style.display !== 'none') {
+                        rowCount = i;
+                        resHeight = resHeight + parseInt(this.parent.getRowByIndex(i).style.height);
+                        if (!flatRecordCol[i].parentItem) {
+                            ganttrec = flatRecordCol[i];
+                        }
+                        else {
+                            ganttrec = this.parent.getRecordByID(flatRecordCol[i].parentItem.taskId);
+                        }
+                    }
+                }
+                let draggedRecordtaskbar = this.parent.getRowByIndex(draggedRecIndex).getElementsByClassName('e-taskbar-main-container');
+                let taskbarContainer = this.parent.getRowByIndex(rowCount).getElementsByClassName('e-taskbar-main-container');
+                for (let j = 0; j < taskbarContainer.length; j++) {
+                    if (taskbarContainer[j]['offsetTop'] < this.dragMoveY && draggedRecordtaskbar[0].getAttribute('rowuniqueid') !==
+                        taskbarContainer[j].getAttribute('rowuniqueid')) {
+                        this.draggedRecordMarginTop = taskbarContainer[j]['style'].marginTop;
+                        childIndex = taskbarContainer[j].getAttribute('rowuniqueid');
+                    }
+                }
+                if (childIndex) {
+                    droppedRecord = this.parent.currentViewData.filter((data) => {
+                        if (data['rowUniqueID'] === childIndex) {
+                            return data;
+                        }
+                        else {
+                            return null;
+                        }
+                    });
+                }
+                if (droppedRecord) {
+                    const droppedRecordIndex = this.parent.currentViewData.indexOf(droppedRecord[0]);
+                    let position = (droppedRecord[0].hasChildRecords || (!droppedRecord[0].parentItem &&
+                        droppedRecord[0].childRecords.length == 0)) ? 'child' : 'below';
+                    if (this.parent.rowDragAndDropModule) {
+                        this.parent.rowDragAndDropModule.reorderRows([draggedRecIndex], droppedRecordIndex, position);
+                    }
+                    this.dragMoveY = 0;
+                }
+            }
+            if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation) {
+                this.parent.ganttChartModule.renderOverAllocationContainer();
+            }
+        }
         if (args.taskBarEditAction === 'ProgressResizing') {
             if (args.previousData.progress !== taskData.progress) {
                 this.parent.setRecordValue('progress', this.getProgressPercent(taskData.width, taskData.progressWidth), taskData, true);
@@ -19399,14 +19905,20 @@ class TaskbarEdit extends DateProcessor {
             }
             if ((this.parent.virtualScrollModule && this.parent.enableVirtualization &&
                 !this.elementOffsetLeft) || !this.parent.enableVirtualization) {
-                if (this.taskBarEditElement.children[0].classList.contains('e-manualparent-main-container')) {
-                    this.elementOffsetLeft = this.taskBarEditElement.children[0]['offsetLeft'] + this.taskBarEditElement.offsetLeft;
-                    this.elementOffsetTop = ((this.taskBarEditElement.offsetTop - 5) + this.taskBarEditElement.children[0]['offsetTop']) + scrollTop;
-                }
-                else {
+                if (!this.parent.allowParentDependency) {
                     this.elementOffsetLeft = this.taskBarEditElement.offsetLeft;
                     this.elementOffsetTop = this.taskBarEditElement.offsetTop + scrollTop;
                 }
+                else {
+                    if (this.taskBarEditElement.children[0].classList.contains('e-manualparent-main-container')) {
+                        this.elementOffsetLeft = this.taskBarEditElement.children[0]['offsetLeft'] + this.taskBarEditElement.offsetLeft;
+                        this.elementOffsetTop = ((this.taskBarEditElement.offsetTop - 5) + this.taskBarEditElement.children[0]['offsetTop']) + scrollTop;
+                    }
+                    else {
+                        this.elementOffsetLeft = this.taskBarEditElement.offsetLeft;
+                        this.elementOffsetTop = this.taskBarEditElement.offsetTop + scrollTop;
+                    }
+                }
                 this.elementOffsetWidth = this.taskBarEditElement.offsetWidth;
                 this.elementOffsetHeight = this.taskBarEditElement.offsetHeight;
             }
@@ -20419,7 +20931,7 @@ class DialogEdit {
             targetId = inputElement.querySelector('input').getAttribute('id');
             inputElement = inputElement.querySelector('#' + targetId);
         }
-        else if (!isNullOrUndefined(args.event) && !isNullOrUndefined(args.event.path[1])) {
+        else if (!isNullOrUndefined(args.event) && !isNullOrUndefined(args.event.path) && !isNullOrUndefined(args.event.path)[1]) {
             inputElement = args.event.path[1];
             targetId = inputElement.querySelector('input').getAttribute('id');
             inputElement = inputElement.querySelector('#' + targetId);
@@ -20460,6 +20972,9 @@ class DialogEdit {
             if (!isNullOrUndefined(tasks.startDate) && tasks.startDate !== colName) {
                 this.updateScheduleFields(dialog, ganttProp, 'startDate');
             }
+            if (tasks.endDate === colName && !isNullOrUndefined(ganttProp.startDate) && !isNullOrUndefined(args.value) && ganttProp.startDate.getTime() > args.value) {
+                this.updateScheduleFields(dialog, ganttProp, 'endDate');
+            }
             if (!isNullOrUndefined(tasks.endDate) && tasks.endDate !== colName) {
                 this.updateScheduleFields(dialog, ganttProp, 'endDate');
             }
@@ -20650,6 +21165,9 @@ class DialogEdit {
         if (taskSettings.endDate === columnName) {
             if (value !== '') {
                 let endDate = this.parent.dateValidationModule.getDateFromFormat(value);
+                if (isNullOrUndefined(ganttProp.startDate) && isNullOrUndefined(endDate) && ganttProp.startDate.getTime() > endDate.getTime()) {
+                    endDate = ganttProp.endDate;
+                }
                 if (endDate.getHours() === 0 && ganttObj.defaultEndTime !== 86400) {
                     this.parent.dateValidationModule.setTime(ganttObj.defaultEndTime, endDate);
                 }
@@ -21027,6 +21545,9 @@ class DialogEdit {
                 item.content = this.renderGeneralTab(item.content);
             }
             else if (item.content === 'Dependency') {
+                if (this.editedRecord.hasChildRecords && !this.parent.allowParentDependency) {
+                    item.disabled = true;
+                }
                 item.content = this.renderPredecessorTab(item.content);
             }
             else if (item.content === 'Resources') {
@@ -21478,27 +21999,34 @@ class DialogEdit {
         this.preTableCollection = [];
         for (let i = 0; i < flatData.length; i++) {
             const data = flatData[i];
-            let currentFlatData = data;
-            if (data.parentUniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
-                this.isValidData = false;
-            }
-            else {
-                do {
-                    if (currentFlatData.parentItem) {
-                        currentFlatData = this.parent.flatData[this.parent.ids.indexOf(currentFlatData.parentItem.taskId)];
-                        if (currentFlatData.uniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
-                            this.isValidData = false;
-                            break;
+            if (this.parent.allowParentDependency) {
+                let currentFlatData = data;
+                if (data.parentUniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
+                    this.isValidData = false;
+                }
+                else {
+                    do {
+                        if (currentFlatData.parentItem) {
+                            currentFlatData = this.parent.flatData[this.parent.ids.indexOf(currentFlatData.parentItem.taskId)];
+                            if (currentFlatData.uniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
+                                this.isValidData = false;
+                                break;
+                            }
                         }
-                    }
-                } while (currentFlatData.parentItem);
-            }
-            if (data.hasChildRecords && this.isValidData) {
-                this.isValidData = this.isParentValid(data.childRecords);
+                    } while (currentFlatData.parentItem);
+                }
+                if (data.hasChildRecords && this.isValidData) {
+                    this.isValidData = this.isParentValid(data.childRecords);
+                }
+                if (!this.isValidData) {
+                    this.isValidData = true;
+                    continue;
+                }
             }
-            if (!this.isValidData) {
-                this.isValidData = true;
-                continue;
+            else {
+                if (data.hasChildRecords) {
+                    continue;
+                }
             }
             const taskId = this.parent.viewType === 'ResourceView' ? data.ganttProperties.taskId.toString()
                 : data.ganttProperties.rowUniqueID.toString();
@@ -21734,6 +22262,10 @@ class DialogEdit {
                 }
                 else {
                     tasksData[fieldName] = controlObj.value;
+                    if (this.parent.enableHtmlSanitizer && typeof (controlObj.value) === 'string') {
+                        controlObj.value = SanitizeHtmlHelper.sanitize(controlObj.value);
+                        tasksData[fieldName] = controlObj.value;
+                    }
                 }
             }
         }
@@ -22017,9 +22549,10 @@ class ConnectorLineEdit {
                     const from = 'from';
                     const to = 'to';
                     this.parent.connectorLineModule.removeConnectorLineById('parent' + predecessor[from] + 'child' + predecessor[to]);
-                    parentGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor[from]);
-                    childGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor[to]);
-                    if (parentGanttRecord || childGanttRecord) {
+                    parentGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor[`${from}`]);
+                    childGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor[`${to}`]);
+                    if ((!this.parent.allowParentDependency && (parentGanttRecord && parentGanttRecord.expanded === true) ||
+                        (childGanttRecord && childGanttRecord.expanded === true)) || (this.parent.allowParentDependency && (parentGanttRecord || childGanttRecord))) {
                         connectorObj =
                             this.parent.predecessorModule.updateConnectorLineObject(parentGanttRecord, childGanttRecord, predecessor);
                         if (!isNullOrUndefined(connectorObj)) {
@@ -22070,8 +22603,8 @@ class ConnectorLineEdit {
             if (!isNullOrUndefined(values[0])) {
                 const ids = this.parent.viewType === 'ResourceView' ? this.parent.getTaskIds() : this.parent.ids;
                 if (ids.indexOf(values[0]) === -1) {
-                    if (values[0].indexOf(" ") != -1) {
-                        match = values[0].split(" ");
+                    if (values[0].indexOf(' ') !== -1) {
+                        match = values[0].split(' ');
                         if (match.length === 1) {
                             match = values[0].match(/(\d+|[A-z]+)/g);
                         }
@@ -22142,7 +22675,7 @@ class ConnectorLineEdit {
         let parentRec = rec;
         if (rec.parentItem) {
             parentRec = this.parent.flatData.filter((item) => {
-                return item.uniqueID == rec.parentUniqueID;
+                return item.uniqueID === rec.parentUniqueID;
             })[0];
             if (parentRec.parentItem) {
                 parentRec = this.getRootParent(parentRec);
@@ -22191,13 +22724,13 @@ class ConnectorLineEdit {
             }
             else {
                 if (!toRecord.parentItem && fromRecord.parentItem) {
-                    let fromRootParent = this.parent.connectorLineEditModule.getRootParent(fromRecord);
+                    const fromRootParent = this.parent.connectorLineEditModule.getRootParent(fromRecord);
                     if (fromRootParent.uniqueID === toRecord.uniqueID) {
                         return false;
                     }
                 }
                 else if (toRecord.parentItem && !fromRecord.parentItem) {
-                    let toRootParent = this.parent.connectorLineEditModule.getRootParent(toRecord);
+                    const toRootParent = this.parent.connectorLineEditModule.getRootParent(toRecord);
                     if (toRootParent.uniqueID === fromRecord.uniqueID) {
                         return false;
                     }
@@ -22223,11 +22756,20 @@ class ConnectorLineEdit {
         if (!isNullOrUndefined(predecessorString) && predecessorString.length > 0) {
             predecessorIdArray = this.idFromPredecessor(predecessorString);
             for (let count = 0; count < predecessorIdArray.length; count++) {
-                if (parseInt(predecessorIdArray[predecessorIdArray.length - 1]) !== ganttRecord[this.parent.taskFields.id]) {
-                    let num = this.parent.ids.indexOf(predecessorIdArray[predecessorIdArray.length - 1]);
-                    let fromRecord = this.parent.currentViewData[num];
-                    if (fromRecord && ganttRecord) {
-                        flag = this.validateParentPredecessor(fromRecord, ganttRecord);
+                //Check edited item has parent item in predecessor collection
+                if (!this.parent.allowParentDependency) {
+                    const checkParent = this.checkParentRelation(ganttRecord, predecessorIdArray);
+                    if (!checkParent) {
+                        return false;
+                    }
+                }
+                else {
+                    if (parseInt(predecessorIdArray[predecessorIdArray.length - 1]) !== ganttRecord[this.parent.taskFields.id]) {
+                        let num = this.parent.ids.indexOf(predecessorIdArray[predecessorIdArray.length - 1]);
+                        let fromRecord = this.parent.currentViewData[num];
+                        if (fromRecord && ganttRecord) {
+                            flag = this.validateParentPredecessor(fromRecord, ganttRecord);
+                        }
                     }
                 }
                 // Check if predecessor exist more then one
@@ -22459,7 +23001,9 @@ class ConnectorLineEdit {
             this.parent.editModule.updateEditedTask(args.editEventArgs);
         }
         else if (args.validateMode.preserveLinkWithEditing) {
-            this.calculateOffset(ganttRecord);
+            if (this.parent.UpdateOffsetOnTaskbarEdit) {
+                this.calculateOffset(ganttRecord);
+            }
             this.parent.editModule.updateEditedTask(args.editEventArgs);
         }
     }
@@ -22490,7 +23034,7 @@ class ConnectorLineEdit {
         const prevPredecessor = extend([], record.ganttProperties.predecessor, [], true);
         const validPredecessor = this.parent.predecessorModule.getValidPredecessor(record);
         for (let i = 0; i < validPredecessor.length; i++) {
-            const predecessor = validPredecessor[i];
+            const predecessor = validPredecessor[parseInt(i.toString(), 10)];
             const parentTask = this.parent.connectorLineModule.getRecordByID(predecessor.from);
             let offset;
             if (isScheduledTask(parentTask.ganttProperties) && isScheduledTask(record.ganttProperties)) {
@@ -22570,7 +23114,7 @@ class ConnectorLineEdit {
             const parentPredecessor = extend([], [], parentGanttRecord.ganttProperties.predecessor, true);
             const index = getIndex(predecessor[i], 'from', prevPredecessor, 'to');
             prevPredecessor.splice(index, 1);
-            const parentIndex = getIndex(predecessor[i], 'from', parentPredecessor, 'to');
+            const parentIndex = getIndex(predecessor[parseInt(i.toString(), 10)], 'from', parentPredecessor, 'to');
             parentPredecessor.splice(parentIndex, 1);
             this.parent.setRecordValue('predecessor', parentPredecessor, parentGanttRecord.ganttProperties, true);
         }
@@ -22681,41 +23225,41 @@ class ConnectorLineEdit {
             let violationType = null;
             if (predecessor[i].type === 'FS') {
                 if (ganttTaskData.startDate < startDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskBeforePredecessor_FS';
                 }
                 else if (ganttTaskData.startDate > startDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskAfterPredecessor_FS';
                 }
             }
             else if (predecessor[i].type === 'SS') {
                 if (ganttTaskData.startDate < startDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskBeforePredecessor_SS';
                 }
                 else if (ganttTaskData.startDate > startDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskAfterPredecessor_SS';
                 }
             }
             else if (predecessor[i].type === 'FF') {
                 if (endDate <= parentGanttRecord.ganttProperties.endDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskBeforePredecessor_FF';
                 }
                 else if (endDate > parentGanttRecord.ganttProperties.endDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskAfterPredecessor_FF';
                 }
             }
             else if (predecessor[i].type === 'SF') {
                 if (endDate < parentGanttRecord.ganttProperties.startDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskBeforePredecessor_SF';
                 }
                 else if (endDate >= parentGanttRecord.ganttProperties.startDate) {
-                    this.validationPredecessor.push(predecessor[i]);
+                    this.validationPredecessor.push(predecessor[parseInt(i.toString(), 10)]);
                     violationType = 'taskAfterPredecessor_SF';
                 }
             }
@@ -22746,13 +23290,13 @@ class ConnectorLineEdit {
             const prevPredecessor = prevData.ganttProperties.predecessor;
             if (!isNullOrUndefined(prevPredecessor)) {
                 for (let p = 0; p < prevPredecessor.length; p++) {
-                    const parentGanttRecord = this.parent.connectorLineModule.getRecordByID(prevPredecessor[p].from);
+                    const parentGanttRecord = this.parent.connectorLineModule.getRecordByID(prevPredecessor[parseInt(p.toString(), 10)].from);
                     if (parentGanttRecord === data) {
-                        data.ganttProperties.predecessor.push(prevPredecessor[p]);
+                        data.ganttProperties.predecessor.push(prevPredecessor[parseInt(p.toString(), 10)]);
                     }
                     else {
                         const parentPredecessor = extend([], [], parentGanttRecord.ganttProperties.predecessor, true);
-                        const parentIndex = getIndex(prevPredecessor[p], 'from', parentPredecessor, 'to');
+                        const parentIndex = getIndex(prevPredecessor[parseInt(p.toString(), 10)], 'from', parentPredecessor, 'to');
                         if (parentIndex !== -1) {
                             parentPredecessor.splice(parentIndex, 1);
                             this.parent.setRecordValue('predecessor', parentPredecessor, parentGanttRecord.ganttProperties, true);
@@ -22762,9 +23306,9 @@ class ConnectorLineEdit {
             }
             if (!isNullOrUndefined(newPredecessor)) {
                 for (let n = 0; n < newPredecessor.length; n++) {
-                    const parentGanttRecord = this.parent.connectorLineModule.getRecordByID(newPredecessor[n].from);
+                    const parentGanttRecord = this.parent.connectorLineModule.getRecordByID(newPredecessor[parseInt(n.toString(), 10)].from);
                     const parentPredecessor = extend([], [], parentGanttRecord.ganttProperties.predecessor, true);
-                    parentPredecessor.push(newPredecessor[n]);
+                    parentPredecessor.push(newPredecessor[parseInt(n.toString(), 10)]);
                     this.parent.setRecordValue('predecessor', parentPredecessor, parentGanttRecord.ganttProperties, true);
                 }
             }
@@ -23223,7 +23767,7 @@ class Edit$2 {
         let isScheduleValueUpdated = false;
         for (const key of Object.keys(data)) {
             if ([tasks.startDate, tasks.endDate, tasks.duration].indexOf(key) !== -1) {
-                if (isNullOrUndefined(data[key]) && !ganttObj.allowUnscheduledTasks) {
+                if (isNullOrUndefined(data[`${key}`]) && !ganttObj.allowUnscheduledTasks) {
                     continue;
                 }
                 if (isFromDialog) {
@@ -23279,7 +23823,7 @@ class Edit$2 {
                 else if (key === tasks.name) {
                     ganttPropKey = 'taskName';
                 }
-                else if (key === tasks.segments) {
+                else if ((key === tasks.segments) && (!isNullOrUndefined(ganttData.ganttProperties.segments))) {
                     ganttPropKey = 'segments';
                     /* eslint-disable-next-line */
                     if (data && !isNullOrUndefined(data[this.parent.taskFields.segments]) && data[this.parent.taskFields.segments].length > 0) {
@@ -23569,7 +24113,7 @@ class Edit$2 {
         else if (args.data.childRecords.length > 0 && !isValidatePredecessor) {
             isValidatePredecessor = this.isCheckPredecessor(args.data);
             if (!isValidatePredecessor && this.isTaskbarMoved(args.data)) {
-                for (var i = 0; i < args.data.childRecords.length; i++) {
+                for (let i = 0; i < args.data.childRecords.length; i++) {
                     if (this.parent.predecessorModule.getValidPredecessor(args.data.childRecords[i]).length > 0) {
                         childRecordIndex = i;
                         isValidatePredecessor = true;
@@ -23647,8 +24191,10 @@ class Edit$2 {
      */
     updateEditedTask(args) {
         const ganttRecord = args.data;
-        this.updateParentChildRecord(ganttRecord);
-        if (this.parent.isConnectorLineUpdate) {
+        if (this.parent.autoCalculateDateScheduling) {
+            this.updateParentChildRecord(ganttRecord);
+        }
+        if (this.parent.isConnectorLineUpdate && this.parent.autoCalculateDateScheduling) {
             /* validating predecessor for updated child items */
             for (let i = 0; i < this.validatedChildItems.length; i++) {
                 const child = this.validatedChildItems[i];
@@ -23659,7 +24205,7 @@ class Edit$2 {
             }
             this.parent.predecessorModule.isValidatedParentTaskID = '';
             /** validating predecessor for current edited records */
-            if (ganttRecord.ganttProperties.predecessorsName) {
+            if (ganttRecord.ganttProperties.predecessor) {
                 this.parent.isMileStoneEdited = ganttRecord.ganttProperties.isMilestone;
                 if (this.taskbarMoved) {
                     this.parent.editedTaskBarItem = ganttRecord;
@@ -23667,7 +24213,7 @@ class Edit$2 {
                 this.parent.predecessorModule.validatePredecessor(ganttRecord, [], '');
                 this.parent.predecessorModule.isValidatedParentTaskID = '';
             }
-            if (ganttRecord.hasChildRecords && this.parent.previousRecords[ganttRecord.uniqueID].ganttProperties.startDate &&
+            if (this.parent.allowParentDependency && ganttRecord.hasChildRecords && this.parent.previousRecords[ganttRecord.uniqueID].ganttProperties.startDate &&
                 (args.action === "DrawConnectorLine")) {
                 this.updateChildItems(ganttRecord);
             }
@@ -23675,7 +24221,9 @@ class Edit$2 {
         }
         /** Update parent up-to zeroth level */
         if (ganttRecord.parentItem) {
-            this.parent.dataOperation.updateParentItems(ganttRecord, true);
+            if (this.parent.autoCalculateDateScheduling) {
+                this.parent.dataOperation.updateParentItems(ganttRecord, true);
+            }
             let parentData = this.parent.getRecordByID(ganttRecord.parentItem.taskId);
             if (!parentData.ganttProperties.predecessorsName) {
                 this.parent.predecessorModule.validatePredecessor(parentData, [], '');
@@ -23921,7 +24469,7 @@ class Edit$2 {
             durationDiff = this.parent.dateValidationModule.getDuration(validStartDate, validEndDate, 'minute', true, false);
         }
         for (let i = 0; i < childRecords.length; i++) {
-            if ((!(this.parent.isUnscheduledTask(childRecords[i].ganttProperties))) && (childRecords[i].ganttProperties.isAutoSchedule)) {
+            if (childRecords[i].ganttProperties.isAutoSchedule) {
                 if (durationDiff > 0) {
                     const startDate = isScheduledTask(childRecords[i].ganttProperties) ?
                         childRecords[i].ganttProperties.startDate : childRecords[i].ganttProperties.startDate ?
@@ -24038,52 +24586,52 @@ class Edit$2 {
         }
         for (let i = 0; i < eLength; i++) {
             if (e.changedRecords) {
-                rec = e.changedRecords[i];
+                rec = e.changedRecords[parseInt(i.toString(), 10)];
             }
             else {
-                rec = e[i];
+                rec = e[parseInt(i.toString(), 10)];
             }
             let _aLength = Object.keys(rec).length;
             for (let j = 0, _a = Object.keys(rec); j < _aLength; j++) {
-                let key = _a[j];
-                this.parent.editedRecords[i][key] = rec[key];
-                this.parent.editedRecords[i].taskData[key] = rec[key];
+                let key = _a[parseInt(j.toString(), 10)];
+                this.parent.editedRecords[parseInt(i.toString(), 10)][`${key}`] = rec[`${key}`];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].taskData[`${key}`] = rec[`${key}`];
             }
             if (this.parent.taskFields.id !== null) {
-                this.parent.editedRecords[i].ganttProperties["taskId"] = rec[this.parent.taskFields.id];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['taskId'] = rec[this.parent.taskFields.id];
             }
             if (this.parent.taskFields.name !== null) {
-                this.parent.editedRecords[i].ganttProperties["taskName"] = rec[this.parent.taskFields.name];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['taskName'] = rec[this.parent.taskFields.name];
             }
             if (this.parent.taskFields.startDate !== null) {
-                this.parent.editedRecords[i].ganttProperties["startDate"] = rec[this.parent.taskFields.startDate];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['startDate'] = rec[this.parent.taskFields.startDate];
             }
             if (this.parent.taskFields.endDate !== null) {
-                this.parent.editedRecords[i].ganttProperties["endDate"] = rec[this.parent.taskFields.endDate];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['endDate'] = rec[this.parent.taskFields.endDate];
             }
             if (this.parent.taskFields.duration !== null) {
-                this.parent.editedRecords[i].ganttProperties["duration"] = parseInt(rec[this.parent.taskFields.duration]);
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['duration'] = parseInt(rec[this.parent.taskFields.duration]);
             }
             if (this.parent.taskFields.durationUnit !== null) {
-                this.parent.editedRecords[i].ganttProperties["durationUnit"] = rec[this.parent.taskFields.durationUnit];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['durationUnit'] = rec[this.parent.taskFields.durationUnit];
             }
             if (this.parent.taskFields.progress !== null) {
-                this.parent.editedRecords[i].ganttProperties["progress"] = rec[this.parent.taskFields.progress];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['progress'] = rec[this.parent.taskFields.progress];
             }
             if (this.parent.taskFields.dependency !== null) {
-                this.parent.editedRecords[i].ganttProperties["dependency"] = rec[this.parent.taskFields.dependency];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['dependency'] = rec[this.parent.taskFields.dependency];
             }
             if (this.parent.taskFields.parentID !== null) {
-                this.parent.editedRecords[i].ganttProperties["parentID"] = rec[this.parent.taskFields.parentID];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['parentID'] = rec[this.parent.taskFields.parentID];
             }
             if (this.parent.taskFields.baselineEndDate !== null) {
-                this.parent.editedRecords[i].ganttProperties["baselineEndDate"] = rec[this.parent.taskFields.baselineEndDate];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['baselineEndDate'] = rec[this.parent.taskFields.baselineEndDate];
             }
             if (this.parent.taskFields.baselineStartDate !== null) {
-                this.parent.editedRecords[i].ganttProperties["baselineStartDate"] = rec[this.parent.taskFields.baselineStartDate];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['baselineStartDate'] = rec[this.parent.taskFields.baselineStartDate];
             }
             if (this.parent.taskFields.resourceInfo !== null) {
-                this.parent.editedRecords[i].ganttProperties["resources"] = rec[this.parent.taskFields.resourceInfo];
+                this.parent.editedRecords[parseInt(i.toString(), 10)].ganttProperties['resources'] = rec[this.parent.taskFields.resourceInfo];
             }
         }
         this.saveSuccess(args);
@@ -24152,6 +24700,14 @@ class Edit$2 {
         }
         if (!this.isTreeGridRefresh) {
             this.parent.chartRowsModule.refreshRecords(this.parent.editedRecords);
+            if (this.parent.viewType === 'ResourceView' && !this.parent.allowTaskbarOverlap && this.parent.showOverAllocation) {
+                this.parent.contentHeight = this.parent['element'].getElementsByClassName('e-content')[0].children[0]['offsetHeight'];
+                this.parent.ganttChartModule.chartBodyContent.style.height = this.parent.contentHeight + 'px';
+                this.parent.ganttChartModule.renderRangeContainer(this.parent.currentViewData);
+                if (this.parent.taskFields.dependency) {
+                    this.parent.ganttChartModule.reRenderConnectorLines();
+                }
+            }
             if (this.parent.isConnectorLineUpdate && !isNullOrUndefined(this.parent.connectorLineEditModule)) {
                 this.parent.updatedConnectorLineCollection = [];
                 this.parent.connectorLineIds = [];
@@ -25048,7 +25604,7 @@ class Edit$2 {
                 return !data.hasChildRecords;
             });
             for (let i = 0; i < updateUnAssignedResources.length; i++) {
-                const unassignedTask = this.parent.flatData.filter((data) => {
+                let unassignedTask = this.parent.flatData.filter((data) => {
                     return data.ganttProperties.taskName === this.parent.localeObj.getConstant('unassignedTask');
                 })[0];
                 let isDuplicate = [];
@@ -25061,15 +25617,24 @@ class Edit$2 {
                 if (parentTask && parentTask.ganttProperties.taskName !==
                     this.parent.localeObj.getConstant('unassignedTask') && isDuplicate.length === 0) {
                     this.checkWithUnassignedTask(updateUnAssignedResources[i]);
-                    if (parentTask) {
-                        this.parent.dataOperation.updateParentItems(updateUnAssignedResources[i].parentItem);
-                    }
                 }
                 else if (!parentTask && (!isDuplicate || isDuplicate.length === 0)) {
                     this.checkWithUnassignedTask(updateUnAssignedResources[i]);
-                    if (updateUnAssignedResources[i].parentItem && unassignedTask) {
-                        this.parent.dataOperation.updateParentItems(updateUnAssignedResources[i].parentItem);
+                }
+                unassignedTask = this.parent.flatData.filter((data) => {
+                    return data.ganttProperties.taskName === this.parent.localeObj.getConstant('unassignedTask');
+                })[0];
+                let parentItem = this.parent.currentViewData.filter((data) => {
+                    if (data.ganttProperties.taskId == updateUnAssignedResources[i].ganttProperties.taskId && (!data.hasChildRecords && data.parentItem)
+                        && unassignedTask.uniqueID === data.parentItem.uniqueID) {
+                        return data;
+                    }
+                    else {
+                        return null;
                     }
+                });
+                if (parentItem[0]) {
+                    this.parent.dataOperation.updateParentItems(parentItem[0]);
                 }
             }
         }
@@ -25640,7 +26205,7 @@ class Edit$2 {
         let tempTaskID = this.parent.taskFields.id;
         if (this.parent.editModule && this.parent.editSettings.allowAdding) {
             this.parent.isDynamicData = true;
-            const cAddedRecord = [];
+            let cAddedRecord = [];
             if (isNullOrUndefined(data)) {
                 this.validateTaskPosition(data, rowPosition, rowIndex, cAddedRecord);
             }
@@ -25670,7 +26235,7 @@ class Edit$2 {
                 if (!isNullOrUndefined(ganttData)) {
                     this.validateUpdateValues(args.newTaskData, ganttData, true);
                 }
-                if (!isNullOrUndefined(args.data[tempTaskID])) {
+                if (!isNullOrUndefined(args.data[`${tempTaskID}`])) {
                     if (args.data[tempTaskID] != args.data['ganttProperties']['taskId']) {
                         args.data['ganttProperties']['taskId'] = args.data[tempTaskID];
                         args.newTaskData[tempTaskID] = args.data[tempTaskID];
@@ -25713,7 +26278,6 @@ class Edit$2 {
                             const addedRecords = 'addedRecords';
                             const insertCrud = data.insert(updatedData[addedRecords], null, query);
                             insertCrud.then((e) => {
-                                const changedRecords = 'changedRecords';
                                 let addedRecords;
                                 if (!isNullOrUndefined(e[0])) {
                                     addedRecords = e[0];
@@ -25721,26 +26285,7 @@ class Edit$2 {
                                 else {
                                     addedRecords = updatedData['addedRecords'][0];
                                 }
-                                /* tslint:disable-next-line */
-                                const updateCrud = data.update(this.parent.taskFields.id, updatedData[changedRecords], null, query);
-                                updateCrud.then(() => {
-                                    if (this.parent.taskFields.id && !isNullOrUndefined(addedRecords[this.parent.taskFields.id]) &&
-                                        addedRecords[this.parent.taskFields.id].toString() !== prevID) {
-                                        this.parent.setRecordValue('taskId', addedRecords[this.parent.taskFields.id], args.data.ganttProperties, true);
-                                        this.parent.setRecordValue('taskData.' + this.parent.taskFields.id, addedRecords[this.parent.taskFields.id], args.data);
-                                        this.parent.setRecordValue(this.parent.taskFields.id, addedRecords[this.parent.taskFields.id], args.data);
-                                        this.parent.setRecordValue('rowUniqueID', addedRecords[this.parent.taskFields.id].toString(), args.data.ganttProperties, true);
-                                        const idIndex = this.parent.ids.indexOf(prevID);
-                                        if (idIndex !== -1) {
-                                            this.parent.ids[idIndex] = addedRecords[this.parent.taskFields.id].toString();
-                                        }
-                                    }
-                                    this.updateNewRecord(cAddedRecord, args);
-                                }).catch((e) => {
-                                    this.removeAddedRecord();
-                                    this.dmFailure(e, args);
-                                    this._resetProperties();
-                                });
+                                this.updateNewRecord(cAddedRecord, args);
                             }).catch((e) => {
                                 this.removeAddedRecord();
                                 this.dmFailure(e, args);
@@ -26966,9 +27511,95 @@ class Filter$1 {
             }
         }
     }
+    setPosition(li, ul) {
+        const gridPos = this.parent.element.getBoundingClientRect();
+        let gridPosTop = gridPos.top;
+        let gridPosLeft = gridPos.left;
+        let parentNode;
+        let parentNodeTop;
+        let parentNodeLeft;
+        let paddingTop;
+        let paddingLeft;
+        let marginTop;
+        let marginLeft;
+        if (!isNullOrUndefined(this.parent.element.parentNode) && this.parent.element.parentNode['tagName'] != 'BODY') {
+            parentNode = this.parent.element.parentNode;
+            parentNodeTop = parentNode.getBoundingClientRect().top;
+            marginTop = parentNode.style.marginTop;
+            while (true) {
+                if (Math.abs(gridPosTop) > Math.abs(parentNodeTop)) {
+                    paddingTop = gridPosTop - parentNodeTop;
+                    break;
+                }
+                if (!isNullOrUndefined(this.parent.element.parentNode)) {
+                    parentNode = parentNode.parentNode;
+                    marginTop = parentNode.parentNode.style.marginTop;
+                }
+                parentNodeTop = parentNode.getBoundingClientRect().top;
+            }
+            parentNodeLeft = parentNode.getBoundingClientRect().left;
+            marginLeft = parentNode.style.marginLeft;
+            while (true) {
+                if (Math.abs(gridPosLeft) > Math.abs(parentNodeLeft)) {
+                    paddingLeft = gridPosLeft - parentNodeLeft;
+                    break;
+                }
+                if (!isNullOrUndefined(this.parent.element.parentNode)) {
+                    parentNode = parentNode.parentNode;
+                    marginLeft = parentNode.style.marginLeft;
+                }
+                parentNodeLeft = parentNode.getBoundingClientRect().left;
+            }
+        }
+        let liPos = li.getBoundingClientRect();
+        let left = liPos.right + window.scrollX;
+        let top = liPos.top + window.scrollY;
+        if (gridPos.right < (left + ul.offsetWidth)) {
+            if ((liPos.left - ul.offsetWidth) > gridPos.left) {
+                left = (liPos.left - ul.offsetWidth);
+            }
+            else {
+                left -= (left + ul.offsetWidth) - gridPos.right;
+            }
+        }
+        else {
+            if (!isNullOrUndefined(paddingTop) && !isNullOrUndefined(paddingLeft)) {
+                left = Math.abs(liPos.right - gridPos.left);
+                top = Math.abs(liPos.top - gridPos.top);
+            }
+        }
+        if (!isNullOrUndefined(paddingTop) && !isNullOrUndefined(paddingLeft)) {
+            ul.style.top = typeof (parseInt(marginTop)) === "string" ? (top + paddingTop + parseInt(marginTop)) + 'px' : (top + paddingTop) + 'px';
+            ul.style.left = typeof (parseInt(marginLeft)) === "string" ? (left + paddingLeft + parseInt(marginLeft) + 8) + 'px' : (left + paddingLeft) + 'px';
+        }
+        else {
+            ul.style.top = top + 'px';
+            ul.style.left = left + 'px';
+        }
+    }
     updateFilterMenuPosition(element, args) {
         addClass([element], 'e-gantt');
-        document.querySelector('#' + this.parent.treeGrid.grid.element.id).appendChild(element);
+        document.querySelector('#' + this.parent.controlId).appendChild(element);
+        let targetElement;
+        if (this.parent.showColumnMenu) {
+            targetElement = document.querySelector('#treeGrid' + this.parent.controlId + '_gridcontrol_colmenu_Filter');
+            element.style.zIndex = targetElement.parentElement.style.zIndex;
+            if (this.parent.treeGrid.filterSettings.type === 'Menu') {
+                this.setPosition(targetElement, getValue('filterModel.dlgObj.element', args));
+            }
+            else {
+                this.setPosition(targetElement, getValue('filterModel.dialogObj.element', args));
+            }
+        }
+        else {
+            targetElement = this.parent.treeGrid.grid.getColumnHeaderByField(args.columnName).querySelector('.e-filtermenudiv');
+            if (this.parent.treeGrid.filterSettings.type === 'Menu') {
+                getFilterMenuPostion(targetElement, getValue('filterModel.dlgObj', args));
+            }
+            else {
+                getFilterMenuPostion(targetElement, getValue('filterModel.dialogObj', args));
+            }
+        }
         if (this.parent.treeGrid.filterSettings.type === 'Menu') {
             element.querySelector('.e-valid-input').focus();
         }
@@ -27384,7 +28015,10 @@ class Selection$1 {
             const rIndex = parseInt(selectedRow.getAttribute('aria-rowindex'), 10);
             const isToggle = this.parent.selectionSettings.enableToggle;
             if (this.parent.selectionSettings.type === 'Single' || (!this.isMultiCtrlRequest && !this.isMultiShiftRequest)) {
-                this.selectRow(rIndex, isToggle);
+                if (!this.parent.allowTaskbarDragAndDrop || (this.parent.allowTaskbarDragAndDrop && (this.parent.rowDragAndDropModule &&
+                    !this.parent.rowDragAndDropModule['draggedRecord']))) {
+                    this.selectRow(rIndex, isToggle);
+                }
             }
             else {
                 if (this.isMultiShiftRequest) {
@@ -27428,7 +28062,7 @@ class Selection$1 {
     }
     addRemoveClass(records) {
         if (typeof (records) == "number") {
-            records = Array.from(String(records), (num) => Number(num));
+            records = [records];
         }
         const ganttRow = [].slice.call(this.parent.ganttChartModule.chartBodyContent.querySelector('tbody').children);
         for (let i = 0; i < records.length; i++) {
@@ -28202,6 +28836,9 @@ class NonWorkingDay {
             });
             const 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);
@@ -28387,6 +29024,9 @@ class EventMarker$1 {
                 });
                 const 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';
                 }
@@ -29182,10 +29822,10 @@ class CriticalPath {
         for (let i = 0; i < criticalPathIds.length; i++) {
             let criticalData;
             if (this.parent.viewType === 'ProjectView') {
-                criticalData = this.parent.currentViewData[this.parent.ids.indexOf(criticalPathIds[i].toString())];
+                criticalData = this.parent.flatData[this.parent.ids.indexOf(criticalPathIds[i].toString())];
             }
             else {
-                let currentRecords = this.parent.currentViewData.filter((data) => {
+                let currentRecords = this.parent.flatData.filter((data) => {
                     return (data.ganttProperties.taskId).toString() === criticalPathIds[i].toString();
                 });
                 for (let i = 0; i < currentRecords.length; i++) {
@@ -29198,16 +29838,18 @@ class CriticalPath {
             const element = this.parent.getRowByIndex(index);
             let taskClass;
             const columnFields = this.parent.taskFields;
-            if (criticalData.parentItem) {
+            if (criticalData && criticalData.parentItem) {
                 const parentRecord = this.parent.currentViewData.filter((data) => {
                     return criticalData.parentItem.uniqueID === data.uniqueID;
                 });
-                const parentIndex = this.parent.currentViewData.indexOf(parentRecord[0]);
+                const parentIndex = this.parent.flatData.indexOf(parentRecord[0]);
                 const parentElement = this.parent.getRowByIndex(parentIndex);
-                let parentTaskbarElement = parentElement.querySelectorAll('.e-taskbar-main-container');
-                for (let i = 0; i < parentTaskbarElement.length; i++) {
-                    if (parentTaskbarElement[i].getAttribute('rowuniqueid') === criticalData['rowUniqueID']) {
-                        addClass(parentTaskbarElement[i].querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
+                if (parentElement) {
+                    let parentTaskbarElement = parentElement.querySelectorAll('.e-taskbar-main-container');
+                    for (let i = 0; i < parentTaskbarElement.length; i++) {
+                        if (parentTaskbarElement[i].getAttribute('rowuniqueid') === criticalData['rowUniqueID']) {
+                            addClass(parentTaskbarElement[i].querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
+                        }
                     }
                 }
             }
@@ -29617,7 +30259,7 @@ class ContextMenu$2 {
                 this.parent.selectionModule.selectRow(rowIndex);
             }
             if (!args.parentItem) {
-                this.rowData = this.parent.updatedRecords[rowIndex];
+                this.rowData = this.parent.updatedRecords[parseInt(rowIndex.toString(), 10)];
             }
             for (const item of args.items) {
                 // let target: EventTarget = target;
@@ -29748,7 +30390,7 @@ class ContextMenu$2 {
                                 this.parent.selectionModule.getSelectedRowCellIndexes().length === 1 ? true : false : false;
                             const prevRecord = this.parent.updatedRecords[this.parent.selectionModule.getSelectedRowIndexes()[0] - 1];
                             if (!this.parent.editSettings.allowEditing || index === 0 || index === -1 || !isSelected ||
-                                this.parent.viewType === 'ResourceView' || this.parent.updatedRecords[index].level - prevRecord.level === 1) {
+                                this.parent.viewType === 'ResourceView' || this.parent.updatedRecords[parseInt(index.toString(), 10)].level - prevRecord.level === 1) {
                                 this.updateItemVisibility(item.text);
                             }
                         }
@@ -29764,7 +30406,7 @@ class ContextMenu$2 {
                             const isSelect = this.parent.selectionModule ? this.parent.selectionModule.selectedRowIndexes.length === 1 ||
                                 this.parent.selectionModule.getSelectedRowCellIndexes().length === 1 ? true : false : false;
                             if (!this.parent.editSettings.allowEditing || ind === -1 || ind === 0 || !isSelect ||
-                                this.parent.viewType === 'ResourceView' || this.parent.updatedRecords[ind].level === 0) {
+                                this.parent.viewType === 'ResourceView' || this.parent.updatedRecords[parseInt(ind.toString(), 10)].level === 0) {
                                 this.updateItemVisibility(item.text);
                             }
                         }
@@ -29774,7 +30416,7 @@ class ContextMenu$2 {
                     {
                         const taskSettings = this.parent.taskFields;
                         if (this.parent.readOnly || !taskbarElement || isNullOrUndefined(taskSettings.segments) ||
-                            this.parent.currentViewData[rowIndex].hasChildRecords) {
+                            this.parent.currentViewData[parseInt(rowIndex.toString(), 10)].hasChildRecords) {
                             this.updateItemVisibility(item.text);
                         }
                         break;
@@ -29977,7 +30619,7 @@ class ContextMenu$2 {
     }
     contextMenuOnClose(args) {
         const parent = 'parentObj';
-        if (args.items.length > 0 && args.items[0][parent] instanceof ContextMenu$1) {
+        if (args.items.length > 0 && args.items[0][`${parent}`] instanceof ContextMenu$1) {
             this.revertItemStatus();
         }
     }
@@ -30447,7 +31089,7 @@ class RowDD$1 {
                         parentUniqueID = this.droppedRecord.uniqueID;
                     }
                     else {
-                        parentUniqueID = this.droppedRecord.parentItem.uniqueID;
+                        parentUniqueID = this.droppedRecord.parentItem ? this.droppedRecord.parentItem.uniqueID : this.droppedRecord.uniqueID;
                     }
                     const droppedParentItem = this.parent.getTaskByUniqueID(parentUniqueID);
                     const editedObj = {};
@@ -30474,7 +31116,7 @@ class RowDD$1 {
                         this.updateSharedResourceTask();
                     }
                 }
-                if (this.parent.taskFields.dependency) {
+                if (this.parent.taskFields.dependency && this.parent.allowParentDependency) {
                     let isValidPredecessor = true;
                     let draggedParent;
                     let toParent;
@@ -33553,6 +34195,12 @@ class ExportHelper {
         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 .
@@ -34951,7 +35599,8 @@ class PdfExport {
      * @param {object} pdfDoc .
      * @returns {Promise<Object>} .
      */
-    export(pdfExportProperties, isMultipleExport, pdfDoc) {
+    export(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
+        this.isBlob = isBlob;
         const args = {
             requestType: 'beforePdfExport',
             ganttObject: this.parent,
@@ -34994,7 +35643,7 @@ class PdfExport {
             this.pdfDocument = new PdfDocument();
         }
         this.processExport(data, pdfExportProperties, isMultipleExport).then(() => {
-            this.parent.trigger('pdfExportComplete', {});
+            this.parent.trigger('pdfExportComplete', this.isBlob ? { promise: this.blobPromise } : {});
             if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
                 this.parent.hideMaskRow();
             }
@@ -35019,12 +35668,17 @@ class PdfExport {
             const layouter = this.gantt.drawGrid(pdfPage, 0, 0, format);
             this.gantt.drawChart(layouter);
             if (!isMultipleExport) {
-                // save the PDF
-                if (!isNullOrUndefined(pdfExportProperties) && pdfExportProperties.fileName) {
-                    this.pdfDocument.save(pdfExportProperties.fileName);
+                if (!this.isBlob) {
+                    // save the PDF
+                    if (!isNullOrUndefined(pdfExportProperties) && pdfExportProperties.fileName) {
+                        this.pdfDocument.save(pdfExportProperties.fileName);
+                    }
+                    else {
+                        this.pdfDocument.save('Export.pdf');
+                    }
                 }
                 else {
-                    this.pdfDocument.save('Export.pdf');
+                    this.blobPromise = this.pdfDocument.save();
                 }
                 this.pdfDocument.destroy();
             }