@syncfusion/ej2-gantt 21.2.9 → 22.1.34

package/dist/es6/ej2-gantt.es2015.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';
@@ -734,24 +735,7 @@ class DateProcessor {
                 this.setTime(this.parent.defaultStartTime, sDate);
             }
             else if (!isNullOrUndefined(duration)) {
-                this.parent.flatData.map((record) => {
-                    if (record.ganttProperties.taskId == ganttProp.taskId) {
-                        if ((!isNullOrUndefined(record.parentItem)) && (record.parentItem.taskId)) {
-                            this.parent.flatData.map((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 {
@@ -1557,7 +1541,15 @@ class DateProcessor {
             const segment = segments[i];
             const sDate = segment.startDate;
             const 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;
     }
@@ -1885,7 +1877,7 @@ class TaskProcessor extends DateProcessor {
             (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);
@@ -2326,7 +2318,7 @@ class TaskProcessor extends DateProcessor {
             startDate = this.getDateFromFormat(data[taskSettings.startDate], true);
             endDate = this.getDateFromFormat(data[taskSettings.endDate], true);
         }
-        const segments = taskSettings.segments && (!isNullOrUndefined(data[taskSettings.segments]) || !isNullOrUndefined(ganttData.taskData)) ? (data[taskSettings.segments] ||
+        const segments = taskSettings.segments ? (data[taskSettings.segments] ||
             ganttData.taskData[taskSettings.segments]) : null;
         const isMileStone = taskSettings.milestone ? data[taskSettings.milestone] ? true : false : false;
         const durationMapping = data[taskSettings.durationUnit] ? data[taskSettings.durationUnit] : '';
@@ -2948,7 +2940,7 @@ class TaskProcessor extends DateProcessor {
             const data = [];
             for (let k = 0; k < preTaskResources.length; k++) {
                 resourceData.filter((resourceInfo) => {
-                    if (resourceInfo[resourceSettings.id] === preTaskResources[k][resourceSettings.id]) {
+                    if (resourceInfo[resourceSettings.id] === preTaskResources[k][resourceSettings.id] && data.indexOf(preTaskResources[k]) === -1) {
                         data.push(preTaskResources[k]);
                     }
                 });
@@ -3014,7 +3006,7 @@ class TaskProcessor extends DateProcessor {
     setDataSource(data) {
         let createData = [];
         let length = data.length;
-        for (var i = 0; i < length; i++) {
+        for (let i = 0; i < length; i++) {
             let record = data[i];
             createData.push(record);
             if (!(isNullOrUndefined(data[i][this.parent.taskFields.child]))) {
@@ -3031,15 +3023,17 @@ class TaskProcessor extends DateProcessor {
         else {
             hierarchicalData = this.parent.dataSource;
         }
-        hierarchicalData.map((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((data) => {
+            hierarchicalData.map((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];
+                    }
                 }
-            }
+            });
         });
     }
     getWorkInHour(work, workUnit) {
@@ -3149,9 +3143,6 @@ class TaskProcessor extends DateProcessor {
             return resourceIdCollection;
         }
         resourceIdCollection = data[this.parent.taskFields.resourceInfo];
-        if (resourceIdCollection != "" && typeof resourceIdCollection == "string") {
-            resourceIdCollection = resourceIdCollection.split(',');
-        }
         let resourceData;
         if (!isNullOrUndefined(this.parent.editModule) && !isNullOrUndefined(this.parent.editModule.dialogModule)
             && this.parent.editModule.dialogModule.isAddNewResource) {
@@ -3161,7 +3152,6 @@ class TaskProcessor extends DateProcessor {
             resourceData = this.parent.resources;
         }
         const resourceIDMapping = this.parent.resourceFields.id;
-        const resourceNameMapping = this.parent.resourceFields.name;
         const resourceUnitMapping = this.parent.resourceFields.unit;
         const resourceGroup = this.parent.resourceFields.group;
         const resources = [];
@@ -3172,7 +3162,7 @@ class TaskProcessor extends DateProcessor {
                     return true;
                 }
                 else {
-                    return (resourceIdCollection[count] === resourceInfo[resourceIDMapping]) || (resourceIdCollection[count] === resourceInfo[resourceNameMapping]);
+                    return (resourceIdCollection[count] === resourceInfo[resourceIDMapping]);
                 }
             });
             const ganttDataResource = extend({}, resource[0]);
@@ -3226,7 +3216,9 @@ class TaskProcessor extends DateProcessor {
                 if (resourceUnit !== 100) {
                     resName += '[' + resourceUnit + '%' + ']';
                 }
-                resourceName.push(resName);
+                if (!isNullOrUndefined(resName)) {
+                    resourceName.push(resName);
+                }
                 if (data.taskData) {
                     const mapping = taskMapping.resourceInfo;
                     // eslint-disable-next-line
@@ -3727,7 +3719,8 @@ class TaskProcessor extends DateProcessor {
         if (!isNullOrUndefined(ganttRecord.segments) && ganttRecord.segments.length > 0) {
             const segments = ganttRecord.segments;
             let fixedWidth = true;
-            const totalTaskWidth = this.splitTasksDuration(segments) * this.parent.perDayWidth;
+            const totalTaskWidth = this.splitTasksDuration(segments) * ((this.parent.timelineModule.bottomTier === "Hour" || this.parent.timelineModule.bottomTier === "Minutes") ? this.parent.timelineSettings.timelineUnitSize : this.parent.perDayWidth);
+            
             let totalProgressWidth = this.parent.dataOperation.getProgressWidth(totalTaskWidth, ganttRecord.progress);
             for (let i = 0; i < segments.length; i++) {
                 const segment = segments[i];
@@ -3775,6 +3768,8 @@ class TaskProcessor extends DateProcessor {
         const 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
@@ -3999,15 +3994,10 @@ const childTaskBarInnerDiv = 'e-gantt-child-taskbar-inner-div';
 const childProgressBarInnerDiv = 'e-gantt-child-progressbar-inner-div';
 const criticalChildTaskBarInnerDiv = 'e-gantt-child-critical-taskbar-inner-div';
 const criticalChildProgressBarInnerDiv = 'e-gantt-child-critical-progressbar-inner-div';
-const milestoneTop = 'e-milestone-top';
-const milestoneBottom = 'e-milestone-bottom';
-const criticalMilestoneTop = 'e-critical-milestone-top';
-const criticalMilestoneBottom = 'e-critical-milestone-bottom';
+const criticalMilestone = 'e-critical-milestone';
 const baselineBar = 'e-baseline-bar';
 const baselineMilestoneContainer = 'e-baseline-gantt-milestone-container';
-const baselineMilestoneDiv = 'e-baseline-gantt-milestone';
-const baselineMilestoneTop = 'e-baseline-milestone-top';
-const baselineMilestoneBottom = 'e-baseline-milestone-bottom';
+
 const chartRowCell = 'e-chart-row-cell';
 const chartRow = 'e-chart-row';
 const rowExpand = 'e-row-expand';
@@ -4021,15 +4011,11 @@ const progressBarHandlerAfter = 'e-progressbar-handler-after';
 const icon = 'e-icon';
 const traceMilestone = 'e-gantt-milestone';
 const parentMilestone = 'e-gantt-parent-milestone';
-const parentMilestoneTop = 'e-parent-milestone-top';
-const parentMilestoneBottom = 'e-parent-milestone-bottom';
 const traceChildTaskBar = 'e-gantt-child-taskbar';
 const traceChildProgressBar = 'e-gantt-child-progressbar';
 const manualParentMainContainer = 'e-manualparent-main-container';
 const manualParentTaskBar = 'e-gantt-manualparenttaskbar';
 const manualParentMilestone = 'e-gantt-manualparent-milestone';
-const manualParentMilestoneTop = 'e-manualparent-milestone-top';
-const manualParentMilestoneBottom = 'e-manualparent-milestone-bottom';
 const manualChildTaskBar = 'e-gantt-child-manualtaskbar';
 const manualChildProgressBar = 'e-gantt-child-manualprogressbar';
 const manualParentRightResizer = 'e-gantt-manualparenttaskbar-right';
@@ -4060,25 +4046,29 @@ const weekend = 'e-weekend';
 const unscheduledTaskbarLeft = 'e-gantt-unscheduled-taskbar-left';
 const unscheduledTaskbarRight = 'e-gantt-unscheduled-taskbar-right';
 const unscheduledTaskbar = 'e-gantt-unscheduled-taskbar';
-const unscheduledMilestoneTop = 'e-unscheduled-milestone-top';
-const unscheduledMilestoneBottom = 'e-unscheduled-milestone-bottom';
+
+
 //Connector Line
 const dependencyViewContainer = 'e-gantt-dependency-view-container';
 const connectorLineContainer = 'e-connector-line-container';
-const connectorLine = 'e-line';
-const criticalConnectorLine = 'e-criticalconnector-line';
-const criticalConnectorLineRightArrow = 'e-criticalconnector-line-right-arrow';
-const criticalConnectorLineLeftArrow = 'e-criticalconnector-line-left-arrow';
-const connectorLineRightArrow = 'e-connector-line-right-arrow';
-const connectorLineLeftArrow = 'e-connector-line-left-arrow';
+
+const connectorLineSVG = 'e-connector-line';
+const criticalConnectorLineSVG = 'e-critical-line';
+const criticalConnectorArrowSVG = 'e-critical-line-arrow';
+const connectorLineArrow = 'e-connector-line-arrow';
+
+
+
+
+
 const connectorLineZIndex = 'e-connector-line-z-index';
-const connectorLineHover = 'e-connector-line-hover';
-const criticalConnectorLineHover = 'e-critical-connector-line-hover';
-const connectorLineHoverZIndex = 'e-connector-line-hover-z-index';
-const connectorLineRightArrowHover = 'e-connector-line-right-arrow-hover';
-const connectorLineLeftArrowHover = 'e-connector-line-left-arrow-hover';
-const criticalConnectorLineRightArrowHover = 'e-critical-connector-line-right-arrow-hover';
-const criticalConnectorLineLeftArrowHover = 'e-critical-connector-line-left-arrow-hover';
+
+
+
+
+
+
+
 
 const connectorPointLeft = 'e-connectorpoint-left';
 const connectorPointRight = 'e-connectorpoint-right';
@@ -4806,6 +4796,16 @@ class GanttChart {
         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();
+        }
         let isTaskbarEdited = false;
         if (this.parent.editSettings.allowTaskbarEditing &&
             getValue('editModule.taskbarEditModule.isMouseDragged', this.parent) &&
@@ -5364,7 +5364,72 @@ class GanttChart {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             $target.closest('.e-chart-row') ? $target.closest('.e-chart-row').rowIndex : -1;
         const isTab = (e.action === 'tab') ? true : false;
-        const nextElement = this.getNextElement($target, isTab, isInEditedState);
+        let nextElement = this.getNextElement($target, isTab, isInEditedState);
+        if (nextElement && $target.classList.contains('e-headercell')) {
+            let 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 {
+                    let toolbarItems = document.getElementsByClassName('e-toolbar-item');
+                    for (let 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')) {
+            let toolbarItems = document.getElementsByClassName('e-toolbar-item');
+            for (let 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 (let 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 (let 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 (let 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) {
@@ -5388,7 +5453,7 @@ class GanttChart {
         }
         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')) {
@@ -5424,11 +5489,21 @@ class GanttChart {
                         }
                     }
                     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
@@ -5440,7 +5515,8 @@ class GanttChart {
                     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);
                             const fmodule = getValue('focusModule', this.parent.treeGrid.grid);
@@ -5452,7 +5528,17 @@ class GanttChart {
                         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);
                 }
@@ -5539,6 +5625,17 @@ class GanttChart {
                 const childElement = this.getChildElement(rowElement, isTab);
                 return childElement;
             }
+            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;
     }
@@ -8045,7 +8142,7 @@ class GanttTreeGrid {
         }
     } // eslint-disable-next-line
     durationValueAccessor(field, data, column) {
-        const ganttProp = (!isNullOrUndefined(data)) ? data.ganttProperties : null;
+        const ganttProp = data.ganttProperties;
         if (!isNullOrUndefined(ganttProp)) {
             return this.parent.dataOperation.getDurationString(ganttProp.duration, ganttProp.durationUnit);
         }
@@ -8671,7 +8768,7 @@ class ChartRows extends DateProcessor {
     createChartTable() {
         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' }
         });
         const colgroup = createElement('colgroup');
@@ -8755,7 +8852,7 @@ class ChartRows extends DateProcessor {
                 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) + '"' +
@@ -9234,15 +9331,8 @@ class ChartRows extends DateProcessor {
             milestoneNode = this.milestoneTemplateFunction(extend({ index: i }, data), this.parent, 'MilestoneTemplate', this.getTemplateID('MilestoneTemplate'), false, undefined, rootElement[0], this.parent.treeGrid['root']);
         }
         else {
-            const 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>';
+            const 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;
@@ -9270,25 +9360,9 @@ class ChartRows extends DateProcessor {
     getMilestoneBaselineNode() {
         const data = this.templateData;
         let baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
-        const 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>';
+        const 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);
     }
     /**
@@ -9414,16 +9488,8 @@ class ChartRows extends DateProcessor {
             (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>' : '');
-        const 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>';
+        const 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);
     }
     /**
@@ -9448,8 +9514,8 @@ class ChartRows extends DateProcessor {
                 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>');
             const progressBarInnerDiv = this.createDivElement('<div class="' + parentProgressBarInnerDiv + ' ' +
                 this.getExpandClass(data) + ' ' + traceParentProgressBar + '"' +
@@ -9514,13 +9580,8 @@ class ChartRows extends DateProcessor {
                     parentLabel && !parentLabel['elementRef'] && div.innerHTML !== '')
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent = parentLabel;
             }
-            const 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>';
+            const 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;
@@ -9897,8 +9958,8 @@ class ChartRows extends DateProcessor {
         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.
@@ -9966,7 +10027,6 @@ class ChartRows extends DateProcessor {
                 const 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) {
@@ -9985,11 +10045,12 @@ class ChartRows extends DateProcessor {
                 }
             }
             this.ganttChartTableBody.replaceChildren(...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) {
@@ -10062,7 +10123,7 @@ class ChartRows extends DateProcessor {
         else if (this.templateData.ganttProperties.isMilestone) {
             const 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) {
@@ -10238,9 +10299,9 @@ class ChartRows extends DateProcessor {
         const 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) {
@@ -10308,14 +10369,12 @@ class ChartRows extends DateProcessor {
         }
         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) {
@@ -10396,9 +10455,9 @@ class ChartRows extends DateProcessor {
     getClassName(args) {
         const 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;
     }
     /**
@@ -10411,7 +10470,7 @@ class ChartRows extends DateProcessor {
     templateCompiler(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 {
@@ -11561,11 +11620,28 @@ class Dependency {
  */
 class ConnectorLine {
     constructor(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.
@@ -11594,7 +11670,7 @@ class ConnectorLine {
     }
     getTaskbarMidpoint(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;
     }
     /**
@@ -11643,6 +11719,10 @@ class ConnectorLine {
             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;
             }
@@ -11665,8 +11745,8 @@ class ConnectorLine {
             connectorLine$$1 = connectorLine$$1 + this.getConnectorLineTemplate(connectorLinesCollection[index]);
             ariaConnector.push(connectorLinesCollection[index]);
         }
-        this.dependencyViewContainer.innerHTML = connectorLine$$1;
-        const childNodes = this.parent.connectorLineModule.dependencyViewContainer.childNodes;
+        this.svgObject.innerHTML = connectorLine$$1;
+        const childNodes = this.parent.connectorLineModule.svgObject.childNodes;
         for (let i = 0; i < childNodes.length; i++) {
             const innerChild = childNodes[i].childNodes;
             for (let j = 0; j < innerChild.length; j++) {
@@ -11674,9 +11754,10 @@ class ConnectorLine {
                 innerChild[j].setAttribute('aria-label', ariaString);
             }
         }
-        this.parent.ganttChartModule.chartBodyContent.appendChild(this.dependencyViewContainer);
-        for (let 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 (let i = 0; i < this.svgObject.children.length; i++) {
+            this.svgObject.children[i].children[0].setAttribute('tabindex', '-1');
         }
     }
     /**
@@ -11934,16 +12015,15 @@ class ConnectorLine {
         const height = this.getHeightValue(data);
         const isMilestoneParent = data.milestoneParent ? true : false;
         const isMilestone = data.milestoneChild ? true : false;
-        let connectorContainer = '';
         const isVirtual = this.parent.virtualScrollModule && this.parent.enableVirtualization;
         const connectorLine$$1 = this.getPosition(data, this.getParentPosition(data), height);
+        const rowPosition = this.getPosition(data, this.getParentPosition(data), height);
+        let rowPositionHeight = rowPosition.top;
         let isMilestoneValue = 0;
         if (this.parent.renderBaseline) {
             isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
         }
         let heightValue = isVirtual ? connectorLine$$1.height : (height + isMilestoneValue);
-        let borderTopWidth = 0;
-        let addTop = 0;
         let parentOverlapTopValue = 0;
         let childOverlapTopValue = 0;
         let count = 0;
@@ -11980,454 +12060,318 @@ class ConnectorLine {
             }
             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">';
-            let div = '<div class="' + connectorLineContainer +
-                '" tabindex="-1" style="';
-            let direction = this.parent.enableRtl ? 'right:' : 'left:';
-            const eLine = '<div class="' + connectorLine + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            let rightArrow;
-            let leftArrow;
-            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 + ';' : '');
-            }
-            const 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>';
-            const 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>';
-            const 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>';
-            const duplicateStingFour = leftArrow + (this.parent.enableRtl ? 'right:' : 'left:') +
-                (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
-                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10);
-            const 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 .
@@ -12493,10 +12437,10 @@ class ConnectorLine {
      * @private
      */
     getConnectorLineTooltipInnerTd(fromTaskName, fromPredecessorText, toTaskName, toPredecessorText) {
-        let 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>';
+        let 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;
     }
     /**
@@ -13006,7 +12950,7 @@ class Tooltip$1 {
      * @param {IGanttData} ganttData .
      * @param {Gantt} parent .
      * @param {TooltipEventArgs} args .
-     * @returns {string} .
+     * @returns {string | Function} .
      */
     getTooltipContent(elementType, ganttData, parent, args) {
         let content$$1;
@@ -13038,8 +12982,11 @@ class Tooltip$1 {
                     let sDate = !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>';
+                    let contentTemp = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + sDate + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp);
                     break;
                 }
             case 'taskbar':
@@ -13057,19 +13004,22 @@ class Tooltip$1 {
                     }
                     let startDate = data.startDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant(scheduledTask ? 'startDate' : 'subTasksStartDate') +
-                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
+                        '</td><td style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value"> ' + startDateValue + '</td></tr>' : '';
                     let endDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant(scheduledTask ? 'endDate' : 'subTasksEndDate') +
-                        '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
+                        '</td><td style="padding: 2px;">:</td>' + '<td class = "e-gantt-tooltip-value">' + endDateValue + '</td></tr>' : '';
                     let duration = !isNullOrUndefined(data.duration) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('duration') + '</td><td>:</td>' +
+                        this.parent.localeObj.getConstant('duration') + '</td><td style="padding: 2px;">:</td>' +
                         '<td class = "e-gantt-tooltip-value"> ' + durationValue +
                         '</td></tr>' : '';
                     let progress = !isNullOrUndefined(data.progress) ? '<tr><td class = "e-gantt-tooltip-label">' +
-                        this.parent.localeObj.getConstant('progress') + '</td><td>:</td><td>' + progressValue +
+                        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>';
+                    let contentTemp = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + startDate + endDate + duration + progress + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp);
                     break;
                 }
             case 'baseline':
@@ -13080,13 +13030,16 @@ class Tooltip$1 {
                         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>';
+                    let contentTemp = 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 + '</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>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp, this);
                     break;
                 }
             case 'marker':
@@ -13098,8 +13051,11 @@ class Tooltip$1 {
                         markerLabel = typeof (markerLabel) === 'string' ? SanitizeHtmlHelper.sanitize(markerLabel) : markerLabel;
                         markerTooltipElementValue = typeof (markerTooltipElementValue) === 'string' ? SanitizeHtmlHelper.sanitize(markerTooltipElementValue) : markerTooltipElementValue;
                     }
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr><td>' +
-                        markerTooltipElementValue + '</td></tr><tr><td>' + (this.parent.disableHtmlEncode ? markerLabel.replace(/</g, "&lt;").replace(/>/g, "&gt;") : markerLabel) + '</td></tr></tbody></table>';
+                    let contentTemp = function () {
+                        return '<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>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp, this);
                     break;
                 }
             case 'connectorLine':
@@ -13118,16 +13074,19 @@ class Tooltip$1 {
                         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>';
+                    let contentTemp = 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.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>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp, this);
                     break;
                 }
             case 'indicator':
@@ -13136,7 +13095,10 @@ class Tooltip$1 {
                     if (this.parent.enableHtmlSanitizer && typeof (titleValue) === 'string') {
                         titleValue = SanitizeHtmlHelper.sanitize(titleValue);
                     }
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
+                    let contentTemp = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + titleValue + '</tr></tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp);
                 }
                 break;
             case 'timeline':
@@ -13144,7 +13106,10 @@ class Tooltip$1 {
                 if (this.parent.enableHtmlSanitizer && typeof (timlineTitleValue) === 'string') {
                     timlineTitleValue = SanitizeHtmlHelper.sanitize(timlineTitleValue);
                 }
-                content$$1 = '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
+                let contentTemp = function () {
+                    return '<table class = "e-gantt-tooltiptable"><tbody><tr>' + timlineTitleValue + '</tr></tbody></table>';
+                };
+                content$$1 = initializeCSPTemplate(contentTemp);
                 break;
             case 'manualtaskbar':
                 {
@@ -13176,8 +13141,11 @@ class Tooltip$1 {
                     let manualEndDate = data.endDate ? '<tr><td class = "e-gantt-tooltip-label">' +
                         this.parent.localeObj.getConstant('endDate') + '</td><td>:</td>' + '<td class = "e-gantt-tooltip-value">' +
                         manualEndDateValue + '</td></tr>' : '';
-                    content$$1 = '<table class = "e-gantt-tooltiptable"><tbody>' +
-                        taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
+                    let contentTemp = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + manualStartDate + autoStartDate + manualEndDate + autoEndDate + durationValue + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp);
                     break;
                 }
             case 'manualmilestone':
@@ -13199,8 +13167,11 @@ class Tooltip$1 {
                     let date = '<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>';
+                    let contentTemp = function () {
+                        return '<table class = "e-gantt-tooltiptable"><tbody>' +
+                            taskName + date + autoStart + autoEnd + '</tbody></table>';
+                    };
+                    content$$1 = initializeCSPTemplate(contentTemp);
                     break;
                 }
         }
@@ -13226,7 +13197,7 @@ class Tooltip$1 {
      * @private
      */
     getPredecessorTooltipData(args) {
-        let predeceesorParent = args.target.parentElement.id;
+        let predeceesorParent = args.target.id;
         if (this.parent.enableHtmlSanitizer && typeof (predeceesorParent) === 'string') {
             predeceesorParent = SanitizeHtmlHelper.sanitize(predeceesorParent);
         }
@@ -13259,7 +13230,7 @@ class Tooltip$1 {
     /**
      * To compile template string.
      *
-     * @param {string} template .
+     * @param {string | Function} template .
      * @param {Gantt} parent .
      * @param {IGanttData|PredecessorTooltip} data .
      * @param {string} propName .
@@ -14321,19 +14292,17 @@ let Gantt = class Gantt extends Component {
             this.notify('initPredessorDialog', {});
         }
         this.splitterModule.updateSplitterPosition();
-        if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
-            this.renderChartVerticalLines();
-        }
+        // if (this.gridLines === 'Vertical' || this.gridLines === 'Both') {
+        //     this.renderChartVerticalLines();
+        // }
     }
     removeCriticalPathStyles() {
         const 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);
     }
     wireEvents() {
         if (this.allowKeyboard) {
@@ -14345,6 +14314,15 @@ let Gantt = class Gantt extends Component {
         }
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         EventHandler.add(window, 'resize', this.windowResize, this);
+        EventHandler.add(document.body, 'keydown', this.keyDownHandler, this);
+    }
+    keyDownHandler(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.
@@ -15445,9 +15423,9 @@ let Gantt = class Gantt extends Component {
         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 = '';
         let headerTable = this.element.getElementsByClassName('e-timeline-header-table-container')[1];
@@ -15836,9 +15814,6 @@ let Gantt = class Gantt extends Component {
         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();
         }
@@ -18068,23 +18043,23 @@ class EditTooltip {
             let duration;
             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':
                     const 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;
@@ -18341,8 +18316,7 @@ class TaskbarEdit extends DateProcessor {
             || 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 {
@@ -18358,18 +18332,60 @@ class TaskbarEdit extends DateProcessor {
         if (this.parent.editSettings.allowTaskbarEditing && element) {
             this.showHideTaskBarEditingElements(element, this.taskBarEditElement);
             this.editElement = element;
-            this.taskBarEditElement = element;
-            const index = this.taskBarEditElement.getAttribute('data-segment-index');
+            this.realTaskbarElement = this.editElement;
+            const 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);
+                const index = this.editElement.getAttribute('data-segment-index');
+                const currentRecord = this.parent.ganttChartModule.getRecordByTaskBar(element);
+                const ganttprop = currentRecord.ganttProperties;
+                const parentleft = this.editElement.parentElement.offsetLeft;
+                this.currentData = currentRecord;
+                const 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");
+                const currentindex = this.editElement.getAttribute('data-segment-index');
+                resizeElement.style.setProperty("left", ((!isNullOrUndefined(ganttprop.segments) ? parentleft + ganttprop.segments[Number(currentindex)].left + "px" : (ganttprop.left) + "px")));
+                const resizeTable = this.parent.createElement('table');
+                const resizetableBody = this.parent.createElement("tbody");
+                resizetableBody.appendChild(resizeElement);
+                resizeTable.appendChild(resizetableBody);
+                var Check = this.parent.ganttChartModule.chartBodyContainer.querySelector('.e-clone-taskbar');
+                let createTable = null;
+                if ((this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'LeftResizing') && !isNullOrUndefined(index) && !isNullOrUndefined(index) ? Number(index) === 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');
+                    const tableBody = this.parent.createElement("tbody");
+                    tableBody.appendChild(cloneTaskBar);
+                    createTable.appendChild(tableBody);
+                }
+                if ((this.taskBarEditAction === 'ChildDrag' || this.taskBarEditAction === 'LeftResizing') && !isNullOrUndefined(index) && !isNullOrUndefined(index) ? Number(index) === 0 : false) {
+                    const segmentedTasks = cloneTaskBar.getElementsByClassName('e-segmented-taskbar');
+                    this.cloneTaskbarElement = segmentedTasks[Number(index)];
+                }
+                else {
+                    this.cloneTaskbarElement = cloneTaskBar;
+                }
+                this.taskBarEditElement = this.cloneTaskbarElement;
+                this.taskbarElement = createTable;
+                this.taskbarResizer = resizeTable;
+                this.currentIndex = index;
+                this.roundOffDuration = true;
                 if ((this.taskBarEditAction === 'ConnectorPointLeftDrag' || this.taskBarEditAction === 'ConnectorPointRightDrag') &&
                     isNullOrUndefined(this.parent.taskFields.dependency)) {
                     this.taskBarEditAction = null;
@@ -18400,7 +18416,7 @@ class TaskbarEdit extends DateProcessor {
                 this.initPublicProp();
             }
             else {
-                this.showHideTaskBarEditingElements(element, this.taskBarEditElement);
+                this.showHideTaskBarEditingElements(element, this.editElement);
             }
         }
     }
@@ -18435,9 +18451,10 @@ class TaskbarEdit extends DateProcessor {
                 addClass([element.querySelector('.' + taskBarLeftResizer)], [leftResizeGripper]);
                 addClass([element.querySelector('.' + taskBarRightResizer)], [rightResizeGripper]);
                 if (isShowProgressResizer) {
-                    const progresElement = !isNullOrUndefined(element.querySelector('.' + childProgressResizer)) ? true : false;
-                    if (progresElement) {
-                        addClass([element.querySelector('.' + childProgressResizer)], [progressResizeGripper]);
+                    const progressElement = element.querySelector('.' + childProgressResizer);
+                    if (!isNullOrUndefined(progressElement)) {
+                        addClass([progressElement], [progressResizeGripper]);
+                        progressElement.style.top = '3px';
                     }
                 }
             }
@@ -18518,9 +18535,6 @@ class TaskbarEdit extends DateProcessor {
         }
         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';
         }
@@ -18616,6 +18630,21 @@ class TaskbarEdit extends DateProcessor {
         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') {
+                    const rootElement = this.parent.ganttChartModule.chartBodyContainer.querySelectorAll(".e-chart-rows-container");
+                    rootElement[0].appendChild(this.taskbarResizer);
+                }
+            }
             const args = {
                 cancel: false,
                 requestType: 'taskbarediting',
@@ -18721,16 +18750,6 @@ class TaskbarEdit extends DateProcessor {
                     merge(this.taskBarEditRecord.ganttProperties, arg.previousData);
                 }
             });
-            this.parent.flatData.map((data) => {
-                if ((!isNullOrUndefined(this.taskBarEditRecord.parentItem)) && data.ganttProperties.taskId === this.taskBarEditRecord.parentItem.taskId) {
-                    data.childRecords.map((s) => {
-                        if (isNullOrUndefined(s.ganttProperties.startDate) || isNullOrUndefined(s.ganttProperties.endDate) ||
-                            isNullOrUndefined(s.ganttProperties.duration)) {
-                            this.parent.dataOperation.updateGanttData();
-                        }
-                    });
-                }
-            });
         }
     }
     /**
@@ -19535,6 +19554,15 @@ class TaskbarEdit extends DateProcessor {
      * @private
      */
     setItemPosition() {
+        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");
+            }
+        }
         const item = this.taskBarEditRecord.ganttProperties;
         let position = this.parent.enableRtl ? "right" : "left";
         const segment = !isNullOrUndefined(item.segments) ? item.segments[this.segmentIndex] : null;
@@ -19544,13 +19572,10 @@ class TaskbarEdit extends DateProcessor {
         if (!isNullOrUndefined(segment)) {
             rightResizer = this.parent.isAdaptive ? (segment.width - 2) : (segment.width - 10);
         }
-        const taskBarMainContainer$$1 = (!this.taskBarEditElement.classList.contains(taskBarMainContainer)) ? closest(this.taskBarEditElement, 'tr.' + chartRow)
+        this.taskBarEditElement.style.setProperty("opacity", '.75');
+        const 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;
         const segmentedTaskBarContainer = this.taskBarEditElement.classList.contains('e-segmented-taskbar');
-        const leftLabelContainer$$1 = closest(this.taskBarEditElement, 'tr.' + chartRow)
-            .querySelector('.' + leftLabelContainer);
-        const rightLabelContainer$$1 = closest(this.taskBarEditElement, 'tr.' + chartRow)
-            .querySelector('.' + rightLabelContainer);
         const traceChildProgressBar$$1 = this.taskBarEditElement.querySelector('.' + traceChildProgressBar);
         const traceChildTaskBar$$1 = this.taskBarEditElement.querySelector('.' + traceChildTaskBar);
         const childProgressResizer$$1 = this.taskBarEditElement.querySelector('.' + childProgressResizer);
@@ -19562,34 +19587,45 @@ class TaskbarEdit extends DateProcessor {
         const manualTaskbar = this.taskBarEditElement.querySelector('.' + manualParentTaskBar);
         const manualParentRight = this.taskBarEditElement.querySelector('.' + manualParentRightResizer);
         const manualParentLeft = this.taskBarEditElement.querySelector('.' + manualParentLeftResizer);
+        const 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');
                     const parent = this.taskBarEditElement.parentElement;
                     const segmentedTasks = parent.getElementsByClassName('e-segmented-taskbar');
                     for (let i = 0; i < item.segments.length; i++) {
                         const segment = item.segments[i];
                         const segmentElement = segmentedTasks[i];
                         segmentElement.style.width = (segment.width) + 'px';
+                        if (i === 0) {
+                            resizeLine.style.width = (segment.width) + "px";
+                            resizeLine.style.left = (segment.left + item.left) + "px";
+                        }
                         if (this.parent.enableRtl) {
                             segmentElement.style.right = (segment.left) + 'px';
                         }
@@ -19598,8 +19634,10 @@ class TaskbarEdit extends DateProcessor {
                         }
                     }
                 }
-                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) {
@@ -19612,10 +19650,8 @@ class TaskbarEdit extends DateProcessor {
             }
             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) {
@@ -19638,6 +19674,7 @@ class TaskbarEdit extends DateProcessor {
                 }
             }
             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';
@@ -19648,23 +19685,36 @@ class TaskbarEdit extends DateProcessor {
                 }
             }
             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');
@@ -20060,21 +20110,21 @@ class TaskbarEdit extends DateProcessor {
             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);
         }
@@ -22609,10 +22659,11 @@ class ConnectorLineEdit {
      * @private
      */
     getConnectorLineHoverElement(target) {
-        const isOnLine = parentsUntil$1(target, connectorLine);
-        const isOnRightArrow = parentsUntil$1(target, connectorLineRightArrow);
-        const isOnLeftArrow = parentsUntil$1(target, connectorLineLeftArrow);
-        if (isOnLine || isOnRightArrow || isOnLeftArrow) {
+        const isOnLine = parentsUntil$1(target, connectorLineSVG);
+        const isArrow = parentsUntil$1(target, connectorLineArrow);
+        const isCriticalLine = parentsUntil$1(target, criticalConnectorLineSVG);
+        var isCriticalArrow = parentsUntil$1(target, criticalConnectorArrowSVG);
+        if (isOnLine || isArrow || isCriticalLine || isCriticalArrow) {
             return parentsUntil$1(target, connectorLineContainer);
         }
         else {
@@ -22646,16 +22697,13 @@ class ConnectorLineEdit {
      */
     addHighlight(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]);
+        const pathElement = element.querySelector('.' + connectorLineSVG);
+        const 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');
         }
     }
     /**
@@ -22665,17 +22713,14 @@ class ConnectorLineEdit {
      * @private
      */
     removeHighlight() {
-        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) {
+            const pathElement = this.connectorLineElement.querySelector('.' + connectorLineSVG);
+            const 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;
         }
@@ -22742,8 +22787,8 @@ class ConnectorLineEdit {
         this.parent.connectorLineModule.expandedRecords = this.parent.virtualScrollModule && this.parent.enableVirtualization ?
             this.parent.updatedRecords : this.parent.getExpandedRecords(this.parent.updatedRecords);
         const 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;
     }
     idFromPredecessor(pre) {
         const preArray = pre.split(',');
@@ -23363,9 +23408,9 @@ class ConnectorLineEdit {
     validateTypes(ganttRecord, data) {
         const predecessor = this.parent.predecessorModule.getValidPredecessor(ganttRecord);
         let parentGanttRecord;
-        let ganttTaskData;
         this.validationPredecessor = [];
         let violatedParent;
+        let ganttTaskData;
         let violateType;
         const startDate = this.parent.predecessorModule.getPredecessorDate(ganttRecord, predecessor);
         if (data) {
@@ -24438,6 +24483,10 @@ class Edit$2 {
         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);
@@ -24446,8 +24495,8 @@ class Edit$2 {
         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);
         }
@@ -24672,7 +24721,6 @@ class Edit$2 {
         }
         if (childRecords.length) {
             this.parent.dataOperation.updateParentItems(ganttRecord, true);
-            this.parent.dataOperation.updateGanttData();
         }
     }
     /**
@@ -24884,8 +24932,8 @@ class Edit$2 {
                 }
             }
             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);
             }
@@ -26254,6 +26302,7 @@ class Edit$2 {
         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;
@@ -26398,7 +26447,6 @@ class Edit$2 {
             let args = {};
             args = this.constructTaskAddedEventArgs(cAddedRecord, this.parent.editedRecords, 'beforeAdd');
             this.parent.trigger('actionBegin', args, (args) => {
-                this.parent.previousRecords = {};
                 if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
                     this.parent.showMaskRow();
                 }
@@ -28940,7 +28988,7 @@ class NonWorkingDay {
             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);
         }
     }
     /**
@@ -29089,7 +29137,7 @@ class NonWorkingDay {
     }
     updateHolidayLabelHeight() {
         const height = this.parent.getContentHeight();
-        let gantttable = this.parent.element;
+        let gantttable = document.getElementById("ganttContainer");
         // eslint-disable-next-line
         let toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
@@ -29277,9 +29325,12 @@ class DayMarkers {
         }
     }
     refreshMarkers() {
-        this.eventMarkerRender.renderEventMarkers();
         this.nonworkingDayRender.renderWeekends();
         this.nonworkingDayRender.renderHolidays();
+        if (this.parent.gridLines === 'Vertical' || this.parent.gridLines === 'Both') {
+            this.parent['renderChartVerticalLines']();
+        }
+        this.eventMarkerRender.renderEventMarkers();
     }
     updateHeight() {
         this.nonworkingDayRender.updateContainerHeight();
@@ -30041,11 +30092,8 @@ class CriticalPath {
             }
             if (element && (this.parent.viewType === 'ProjectView' || (this.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);
@@ -30081,11 +30129,9 @@ class CriticalPath {
                                 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);
                             }
                         }
                     }
@@ -30384,7 +30430,7 @@ class ContextMenu$2 {
             splitTaskDuration = Math.ceil(currentTaskDifference / this.parent.timelineSettings.timelineUnitSize);
             splitTaskDuration -= 1;
         }
-        const 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);
+        const 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;
     }
     contextMenuBeforeOpen(args) {
@@ -30393,7 +30439,7 @@ class ContextMenu$2 {
                 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') {
@@ -34088,6 +34134,7 @@ class ExportHelper {
                 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;
@@ -35073,22 +35120,11 @@ class PdfGanttPredecessor {
         this.parent = parent;
         this.pdfGantt = pdfGantt;
     }
-    findindex(num, pdfExportProperties) {
+    findindex(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((data, index) => { if (data.index == num) {
+            dataindex = index;
+        } });
         return dataindex;
     }
     /**
@@ -35098,11 +35134,11 @@ class PdfGanttPredecessor {
      * @returns {void}
      * @private
      */
-    drawPredecessor(pdfGantt, pdfExportProperties) {
+    drawPredecessor(pdfGantt) {
         this.pdfGantt = pdfGantt;
         const pages = pdfGantt.result.page.section.getPages();
-        const parentTask = pdfGantt.taskbarCollection[this.findindex(this.parentIndex, pdfExportProperties)];
-        const childTask = pdfGantt.taskbarCollection[this.findindex(this.childIndex, pdfExportProperties)];
+        const parentTask = pdfGantt.taskbarCollection[this.findindex(this.parentIndex)];
+        const childTask = pdfGantt.taskbarCollection[this.findindex(this.childIndex)];
         let startPage = new PdfPage();
         let endPage = new PdfPage();
         let predecessorType = '';
@@ -35112,7 +35148,7 @@ class PdfGanttPredecessor {
         let 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];
@@ -35139,7 +35175,7 @@ class PdfGanttPredecessor {
                 }
                 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];
@@ -35166,7 +35202,7 @@ class PdfGanttPredecessor {
                 }
                 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];
@@ -35193,7 +35229,7 @@ class PdfGanttPredecessor {
                 }
                 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];
@@ -35520,12 +35556,12 @@ class PdfGantt extends PdfTreeGrid {
         }
         return this.taskbars;
     }
-    drawChart(result, pdfExportProperties) {
+    drawChart(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.
@@ -35674,7 +35710,7 @@ class PdfGantt extends PdfTreeGrid {
         }
     }
     //Draw the gantt chart side
-    drawGantttChart(pdfExportProperties) {
+    drawGantttChart() {
         let taskbarPoint = this.startPoint;
         const pagePoint = new PointF();
         let pageStartX = 0;
@@ -35748,7 +35784,7 @@ class PdfGantt extends PdfTreeGrid {
         // Draw predecessor line.
         for (let i = 0; i < this.predecessorCollection.length; i++) {
             const predecessor = this.predecessorCollection[i];
-            predecessor.drawPredecessor(this, pdfExportProperties);
+            predecessor.drawPredecessor(this);
         }
     }
 }
@@ -35861,7 +35897,7 @@ class PdfExport {
             const format = new PdfTreeGridLayoutFormat();
             format.break = PdfLayoutBreakType.FitElement;
             const 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