@syncfusion/ej2-gantt 21.2.9 → 22.1.34

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

@@ -1,8 +1,9 @@
-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 { Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, classList, closest, compile, createElement, deleteObject, extend, formatUnit, getValue, initializeCSPTemplate, 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, 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 { SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { Splitter } from '@syncfusion/ej2-layouts';
 import { ContextMenu as ContextMenu$1, Tab, Toolbar as Toolbar$1 } from '@syncfusion/ej2-navigations';
 import { Count, HtmlEditor, Link, QuickToolbar, RichTextEditor, Toolbar as Toolbar$2 } from '@syncfusion/ej2-richtexteditor';
@@ -725,7 +726,6 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
      * @private
      */
     DateProcessor.prototype.getValidStartDate = function (ganttProp, isAuto) {
-        var _this = this;
         var sDate = null;
         var startDate = isAuto ? ganttProp.autoStartDate : ganttProp.startDate;
         var endDate = isAuto ? ganttProp.autoEndDate : ganttProp.endDate;
@@ -736,24 +736,7 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
                 this.setTime(this.parent.defaultStartTime, sDate);
             }
             else if (!isNullOrUndefined(duration)) {
-                this.parent.flatData.map(function (record) {
-                    if (record.ganttProperties.taskId == ganttProp.taskId) {
-                        if ((!isNullOrUndefined(record.parentItem)) && (record.parentItem.taskId)) {
-                            _this.parent.flatData.map(function (data) {
-                                if (data.ganttProperties.taskId === record.parentItem.taskId) {
-                                    if (!isNullOrUndefined(data.ganttProperties.startDate))
-                                        sDate = data.ganttProperties.startDate;
-                                }
-                                else {
-                                    sDate = _this.getProjectStartDate(ganttProp);
-                                }
-                            });
-                        }
-                        else {
-                            sDate = _this.getProjectStartDate(ganttProp);
-                        }
-                    }
-                });
+                sDate = this.getProjectStartDate(ganttProp);
             }
         }
         else {
@@ -1565,7 +1548,15 @@ var DateProcessor = /** @__PURE__ @class */ (function () {
             var segment = segments[i];
             var sDate = segment.startDate;
             var eDate = segment.endDate;
-            duration += Math.ceil(this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24));
+            if (this.parent.timelineModule.bottomTier === "Hour") {
+                duration += Math.ceil(this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60));
+            }
+            else if (this.parent.timelineModule.bottomTier === "Minutes") {
+                duration += Math.ceil(this.getTimeDifference(sDate, eDate) / (1000 * 60));
+            }
+            else {
+                duration += Math.ceil(this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24));
+            }
         }
         return duration;
     };
@@ -1923,7 +1914,7 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             (this.parent.taskMode === 'Manual') ? false :
                 data[taskSettings.manual] === true ? false : true;
         this.parent.setRecordValue('ganttProperties', ganttProperties, ganttData);
-        if (!isNullOrUndefined(data[taskSettings.id]) && (!((this.parent.viewType === "ResourceView" && level == 0))) || data[taskSettings.name] === "Unassigned Task") {
+        if (!isNullOrUndefined(data[taskSettings.id])) {
             id = data[taskSettings.id];
             name = data[taskSettings.name];
             this.addTaskData(ganttData, data, isLoad);
@@ -2366,7 +2357,7 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             startDate = this.getDateFromFormat(data[taskSettings.startDate], true);
             endDate = this.getDateFromFormat(data[taskSettings.endDate], true);
         }
-        var segments = taskSettings.segments && (!isNullOrUndefined(data[taskSettings.segments]) || !isNullOrUndefined(ganttData.taskData)) ? (data[taskSettings.segments] ||
+        var segments = taskSettings.segments ? (data[taskSettings.segments] ||
             ganttData.taskData[taskSettings.segments]) : null;
         var isMileStone = taskSettings.milestone ? data[taskSettings.milestone] ? true : false : false;
         var durationMapping = data[taskSettings.durationUnit] ? data[taskSettings.durationUnit] : '';
@@ -2988,7 +2979,7 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             var data_1 = [];
             var _loop_4 = function (k) {
                 resourceData.filter(function (resourceInfo) {
-                    if (resourceInfo[resourceSettings.id] === preTaskResources[k][resourceSettings.id]) {
+                    if (resourceInfo[resourceSettings.id] === preTaskResources[k][resourceSettings.id] && data_1.indexOf(preTaskResources[k]) === -1) {
                         data_1.push(preTaskResources[k]);
                     }
                 });
@@ -3075,15 +3066,17 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
         else {
             hierarchicalData = this.parent.dataSource;
         }
-        hierarchicalData.map(function (record) {
-            if (task.ganttProperties.taskId === record[_this.parent.taskFields.id]) {
-                if (!isNullOrUndefined(_this.parent.taskFields.startDate)) {
-                    task[_this.parent.taskFields.startDate] = record[_this.parent.taskFields.startDate];
-                }
-                if (!isNullOrUndefined(_this.parent.taskFields.endDate)) {
-                    task[_this.parent.taskFields.endDate] = record[_this.parent.taskFields.endDate];
+        this.parent.flatData.map(function (data) {
+            hierarchicalData.map(function (record) {
+                if (data.ganttProperties.taskId === record[_this.parent.taskFields.id]) {
+                    if (!isNullOrUndefined(_this.parent.taskFields.startDate)) {
+                        task[_this.parent.taskFields.endDate] = record[_this.parent.taskFields.endDate];
+                    }
+                    if (!isNullOrUndefined(_this.parent.taskFields.endDate)) {
+                        task[_this.parent.taskFields.endDate] = record[_this.parent.taskFields.endDate];
+                    }
                 }
-            }
+            });
         });
     };
     TaskProcessor.prototype.getWorkInHour = function (work, workUnit) {
@@ -3193,9 +3186,6 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             return resourceIdCollection;
         }
         resourceIdCollection = data[this.parent.taskFields.resourceInfo];
-        if (resourceIdCollection != "" && typeof resourceIdCollection == "string") {
-            resourceIdCollection = resourceIdCollection.split(',');
-        }
         var resourceData;
         if (!isNullOrUndefined(this.parent.editModule) && !isNullOrUndefined(this.parent.editModule.dialogModule)
             && this.parent.editModule.dialogModule.isAddNewResource) {
@@ -3205,7 +3195,6 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
             resourceData = this.parent.resources;
         }
         var resourceIDMapping = this.parent.resourceFields.id;
-        var resourceNameMapping = this.parent.resourceFields.name;
         var resourceUnitMapping = this.parent.resourceFields.unit;
         var resourceGroup = this.parent.resourceFields.group;
         var resources = [];
@@ -3216,7 +3205,7 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
                     return true;
                 }
                 else {
-                    return (resourceIdCollection[count] === resourceInfo[resourceIDMapping]) || (resourceIdCollection[count] === resourceInfo[resourceNameMapping]);
+                    return (resourceIdCollection[count] === resourceInfo[resourceIDMapping]);
                 }
             });
             var ganttDataResource = extend({}, resource[0]);
@@ -3273,7 +3262,9 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
                 if (resourceUnit !== 100) {
                     resName += '[' + resourceUnit + '%' + ']';
                 }
-                resourceName.push(resName);
+                if (!isNullOrUndefined(resName)) {
+                    resourceName.push(resName);
+                }
                 if (data.taskData) {
                     var mapping = taskMapping.resourceInfo;
                     // eslint-disable-next-line
@@ -3774,7 +3765,8 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(ganttRecord.segments) && ganttRecord.segments.length > 0) {
             var segments = ganttRecord.segments;
             var fixedWidth = true;
-            var totalTaskWidth = this.splitTasksDuration(segments) * this.parent.perDayWidth;
+            var totalTaskWidth = this.splitTasksDuration(segments) * ((this.parent.timelineModule.bottomTier === "Hour" || this.parent.timelineModule.bottomTier === "Minutes") ? this.parent.timelineSettings.timelineUnitSize : this.parent.perDayWidth);
+            
             var totalProgressWidth = this.parent.dataOperation.getProgressWidth(totalTaskWidth, ganttRecord.progress);
             for (var i = 0; i < segments.length; i++) {
                 var segment = segments[i];
@@ -3822,6 +3814,8 @@ var TaskProcessor = /** @__PURE__ @class */ (function (_super) {
         var ganttRecord = data.ganttProperties;
         this.parent.setRecordValue('autoWidth', this.calculateWidth(data, true), ganttRecord, true);
         this.parent.setRecordValue('autoLeft', this.calculateLeft(ganttRecord, true), ganttRecord, true);
+        this.parent.setRecordValue('progressWidth', this.parent.dataOperation.getProgressWidth((ganttRecord.isAutoSchedule ||
+            !data.hasChildRecords ? ganttRecord.width : ganttRecord.autoWidth), ganttRecord.progress), ganttRecord, true);
     };
     /**
      * To calculate parent progress value
@@ -4047,15 +4041,10 @@ var childTaskBarInnerDiv = 'e-gantt-child-taskbar-inner-div';
 var childProgressBarInnerDiv = 'e-gantt-child-progressbar-inner-div';
 var criticalChildTaskBarInnerDiv = 'e-gantt-child-critical-taskbar-inner-div';
 var criticalChildProgressBarInnerDiv = 'e-gantt-child-critical-progressbar-inner-div';
-var milestoneTop = 'e-milestone-top';
-var milestoneBottom = 'e-milestone-bottom';
-var criticalMilestoneTop = 'e-critical-milestone-top';
-var criticalMilestoneBottom = 'e-critical-milestone-bottom';
+var criticalMilestone = 'e-critical-milestone';
 var baselineBar = 'e-baseline-bar';
 var baselineMilestoneContainer = 'e-baseline-gantt-milestone-container';
-var baselineMilestoneDiv = 'e-baseline-gantt-milestone';
-var baselineMilestoneTop = 'e-baseline-milestone-top';
-var baselineMilestoneBottom = 'e-baseline-milestone-bottom';
+
 var chartRowCell = 'e-chart-row-cell';
 var chartRow = 'e-chart-row';
 var rowExpand = 'e-row-expand';
@@ -4069,15 +4058,11 @@ var progressBarHandlerAfter = 'e-progressbar-handler-after';
 var icon = 'e-icon';
 var traceMilestone = 'e-gantt-milestone';
 var parentMilestone = 'e-gantt-parent-milestone';
-var parentMilestoneTop = 'e-parent-milestone-top';
-var parentMilestoneBottom = 'e-parent-milestone-bottom';
 var traceChildTaskBar = 'e-gantt-child-taskbar';
 var traceChildProgressBar = 'e-gantt-child-progressbar';
 var manualParentMainContainer = 'e-manualparent-main-container';
 var manualParentTaskBar = 'e-gantt-manualparenttaskbar';
 var manualParentMilestone = 'e-gantt-manualparent-milestone';
-var manualParentMilestoneTop = 'e-manualparent-milestone-top';
-var manualParentMilestoneBottom = 'e-manualparent-milestone-bottom';
 var manualChildTaskBar = 'e-gantt-child-manualtaskbar';
 var manualChildProgressBar = 'e-gantt-child-manualprogressbar';
 var manualParentRightResizer = 'e-gantt-manualparenttaskbar-right';
@@ -4108,25 +4093,29 @@ var weekend = 'e-weekend';
 var unscheduledTaskbarLeft = 'e-gantt-unscheduled-taskbar-left';
 var unscheduledTaskbarRight = 'e-gantt-unscheduled-taskbar-right';
 var unscheduledTaskbar = 'e-gantt-unscheduled-taskbar';
-var unscheduledMilestoneTop = 'e-unscheduled-milestone-top';
-var unscheduledMilestoneBottom = 'e-unscheduled-milestone-bottom';
+
+
 //Connector Line
 var dependencyViewContainer = 'e-gantt-dependency-view-container';
 var connectorLineContainer = 'e-connector-line-container';
-var connectorLine = 'e-line';
-var criticalConnectorLine = 'e-criticalconnector-line';
-var criticalConnectorLineRightArrow = 'e-criticalconnector-line-right-arrow';
-var criticalConnectorLineLeftArrow = 'e-criticalconnector-line-left-arrow';
-var connectorLineRightArrow = 'e-connector-line-right-arrow';
-var connectorLineLeftArrow = 'e-connector-line-left-arrow';
+
+var connectorLineSVG = 'e-connector-line';
+var criticalConnectorLineSVG = 'e-critical-line';
+var criticalConnectorArrowSVG = 'e-critical-line-arrow';
+var connectorLineArrow = 'e-connector-line-arrow';
+
+
+
+
+
 var connectorLineZIndex = 'e-connector-line-z-index';
-var connectorLineHover = 'e-connector-line-hover';
-var criticalConnectorLineHover = 'e-critical-connector-line-hover';
-var connectorLineHoverZIndex = 'e-connector-line-hover-z-index';
-var connectorLineRightArrowHover = 'e-connector-line-right-arrow-hover';
-var connectorLineLeftArrowHover = 'e-connector-line-left-arrow-hover';
-var criticalConnectorLineRightArrowHover = 'e-critical-connector-line-right-arrow-hover';
-var criticalConnectorLineLeftArrowHover = 'e-critical-connector-line-left-arrow-hover';
+
+
+
+
+
+
+
 
 var connectorPointLeft = 'e-connectorpoint-left';
 var connectorPointRight = 'e-connectorpoint-right';
@@ -4852,6 +4841,16 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         if (this.parent.isDestroyed || e.which === 3) {
             return;
         }
+        var resizeCheck = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-taskbar-resize-div');
+        if (!isNullOrUndefined(resizeCheck)) {
+            resizeCheck.remove();
+        }
+        var Check = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-clone-taskbar');
+        if (!isNullOrUndefined(Check)) {
+            var clonetbody = Check.parentElement;
+            var cloneTable = clonetbody.parentElement;
+            cloneTable.remove();
+        }
         var isTaskbarEdited = false;
         if (this.parent.editSettings.allowTaskbarEditing &&
             getValue('editModule.taskbarEditModule.isMouseDragged', this.parent) &&
@@ -5413,6 +5412,71 @@ var GanttChart = /** @__PURE__ @class */ (function () {
             $target.closest('.e-chart-row') ? $target.closest('.e-chart-row').rowIndex : -1;
         var isTab = (e.action === 'tab') ? true : false;
         var nextElement = this.getNextElement($target, isTab, isInEditedState);
+        if (nextElement && $target.classList.contains('e-headercell')) {
+            var colIndex = parseInt(nextElement.getAttribute('data-colindex'));
+            if (e.action === 'shiftTab') {
+                while (colIndex != -1 && !this.parent.treeGrid.columns[colIndex]['visible']) {
+                    colIndex = colIndex - 1;
+                }
+                if (colIndex != -1) {
+                    nextElement = document.getElementsByClassName('e-columnheader')[0].childNodes[colIndex];
+                }
+                else {
+                    var toolbarItems = document.getElementsByClassName('e-toolbar-item');
+                    for (var i = toolbarItems.length - 1; i > 0; i--) {
+                        if (!document.getElementsByClassName('e-toolbar-item')[i].classList.contains('e-hidden')) {
+                            nextElement = document.getElementsByClassName('e-toolbar-item')[i];
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                while (!this.parent.treeGrid.columns[colIndex]['visible']) {
+                    colIndex = colIndex + 1;
+                }
+                nextElement = document.getElementsByClassName('e-columnheader')[0].childNodes[colIndex];
+            }
+        }
+        if (!nextElement && e.action === 'shiftTab' && $target.classList.contains('e-headercell')) {
+            var toolbarItems = document.getElementsByClassName('e-toolbar-item');
+            for (var i = toolbarItems.length - 1; i > 0; i--) {
+                if (!document.getElementsByClassName('e-toolbar-item')[i].classList.contains('e-hidden')) {
+                    nextElement = document.getElementsByClassName('e-toolbar-item')[i];
+                    break;
+                }
+            }
+        }
+        if ($target.classList.contains('e-treegrid') && !nextElement) {
+            for (var i = 0; i < this.parent.treeGrid.columns.length; i++) {
+                if (this.parent.treeGrid.columns[i]['visible']) {
+                    nextElement = document.getElementsByClassName('e-columnheader')[0].childNodes[i];
+                    break;
+                }
+            }
+        }
+        if (!nextElement && $target.classList.contains('e-headercell')) {
+            nextElement = document.getElementsByClassName('e-timeline-header-container')[0];
+        }
+        if (e.action !== 'shiftTab' && $target.classList.contains('e-timeline-header-container')) {
+            for (var i = 0; i < this.parent.treeGrid.columns.length; i++) {
+                if (this.parent.treeGrid.columns[i]['visible']) {
+                    nextElement = document.getElementsByClassName('e-row')[0].childNodes[i];
+                    break;
+                }
+            }
+        }
+        if (e.action === 'shiftTab' && !nextElement) {
+            nextElement = document.getElementsByClassName('e-timeline-header-container')[0];
+        }
+        if (e.action === 'shiftTab' && $target.classList.contains('e-timeline-header-container')) {
+            for (var i = this.parent.treeGrid.columns.length - 1; i > 0; i--) {
+                if (this.parent.treeGrid.columns[i]['visible']) {
+                    nextElement = document.getElementsByClassName('e-columnheader')[0].childNodes[i];
+                    break;
+                }
+            }
+        }
         this.tempNextElement = nextElement;
         if (!isNullOrUndefined(nextElement) && !isNullOrUndefined(nextElement['cellIndex'])) {
             if (this.parent.allowRowDragAndDrop) {
@@ -5436,7 +5500,7 @@ var GanttChart = /** @__PURE__ @class */ (function () {
         }
         if (typeof nextElement !== 'string') {
             if ($target.classList.contains('e-rowcell') || $target.closest('.e-chart-row-cell') ||
-                $target.classList.contains('e-headercell') || $target.closest('.e-segmented-taskbar')) {
+                $target.classList.contains('e-headercell') || $target.closest('.e-segmented-taskbar') || $target.classList.contains('e-timeline-header-container')) {
                 e.preventDefault();
             }
             if (isTab && $target.classList.contains('e-rowdragdrop')) {
@@ -5472,11 +5536,21 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                         }
                     }
                     else {
-                        this.parent.treeGrid.grid.notify('key-pressed', e);
+                        if (!nextElement || nextElement && !nextElement.classList.contains('e-headercell')) {
+                            if ($target.classList.contains('e-headercell')) {
+                                this.manageFocus($target, 'remove', false);
+                            }
+                            if (!nextElement || $target.classList.contains('e-editedbatchcell')) {
+                                this.parent.treeGrid.grid.notify('key-pressed', e);
+                            }
+                        }
                     }
                 }
                 else {
-                    this.parent.treeGrid.grid.notify('key-pressed', e);
+                    if (!nextElement.classList.contains('e-headercell') && !nextElement.classList.contains('e-rowcell')
+                        && !nextElement.classList.contains('e-toolbar-item')) {
+                        this.parent.treeGrid.grid.notify('key-pressed', e);
+                    }
                 }
             }
             if (!(this.parent.editModule && this.parent.editModule.cellEditModule
@@ -5488,7 +5562,8 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                     else {
                         this.manageFocus($target, 'remove', true);
                     }
-                    if ((nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) || $target.classList.contains('e-right-label-container')) {
+                    if ((nextElement.classList.contains('e-rowcell') && $target.nextElementSibling && !$target.classList.contains('e-timeline-header-container'))
+                        || $target.classList.contains('e-right-label-container')) {
                         if (!$target.classList.contains('e-rowcell')) {
                             this.parent.treeGrid.grid.notify('key-pressed', e);
                             var fmodule = getValue('focusModule', this.parent.treeGrid.grid);
@@ -5500,7 +5575,17 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                         this.manageFocus(nextElement, 'add', false);
                     }
                     else {
-                        this.manageFocus(nextElement, 'add', true);
+                        if (nextElement && (nextElement.classList.contains('e-toolbar-item') || nextElement.classList.contains('e-headercell')
+                            || nextElement.classList.contains("e-rowcell"))) {
+                            this.manageFocus($target, 'remove', false);
+                            this.manageFocus(nextElement, 'add', false);
+                            if ($target.classList.contains('e-treegrid')) {
+                                e.preventDefault();
+                            }
+                        }
+                        else {
+                            this.manageFocus(nextElement, 'add', true);
+                        }
                     }
                     this.parent.focusModule.setActiveElement(nextElement);
                 }
@@ -5587,6 +5672,17 @@ var GanttChart = /** @__PURE__ @class */ (function () {
                 var childElement_1 = this.getChildElement(rowElement, isTab);
                 return childElement_1;
             }
+            nextElement = $target;
+            if (nextElement && nextElement.parentElement.classList.contains('e-toolbar-item') && this.parent.toolbarModule) {
+                while (nextElement && nextElement.parentElement.classList.contains('e-toolbar-item') && nextElement.parentElement.nextElementSibling.classList.contains('e-toolbar-item')) {
+                    if (nextElement.parentElement.nextElementSibling.classList.contains('e-hidden')) {
+                        nextElement = nextElement.parentElement.nextElementSibling.childNodes[0];
+                    }
+                    else {
+                        return nextElement.parentElement.nextElementSibling;
+                    }
+                }
+            }
         }
         return null;
     };
@@ -8119,7 +8215,7 @@ var GanttTreeGrid = /** @__PURE__ @class */ (function () {
         }
     }; // eslint-disable-next-line
     GanttTreeGrid.prototype.durationValueAccessor = function (field, data, column) {
-        var ganttProp = (!isNullOrUndefined(data)) ? data.ganttProperties : null;
+        var ganttProp = data.ganttProperties;
         if (!isNullOrUndefined(ganttProp)) {
             return this.parent.dataOperation.getDurationString(ganttProp.duration, ganttProp.durationUnit);
         }
@@ -9077,7 +9173,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.createChartTable = function () {
         this.taskTable = createElement('table', {
             className: taskTable + ' ' + zeroSpacing, id: 'GanttTaskTable' + this.parent.element.id,
-            styles: 'z-index: 2;position: absolute;width:' + this.parent.timelineModule.totalTimelineWidth + 'px;',
+            styles: 'position: absolute;width:' + this.parent.timelineModule.totalTimelineWidth + 'px;',
             attrs: { cellspacing: '0.25px' }
         });
         var colgroup = createElement('colgroup');
@@ -9161,7 +9257,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 taskbarInnerDiv = this.createDivElement('<div class="' + childTaskBarInnerDiv + ' ' + traceChildTaskBar +
                     ' ' + (data.ganttProperties.isAutoSchedule ? '' : manualChildTaskBar) + '"' +
                     'style="width:' + data.ganttProperties.width + 'px;height:' +
-                    (this.taskBarHeight) + 'px;"></div>');
+                    (this.taskBarHeight) + 'px; margin-top :-1px"></div>');
                 progressDiv = this.createDivElement('<div class="' + childProgressBarInnerDiv + ' ' +
                     traceChildProgressBar + ' ' + (data.ganttProperties.isAutoSchedule ?
                     '' : manualChildProgressBar) + '"' +
@@ -9640,15 +9736,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             milestoneNode = this.milestoneTemplateFunction(extend({ index: i }, data), this.parent, 'MilestoneTemplate', this.getTemplateID('MilestoneTemplate'), false, undefined, rootElement[0], this.parent.treeGrid['root']);
         }
         else {
-            var template = '<div class="' + traceMilestone + '" style="position:absolute;">' +
-                '<div class="' + milestoneTop + ' ' + ((!data.ganttProperties.startDate && !data.ganttProperties.endDate) ?
-                unscheduledMilestoneTop : '') + '" style="border-right-width:' +
-                this.milesStoneRadius + 'px;border-left-width:' + this.milesStoneRadius + 'px;border-bottom-width:' +
-                this.milesStoneRadius + 'px;"></div>' +
-                '<div class="' + milestoneBottom + ' ' + ((!data.ganttProperties.startDate && !data.ganttProperties.endDate) ?
-                unscheduledMilestoneBottom : '') + '" 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>';
+            var template = '<div class="' + traceMilestone + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;height:' +
+                ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;position:absolute;transform: rotate(45deg);top:' + (this.parent.rowHeight > 40 ? 0 : 2) + 'px;left:' + (this.parent.renderBaseline ? 2 : 1) + 'px;"> </div>';
             milestoneNode = this.createDivElement(template);
         }
         return milestoneNode;
@@ -9676,25 +9765,9 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.getMilestoneBaselineNode = function () {
         var data = this.templateData;
         var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
-        var template = '<div class="' + baselineMilestoneContainer + ' ' + '" style="' +
-            (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
-            'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) +
-            'px">' + '<div class="' + baselineMilestoneDiv + '">' + '<div class="' + baselineMilestoneDiv +
-            ' ' + baselineMilestoneTop + '"  ' +
-            'style="top:' + (-this.milestoneHeight) + 'px;border-right:' + this.milesStoneRadius +
-            'px solid transparent;border-left:' + this.milesStoneRadius +
-            'px solid transparent;border-top:0px' +
-            'solid transparent;border-bottom-width:' + this.milesStoneRadius + 'px;' +
-            'border-bottom-style: solid;' + (this.baselineColor ? 'border-bottom-color: ' + this.baselineColor + ';' : '') +
-            '"></div>' +
-            '<div class="' + baselineMilestoneDiv + ' ' + baselineMilestoneBottom + '"  ' +
-            'style="top:' + (this.milesStoneRadius - this.milestoneHeight) + 'px;border-right:' + this.milesStoneRadius +
-            'px solid transparent;border-left:' + this.milesStoneRadius +
-            'px solid transparent;border-bottom:0px' +
-            'solid transparent;border-top-width:' + this.milesStoneRadius + 'px;' +
-            'border-top-style: solid;' +
-            (this.baselineColor ? 'border-top-color: ' + this.baselineColor + ';' : '') + '"></div>' +
-            '</div></div>';
+        var template = '<div class="' + baselineMilestoneContainer + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight - 5 : this.taskBarHeight - 10) + 2) + 'px;height:' +
+            ((this.parent.renderBaseline ? this.taskBarHeight - 5 : this.taskBarHeight - 10) + 2) + 'px;position:absolute;transform:rotate(45deg);' + (this.parent.enableRtl ? 'right:' : 'left:') + (this.parent.enableRtl ? (data.ganttProperties.left -
+            (this.milestoneHeight / 2) + 3) : (data.ganttProperties.left - (this.milestoneHeight / 2) + 2)) + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + 'margin-top:' + ((-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) + 3) + 'px"> </div>';
         return this.createDivElement(template);
     };
     /**
@@ -9820,16 +9893,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
             (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.width - Math.floor(((taskbarHeight / 5) + 8) / 5)) + 'px;height:' +
             ((taskbarHeight / 5) + 8) + 'px;border-right-width:' + taskbarHeight / 5 + 'px;border-bottom:' +
             taskbarHeight / 5 + 'px solid transparent;>' + '</div></div>' : '');
-        var milestoneTemplate = '<div class="' + manualParentMilestone + '" style="position:absolute;' +
-            (this.parent.enableRtl ? 'right:' : 'left:') +
-            (data.ganttProperties.left - data.ganttProperties.autoLeft - (this.milestoneHeight / 2)) +
-            'px;width:' + (this.milesStoneRadius * 2) +
-            'px;">' + '<div class="' + manualParentMilestoneTop + '" style="border-right-width:' +
-            this.milesStoneRadius + 'px;border-left-width:' + this.milesStoneRadius + 'px;border-bottom-width:' +
-            this.milesStoneRadius + 'px;"></div>' +
-            '<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>';
+        var milestoneTemplate = '<div class="' + manualParentMilestone + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;height:' +
+            ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;position:absolute;transform: rotate(45deg);top:' + (this.parent.rowHeight > 40 ? 0 : 2) + 'px;left:' + (this.parent.renderBaseline ? 2 : 1) + 'px;"> </div>';
         return this.createDivElement(data.ganttProperties.duration !== 0 ? template : milestoneTemplate);
     };
     /**
@@ -9854,8 +9919,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 this.getExpandClass(data) + ' ' + traceParentTaskBar + '"' +
                 ' style="width:' + (data.ganttProperties.isAutoSchedule ? data.ganttProperties.width :
                 data.ganttProperties.autoWidth) + 'px;height:' + (data.ganttProperties.isAutoSchedule ? this.taskBarHeight :
-                (tHeight * 3)) + 'px;margin-top:' + (data.ganttProperties.isAutoSchedule ? '' :
-                (tHeight * 2)) + 'px;">' +
+                (tHeight * 3)) + 'px;margin-top:' + (data.ganttProperties.isAutoSchedule ? -1 :
+                (tHeight * 2)) + 'px; ">' +
                 '</div>');
             var progressBarInnerDiv = this.createDivElement('<div class="' + parentProgressBarInnerDiv + ' ' +
                 this.getExpandClass(data) + ' ' + traceParentProgressBar + '"' +
@@ -9920,13 +9985,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                     parentLabel && !parentLabel['elementRef'] && div.innerHTML !== '')
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent = parentLabel;
             }
-            var milestoneTemplate = '<div class="' + parentMilestone + '" style="position:absolute;">' +
-                '<div class="' + parentMilestoneTop + '" style="border-right-width:' +
-                this.milesStoneRadius + 'px;border-left-width:' + this.milesStoneRadius + 'px;border-bottom-width:' +
-                this.milesStoneRadius + 'px;"></div>' +
-                '<div class="' + parentMilestoneBottom + '" 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>';
+            var milestoneTemplate = '<div class="' + parentMilestone + '" style="width:' + ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;height:' +
+                ((this.parent.renderBaseline ? this.taskBarHeight - 3 : this.taskBarHeight - 7)) + 'px;position:absolute;transform: rotate(45deg);top:' + (this.parent.rowHeight > 40 ? 0 : 2) + 'px;left:' + (this.parent.renderBaseline ? 2 : 1) + 'px;"> </div>';
             template[0].appendChild([].slice.call(progressBarInnerDiv)[0]);
             parentTaskbarNode = data.ganttProperties.isMilestone ?
                 this.createDivElement(data.ganttProperties.isAutoSchedule ? milestoneTemplate : '') : template;
@@ -10303,8 +10363,8 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         this.milestoneMarginTop = Math.floor((this.parent.rowHeight - this.milestoneHeight) / 2);
         this.milesStoneRadius = Math.floor((this.milestoneHeight) / 2);
         this.baselineTop = -(Math.floor((this.parent.rowHeight - (this.taskBarHeight + this.taskBarMarginTop))) - 4);
-        this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 8;
-        this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2));
+        this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 10;
+        this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2)) - 1;
     };
     /**
      * Function used to refresh Gantt rows.
@@ -10373,7 +10433,6 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 var tempTemplateData = this.parent.currentViewData[i];
                 if (this.parent.viewType === 'ResourceView') {
                     if (this.parent.editModule && this.parent.editModule.isResourceTaskDeleted || this.parent.isFromOnPropertyChange) {
-                        this.parent.initialChartRowElements = this.parent.ganttChartModule.getChartRows();
                         this.parent.editModule.isResourceTaskDeleted = false;
                     }
                     if (!tempTemplateData.expanded && this.parent.enableMultiTaskbar) {
@@ -10392,11 +10451,12 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             (_a = this.ganttChartTableBody).replaceChildren.apply(_a, dupChartBody.childNodes);
+            this.parent.initialChartRowElements = this.parent.ganttChartModule.getChartRows();
         }
         this.parent.renderTemplates();
         this.triggerQueryTaskbarInfo();
         this.parent.modifiedRecords = [];
-        if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation) {
+        if (this.parent.viewType == 'ResourceView' && this.parent.showOverAllocation) {
             this.updateOverlapped();
         }
         if (collapsedResourceRecord.length) {
@@ -10469,7 +10529,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         else if (this.templateData.ganttProperties.isMilestone) {
             var milestoneTemplateNode = this.getMilestoneNode(i, taskbarContainerNode);
             if (milestoneTemplateNode && milestoneTemplateNode.length > 0) {
-                taskbarContainerNode[0].appendChild([].slice.call(milestoneTemplateNode)[0]);
+                append(milestoneTemplateNode, taskbarContainerNode[0]);
             }
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
@@ -10646,9 +10706,9 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         var classCollections = this.getClassName(args);
         if (args.taskbarType === 'Milestone') {
             args.milestoneColor = taskbarElement.querySelector(classCollections[0]) ?
-                getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderBottomColor : null;
+                getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor : null;
             args.baselineColor = trElement.querySelector(classCollections[1]) ?
-                getComputedStyle(trElement.querySelector(classCollections[1])).borderBottomColor :
+                getComputedStyle(trElement.querySelector(classCollections[1])).backgroundColor :
                 (trElement.querySelector('.' + baselineBar) ? getComputedStyle(trElement.querySelector('.' + baselineBar)).backgroundColor : null);
         }
         else if (taskbarElement) {
@@ -10716,14 +10776,12 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
         }
         if (args.taskbarType === 'Milestone') {
             if (taskbarElement.querySelector(classCollections[0]) &&
-                getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderBottomColor !== args.milestoneColor) {
-                taskbarElement.querySelector(classCollections[0]).style.borderBottomColor = args.milestoneColor;
-                taskbarElement.querySelector('.' + milestoneBottom).style.borderTopColor = args.milestoneColor;
+                getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor !== args.milestoneColor) {
+                taskbarElement.querySelector(classCollections[0]).style.backgroundColor = args.milestoneColor;
             }
             if (trElement.querySelector(classCollections[1]) &&
-                getComputedStyle(trElement.querySelector(classCollections[1])).borderTopColor !== args.baselineColor) {
-                trElement.querySelector(classCollections[1]).style.borderBottomColor = args.baselineColor;
-                trElement.querySelector('.' + baselineMilestoneBottom).style.borderTopColor = args.baselineColor;
+                getComputedStyle(trElement.querySelector(classCollections[1])).backgroundColor !== args.baselineColor) {
+                trElement.querySelector(classCollections[1]).style.backgroundColor = args.baselineColor;
             }
             if (trElement.querySelector('.' + baselineBar) &&
                 getComputedStyle(trElement.querySelector('.' + baselineBar)).borderTopColor !== args.baselineColor) {
@@ -10804,9 +10862,9 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.getClassName = function (args) {
         var classCollection = [];
         classCollection.push('.' + (args.taskbarType === 'ParentTask' ?
-            traceParentTaskBar : args.taskbarType === 'ChildTask' ? traceChildTaskBar : milestoneTop));
+            traceParentTaskBar : args.taskbarType === 'ChildTask' ? traceChildTaskBar : traceMilestone));
         classCollection.push('.' + (args.taskbarType === 'ParentTask' ?
-            traceParentProgressBar : args.taskbarType === 'ChildTask' ? traceChildProgressBar : baselineMilestoneTop));
+            traceParentProgressBar : args.taskbarType === 'ChildTask' ? traceChildProgressBar : baselineMilestoneContainer));
         return classCollection;
     };
     /**
@@ -10819,7 +10877,7 @@ var ChartRows = /** @__PURE__ @class */ (function (_super) {
     ChartRows.prototype.templateCompiler = function (template) {
         if (!isNullOrUndefined(template) && template !== '') {
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim(), this.parent);
                 }
                 else {
@@ -11974,11 +12032,28 @@ var Dependency = /** @__PURE__ @class */ (function () {
  */
 var ConnectorLine = /** @__PURE__ @class */ (function () {
     function ConnectorLine(ganttObj) {
+        this.transform = '';
+        this.connectorLinePath = '';
+        this.arrowPath = '';
         this.expandedRecords = [];
         this.parent = ganttObj;
         this.dependencyViewContainer =
-            createElement('div', { className: dependencyViewContainer });
+            createElement('div', { className: dependencyViewContainer,
+            });
+        Object.assign(this.dependencyViewContainer.style, {
+            width: "100%",
+            height: "100%",
+            zIndex: 2,
+            position: "absolute",
+            pointerEvents: "none"
+        });
+        this.renderer = new SvgRenderer(this.parent.element.id);
         this.initPublicProp();
+        this.svgObject = this.renderer.createSvg({
+            id: this.parent.element.id + '_svg'
+        });
+        this.svgObject.setAttribute('height', '100%');
+        this.svgObject.setAttribute('width', '100%');
     }
     /**
      * To get connector line gap.
@@ -12007,7 +12082,7 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
     };
     ConnectorLine.prototype.getTaskbarMidpoint = function (isMilestone) {
         return Math.floor(isMilestone ?
-            (this.parent.chartRowsModule.milestoneMarginTop + (this.parent.chartRowsModule.milestoneHeight / 2)) :
+            (this.parent.chartRowsModule.milestoneMarginTop + (this.parent.chartRowsModule.milestoneHeight / 2)) + 1 :
             (this.parent.chartRowsModule.taskBarMarginTop + (this.parent.chartRowsModule.taskBarHeight / 2))) + 1;
     };
     /**
@@ -12056,6 +12131,10 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             connectorObj.connectorLineId = 'parent' + parentId + 'child' + childId;
             connectorObj.milestoneParent = parentGanttRecord.isMilestone ? true : false;
             connectorObj.milestoneChild = childGanttRecord.isMilestone ? true : false;
+            connectorObj.isManualParent = (!(this.parent.flatData[parentIndex].ganttProperties.isAutoSchedule) && this.parent.flatData[parentIndex].hasChildRecords);
+            connectorObj.isManualChild = (!(this.parent.flatData[childIndex].ganttProperties.isAutoSchedule) && this.parent.flatData[childIndex].hasChildRecords);
+            connectorObj.parentEndPoint = connectorObj.parentLeft + connectorObj.parentWidth;
+            connectorObj.childEndPoint = connectorObj.childLeft + connectorObj.childWidth;
             if (isNullOrUndefined(isScheduledTask(parentGanttRecord)) || isNullOrUndefined(isScheduledTask(childGanttRecord))) {
                 return null;
             }
@@ -12078,8 +12157,8 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             connectorLine$$1 = connectorLine$$1 + this.getConnectorLineTemplate(connectorLinesCollection[index]);
             ariaConnector.push(connectorLinesCollection[index]);
         }
-        this.dependencyViewContainer.innerHTML = connectorLine$$1;
-        var childNodes = this.parent.connectorLineModule.dependencyViewContainer.childNodes;
+        this.svgObject.innerHTML = connectorLine$$1;
+        var childNodes = this.parent.connectorLineModule.svgObject.childNodes;
         for (var i = 0; i < childNodes.length; i++) {
             var innerChild = childNodes[i].childNodes;
             for (var j = 0; j < innerChild.length; j++) {
@@ -12087,9 +12166,10 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
                 innerChild[j].setAttribute('aria-label', ariaString);
             }
         }
-        this.parent.ganttChartModule.chartBodyContent.appendChild(this.dependencyViewContainer);
-        for (var i = 0; i < this.dependencyViewContainer.children.length; i++) {
-            this.dependencyViewContainer.children[i].children[0].setAttribute('tabindex', '-1');
+        this.parent.ganttChartModule.chartBodyContent.insertBefore(this.dependencyViewContainer, this.parent.ganttChartModule.chartBodyContent.lastChild);
+        this.dependencyViewContainer.appendChild(this.svgObject);
+        for (var i = 0; i < this.svgObject.children.length; i++) {
+            this.svgObject.children[i].children[0].setAttribute('tabindex', '-1');
         }
     };
     /**
@@ -12347,16 +12427,15 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
         var height = this.getHeightValue(data);
         var isMilestoneParent = data.milestoneParent ? true : false;
         var isMilestone = data.milestoneChild ? true : false;
-        var connectorContainer = '';
         var isVirtual = this.parent.virtualScrollModule && this.parent.enableVirtualization;
         var connectorLine$$1 = this.getPosition(data, this.getParentPosition(data), height);
+        var rowPosition = this.getPosition(data, this.getParentPosition(data), height);
+        var rowPositionHeight = rowPosition.top;
         var isMilestoneValue = 0;
         if (this.parent.renderBaseline) {
             isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
         }
         var heightValue = isVirtual ? connectorLine$$1.height : (height + isMilestoneValue);
-        var borderTopWidth = 0;
-        var addTop = 0;
         var parentOverlapTopValue = 0;
         var childOverlapTopValue = 0;
         var count = 0;
@@ -12393,454 +12472,318 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
             }
             if (isValid) {
                 if (((fromRecordIsParent && !fromRecordIsManual) && (toRecordIsParent && !toRecordIsManual))) {
-                    addTop = -11;
+                    
                 }
                 else if (!((fromRecordIsParent && !fromRecordIsManual) && (toRecordIsParent && !toRecordIsManual))) {
                     if (data.childIndex > data.parentIndex) {
-                        if (!fromRecordIsParent && toRecordIsParent) {
-                            borderTopWidth = -11;
-                        }
-                        else {
-                            borderTopWidth = 11;
-                            addTop = -11;
-                        }
+                        
                     }
                     else {
-                        if ((fromRecordIsParent && !toRecordIsParent)) {
-                            borderTopWidth = -11;
-                        }
-                        else {
-                            borderTopWidth = 11;
-                            addTop = -11;
-                        }
+                        
                     }
                 }
                 if (this.parent.currentViewData[data.parentIndex].ganttProperties.isMilestone) {
                     if (data.parentIndex > data.childIndex) {
-                        addTop = -5;
-                        borderTopWidth = 10;
+                        
                     }
                     else if (data.type === 'SS' || data.type === 'FF') {
-                        addTop = -5;
+                        
                     }
                 }
                 else if (this.parent.currentViewData[data.childIndex].ganttProperties.isMilestone) {
                     if (data.parentIndex > data.childIndex) {
-                        addTop = 5;
-                        borderTopWidth = -10;
+                        
                     }
                     else if (data.type === 'SS' || data.type === 'FF') {
-                        addTop = 5;
+                        
                     }
                 }
             }
         }
         if (this.getParentPosition(data)) {
-            connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
-            var div = '<div class="' + connectorLineContainer +
-                '" tabindex="-1" style="';
-            var direction = this.parent.enableRtl ? 'right:' : 'left:';
-            var eLine = '<div class="' + connectorLine + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var rightArrow = void 0;
-            var leftArrow = void 0;
-            if (this.parent.enableRtl) {
-                leftArrow = '<div class="' + connectorLineRightArrow + '" style="' +
-                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-                rightArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
-                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            }
-            else {
-                rightArrow = '<div class="' + connectorLineRightArrow + '" style="' +
-                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-                leftArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
-                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            }
-            var duplicateStingOne = leftArrow + (isMilestone ? (this.parent.enableRtl ? 'right:0px;' : 'left:0px;') : '') +
-                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10) +
-                'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
-                'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
-            var duplicateStingTwo = this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
-                'top:' + (-6) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
-                'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
-            var duplicateStingThree = this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>' + eLine +
-                'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
-            var duplicateStingFour = leftArrow + (this.parent.enableRtl ? 'right:' : 'left:') +
-                (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
-                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10);
-            var duplicateStingFive = 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;' +
-                this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
+            // Create the group element
+            this.transform = this.parent.enableRtl ? "translate(" + this.parent.timelineModule.totalTimelineWidth + ", 0) scale(-1, 1)" : '';
+            this.connectorId = "ConnectorLine" + data.connectorLineId;
+            this.groupObject = this.renderer.createGroup({
+                id: this.connectorId,
+                transform: this.transform,
+                style: 'pointer-events: stroke',
+                class: connectorLineContainer,
+            });
+            //  Create the path element for the connector line
+            this.connectorPath = this.renderer.drawPath({
+                class: connectorLineSVG,
+                d: this.connectorLinePath,
+                fill: 'transparent',
+                "stroke-width": 1,
+            });
+            // Create the path element for the arrow
+            this.arrowlinePath = this.renderer.drawPath({
+                d: this.arrowPath,
+                class: connectorLineArrow
+            });
+            // Append the path element to the group element
+            this.groupObject.appendChild(this.connectorPath);
+            this.groupObject.appendChild(this.arrowlinePath);
             if (this.getParentPosition(data) === 'FSType1') {
-                div = div + direction + (data.parentLeft + data.parentWidth) + '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="FSType1">';
-                div = div + eLine;
-                div = div + direction + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
-                    ((((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10) + 1) :
-                    (((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
-                    'width:0px;' + this.getBorderStyles('right', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + rightArrow;
-                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
-                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
-                    'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
+                this.taskLineValue = data.milestoneChild ? 1 : 0;
+                this.x1 = data.parentEndPoint + (data.milestoneParent ? -1 : (data.milestoneChild ? -1 : 0));
+                this.x2 = data.milestoneParent ? ((((data.childLeft - (data.parentEndPoint + 10)) + 1) - 10) + 1) : (((data.childLeft - (data.parentEndPoint + 10))) - 10);
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = heightValue + this.taskLineValue;
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x1 + this.x2) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x1 + this.x2) + " " + (this.y1 + this.y2) +
+                    " L " + (this.x1 + this.x2 + 11) + " " + (this.y1 + this.y2);
+                this.arrowPath = "M " + (this.x1 + this.x2 + 18) + " " + (this.y1 + this.y2 + this.manualChild) +
+                    " L " + (this.x1 + this.x2 + 11) + " " + (this.y1 + this.y2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + this.x2 + 11) + " " + (this.y1 + this.y2 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FSType2') {
-                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;
-                div = div + direction + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
-                    (isMilestoneParent ? 11 : 10) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
-                    this.getBorderStyles('left', this.lineStroke) + 'width:0px;' +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
-                    'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (data.parentWidth - (((data.parentLeft +
-                    data.parentWidth) - data.childLeft) + 20)) + 'px;width:0px;' +
-                    this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) +
-                    this.getBorderStyles('left', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (data.parentWidth - (((data.parentLeft +
-                    data.parentWidth) - data.childLeft) + 20)) + 'px;width:10px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + rightArrow;
-                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
-                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
-                    'border-top-width:' + (5 + this.lineStroke) + 'px;top:' + (-6 - this.lineStroke) +
-                    'px;width:0;height:0;position:relative;"></div></div>';
+                this.taskLineValue = data.milestoneChild ? 1 : 0;
+                this.x1 = data.parentLeft + (data.milestoneChild ? -1 : 0);
+                this.x2 = data.parentWidth + (data.milestoneParent ? 1 : 0);
+                this.x3 = this.x2 + (data.milestoneParent ? 11 : 10);
+                this.x4 = data.parentWidth - ((data.parentEndPoint - data.childLeft) + 20);
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = heightValue - this.getconnectorLineGap(data) + this.taskLineValue;
+                this.y3 = this.getconnectorLineGap(data);
+                this.y4 = this.y1 + this.y2 - ((this.y1 + this.y2) % data.rowHeight);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + this.x2) + " " + (this.y1 + this.manualParent + this.manualChild) + " " + " L " + (this.x1 + this.x3) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x1 + this.x3) + " " + this.y4 +
+                    " L " + (this.x1 + this.x4) + " " + this.y4 + " L " + (this.x1 + this.x4) + " " + (this.y1 + this.y2 + this.y3) + " L " + (this.x1 + this.x4 + 11) + " " + (this.y1 + this.y2 + this.y3);
+                this.arrowPath = "M " + (this.x1 + this.x4 + 18) + " " + (this.y1 + this.y2 + this.y3 + this.manualChild) +
+                    " L " + (this.x1 + this.x4 + 11) + " " + (this.y1 + this.y2 + this.y3 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + this.x4 + 11) + " " + (this.y1 + this.y2 + this.y3 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FSType3') {
-                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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) +
-                    'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) + 'px;' +
-                    'top:' + (-6) + 'px;width:0;height:0;position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) +
-                    'position:relative;top:' + (-(6 + (5 + this.lineStroke) + Math.round(this.lineStroke / 2))) + 'px;"></div>';
-                div = div + eLine;
-                div = div + 'width:' + this.lineStroke + 'px;' + this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke + 1)) +
-                    'position:relative;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
-                div = div + eLine;
-                div = div + 'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
-                    (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
-                div = div + eLine;
-                div = div + direction + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
-                    'px;width:0px;' + 'height:' + (this.getconnectorLineGap(data) - this.lineStroke) + 'px;' +
-                    this.getBorderStyles('left', this.lineStroke) + 'position:relative;' +
-                    'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
-                div = div + eLine;
-                div = div + (isMilestoneParent ? direction + (((data.parentLeft +
-                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : direction +
-                    (((data.parentLeft + data.parentWidth) - data.childLeft) + 20) + 'px;width:10px;') +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
-                    (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div></div>';
+                this.taskLineValue = data.milestoneChild ? 1 : 0;
+                this.point1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild));
+                this.x1 = (data.childLeft + (data.milestoneChild ? -1 : 0) + (data.milestoneParent ? 1 : 0)) - 20;
+                this.x2 = (data.parentEndPoint - data.childLeft) + 30;
+                this.y1 = this.point1 + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.point1 + heightValue - this.getconnectorLineGap(data) + this.taskLineValue + (this.parent.renderBaseline ? (data.milestoneChild ? -10 : 0) : 0);
+                this.y3 = this.getconnectorLineGap(data) + (this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.y4 = this.y2 - (this.y2 % data.rowHeight);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + 12) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + this.y4 +
+                    " L " + (this.x1 + this.x2) + " " + this.y4 + " L " + (this.x1 + this.x2) + " " + (this.y2 + this.y3) + " L " + (this.x1 + this.x2 - 12) + " " + (this.y2 + this.y3);
+                this.arrowPath = "M " + (this.x1 + 18) + " " + (this.y1 + this.manualChild) +
+                    " L " + (this.x1 + 11) + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + 11) + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FSType4') {
-                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;' +
-                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6) + 'px;' +
-                    'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
-                    (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
-                    'px;top:' + (-(6 + (5 + this.lineStroke) + Math.round(this.lineStroke / 2))) + 'px;width:10px;' +
-                    this.getBorderStyles('top', this.lineStroke) +
-                    'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' + direction +
-                    (data.childLeft - (data.parentLeft + data.parentWidth) - 20) + 'px;width:0px;' +
-                    this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'top:' +
-                    (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
-                    (isMilestoneParent ? ((data.childLeft - (data.parentLeft + data.parentWidth + 20) + 1) + this.lineStroke) :
-                        ((data.childLeft - (data.parentLeft + data.parentWidth + 20)) + this.lineStroke)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.point1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild));
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : 0;
+                this.x1 = data.parentEndPoint + (data.milestoneChild ? -1 : 0) + (data.milestoneParent ? 1 : 0);
+                this.x2 = data.childLeft - data.parentEndPoint - 20;
+                this.y1 = this.point1 + (data.milestoneChild ? 1 : 0) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.point1 + heightValue + this.taskLineValue + (this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + this.x2 + 11) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x1 + this.x2) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x1 + this.x2) + " " + this.y2 +
+                    " L " + this.x1 + " " + this.y2;
+                this.arrowPath = "M " + (this.x1 + this.x2 + 18) + " " + (this.y1 + this.manualChild) +
+                    " L " + (this.x1 + this.x2 + 11) + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + this.x2 + 11) + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SSType4') {
-                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;
-                div = div + eLine;
-                div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:' +
-                    (data.childLeft - data.parentLeft) + 'px;' + duplicateStingThree;
-                div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:10px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : 0;
+                this.point1 = heightValue + this.taskLineValue;
+                this.point2 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild));
+                this.x1 = data.parentLeft - 8;
+                this.x2 = data.childLeft - data.parentLeft;
+                this.y1 = this.point2 + (data.milestoneChild ? 1 : 0) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.y1 + this.point1 + (this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + this.x2) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) +
+                    " L " + this.x1 + " " + this.y2 + " L " + (this.x1 + 10) + " " + this.y2;
+                this.arrowPath = "M " + (this.x1 + this.x2 + 8) + " " + (this.y1 + this.manualChild) +
+                    " L " + (this.x1 + this.x2) + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + this.x2) + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SSType3') {
-                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;
-                div = div + eLine;
-                div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:10px;' + duplicateStingThree;
-                div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
-                    (data.parentLeft - data.childLeft + 21) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : data.milestoneChild ? 1 : 0;
+                this.point1 = heightValue + this.taskLineValue;
+                this.x1 = data.childLeft - 20;
+                this.y1 = (data.milestoneChild ? 1 : 0) + ((this.parent.enableVirtualization ? rowPositionHeight : (!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild))) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.x2 = data.parentLeft - data.childLeft + 21;
+                this.y2 = this.y1 + this.point1 + (this.parent.renderBaseline ? (data.milestoneChild ? -11 : data.milestoneParent ? 10 : 0) : 0);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + 12) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) +
+                    " L " + this.x1 + " " + this.y2 + " L " + (this.x1 + this.x2) + " " + this.y2;
+                this.arrowPath = "M " + (this.x1 + 20) + " " + (this.y1 + this.manualChild) +
+                    " L " + (this.x1 + 12) + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + 12) + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SSType2') {
-                div = div + direction + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:' + setInnerElementWidthSSType2 + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + rightArrow;
-                div = div + direction + setInnerElementWidthSSType2 + 'px;' +
-                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
-                    'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
-                    (5 + this.lineStroke) + 'px;width:0;' +
-                    'height:0;position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : data.milestoneChild ? 1 : 0;
+                this.point1 = heightValue + this.taskLineValue;
+                this.x1 = setInnerElementLeftSSType2;
+                this.x2 = setInnerChildWidthSSType2 + 1;
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.y1 + this.point1;
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + this.x2) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + this.y2 +
+                    " L " + (this.x1 + setInnerElementWidthSSType2) + " " + this.y2;
+                this.arrowPath = "M " + (this.x1 + setInnerElementWidthSSType2 + 8) + " " + (this.y2 + this.manualChild) +
+                    " L " + (this.x1 + setInnerElementWidthSSType2) + " " + (this.y2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + setInnerElementWidthSSType2) + " " + (this.y2 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SSType1') {
-                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;
-                div = div + 'width:' + (data.parentLeft - data.childLeft + 21) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + rightArrow;
-                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
-                    'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
-                    'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : data.milestoneChild ? 1 : 0;
+                this.point1 = heightValue + this.taskLineValue;
+                this.x1 = data.childLeft - 20;
+                this.x2 = data.parentLeft - data.childLeft + 21;
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + +((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.y1 + this.point1;
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + this.x2) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + this.y2 +
+                    " L " + (this.x1 + 12) + " " + this.y2;
+                this.arrowPath = "M " + (this.x1 + 20) + " " + (this.y2 + this.manualChild) +
+                    " L " + (this.x1 + 12) + " " + (this.y2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + 12) + " " + (this.y2 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FFType1') {
-                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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) -
-                    (data.childLeft + data.childWidth)) - 1) : ((data.parentLeft + data.parentWidth) -
-                    (data.childLeft + data.childWidth))) + 'px;' +
-                    'width:' + (isMilestoneParent ? (21 + this.lineStroke) : (20 + this.lineStroke)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (((data.parentLeft + data.parentWidth) -
-                    (data.childLeft + data.childWidth)) + 20) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
-                    (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (16 + this.lineStroke)) :
-                    (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (10 + this.lineStroke))) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + leftArrow;
-                div = div + (isMilestone ? direction + '0px;' : '') + this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) +
-                    'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
-                    'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : (data.milestoneChild ? 1 : 0);
+                this.x1 = data.childEndPoint;
+                this.x2 = data.parentEndPoint + (data.milestoneParent ? -1 : 0);
+                this.x3 = data.milestoneParent ? 22 : 21;
+                this.x4 = data.milestoneChild ? 4 : 8;
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = heightValue + this.taskLineValue;
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x2 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x2 + this.x3) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x2 + this.x3) + " " + (this.y1 + this.y2) +
+                    " L " + (this.x1 + this.x4) + " " + (this.y1 + this.y2);
+                this.arrowPath = "M " + this.x1 + " " + (this.y1 + this.y2 + this.manualChild) +
+                    " L " + (this.x1 + 8) + " " + (this.y1 + this.y2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + 8) + " " + (this.y1 + this.y2 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FFType2') {
-                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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:' +
-                    (isMilestoneParent ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) +
-                        (21 + this.lineStroke)) : (((data.childLeft + data.childWidth) -
-                        (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke))) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
-                    'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) +
-                    'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
-                    (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 10)) + 'px;' +
-                    'width:' + (isMilestone ? (16 + this.lineStroke) : (10 + this.lineStroke)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + leftArrow;
-                div = div + direction + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
-                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
-                    'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) +
-                    'px;width:0;height:0;position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : (data.milestoneChild ? 1 : 0);
+                this.x1 = data.parentEndPoint;
+                this.x2 = data.childEndPoint + (data.milestoneParent ? 22 : 21);
+                this.x3 = data.childEndPoint + (data.milestoneChild ? 9 : 8);
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = heightValue + this.taskLineValue;
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x2 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x2 + " " + (this.y1 + this.y2) +
+                    " L " + this.x3 + " " + (this.y1 + this.y2);
+                this.arrowPath = "M " + (this.x3 - 8) + " " + (this.y1 + this.y2 + this.manualChild) +
+                    " L " + this.x3 + " " + (this.y1 + this.y2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + this.x3 + " " + (this.y1 + this.y2 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FFType3') {
-                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;
-                div = div + (isMilestone ? (direction + '4px;width:' +
-                    (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 16)) :
-                    (direction + '10px;width:' + (((data.parentLeft + data.parentWidth) -
-                        (data.childLeft + data.childWidth)) + 10))) + 'px;top:' + (-(6 + (5 + this.lineStroke) +
-                    (this.lineStroke / 2))) + 'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
-                    'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
-                    'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + (isMilestoneParent ? (direction + (((data.parentLeft + data.parentWidth) -
-                    (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : (direction + ((data.parentLeft + data.parentWidth) -
-                    (data.childLeft + data.childWidth)) + 'px;width:20')) +
-                    'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : 0;
+                this.x1 = data.childEndPoint;
+                this.x2 = this.x1 + (data.milestoneChild ? 4 : 8);
+                this.x3 = data.parentEndPoint - data.childEndPoint + (data.milestoneChild ? 16 : 10);
+                this.x4 = data.parentEndPoint + (data.milestoneParent ? -1 : 0);
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = heightValue + this.taskLineValue + (this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x2 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x2 + this.x3) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x2 + this.x3) + " " + (this.y1 + this.y2) +
+                    " L " + this.x4 + " " + (this.y1 + this.y2);
+                this.arrowPath = "M " + this.x1 + " " + (this.y1 + this.manualChild) +
+                    " L " + (this.x1 + 8) + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + 8) + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'FFType4') {
-                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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) -
-                    (data.parentLeft + data.parentWidth))) + 'px;' +
-                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
-                    'border-bottom-width:' + (5 + this.lineStroke) +
-                    'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
-                    'position:relative;"></div>';
-                div = div + eLine;
-                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft + data.parentWidth)) + 4) +
-                    'px;width:' + (16 + this.lineStroke)) : (direction + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft + data.parentWidth)) + 10) + 'px;width:' + (10 + this.lineStroke))) +
-                    'px;' + duplicateStingFive;
-                div = div + eLine;
-                div = div + direction + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft + data.parentWidth)) + 20) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) +
-                    'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + (isMilestoneParent ? (direction + '-1px;width:' + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft + data.parentWidth)) + (21 + this.lineStroke))) : ('width:' + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke)))) + 'px;top:' +
-                    (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : 0;
+                this.x1 = data.parentEndPoint;
+                this.x2 = data.childEndPoint + (data.milestoneChild ? 7 : 8);
+                this.x3 = this.x2 + (data.milestoneChild ? 12 : 11);
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild)) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = heightValue + this.taskLineValue + +(this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x2 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x3 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x3 + " " + (this.y1 + this.y2) +
+                    " L " + this.x1 + " " + (this.y1 + this.y2);
+                this.arrowPath = "M " + (this.x2 - 8) + " " + (this.y1 + this.manualChild) +
+                    " L " + this.x2 + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + this.x2 + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SFType4') {
-                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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) +
-                    'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
-                    'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
-                    'px;width:16') : ((((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' +
-                    (10 + this.lineStroke))) + 'px;' + duplicateStingFive;
-                div = div + eLine;
-                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
-                    (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
-                    (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
-                    this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:11px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : (data.milestoneChild ? -1 : 0);
+                this.point1 = heightValue - this.getconnectorLineGap(data) + this.taskLineValue;
+                this.point2 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild));
+                this.x1 = data.parentLeft - 10;
+                this.x2 = this.x1 + ((data.childEndPoint - data.parentLeft) + 18);
+                this.x3 = this.x2 + (data.milestoneChild ? 16 : 11);
+                this.y1 = this.point2 + (data.milestoneChild ? 1 : 0) + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.y1 + this.point1 + (this.parent.renderBaseline ? (data.milestoneChild ? -11 : 0) : 0);
+                this.y3 = this.getconnectorLineGap(data) + (this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.y4 = this.y2 - (this.y2 % data.rowHeight);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x2 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x3 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x3 + " " + this.y4 + " L " + this.x1 + " " + this.y4 +
+                    " L " + this.x1 + " " + (this.y2 + this.y3) + " L " + (this.x1 + 11) + " " + (this.y2 + this.y3);
+                this.arrowPath = "M " + (this.x2 - 8) + " " + (this.y1 + this.manualChild) +
+                    " L " + this.x2 + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + this.x2 + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SFType3') {
-                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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;
-                div = div + (isMilestone ? direction + '4px;width:' + (16 + this.lineStroke) : direction + '10px;width:' +
-                    (10 + this.lineStroke)) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2) - 1)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
-                    this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
-                    ((data.parentLeft - (data.childLeft + data.childWidth + 20)) + this.lineStroke) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : 0;
+                this.point1 = (data.parentLeft - (data.childEndPoint + (data.milestoneParent ? 25 : 20))) + 1 + (this.parent.renderBaseline ? (data.milestoneParent ? 5 : 0) : 0);
+                this.point2 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.childIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneChild));
+                this.x1 = data.childEndPoint;
+                this.x2 = this.x1 + (data.milestoneChild ? 9 : 8);
+                this.x3 = this.x2 + (data.milestoneChild ? 17 : 11);
+                this.y1 = this.point2 + ((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.y2 = this.y1 + heightValue + this.taskLineValue + (this.parent.renderBaseline ? (data.milestoneParent ? 10 : 0) : 0);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + this.x2 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x3 + " " + (this.y1 + this.manualParent + this.manualChild) +
+                    " L " + this.x3 + " " + this.y2 + " L " + (this.x3 + this.point1) + " " + this.y2;
+                this.arrowPath = "M " + (this.x2 - 8) + " " + (this.y1 + this.manualChild) +
+                    " L " + this.x2 + " " + (this.y1 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + this.x2 + " " + (this.y1 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SFType1') {
-                div = div + direction + (data.parentLeft - 10) + '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="SFType1">';
-                div = div + eLine;
-                div = div + 'width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + 'width:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
-                    'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : (direction +
-                    (((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' + (10 + this.lineStroke))) + 'px;' +
-                    this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + duplicateStingFour + 'top:' + (-6 - this.lineStroke) + 'px;' +
-                    'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
-                    (5 + this.lineStroke) + 'px;position:relative;"></div></div>';
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : data.milestoneChild ? 1 : 0;
+                this.point1 = heightValue - this.getconnectorLineGap(data) + this.taskLineValue;
+                this.point2 = this.getconnectorLineGap(data);
+                this.x1 = data.parentLeft - 10;
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + +((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.x2 = (data.childEndPoint - data.parentLeft) + 31;
+                this.y2 = this.y1 + this.point1;
+                this.x3 = (data.childEndPoint - data.parentLeft) + 18;
+                this.y3 = this.y2 - (this.y2 % data.rowHeight);
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + 11) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + this.x1 + " " + this.y3 +
+                    " L " + (this.x1 + this.x2) + " " + this.y3 + " L " + (this.x1 + this.x2) + " " + (this.y2 + this.point2) + " L " + (this.x1 + this.x3) + " " + (this.y2 + this.point2);
+                this.arrowPath = "M " + (this.x1 + this.x3 - 8) + " " + (this.y2 + this.point2 + this.manualChild) +
+                    " L " + (this.x1 + this.x3) + " " + (this.y2 + this.point2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + this.x3) + " " + (this.y2 + this.point2 + 4 + this.lineStroke + this.manualChild) + " Z";
             }
             if (this.getParentPosition(data) === 'SFType2') {
-                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((!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) +
-                    'px;width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
-                    'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
-                div = div + eLine;
-                div = div + (isMilestone ? (direction + '4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
-                    - (14 - this.lineStroke))) : (direction + '10px;width:' + (((data.parentLeft) -
-                    (data.childLeft + data.childWidth)) - (20 - this.lineStroke)))) +
-                    'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
-                div = div + leftArrow;
-                div = div + direction + '0px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
-                    'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
-                    'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
-            }
-            connectorContainer += div;
-            connectorContainer += '</div>';
-        }
-        return connectorContainer;
+                this.taskLineValue = this.parent.renderBaseline ? this.taskLineValue : 0;
+                this.x1 = data.childEndPoint;
+                this.y1 = this.parent.enableVirtualization ? rowPositionHeight : ((!this.parent.allowTaskbarOverlap ? parentOverlapTopValue : (data.parentIndex * data.rowHeight)) + this.getTaskbarMidpoint(data.milestoneParent)) + +((data.isManualParent && data.isManualChild) ? -10 : 0);
+                this.x2 = (data.parentLeft - data.childEndPoint);
+                this.y2 = this.y1 + heightValue + this.taskLineValue;
+                this.manualParent = (data.isManualParent && !data.isManualChild ? -10 : 0);
+                this.manualChild = (data.isManualChild && !data.isManualParent ? -10 : 0);
+                this.connectorLinePath = "M " + (this.x1 + this.x2 + 1) + " " + (this.y1 + this.manualParent + this.manualChild) + " L " + (this.x1 + this.x2 - 10) + " " + (this.y1 + this.manualParent + this.manualChild) +
+                    " L " + (this.x1 + this.x2 - 10) + " " + this.y2 + " L " + (this.x1 + 8) + " " + this.y2;
+                this.arrowPath = "M " + this.x1 + " " + (this.y2 + this.manualChild) +
+                    " L " + (this.x1 + 8) + " " + (this.y2 - (4 + this.lineStroke) + this.manualChild) +
+                    " L " + (this.x1 + 8) + " " + (this.y2 + 4 + this.lineStroke + this.manualChild) + " Z";
+            }
+            this.connectorPath.setAttribute("d", this.connectorLinePath);
+            this.arrowlinePath.setAttribute("d", this.arrowPath);
+        }
+        return this.groupObject.outerHTML;
     };
     /**
      * @param {IConnectorLineObject} data .
@@ -12906,10 +12849,10 @@ var ConnectorLine = /** @__PURE__ @class */ (function () {
      * @private
      */
     ConnectorLine.prototype.getConnectorLineTooltipInnerTd = function (fromTaskName, fromPredecessorText, toTaskName, toPredecessorText) {
-        var innerTd = '<tr  id="fromPredecessor"><td >' + this.parent.localeObj.getConstant('from') + '</td><td> ';
-        innerTd = innerTd + fromTaskName + ' </td><td> ' + this.parent.localeObj.getConstant(fromPredecessorText) + ' </td> </tr>';
-        innerTd = innerTd + '<tr id="toPredecessor"><td>' + this.parent.localeObj.getConstant('to') + '</td><td> ' + toTaskName;
-        innerTd = innerTd + ' </td><td> ' + this.parent.localeObj.getConstant(toPredecessorText) + ' </td></tr></tbody><table>';
+        var innerTd = '<tr  id="fromPredecessor"><td style="padding: 4px;">' + this.parent.localeObj.getConstant('from') + '</td><td> ';
+        innerTd = innerTd + fromTaskName + ' </td><td style="padding: 2px;"> ' + this.parent.localeObj.getConstant(fromPredecessorText) + ' </td> </tr>';
+        innerTd = innerTd + '<tr id="toPredecessor"><td style="padding: 4px;">' + this.parent.localeObj.getConstant('to') + '</td><td> ' + toTaskName;
+        innerTd = innerTd + ' </td><td style="padding: 2px;"> ' + this.parent.localeObj.getConstant(toPredecessorText) + ' </td></tr></tbody><table>';
         return innerTd;
     };
     /**
@@ -13422,7 +13365,7 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
      * @param {IGanttData} ganttData .
      * @param {Gantt} parent .
      * @param {TooltipEventArgs} args .
-     * @returns {string} .
+     * @returns {string | Function} .
      */
     Tooltip$$1.prototype.getTooltipContent = function (elementType, ganttData, parent, args) {
         var content$$1;
@@ -13451,11 +13394,14 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
                     if (this.parent.enableHtmlSanitizer && typeof (sDateValue) === 'string') {
                         sDateValue = SanitizeHtmlHelper.sanitize(sDateValue);
                     }
-                    var sDate = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                    var sDate_1 = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
                         sDateValue + '</td></tr>' : '';
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + sDate + '</tbody></table>';
+                    var contentTemp_1 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + sDate_1 + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_1);
                     break;
                 }
             case 'taskbar':
@@ -13471,96 +13417,114 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
                         durationValue = typeof (durationValue) === 'string' ? SanitizeHtmlHelper.sanitize(durationValue) : durationValue;
                         progressValue = typeof (progressValue) === 'string' ? SanitizeHtmlHelper.sanitize(progressValue) : progressValue;
                     }
-                    var startDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var startDate_1 = 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"> ' + startDateValue + '</td></tr>' : '';
-                    var endDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        '</td><td style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
+                    var endDate_1 = 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">' + endDateValue + '</td></tr>' : '';
-                    var duration = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
+                        '</td><td style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
+                    var duration_1 = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        this.parent.localeObj.getConstant('duration') + '</td><td style="padding: 2px;">:</td>' +
                         '<td class = "e-gantt-tooltip-value"> ' + durationValue +
                         '</td></tr>' : '';
-                    var progress = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + progressValue +
+                    var progress_1 = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                        this.parent.localeObj.getConstant('progress') + '</td><td style="padding: 2px;">:</td><td>' + progressValue +
                         '</td></tr>' : '';
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + startDate + endDate + duration + progress + '</tbody></table>';
+                    var contentTemp_2 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + startDate_1 + endDate_1 + duration_1 + progress_1 + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_2);
                     break;
                 }
             case 'baseline':
                 {
-                    var baselineStartDateValue = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
-                    var baselineEndDateValue = this.parent.getFormatedDate(data.baselineEndDate, this.parent.getDateFormat());
+                    var baselineStartDateValue_1 = this.parent.getFormatedDate(data.baselineStartDate, this.parent.getDateFormat());
+                    var baselineEndDateValue_1 = 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">' +
-                        baselineStartDateValue + '</td></tr><tr>' +
-                        '<td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('baselineEndDate') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
-                        baselineEndDateValue + '</td></tr></tbody></table>';
+                        baselineStartDateValue_1 = typeof (baselineStartDateValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(baselineStartDateValue_1) : baselineStartDateValue_1;
+                        baselineEndDateValue_1 = typeof (baselineEndDateValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(baselineEndDateValue_1) : baselineEndDateValue_1;
+                    }
+                    var contentTemp_3 = function () {
+                        return '<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">' +
+                            baselineStartDateValue_1 + '</td></tr><tr>' +
+                            '<td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('baselineEndDate') +
+                            '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                            baselineEndDateValue_1 + '</td></tr></tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_3, this);
                     break;
                 }
             case 'marker':
                 {
                     var markerTooltipElement = parent.tooltipModule.getMarkerTooltipData(args);
-                    var markerTooltipElementValue = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
-                    var markerLabel = markerTooltipElement.label ? markerTooltipElement.label : '';
+                    var markerTooltipElementValue_1 = this.parent.getFormatedDate(this.parent.dateValidationModule.getDateFromFormat(markerTooltipElement.day), this.parent.getDateFormat());
+                    var markerLabel_1 = markerTooltipElement.label ? markerTooltipElement.label : '';
                     if (this.parent.enableHtmlSanitizer) {
-                        markerLabel = typeof (markerLabel) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel) : markerLabel;
-                        markerTooltipElementValue = typeof (markerTooltipElementValue) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue) : markerTooltipElementValue;
+                        markerLabel_1 = typeof (markerLabel_1) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel_1) : markerLabel_1;
+                        markerTooltipElementValue_1 = typeof (markerTooltipElementValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue_1) : markerTooltipElementValue_1;
                     }
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
-                        markerTooltipElementValue + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel) + '</td></tr></tbody></table>';
+                    var contentTemp_4 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
+                            markerTooltipElementValue_1 + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel_1) + '</td></tr></tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_4, this);
                     break;
                 }
             case 'connectorLine':
                 {
-                    var fromNameValue = parent.tooltipModule.predecessorTooltipData.fromName;
-                    var fromIdValue = parent.tooltipModule.predecessorTooltipData.fromId;
-                    var toNameValue = parent.tooltipModule.predecessorTooltipData.toName;
-                    var toIdValue = parent.tooltipModule.predecessorTooltipData.toId;
-                    var linkTextValue = parent.tooltipModule.predecessorTooltipData.linkText;
-                    var offsetStringValue = parent.tooltipModule.predecessorTooltipData.offsetString;
+                    var fromNameValue_1 = parent.tooltipModule.predecessorTooltipData.fromName;
+                    var fromIdValue_1 = parent.tooltipModule.predecessorTooltipData.fromId;
+                    var toNameValue_1 = parent.tooltipModule.predecessorTooltipData.toName;
+                    var toIdValue_1 = parent.tooltipModule.predecessorTooltipData.toId;
+                    var linkTextValue_1 = parent.tooltipModule.predecessorTooltipData.linkText;
+                    var offsetStringValue_1 = 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">' + (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">' +
-                        (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">' +
-                        offsetStringValue + '</td></tr></tbody></table>';
+                        fromNameValue_1 = typeof (fromNameValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(fromNameValue_1) : fromNameValue_1;
+                        fromIdValue_1 = typeof (fromIdValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(fromIdValue_1) : fromIdValue_1;
+                        toNameValue_1 = typeof (toNameValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(toNameValue_1) : toNameValue_1;
+                        toIdValue_1 = typeof (toIdValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(toIdValue_1) : toIdValue_1;
+                        linkTextValue_1 = typeof (linkTextValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(linkTextValue_1) : linkTextValue_1;
+                        offsetStringValue_1 = typeof (offsetStringValue_1) === 'string' ? SanitizeHtmlHelper.sanitize(offsetStringValue_1) : offsetStringValue_1;
+                    }
+                    var contentTemp_5 = function () {
+                        return '<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">' + (this.parent.disableHtmlEncode ? fromNameValue_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromNameValue_1) + ' (' +
+                            (this.parent.disableHtmlEncode ? (typeof (fromIdValue_1) === 'string' ? fromIdValue_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : fromIdValue_1) : fromIdValue_1) + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' +
+                            this.parent.localeObj.getConstant('to') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
+                            (this.parent.disableHtmlEncode ? toNameValue_1.replace(/</g, "&lt;").replace(/>/g, "&gt;") : toNameValue_1) + ' (' + toIdValue_1 + ')' + '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('taskLink') +
+                            '</td><td>:</td><td class = "e-gantt-tooltip-value"> ' + linkTextValue_1 +
+                            '</td></tr><tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('lag') +
+                            '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                            offsetStringValue_1 + '</td></tr></tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_5, this);
                     break;
                 }
             case 'indicator':
                 if (args.target.title.length) {
-                    var titleValue = args.target.title;
-                    if (this.parent.enableHtmlSanitizer && typeof (titleValue) === 'string') {
-                        titleValue = SanitizeHtmlHelper.sanitize(titleValue);
+                    var titleValue_1 = args.target.title;
+                    if (this.parent.enableHtmlSanitizer && typeof (titleValue_1) === 'string') {
+                        titleValue_1 = SanitizeHtmlHelper.sanitize(titleValue_1);
                     }
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
+                    var contentTemp_6 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue_1 + '</tr></tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_6);
                 }
                 break;
             case 'timeline':
-                var timlineTitleValue = args.target.title;
-                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue) === 'string') {
-                    timlineTitleValue = SanitizeHtmlHelper.sanitize(timlineTitleValue);
+                var timlineTitleValue_1 = args.target.title;
+                if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue_1) === 'string') {
+                    timlineTitleValue_1 = SanitizeHtmlHelper.sanitize(timlineTitleValue_1);
                 }
-                content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
+                var contentTemp = function () {
+                    return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue_1 + '</tr></tbody></table>';
+                };
+                content$$1 = initializeCSPTemplate(contentTemp);
                 break;
             case 'manualtaskbar':
                 {
@@ -13576,24 +13540,27 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
                         manualStartDateValue = typeof (manualStartDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(manualStartDateValue) : manualStartDateValue;
                         manualEndDateValue = typeof (manualEndDateValue) === 'string' ? SanitizeHtmlHelper.sanitize(manualEndDateValue) : manualEndDateValue;
                     }
-                    var autoStartDate = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var autoStartDate_1 = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
                         autoStartDateValue + '</td></tr>' : '';
-                    var autoEndDate = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var autoEndDate_1 = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         autoEndDateValue + '</td></tr>' : '';
-                    var durationValue = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var durationValue_1 = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value"> ' + durationUnitValue +
                         '</td></tr>' : '';
-                    var manualStartDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var manualStartDate_1 = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('startDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
                         manualStartDateValue + '</td></tr>' : '';
-                    var manualEndDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var manualEndDate_1 = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('endDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         manualEndDateValue + '</td></tr>' : '';
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
+                    var contentTemp_7 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + manualStartDate_1 + autoStartDate_1 + manualEndDate_1 + autoEndDate_1 + durationValue_1 + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_7);
                     break;
                 }
             case 'manualmilestone':
@@ -13606,17 +13573,20 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
                         autoEndValue = typeof (autoEndValue) === 'string' ? SanitizeHtmlHelper.sanitize(autoEndValue) : autoEndValue;
                         dateValue = typeof (dateValue) === 'string' ? SanitizeHtmlHelper.sanitize(dateValue) : dateValue;
                     }
-                    var autoStart = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var autoStart_1 = data.autoStartDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksStartDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' +
                         autoStartValue + '</td></tr>' : '';
-                    var autoEnd = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
+                    var autoEnd_1 = data.autoEndDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('subTasksEndDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         autoEndValue + '</td></tr>' : '';
-                    var date = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                    var date_1 = '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
                         dateValue + '</tr>';
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + date + autoStart + autoEnd + '</tbody></table>';
+                    var contentTemp_8 = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + date_1 + autoStart_1 + autoEnd_1 + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp_8);
                     break;
                 }
         }
@@ -13642,7 +13612,7 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
      * @private
      */
     Tooltip$$1.prototype.getPredecessorTooltipData = function (args) {
-        var predeceesorParent = args.target.parentElement.id;
+        var predeceesorParent = args.target.id;
         if (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
             predeceesorParent = SanitizeHtmlHelper.sanitize(predeceesorParent);
         }
@@ -13675,7 +13645,7 @@ var Tooltip$1 = /** @__PURE__ @class */ (function () {
     /**
      * To compile template string.
      *
-     * @param {string} template .
+     * @param {string | Function} template .
      * @param {Gantt} parent .
      * @param {IGanttData|PredecessorTooltip} data .
      * @param {string} propName .
@@ -14754,19 +14724,17 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
             this.notify('initPredessorDialog', {});
         }
         this.splitterModule.updateSplitterPosition();
-        if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
-            this.renderChartVerticalLines();
-        }
+        // if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
+        //     this.renderChartVerticalLines();
+        // }
     };
     Gantt.prototype.removeCriticalPathStyles = function () {
         var ganttChartElement = this.ganttChartModule.chartElement;
         removeClass(ganttChartElement.querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
         removeClass(ganttChartElement.querySelectorAll('.e-gantt-child-progressbar-inner-div'), criticalChildProgressBarInnerDiv);
-        removeClass(ganttChartElement.querySelectorAll('.e-milestone-top'), criticalMilestoneTop);
-        removeClass(ganttChartElement.querySelectorAll('.e-milestone-bottom'), criticalMilestoneBottom);
-        removeClass(this.element.querySelectorAll('.e-line'), criticalConnectorLine);
-        removeClass(this.element.querySelectorAll('.e-connector-line-right-arrow'), criticalConnectorLineRightArrow);
-        removeClass(this.element.querySelectorAll('.e-connector-line-left-arrow'), criticalConnectorLineLeftArrow);
+        removeClass(ganttChartElement.querySelectorAll('.e-critical-milestone'), criticalMilestone);
+        removeClass(this.element.querySelectorAll('.e-connector-line'), criticalConnectorLineSVG);
+        removeClass(this.element.querySelectorAll('.e-connector-line-arrow'), criticalConnectorArrowSVG);
     };
     Gantt.prototype.wireEvents = function () {
         if (this.allowKeyboard) {
@@ -14778,6 +14746,15 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         }
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         EventHandler.add(window, 'resize', this.windowResize, this);
+        EventHandler.add(document.body, 'keydown', this.keyDownHandler, this);
+    };
+    Gantt.prototype.keyDownHandler = function (e) {
+        if (e.altKey) {
+            if (e.keyCode === 74) { //alt j
+                this.ganttChartModule.manageFocus(this.treeGrid.element.childNodes[1], 'remove', false);
+                this.ganttChartModule.manageFocus(this.element, 'add', false);
+            }
+        }
     };
     /**
      * Method trigger while user perform window resize.
@@ -15881,9 +15858,9 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         if (!this.element.contains(this.chartVerticalLineContainer)) {
             this.chartVerticalLineContainer = createElement('div', {
                 id: this.element.id + 'line-container',
-                styles: 'position:absolute;height:100%;z-index:1'
+                styles: 'position:absolute;height:100%;'
             });
-            this.ganttChartModule.chartBodyContent.appendChild(this.chartVerticalLineContainer);
+            this.ganttChartModule.chartBodyContent.insertBefore(this.chartVerticalLineContainer, this.ganttChartModule.chartBodyContent.lastChild);
         }
         this.chartVerticalLineContainer.innerHTML = '';
         var headerTable = this.element.getElementsByClassName('e-timeline-header-table-container')[1];
@@ -16272,9 +16249,6 @@ var Gantt = /** @__PURE__ @class */ (function (_super) {
         this.timelineModule.updateChartByNewTimeline();
         this.ganttChartModule.chartBodyContent.style.width = formatUnit(this.timelineModule.totalTimelineWidth);
         this.ganttChartModule.updateLastRowBottomWidth();
-        if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
-            this.renderChartVerticalLines();
-        }
         if (this.taskFields.dependency) {
             this.ganttChartModule.reRenderConnectorLines();
         }
@@ -18512,23 +18486,23 @@ var EditTooltip = /** @__PURE__ @class */ (function () {
             var duration = void 0;
             if (!isNullOrUndefined(editRecord.startDate)) {
                 startDate = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('startDate') +
-                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' +
                     instance.formatDate(editRecord.startDate, { format: this.parent.getDateFormat() }) + '</td></tr>';
             }
             if (!isNullOrUndefined(editRecord.endDate)) {
                 endDate = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('endDate') +
-                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' +
                     instance.formatDate(editRecord.endDate, { format: this.parent.getDateFormat() }) + '</td></tr>';
             }
             if (!isNullOrUndefined(editRecord.duration)) {
                 duration = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('duration') +
-                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' +
                     this.parent.getDurationString(editRecord.duration, editRecord.durationUnit) + '</td></tr>';
             }
             switch (this.taskbarEdit.taskBarEditAction) {
                 case 'ProgressResizing':
                     var progress = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('progress') +
-                        '</td><td>:</td><td class = "e-gantt-tooltip-value">' + editRecord.progress + '</td></tr>';
+                        '</td><td style="padding: 2px;">:</td><td class = "e-gantt-tooltip-value">' + editRecord.progress + '</td></tr>';
                     tooltipString = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         progress + '</tbody></table>';
                     break;
@@ -18812,8 +18786,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
             || target.classList.contains(manualParentTaskBar)) {
             element = parentsUntil$1(target, manualParentMainContainer);
         }
-        else if (target.classList.contains(manualParentMilestoneTop) || target.classList.contains(manualParentMilestoneBottom)
-            || target.classList.contains(manualParentMilestone)) {
+        else if (target.classList.contains(manualParentMilestone)) {
             element = parentsUntil$1(target, manualParentMilestone);
         }
         else {
@@ -18829,18 +18802,60 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         if (this.parent.editSettings.allowTaskbarEditing && element) {
             this.showHideTaskBarEditingElements(element, this.taskBarEditElement);
             this.editElement = element;
-            this.taskBarEditElement = element;
-            var index = this.taskBarEditElement.getAttribute('data-segment-index');
+            this.realTaskbarElement = this.editElement;
+            var index = this.editElement.getAttribute('data-segment-index');
             if (!isNullOrUndefined(index)) {
                 this.segmentIndex = Number(index);
             }
             else {
                 this.segmentIndex = -1;
             }
-            this.taskBarEditRecord = this.parent.ganttChartModule.getRecordByTaskBar(this.taskBarEditElement);
+            this.taskBarEditRecord = this.parent.ganttChartModule.getRecordByTaskBar(this.editElement);
             if (e.type === 'mousedown' || e.type === 'touchstart' || e.type === 'click') {
-                this.roundOffDuration = true;
                 this.taskBarEditAction = this.getTaskBarAction(e);
+                var index_1 = this.editElement.getAttribute('data-segment-index');
+                var currentRecord = this.parent.ganttChartModule.getRecordByTaskBar(element);
+                var ganttprop = currentRecord.ganttProperties;
+                var parentleft = this.editElement.parentElement.offsetLeft;
+                this.currentData = currentRecord;
+                var resizeElement = createElement('div', { styles: 'height:100%;border-style:dashed;border-bottom:none;border-top:none;border-width:1px;position:absolute;z-index:10000' });
+                addClass([resizeElement], 'e-taskbar-resize-div');
+                resizeElement.style.setProperty("width", ganttprop.width + "px");
+                var currentindex = this.editElement.getAttribute('data-segment-index');
+                resizeElement.style.setProperty("left", ((!isNullOrUndefined(ganttprop.segments) ? parentleft + ganttprop.segments[Number(currentindex)].left + "px" : (ganttprop.left) + "px")));
+                var resizeTable = this.parent.createElement('table');
+                var resizetableBody = this.parent.createElement("tbody");
+                resizetableBody.appendChild(resizeElement);
+                resizeTable.appendChild(resizetableBody);
+                var Check = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-clone-taskbar');
+                var createTable = null;
+                if ((this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'LeftResizing') && !isNullOrUndefined(index_1) && !isNullOrUndefined(index_1) ? Number(index_1) === 0 : false) {
+                    var cloneTaskBar = this.editElement.parentElement.cloneNode(true);
+                }
+                else {
+                    var cloneTaskBar = this.editElement.cloneNode(true);
+                }
+                if (!Check) {
+                    addClass([cloneTaskBar], 'e-clone-taskbar');
+                    cloneTaskBar.style.setProperty("position", "absolute");
+                    cloneTaskBar.style.setProperty("top", 0 + "px");
+                    createTable = this.parent.createElement('table');
+                    var tableBody = this.parent.createElement("tbody");
+                    tableBody.appendChild(cloneTaskBar);
+                    createTable.appendChild(tableBody);
+                }
+                if ((this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'LeftResizing') && !isNullOrUndefined(index_1) && !isNullOrUndefined(index_1) ? Number(index_1) === 0 : false) {
+                    var segmentedTasks = cloneTaskBar.getElementsByClassName('e-segmented-taskbar');
+                    this.cloneTaskbarElement = segmentedTasks[Number(index_1)];
+                }
+                else {
+                    this.cloneTaskbarElement = cloneTaskBar;
+                }
+                this.taskBarEditElement = this.cloneTaskbarElement;
+                this.taskbarElement = createTable;
+                this.taskbarResizer = resizeTable;
+                this.currentIndex = index_1;
+                this.roundOffDuration = true;
                 if ((this.taskBarEditAction === 'ConnectorPointLeftDrag' || this.taskBarEditAction === 'ConnectorPointRightDrag') &&
                     isNullOrUndefined(this.parent.taskFields.dependency)) {
                     this.taskBarEditAction = null;
@@ -18871,7 +18886,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 this.initPublicProp();
             }
             else {
-                this.showHideTaskBarEditingElements(element, this.taskBarEditElement);
+                this.showHideTaskBarEditingElements(element, this.editElement);
             }
         }
     };
@@ -18906,9 +18921,10 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 addClass([element.querySelector('.' + taskBarLeftResizer)], [leftResizeGripper]);
                 addClass([element.querySelector('.' + taskBarRightResizer)], [rightResizeGripper]);
                 if (isShowProgressResizer) {
-                    var progresElement = !isNullOrUndefined(element.querySelector('.' + childProgressResizer)) ? true : false;
-                    if (progresElement) {
-                        addClass([element.querySelector('.' + childProgressResizer)], [progressResizeGripper]);
+                    var progressElement = element.querySelector('.' + childProgressResizer);
+                    if (!isNullOrUndefined(progressElement)) {
+                        addClass([progressElement], [progressResizeGripper]);
+                        progressElement.style.top = '3px';
                     }
                 }
             }
@@ -18989,9 +19005,6 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         }
         else if (mouseDownElement.classList.contains(manualParentTaskBar) ||
             mouseDownElement.classList.contains(manualParentMainContainer) ||
-            mouseDownElement.classList.contains(manualParentMilestone) ||
-            mouseDownElement.classList.contains(manualParentMilestoneTop) ||
-            mouseDownElement.classList.contains(manualParentMilestoneBottom) ||
             mouseDownElement.classList.contains(manualParentMilestone)) {
             action = 'ManualParentDrag';
         }
@@ -19088,6 +19101,21 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         this.dragMouseLeave = false;
         this.isMouseDragCheck();
         if (this.isMouseDragged && this.taskBarEditAction) {
+            if (!isNullOrUndefined(this.taskbarElement) && !isNullOrUndefined(this.editElement) && (this.taskBarEditAction !== "ConnectorPointRightDrag" && this.taskBarEditAction !== "ConnectorPointLeftDrag") && !(this.parent.viewType === 'ResourceView' && this.currentData.hasChildRecords)) {
+                var currentElement = this.editElement.parentElement;
+                currentElement.style.setProperty("position", "absolute");
+                if ((this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'LeftResizing') && !isNullOrUndefined(this.currentIndex) && !isNullOrUndefined(this.currentIndex) ? Number(this.currentIndex) === 0 : false) {
+                    this.taskbarElement.childNodes[0].childNodes[0].style.setProperty("top", currentElement.parentElement.offsetTop + "px");
+                    currentElement.parentElement.appendChild(this.taskbarElement);
+                }
+                else {
+                    currentElement.appendChild(this.taskbarElement);
+                }
+                if (this.taskBarEditAction !== 'ProgressResizing') {
+                    var rootElement = this.parent.ganttChartModule.chartBodyContainer.querySelectorAll(".e-chart-rows-container");
+                    rootElement[0].appendChild(this.taskbarResizer);
+                }
+            }
             var args_1 = {
                 cancel: false,
                 requestType: 'taskbarediting',
@@ -19194,16 +19222,6 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                     merge(_this.taskBarEditRecord.ganttProperties, arg.previousData);
                 }
             });
-            this.parent.flatData.map(function (data) {
-                if ((!isNullOrUndefined(_this.taskBarEditRecord.parentItem)) && data.ganttProperties.taskId === _this.taskBarEditRecord.parentItem.taskId) {
-                    data.childRecords.map(function (s) {
-                        if (isNullOrUndefined(s.ganttProperties.startDate) || isNullOrUndefined(s.ganttProperties.endDate) ||
-                            isNullOrUndefined(s.ganttProperties.duration)) {
-                            _this.parent.dataOperation.updateGanttData();
-                        }
-                    });
-                }
-            });
         }
     };
     /**
@@ -20009,6 +20027,15 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     TaskbarEdit.prototype.setItemPosition = function () {
+        if (!isNullOrUndefined(this.editElement)) {
+            var currentElement = this.editElement.parentElement;
+            if (this.parent.viewType == 'ResourceView' && this.parent.allowTaskbarDragAndDrop && this.taskBarEditAction === 'ChildDrag') {
+                currentElement.style.position = null;
+            }
+            else {
+                currentElement.style.setProperty("position", "absolute");
+            }
+        }
         var item = this.taskBarEditRecord.ganttProperties;
         var position = this.parent.enableRtl ? "right" : "left";
         var segment = !isNullOrUndefined(item.segments) ? item.segments[this.segmentIndex] : null;
@@ -20018,13 +20045,10 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(segment)) {
             rightResizer = this.parent.isAdaptive ? (segment.width - 2) : (segment.width - 10);
         }
-        var taskBarMainContainer$$1 = (!this.taskBarEditElement.classList.contains(taskBarMainContainer)) ? closest(this.taskBarEditElement, 'tr.' + chartRow)
+        this.taskBarEditElement.style.setProperty("opacity", '.75');
+        var taskBarMainContainer$$1 = (!this.taskBarEditElement.classList.contains(taskBarMainContainer)) ? ((this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'LeftResizing') && this.segmentIndex === 0) ? this.taskBarEditElement.parentElement : closest(this.taskBarEditElement, 'tr.' + chartRow)
             .querySelector('.' + taskBarMainContainer) : this.taskBarEditElement;
         var segmentedTaskBarContainer = this.taskBarEditElement.classList.contains('e-segmented-taskbar');
-        var leftLabelContainer$$1 = closest(this.taskBarEditElement, 'tr.' + chartRow)
-            .querySelector('.' + leftLabelContainer);
-        var rightLabelContainer$$1 = closest(this.taskBarEditElement, 'tr.' + chartRow)
-            .querySelector('.' + rightLabelContainer);
         var traceChildProgressBar$$1 = this.taskBarEditElement.querySelector('.' + traceChildProgressBar);
         var traceChildTaskBar$$1 = this.taskBarEditElement.querySelector('.' + traceChildTaskBar);
         var childProgressResizer$$1 = this.taskBarEditElement.querySelector('.' + childProgressResizer);
@@ -20036,34 +20060,45 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
         var manualTaskbar = this.taskBarEditElement.querySelector('.' + manualParentTaskBar);
         var manualParentRight = this.taskBarEditElement.querySelector('.' + manualParentRightResizer);
         var manualParentLeft = this.taskBarEditElement.querySelector('.' + manualParentLeftResizer);
+        var resizeLine = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-taskbar-resize-div');
         if (this.taskBarEditAction !== 'ConnectorPointRightDrag' &&
             this.taskBarEditAction !== 'ConnectorPointLeftDrag') {
             if (this.taskBarEditAction !== 'ParentResizing' && this.taskBarEditAction !== 'ManualParentDrag') {
                 if (segmentedTaskBarContainer && !isNullOrUndefined(item.segments)
                     && (this.taskBarEditAction === 'RightResizing' || this.segmentIndex !== 0)) {
+                    if (!isNullOrUndefined(resizeLine)) {
+                        resizeLine.style.width = (segment.width) + "px";
+                    }
                     this.taskBarEditElement.style.width = (segment.width) + 'px';
                     if (this.parent.enableRtl) {
                         this.taskBarEditElement.style.right = (segment.left) + 'px';
                     }
                     else {
                         this.taskBarEditElement.style.left = (segment.left) + 'px';
+                        if (!isNullOrUndefined(resizeLine)) {
+                            resizeLine.style.left = (segment.left + this.editElement.parentElement.offsetLeft) + "px";
+                        }
                     }
                 }
-                taskBarMainContainer$$1.style.width = (width) + 'px';
-                leftLabelContainer$$1.style.width = (item.left) + 'px';
                 taskBarMainContainer$$1.style.setProperty(position, (item.left) + 'px');
+                taskBarMainContainer$$1.style.width = (width) + '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) {
+                    this.taskBarEditElement.style.setProperty("opacity", '.75');
                     var parent_1 = this.taskBarEditElement.parentElement;
                     var segmentedTasks = parent_1.getElementsByClassName('e-segmented-taskbar');
                     for (var i = 0; i < item.segments.length; i++) {
                         var segment_4 = item.segments[i];
                         var segmentElement = segmentedTasks[i];
                         segmentElement.style.width = (segment_4.width) + 'px';
+                        if (i === 0) {
+                            resizeLine.style.width = (segment_4.width) + "px";
+                            resizeLine.style.left = (segment_4.left + item.left) + "px";
+                        }
                         if (this.parent.enableRtl) {
                             segmentElement.style.right = (segment_4.left) + 'px';
                         }
@@ -20072,8 +20107,10 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                 }
-                if (!isNullOrUndefined(rightLabelContainer$$1)) {
-                    rightLabelContainer$$1.style.setProperty(position, (item.left + width) + 'px');
+                if (this.taskBarEditAction === 'ChildDrag' && this.segmentIndex === 0) {
+                    resizeLine.style.width = (width) + "px";
+                    resizeLine.style.left = (item.left) + "px";
+                    taskBarMainContainer$$1.style.setProperty("opacity", '.75');
                 }
             }
             if (traceConnectorPointRight) {
@@ -20086,10 +20123,8 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
             }
             if (this.taskBarEditAction === 'MilestoneDrag' || item.isMilestone) {
                 taskBarMainContainer$$1.style.setProperty(position, (item.left - (width / 2)) + 'px');
-                leftLabelContainer$$1.style.width = (item.left - (width / 2)) + 'px';
-                if (!isNullOrUndefined(rightLabelContainer$$1)) {
-                    rightLabelContainer$$1.style.setProperty(position, (item.left + (width / 2)) + 'px');
-                }
+                resizeLine.style.left = (item.left - (width / 2)) + 'px';
+                resizeLine.style.width = (width) + "px";
             }
             else if (this.taskBarEditAction === 'ProgressResizing') {
                 if (this.segmentIndex === -1) {
@@ -20112,6 +20147,7 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else if (this.taskBarEditAction === 'RightResizing' && !isNullOrUndefined(traceChildTaskBar$$1)) {
+                resizeLine.style.width = (width) + 'px';
                 traceChildTaskBar$$1.style.width = (width) + 'px';
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                     traceChildProgressBar$$1.style.width = (item.progressWidth) + 'px';
@@ -20122,23 +20158,36 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else if (this.taskBarEditAction === 'ParentDrag') {
+                resizeLine.style.left = (item.left) + 'px';
+                resizeLine.style.width = (width) + "px";
+                resizeLine.style.width = (item.width) + 'px';
                 if (!isNullOrUndefined(traceParentTaskBar$$1)) {
                     traceParentTaskBar$$1.style.width = (width) + 'px';
+                    resizeLine.style.width = (item.width) + 'px';
                 }
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                     traceParentProgressBar$$1.style.width = (item.progressWidth) + 'px';
                 }
             }
             else if (this.taskBarEditAction === 'ParentResizing') {
+                resizeLine.style.width = (item.width) + 'px';
+                resizeLine.style.left = item.left + 'px';
                 manualParentTaskbar.style.width = manualTaskbar.style.width = (item.width) + 'px';
                 manualParentRight.style.setProperty(position, item.width - manualParentLeft.offsetLeft + 'px');
             }
             else if (this.taskBarEditAction === 'ManualParentDrag') {
+                resizeLine.style.width = (item.width) + 'px';
+                resizeLine.style.left = item.left + 'px';
                 manualParentTaskbar.style.setProperty(position, item.left - item.autoLeft + 'px');
             }
             else {
                 if (!isNullOrUndefined(traceChildTaskBar$$1) && !segmentedTaskBarContainer) {
-                    traceChildTaskBar$$1.style.width = (width) + 'px';
+                    traceChildTaskBar$$1.style.width = (item.width) + 'px';
+                    traceChildTaskBar$$1.style.left = (item.left) + 'px';
+                    this.taskBarEditElement.style.width = (item.width) + 'px';
+                    this.taskBarEditElement.style.left = (item.left) + "px";
+                    resizeLine.style.left = (item.left) + 'px';
+                    resizeLine.style.width = (item.width) + "px";
                 }
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                     taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
@@ -20534,21 +20583,21 @@ var TaskbarEdit = /** @__PURE__ @class */ (function (_super) {
             if ((this.parent.virtualScrollModule && this.parent.enableVirtualization &&
                 !this.elementOffsetLeft) || !this.parent.enableVirtualization) {
                 if (!this.parent.allowParentDependency) {
-                    this.elementOffsetLeft = this.taskBarEditElement.offsetLeft;
-                    this.elementOffsetTop = this.taskBarEditElement.offsetTop + scrollTop;
+                    this.elementOffsetLeft = this.realTaskbarElement.offsetLeft;
+                    this.elementOffsetTop = this.realTaskbarElement.parentElement.offsetTop + this.realTaskbarElement.offsetHeight / 3 + 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;
+                        this.elementOffsetLeft = this.realTaskbarElement.children[0]['offsetLeft'] + this.realTaskbarElement.offsetLeft;
+                        this.elementOffsetTop = ((this.realTaskbarElement.parentElement.offsetTop + this.realTaskbarElement.offsetHeight / 3 - 5) + this.taskBarEditElement.children[0]['offsetTop']) + scrollTop;
                     }
                     else {
-                        this.elementOffsetLeft = this.taskBarEditElement.offsetLeft;
-                        this.elementOffsetTop = this.taskBarEditElement.offsetTop + scrollTop;
+                        this.elementOffsetLeft = this.realTaskbarElement.offsetLeft;
+                        this.elementOffsetTop = this.realTaskbarElement.parentElement.offsetTop + this.realTaskbarElement.offsetHeight / 3 + scrollTop;
                     }
                 }
-                this.elementOffsetWidth = this.taskBarEditElement.offsetWidth;
-                this.elementOffsetHeight = this.taskBarEditElement.offsetHeight;
+                this.elementOffsetWidth = this.realTaskbarElement.offsetWidth;
+                this.elementOffsetHeight = this.realTaskbarElement.offsetHeight;
             }
             this.showHideTaskBarEditingElements(element, this.highlightedSecondElement, true);
         }
@@ -23103,10 +23152,11 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
      * @private
      */
     ConnectorLineEdit.prototype.getConnectorLineHoverElement = function (target) {
-        var isOnLine = parentsUntil$1(target, connectorLine);
-        var isOnRightArrow = parentsUntil$1(target, connectorLineRightArrow);
-        var isOnLeftArrow = parentsUntil$1(target, connectorLineLeftArrow);
-        if (isOnLine || isOnRightArrow || isOnLeftArrow) {
+        var isOnLine = parentsUntil$1(target, connectorLineSVG);
+        var isArrow = parentsUntil$1(target, connectorLineArrow);
+        var isCriticalLine = parentsUntil$1(target, criticalConnectorLineSVG);
+        var isCriticalArrow = parentsUntil$1(target, criticalConnectorArrowSVG);
+        if (isOnLine || isArrow || isCriticalLine || isCriticalArrow) {
             return parentsUntil$1(target, connectorLineContainer);
         }
         else {
@@ -23140,16 +23190,13 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
      */
     ConnectorLineEdit.prototype.addHighlight = function (element) {
         this.connectorLineElement = element;
-        addClass([element], [connectorLineHoverZIndex]);
-        if (element.querySelectorAll('.' + connectorLine)[0].classList.contains('e-criticalconnector-line')) {
-            addClass(element.querySelectorAll('.' + connectorLine), [criticalConnectorLineHover]);
-            addClass(element.querySelectorAll('.' + connectorLineRightArrow), [criticalConnectorLineRightArrowHover]);
-            addClass(element.querySelectorAll('.' + connectorLineLeftArrow), [criticalConnectorLineLeftArrowHover]);
+        var pathElement = element.querySelector('.' + connectorLineSVG);
+        var criticalElement = element.querySelector('.' + criticalConnectorLineSVG);
+        if (pathElement) {
+            pathElement.setAttribute('stroke-width', '2');
         }
         else {
-            addClass(element.querySelectorAll('.' + connectorLine), [connectorLineHover]);
-            addClass(element.querySelectorAll('.' + connectorLineRightArrow), [connectorLineRightArrowHover]);
-            addClass(element.querySelectorAll('.' + connectorLineLeftArrow), [connectorLineLeftArrowHover]);
+            criticalElement.setAttribute('stroke-width', '2');
         }
     };
     /**
@@ -23159,17 +23206,14 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
      * @private
      */
     ConnectorLineEdit.prototype.removeHighlight = function () {
-        if (!isNullOrUndefined(this.connectorLineElement)) {
-            removeClass([this.connectorLineElement], [connectorLineHoverZIndex]);
-            if (this.connectorLineElement.querySelectorAll('.' + connectorLine)[0].classList.contains(criticalConnectorLineHover)) {
-                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLine), [criticalConnectorLineHover]);
-                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineRightArrow), [criticalConnectorLineRightArrowHover]);
-                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineLeftArrow), [criticalConnectorLineLeftArrowHover]);
+        if (this.connectorLineElement) {
+            var pathElement = this.connectorLineElement.querySelector('.' + connectorLineSVG);
+            var criticalElement = this.connectorLineElement.querySelector('.' + criticalConnectorLineSVG);
+            if (pathElement) {
+                pathElement.setAttribute('stroke-width', '1');
             }
             else {
-                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLine), [connectorLineHover]);
-                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineRightArrow), [connectorLineRightArrowHover]);
-                removeClass(this.connectorLineElement.querySelectorAll('.' + connectorLineLeftArrow), [connectorLineLeftArrowHover]);
+                criticalElement.setAttribute('stroke-width', '1');
             }
             this.connectorLineElement = null;
         }
@@ -23236,8 +23280,8 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
         this.parent.connectorLineModule.expandedRecords = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
             this.parent.updatedRecords : this.parent.getExpandedRecords(this.parent.updatedRecords);
         var editedConnectorLineString = this.getEditedConnectorLineString(editedRecord);
-        this.parent.connectorLineModule.dependencyViewContainer.innerHTML =
-            this.parent.connectorLineModule.dependencyViewContainer.innerHTML + editedConnectorLineString;
+        this.parent.connectorLineModule.svgObject.innerHTML =
+            this.parent.connectorLineModule.svgObject.innerHTML + editedConnectorLineString;
     };
     ConnectorLineEdit.prototype.idFromPredecessor = function (pre) {
         var preArray = pre.split(',');
@@ -23883,9 +23927,9 @@ var ConnectorLineEdit = /** @__PURE__ @class */ (function () {
     ConnectorLineEdit.prototype.validateTypes = function (ganttRecord, data) {
         var predecessor = this.parent.predecessorModule.getValidPredecessor(ganttRecord);
         var parentGanttRecord;
-        var ganttTaskData;
         this.validationPredecessor = [];
         var violatedParent;
+        var ganttTaskData;
         var violateType;
         var startDate = this.parent.predecessorModule.getPredecessorDate(ganttRecord, predecessor);
         if (data) {
@@ -24961,6 +25005,10 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         if (data.hasChildRecords && ganttProp.isAutoSchedule) {
             this.parent.setRecordValue('startDate', ganttProp.autoStartDate, ganttProp, true);
             this.parent.setRecordValue('endDate', ganttProp.autoEndDate, ganttProp, true);
+            this.parent.setRecordValue('StartDate', ganttProp.autoStartDate, data, true);
+            this.parent.setRecordValue('EndDate', ganttProp.autoEndDate, data, true);
+            this.parent.setRecordValue('taskData.StartDate', ganttProp.autoStartDate, data, true);
+            this.parent.setRecordValue('taskData.EndDate', ganttProp.autoEndDate, data, true);
             this.parent.setRecordValue('width', this.parent.dataOperation.calculateWidth(data, true), ganttProp, true);
             this.parent.setRecordValue('left', this.parent.dataOperation.calculateLeft(ganttProp, true), ganttProp, true);
             this.parent.setRecordValue('progressWidth', this.parent.dataOperation.getProgressWidth(ganttProp.width, ganttProp.progress), ganttProp, true);
@@ -24969,8 +25017,8 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         else if (data.hasChildRecords && !ganttProp.isAutoSchedule) {
             this.parent.dataOperation.updateWidthLeft(data);
             this.parent.dataOperation.calculateDuration(data);
-            this.parent.setRecordValue('autoStartDate', ganttProp.startDate, ganttProp, true);
-            this.parent.setRecordValue('autoEndDate', ganttProp.endDate, ganttProp, true);
+            this.parent.setRecordValue('autoStartDate', ganttProp.autoStartDate, ganttProp, true);
+            this.parent.setRecordValue('autoEndDate', ganttProp.autoEndDate, ganttProp, true);
             this.parent.setRecordValue('autoDuration', this.parent.dataOperation.calculateAutoDuration(data), ganttProp, true);
             this.parent.dataOperation.updateAutoWidthLeft(data);
         }
@@ -25195,7 +25243,6 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         }
         if (childRecords.length) {
             this.parent.dataOperation.updateParentItems(ganttRecord, true);
-            this.parent.dataOperation.updateGanttData();
         }
     };
     /**
@@ -25408,8 +25455,8 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
                 }
             }
             if (this.parent.isConnectorLineUpdate && !isNullOrUndefined(this.parent.connectorLineEditModule)) {
-                this.parent.updatedConnectorLineCollection = [];
-                this.parent.connectorLineIds = [];
+                // this.parent.updatedConnectorLineCollection = [];
+                // this.parent.connectorLineIds = [];
                 this.parent.connectorLineEditModule.refreshEditedRecordConnectorLine(this.parent.editedRecords);
                 this.updateScheduleDatesOnEditing(args);
             }
@@ -26788,6 +26835,7 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
         this.parent.treeGrid.parentData = [];
         this.parent.addDeleteRecord = true;
         this.parent.selectedRowIndex = 0;
+        this.parent.treeGrid['isAddedFromGantt'] = true;
         this.parent.treeGrid.refresh();
         if (this.parent.enableImmutableMode) {
             this.parent.modifiedRecords = args.modifiedRecords;
@@ -26937,7 +26985,6 @@ var Edit$2 = /** @__PURE__ @class */ (function () {
             var args = {};
             args = this.constructTaskAddedEventArgs(cAddedRecord_1, this.parent.editedRecords, 'beforeAdd');
             this.parent.trigger('actionBegin', args, function (args) {
-                _this.parent.previousRecords = {};
                 if (!isNullOrUndefined(_this.parent.loadingIndicator) && _this.parent.loadingIndicator.indicatorType === "Shimmer") {
                     _this.parent.showMaskRow();
                 }
@@ -29503,7 +29550,7 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
             this.nonworkingContainer = createElement('div', {
                 className: nonworkingContainer
             });
-            this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
+            this.parent.ganttChartModule.chartBodyContent.insertBefore(this.nonworkingContainer, this.parent.ganttChartModule.chartBodyContent.lastChild);
         }
     };
     /**
@@ -29652,7 +29699,7 @@ var NonWorkingDay = /** @__PURE__ @class */ (function () {
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
         var height = this.parent.getContentHeight();
-        var gantttable = this.parent.element;
+        var gantttable = document.getElementById("ganttContainer");
         // eslint-disable-next-line
         var toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
@@ -29842,9 +29889,12 @@ var DayMarkers = /** @__PURE__ @class */ (function () {
         }
     };
     DayMarkers.prototype.refreshMarkers = function () {
-        this.eventMarkerRender.renderEventMarkers();
         this.nonworkingDayRender.renderWeekends();
         this.nonworkingDayRender.renderHolidays();
+        if (this.parent.gridLines === 'Vertical' || this.parent.gridLines === 'Both') {
+            this.parent['renderChartVerticalLines']();
+        }
+        this.eventMarkerRender.renderEventMarkers();
     };
     DayMarkers.prototype.updateHeight = function () {
         this.nonworkingDayRender.updateContainerHeight();
@@ -30611,11 +30661,8 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
             }
             if (element && (this_2.parent.viewType === 'ProjectView' || (this_2.parent.viewType === 'ResourceView' &&
                 !criticalData.hasChildRecords))) {
-                if (element.getElementsByClassName('e-milestone-top')[0]) {
-                    addClass(element.querySelectorAll('.e-milestone-top'), criticalMilestoneTop);
-                }
-                if (element.getElementsByClassName('e-milestone-bottom')[0]) {
-                    addClass(element.querySelectorAll('.e-milestone-bottom'), criticalMilestoneBottom);
+                if (element.getElementsByClassName('e-gantt-milestone')[0]) {
+                    addClass(element.querySelectorAll('.e-gantt-milestone'), criticalMilestone);
                 }
                 if (element.getElementsByClassName('e-gantt-child-taskbar-inner-div').length > 0) {
                     addClass(element.querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
@@ -30655,11 +30702,9 @@ var CriticalPath = /** @__PURE__ @class */ (function () {
                                 currentdata['taskid'] + 'child' + checkint);
                             if (lineElement.length > 0) {
                                 addClass(this.parent.element.querySelectorAll('#ConnectorLineparent' + currentdata['taskid'] + 'child' +
-                                    checkint)[0].querySelectorAll('.e-line'), criticalConnectorLine);
-                                addClass(this.parent.element.querySelectorAll('#ConnectorLineparent' + currentdata['taskid'] + 'child' +
-                                    checkint)[0].querySelectorAll('.e-connector-line-right-arrow'), criticalConnectorLineRightArrow);
+                                    checkint)[0].querySelectorAll('.e-connector-line'), criticalConnectorLineSVG);
                                 addClass(this.parent.element.querySelectorAll('#ConnectorLineparent' + currentdata['taskid'] + 'child' +
-                                    checkint)[0].querySelectorAll('.e-connector-line-left-arrow'), criticalConnectorLineLeftArrow);
+                                    checkint)[0].querySelectorAll('.e-connector-line-arrow'), criticalConnectorArrowSVG);
                             }
                         }
                     }
@@ -30962,7 +31007,7 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
             splitTaskDuration = Math.ceil(currentTaskDifference / this.parent.timelineSettings.timelineUnitSize);
             splitTaskDuration -= 1;
         }
-        var contextMenuClickDate = this.parent.dataOperation.getEndDate(startDate, splitTaskDuration, (this.parent.timelineSettings.bottomTier.unit !== "None") ? this.parent.timelineSettings.bottomTier.unit.toLocaleLowerCase() : this.parent.timelineSettings.topTier.unit.toLocaleLowerCase(), this.rowData, false);
+        var contextMenuClickDate = this.parent.dataOperation.getEndDate(startDate, splitTaskDuration, (this.parent.timelineModule.customTimelineSettings.bottomTier.unit !== "None") ? this.parent.timelineModule.customTimelineSettings.bottomTier.unit.toLocaleLowerCase() : this.parent.timelineModule.customTimelineSettings.topTier.unit.toLocaleLowerCase(), this.rowData, false);
         return contextMenuClickDate;
     };
     ContextMenu$$1.prototype.contextMenuBeforeOpen = function (args) {
@@ -30972,7 +31017,7 @@ var ContextMenu$2 = /** @__PURE__ @class */ (function () {
                 this.parent.ganttChartModule.targetElement;
         // Closed edited cell before opening context menu
         // eslint-disable-next-line
-        if (!isNullOrUndefined(this.parent.editModule) && this.parent.editModule.cellEditModule && this.parent.editModule.cellEditModule.isCellEdit && target.parentElement.classList.contains('e-row') || target.parentElement.classList.contains('e-treecolumn-container')) {
+        if (!isNullOrUndefined(this.parent.editModule) && this.parent.editModule.cellEditModule && this.parent.editModule.cellEditModule.isCellEdit && target.parentElement.classList.contains('e-row')) {
             this.parent.treeGrid.closeEdit();
         }
         if (!isNullOrUndefined(args.element) && args.element.id === this.parent.element.id + '_contextmenu') {
@@ -34914,6 +34959,7 @@ var ExportHelper = /** @__PURE__ @class */ (function () {
                 predecessor.type = data.type;
                 predecessor.milestoneParent = data.milestoneParent;
                 predecessor.milestoneChild = data.milestoneChild;
+                predecessor.parentEndPoint = data.parentEndPoint;
                 predecessor.lineWidth = _this.parent.connectorLineWidth > 5 ? pixelToPoint(5) : pixelToPoint(_this.parent.connectorLineWidth);
                 if (data.isCritical) {
                     predecessor.connectorLineColor = _this.ganttStyle.criticalConnectorLineColor;
@@ -35927,22 +35973,11 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
     PdfGanttPredecessor.prototype.add = function () {
         return new PdfGanttPredecessor(this.parent);
     };
-    PdfGanttPredecessor.prototype.findindex = function (num, pdfExportProperties) {
+    PdfGanttPredecessor.prototype.findindex = function (num) {
         var dataindex;
-        if (pdfExportProperties.exportType === 'CurrentViewData') {
-            this.parent.currentViewData.map(function (data, index) {
-                if (data.index == num) {
-                    dataindex = index;
-                }
-            });
-        }
-        else {
-            this.parent.flatData.map(function (data, index) {
-                if (data.index == num) {
-                    dataindex = index;
-                }
-            });
-        }
+        this.parent.currentViewData.map(function (data, index) { if (data.index == num) {
+            dataindex = index;
+        } });
         return dataindex;
     };
     /**
@@ -35952,11 +35987,11 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @private
      */
-    PdfGanttPredecessor.prototype.drawPredecessor = function (pdfGantt, pdfExportProperties) {
+    PdfGanttPredecessor.prototype.drawPredecessor = function (pdfGantt) {
         this.pdfGantt = pdfGantt;
         var pages = pdfGantt.result.page.section.getPages();
-        var parentTask = pdfGantt.taskbarCollection[this.findindex(this.parentIndex, pdfExportProperties)];
-        var childTask = pdfGantt.taskbarCollection[this.findindex(this.childIndex, pdfExportProperties)];
+        var parentTask = pdfGantt.taskbarCollection[this.findindex(this.parentIndex)];
+        var childTask = pdfGantt.taskbarCollection[this.findindex(this.childIndex)];
         var startPage = new PdfPage();
         var endPage = new PdfPage();
         var predecessorType = '';
@@ -35966,7 +36001,7 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
         var childY = 0;
         switch (this.type) {
             case 'FS':
-                if ((!isNullOrUndefined(childTask) && childTask.startPage > -1) && (!isNullOrUndefined(parentTask) && parentTask.endPage > -1)) {
+                if (childTask.startPage > -1 && parentTask.endPage > -1) {
                     startPage = pages[parentTask.endPage];
                     endPage = pages[childTask.startPage];
                     parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
@@ -35993,7 +36028,7 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
                 }
                 break;
             case 'SF':
-                if ((!isNullOrUndefined(childTask) && childTask.endPage > -1) && (!isNullOrUndefined(parentTask) && parentTask.startPage > -1)) {
+                if (childTask.endPage > -1 && parentTask.startPage > -1) {
                     startPage = pages[parentTask.startPage];
                     endPage = pages[childTask.endPage];
                     parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
@@ -36020,7 +36055,7 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
                 }
                 break;
             case 'FF':
-                if ((!isNullOrUndefined(childTask) && childTask.endPage > -1) && (!isNullOrUndefined(parentTask) && parentTask.endPage > -1)) {
+                if (childTask.endPage > -1 && parentTask.endPage > -1) {
                     startPage = pages[parentTask.endPage];
                     endPage = pages[childTask.endPage];
                     parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
@@ -36047,7 +36082,7 @@ var PdfGanttPredecessor = /** @__PURE__ @class */ (function () {
                 }
                 break;
             case 'SS':
-                if ((!isNullOrUndefined(childTask) && childTask.startPage > -1) && (!isNullOrUndefined(parentTask) && parentTask.startPage > -1)) {
+                if (childTask.startPage > -1 && parentTask.startPage > -1) {
                     startPage = pages[parentTask.startPage];
                     endPage = pages[childTask.startPage];
                     parentPageData = pdfGantt.pdfPageDetail[parentTask.startPage - pdfGantt.chartPageIndex];
@@ -36405,12 +36440,12 @@ var PdfGantt = /** @__PURE__ @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    PdfGantt.prototype.drawChart = function (result, pdfExportProperties) {
+    PdfGantt.prototype.drawChart = function (result) {
         this.result = result;
         this.totalPages = this.result.page.section.count;
         this.perColumnPages = this.totalPages / this.layouter.columnRanges.length;
         this.calculateRange();
-        this.drawGantttChart(pdfExportProperties);
+        this.drawGantttChart();
         this.drawPageBorder();
     };
     //Calcualte the header range for each pdf page based on schedule start and end date.
@@ -36559,7 +36594,7 @@ var PdfGantt = /** @__PURE__ @class */ (function (_super) {
         }
     };
     //Draw the gantt chart side
-    PdfGantt.prototype.drawGantttChart = function (pdfExportProperties) {
+    PdfGantt.prototype.drawGantttChart = function () {
         var _this = this;
         var taskbarPoint = this.startPoint;
         var pagePoint = new PointF();
@@ -36634,7 +36669,7 @@ var PdfGantt = /** @__PURE__ @class */ (function (_super) {
         // Draw predecessor line.
         for (var i = 0; i < this.predecessorCollection.length; i++) {
             var predecessor = this.predecessorCollection[i];
-            predecessor.drawPredecessor(this, pdfExportProperties);
+            predecessor.drawPredecessor(this);
         }
     };
     return PdfGantt;
@@ -36751,7 +36786,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
             var format = new PdfTreeGridLayoutFormat();
             format.break = PdfLayoutBreakType.FitElement;
             var layouter = _this.gantt.drawGrid(pdfPage, 0, 0, format);
-            _this.gantt.drawChart(layouter, pdfExportProperties);
+            _this.gantt.drawChart(layouter);
             if (!isMultipleExport) {
                 if (!_this.isBlob) {
                     // save the PDF