@syncfusion/ej2-gantt 20.2.50 → 20.3.47

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

@@ -6,7 +6,7 @@ import { ColumnMenu, ContextMenu, Edit as Edit$1, ExcelExport, Filter, Reorder,
 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';
-import { MaskedTextBox, NumericTextBox, TextBox } from '@syncfusion/ej2-inputs';
+import { FormValidator, MaskedTextBox, NumericTextBox, TextBox } from '@syncfusion/ej2-inputs';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';
 import { CheckBoxSelection, ComboBox, DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
@@ -1712,7 +1712,9 @@ class TaskProcessor extends DateProcessor {
     }
     calculateSharedTaskUniqueIds() {
         for (let i = 0; i < this.parent.getTaskIds().length; i++) {
-            const value = this.parent.getTaskIds()[i].match(/(\d+|[A-z]+)/g);
+            const value = [];
+            value[0] = this.parent.getTaskIds()[i][0];
+            value[1] = this.parent.getTaskIds()[i].slice(1);
             if (value[0] !== 'R') {
                 const sharedRecords = [];
                 const ids = [];
@@ -1774,7 +1776,6 @@ class TaskProcessor extends DateProcessor {
                     this.parent.setRecordValue('autoDuration', this.calculateAutoDuration(parentProp), parentProp, true);
                     this.updateAutoWidthLeft(parentData);
                 }
-                this.resetDependency(parentData);
                 this.updateWidthLeft(parentData);
                 this.updateTaskData(parentData);
             }
@@ -1795,7 +1796,8 @@ class TaskProcessor extends DateProcessor {
         const length = columns.length;
         if (length) {
             for (let i = 0; i < length; i++) {
-                if (ganttRecord[columns[i].field] === undefined) {
+                const fieldName = ganttRecord[columns[i].field];
+                if (fieldName === undefined) {
                     this.parent.setRecordValue(columns[i].field, data[columns[i].field], ganttRecord);
                 }
             }
@@ -1844,6 +1846,7 @@ class TaskProcessor extends DateProcessor {
             this.parent.setRecordValue('parentId', data[taskSettings.parentID], ganttProperties, true);
         }
         this.addCustomFieldValue(data, ganttData);
+        ganttData.checkboxState = 'uncheck';
         this.parent.setRecordValue('isAutoSchedule', autoSchedule, ganttProperties, true);
         this.parent.setRecordValue('resourceInfo', this.setResourceInfo(data), ganttProperties, true);
         this.parent.setRecordValue('isMilestone', false, ganttProperties, true);
@@ -1886,7 +1889,6 @@ class TaskProcessor extends DateProcessor {
         if (!isNullOrUndefined(data[taskSettings.child]) && data[taskSettings.child].length > 0) {
             this.parent.setRecordValue('hasChildRecords', true, ganttData);
             this.parent.setRecordValue('isMilestone', false, ganttProperties, true);
-            this.resetDependency(ganttData);
         }
         else {
             this.parent.setRecordValue('hasChildRecords', false, ganttData);
@@ -1928,7 +1930,10 @@ class TaskProcessor extends DateProcessor {
             this.parent.setRecordValue('rowUniqueID', ganttProperties.taskId.toString(), ganttProperties, true);
         }
         else {
-            const uniqueId = ganttData.uniqueID.replace(this.parent.element.id + '_data_', '');
+            let uniqueId = ganttData.uniqueID.replace(this.parent.element.id + '_data_', '');
+            if (this.parent.viewType === 'ResourceView' && typeof (ganttData.ganttProperties.taskId) === "string") {
+                uniqueId = ganttProperties.taskId.toString();
+            }
             this.parent.setRecordValue('rowUniqueID', uniqueId, ganttData);
             this.parent.setRecordValue('rowUniqueID', uniqueId, ganttProperties, true);
             this.parent.setRecordValue('sharedTaskUniqueIds', [], ganttProperties, true);
@@ -3040,10 +3045,12 @@ class TaskProcessor extends DateProcessor {
     updateResourceName(data) {
         const resourceInfo = data.ganttProperties.resourceInfo;
         const resourceName = [];
+        const taskMapping = this.parent.taskFields;
         if (resourceInfo) {
+            const resourceLength = resourceInfo.length;
             const taskResources = extend([], [], data.taskData[this.parent.taskFields.resourceInfo], true);
             this.parent.setRecordValue('taskData.' + this.parent.taskFields.resourceInfo, [], data);
-            for (let i = 0; i < resourceInfo.length; i++) {
+            for (let i = 0; i < resourceLength; i++) {
                 const resource = resourceInfo[i];
                 let resName = resource[this.parent.resourceFields.name];
                 const resourceUnit = resource[this.parent.resourceFields.unit];
@@ -3052,7 +3059,7 @@ class TaskProcessor extends DateProcessor {
                 }
                 resourceName.push(resName);
                 if (data.taskData) {
-                    const mapping = this.parent.taskFields.resourceInfo;
+                    const mapping = taskMapping.resourceInfo;
                     // eslint-disable-next-line
                     if (typeof (taskResources[i] === 'object')) {
                         data.taskData[mapping].push(taskResources[i]);
@@ -3731,7 +3738,6 @@ class TaskProcessor extends DateProcessor {
                     this.parent.setRecordValue('autoDuration', this.calculateAutoDuration(parentProp), parentProp, true);
                     this.updateAutoWidthLeft(parentData);
                 }
-                this.resetDependency(parentData);
                 this.updateWidthLeft(parentData);
                 this.updateTaskData(parentData);
             }
@@ -4287,7 +4293,7 @@ class GanttChart {
     renderTimelineContainer() {
         this.chartTimelineContainer =
             createElement('div', { className: timelineHeaderContainer });
-        this.chartTimelineContainer.setAttribute("role", "TimelineHeader");
+        this.chartTimelineContainer.setAttribute("role", "presentation");
         this.chartElement.appendChild(this.chartTimelineContainer);
     }
     /**
@@ -4413,12 +4419,10 @@ class GanttChart {
         }
     }
     ganttChartMouseClick(e) {
-        if (this.parent.editSettings.allowTaskbarEditing) {
-            if (this.parent.autoFocusTasks) {
-                this.scrollToTarget(e); /** Scroll to task */
-            }
-            this.parent.notify('chartMouseClick', e);
+        if (this.parent.autoFocusTasks) {
+            this.scrollToTarget(e); /** Scroll to task */
         }
+        this.parent.notify('chartMouseClick', e);
     }
     ganttChartMouseUp(e) {
         if (this.parent.editSettings.allowTaskbarEditing) {
@@ -4752,6 +4756,10 @@ class GanttChart {
         this.parent.updatedConnectorLineCollection = [];
         this.parent.predecessorModule.createConnectorLinesCollection();
         this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+        if (this.parent.enableCriticalPath && this.parent.criticalPathModule) {
+            let criticalModule = this.parent.criticalPathModule;
+            criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
     }
     /**
      * To collapse gantt rows
@@ -7437,11 +7445,30 @@ class GanttTreeGrid {
      */
     composeIDColumn(column) {
         const isProjectView = this.parent.viewType === 'ProjectView';
+        let lengthDataSource = this.parent.dataSource['length'];
+        let taskIDName;
         column.isPrimaryKey = isProjectView ? true : false;
         column.headerText = column.headerText ? column.headerText : this.parent.localeObj.getConstant('id');
         column.width = column.width ? column.width : 100;
-        column.allowEditing = column.allowEditing ? column.allowEditing : false;
-        column.editType = column.editType ? column.editType : 'numericedit';
+        for (let i = 0; i < lengthDataSource; i++) {
+            if (!isNullOrUndefined(this.parent.dataSource[i][this.parent.taskFields.id])) {
+                taskIDName = this.parent.dataSource[i][this.parent.taskFields.id];
+                break;
+            }
+        }
+        if (typeof (taskIDName) === "string") {
+            if (this.parent.viewType === 'ResourceView') {
+                column.allowEditing = column.allowEditing ? column.allowEditing : false;
+            }
+            else {
+                column.allowEditing = column.allowEditing ? column.allowEditing : true;
+            }
+            column.editType = column.editType ? column.editType : 'stringedit';
+        }
+        else {
+            column.allowEditing = column.allowEditing ? column.allowEditing : false;
+            column.editType = column.editType ? column.editType : 'numericedit';
+        }
         column.valueAccessor = isProjectView ? null : this.idValueAccessor.bind(this);
     }
     composeUniqueIDColumn(column) {
@@ -8120,7 +8147,7 @@ class ChartRows extends DateProcessor {
      * @private
      */
     getIndicatorNode(indicator) {
-        const templateString = '<label class="' + label + ' ' + taskIndicatorDiv + '" role="LabelIndicator" style="line-height:'
+        const templateString = '<label class="' + label + ' ' + taskIndicatorDiv + '"style="line-height:'
             + (this.parent.rowHeight) + 'px;' +
             'left:' + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
         return this.createDivElement(templateString);
@@ -8636,7 +8663,7 @@ class ChartRows extends DateProcessor {
      */
     getTaskBaselineNode() {
         const data = this.templateData;
-        const template = '<div class="' + baselineBar + ' ' + '" role="BaselineBar" style="margin-top:' + this.baselineTop +
+        const template = '<div class="' + baselineBar + ' ' + '" role="term" style="margin-top:' + this.baselineTop +
             'px;left:' + data.ganttProperties.baselineLeft + 'px;' +
             'width:' + data.ganttProperties.baselineWidth + 'px;height:' +
             this.baselineHeight + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + '"></div>';
@@ -8889,10 +8916,10 @@ class ChartRows extends DateProcessor {
         const className = (this.parent.gridLines === 'Horizontal' || this.parent.gridLines === 'Both') ?
             'e-chart-row-border' : '';
         table.innerHTML = '<tr class="' + this.getRowClassName(this.templateData) + ' ' + chartRow + '"' +
-            'role="ChartRow" style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
+            'style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
             this.parent.rowHeight + 'px;">' +
             '<td class="' + chartRowCell + ' ' + className
-            + '" role="ChartCell" style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
+            + '"style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
         return table.childNodes;
     }
     /**
@@ -8957,7 +8984,7 @@ class ChartRows extends DateProcessor {
     }
     leftLabelContainer() {
         const template = '<div class="' + ((this.leftTaskLabelTemplateFunction) ? leftLabelTempContainer :
-            leftLabelContainer) + ' ' + '" tabindex="-1" role="LeftLabel" style="height:' +
+            leftLabelContainer) + ' ' + '" tabindex="-1" role="term" style="height:' +
             (this.parent.rowHeight - 2) + 'px;width:' + this.taskNameWidth(this.templateData) + '"></div>';
         return this.createDivElement(template);
     }
@@ -8969,7 +8996,7 @@ class ChartRows extends DateProcessor {
         const template = '<div class="' + taskBarMainContainer + ' ' +
             this.parent.getUnscheduledTaskClass(data.ganttProperties) + ' ' +
             ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
-            ' tabindex="-1" role="TaskBar" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
+            ' tabindex="-1" role="term" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
             ('width:' + this.milestoneHeight + 'px;height:' +
                 this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;left:' + (data.ganttProperties.left -
                 (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
@@ -8980,26 +9007,26 @@ class ChartRows extends DateProcessor {
     }
     rightLabelContainer() {
         const template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? rightLabelTempContainer :
-            rightLabelContainer) + '" ' + ' tabindex="-1" role="RightLabel" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
+            rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
             + (this.parent.rowHeight - 2) + 'px;"></div>';
         return this.createDivElement(template);
     }
     childTaskbarLeftResizer() {
         const lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         const template = '<div class="' + taskBarLeftResizer + ' ' + icon + '"' +
-            ' role="LeftResizer" style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            'style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     }
     childTaskbarRightResizer() {
         const rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         const template = '<div class="' + taskBarRightResizer + ' ' + icon + '"' +
-            ' role="RightResizer" style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
+            'style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     }
     childTaskbarProgressResizer() {
         const template = '<div class="' + childProgressResizer + '"' +
-            ' role="ProgressResizer" style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
+            'style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + progressBarHandler + '"' +
             '><div class="' + progressHandlerElement + '"></div>' +
             '<div class="' + progressBarHandlerAfter + '"></div></div>';
@@ -9010,9 +9037,16 @@ class ChartRows extends DateProcessor {
         const pointerLeft = -((this.parent.isAdaptive ? 14 : 2) + this.connectorPointWidth);
         const mileStoneLeft = -(this.connectorPointWidth + 2);
         const pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
+        let marginTop;
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+            marginTop = '';
+        }
+        else {
+            marginTop = 'margin-top:' + this.connectorPointMargin + 'px';
+        }
         const template = '<div class="' + leftConnectorPointOuterDiv + '" style="' +
             ((data.ganttProperties.isMilestone) ? ('margin-top:' + pointerTop + 'px;left:' + mileStoneLeft +
-                'px;') : ('margin-top:' + this.connectorPointMargin + 'px;left:' + pointerLeft + 'px;')) + '">' +
+                'px;') : (marginTop + ';left:' + pointerLeft + 'px;')) + '">' +
             '<div class="' + connectorPointLeft + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
             '" style="width: ' + this.connectorPointWidth + 'px;' +
             'height: ' + this.connectorPointWidth + 'px;">' + this.touchLeftConnectorpoint + '</div></div>';
@@ -9022,10 +9056,16 @@ class ChartRows extends DateProcessor {
         const data = this.templateData;
         const pointerRight = this.parent.isAdaptive ? 10 : -2;
         const pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
+        let marginTop;
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+            marginTop = '';
+        }
+        else {
+            marginTop = 'margin-top:' + this.connectorPointMargin + 'px';
+        }
         const template = '<div class="' + rightConnectorPointOuterDiv + '" style="' +
             ((data.ganttProperties.isMilestone) ? ('left:' + (this.milestoneHeight - 2) + 'px;margin-top:' +
-                pointerTop + 'px;') : ('left:' + (data.ganttProperties.width + pointerRight) + 'px;margin-top:' +
-                this.connectorPointMargin + 'px;')) + '">' +
+                pointerTop + 'px;') : ('left:' + (data.ganttProperties.width + pointerRight) + 'px;' + marginTop + ';')) + '">' +
             '<div class="' + connectorPointRight + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
             '" style="width:' + this.connectorPointWidth + 'px;height:' + this.connectorPointWidth + 'px;">' +
             this.touchRightConnectorpoint + '</div></div>';
@@ -9325,14 +9365,17 @@ class ChartRows extends DateProcessor {
         const taskbarContainerNode = this.taskbarContainer();
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
-        if (!this.templateData.hasChildRecords) {
-            const connectorLineLeftNode = this.getLeftPointNode();
+        const connectorLineLeftNode = this.getLeftPointNode();
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
         }
         if (this.templateData.hasChildRecords) {
             const parentTaskbarTemplateNode = this.getParentTaskbarNode(i, taskbarContainerNode);
             if (!this.templateData.ganttProperties.isAutoSchedule) {
                 const manualTaskbar = this.getManualTaskbar();
+                manualTaskbar[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
+                const connectorLineRightNode = this.getRightPointNode();
+                manualTaskbar[0].appendChild([].slice.call(connectorLineRightNode)[0]);
                 taskbarContainerNode[0].appendChild([].slice.call(manualTaskbar)[0]);
             }
             if (parentTaskbarTemplateNode && parentTaskbarTemplateNode.length > 0) {
@@ -9407,7 +9450,7 @@ class ChartRows extends DateProcessor {
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
-        if (!this.templateData.hasChildRecords) {
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
             const connectorLineRightNode = this.getRightPointNode();
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineRightNode)[0]);
         }
@@ -9809,6 +9852,21 @@ class ChartRows extends DateProcessor {
         }
         return defaultValue;
     }
+    generateBaselineAriaLabel(data) {
+        data = this.templateData;
+        let defaultValue = '';
+        const nameConstant = this.parent.localeObj.getConstant('name');
+        const startDateConstant = this.parent.localeObj.getConstant('startDate');
+        const endDateConstant = this.parent.localeObj.getConstant('endDate');
+        const taskNameVal = data.ganttProperties.taskName;
+        const startDateVal = data.ganttProperties.baselineStartDate;
+        const endDateVal = data.ganttProperties.baselineEndDate;
+        defaultValue += 'Baseline' + ' ';
+        defaultValue += nameConstant + ' ' + taskNameVal + ' ';
+        defaultValue += startDateConstant + ' ' + this.parent.getFormatedDate(startDateVal) + ' ';
+        defaultValue += endDateConstant + ' ' + this.parent.getFormatedDate(endDateVal) + ' ';
+        return defaultValue;
+    }
     generateSpiltTaskAriaLabel(data, ganttProp) {
         let defaultValue = '';
         const startDateConstant = this.parent.localeObj.getConstant('startDate');
@@ -9847,6 +9905,7 @@ class Dependency {
     constructor(gantt) {
         this.parentRecord = [];
         this.parentIds = [];
+        this.parentPredecessors = [];
         this.parent = gantt;
         this.dateValidateModule = this.parent.dateValidationModule;
     }
@@ -9862,9 +9921,7 @@ class Dependency {
         for (let count = length; count >= 0; count--) {
             const ganttData = predecessorTasks[count];
             const ganttProp = ganttData.ganttProperties;
-            if (!ganttData.hasChildRecords) {
-                this.ensurePredecessorCollectionHelper(ganttData, ganttProp);
-            }
+            this.ensurePredecessorCollectionHelper(ganttData, ganttProp);
         }
     }
     /**
@@ -9973,8 +10030,29 @@ class Dependency {
                 values = el.split('-');
                 offsetValue = '-';
             }
-            match = values[0].match(/(\d+|[A-z]+)/g);
+            match = [];
             const ids = this.parent.viewType === 'ResourceView' ? this.parent.getTaskIds() : this.parent.ids;
+            const isExist1 = this.parent.viewType === 'ResourceView' ? ids.indexOf('T' + values[0]) : ids.indexOf(values[0]);
+            if (isExist1 !== -1) {
+                match[0] = values[0];
+            }
+            else {
+                if (ids.indexOf(values[0]) === -1) {
+                    match = values[0].split(" ");
+                    if (match.length === 1) {
+                        if (match[0].indexOf(" ") != -1) {
+                            match = values[0].match(/(\d+|[A-z]+)/g);
+                        }
+                        else {
+                            match[0] = values[0].slice(0, -2);
+                            match[1] = values[0].slice(-2);
+                        }
+                    }
+                }
+                else {
+                    match[0] = values[0];
+                }
+            }
             const isExist = this.parent.viewType === 'ResourceView' ? ids.indexOf('T' + match[0]) : ids.indexOf(match[0]);
             /*Validate for appropriate predecessor*/
             if (match[0] && isExist !== -1) {
@@ -10005,10 +10083,18 @@ class Dependency {
                 offsetUnit: offsetUnits.durationUnit,
                 offset: offsetUnits.duration
             };
-            const isOwnParent = this.checkIsParent(match[0]);
-            if (!isOwnParent) {
+            let fromData = this.parent.connectorLineModule.getRecordByID(obj.to);
+            let toData = this.parent.connectorLineModule.getRecordByID(obj.from);
+            let isValid;
+            if (this.parent.connectorLineEditModule && toData && fromData) {
+                isValid = this.parent.connectorLineEditModule.validateParentPredecessor(toData, fromData);
+                if (isValid)
+                    collection.push(obj);
+            }
+            else {
                 collection.push(obj);
             }
+            match.splice(0);
         });
         return collection;
     }
@@ -10023,6 +10109,9 @@ class Dependency {
         const predecessors = data.ganttProperties.predecessor;
         const durationUnitTexts = this.parent.durationUnitTexts;
         let resultString = '';
+        let temp1;
+        let match;
+        match = [];
         if (predecessors) {
             const length = predecessors.length;
             for (let i = 0; i < length; i++) {
@@ -10032,6 +10121,15 @@ class Dependency {
                     : data.ganttProperties.rowUniqueID;
                 if (currentValue.from !== id.toString()) {
                     temp = currentValue.from + currentValue.type;
+                    if (typeof (data.ganttProperties.taskId) === "string") {
+                        match[0] = temp.slice(0, -2);
+                        match[1] = temp.slice(-2);
+                        temp1 = match[0] + " " + match[1];
+                    }
+                    else {
+                        temp1 = temp;
+                    }
+                    temp = temp1;
                     if (currentValue.offset !== 0) {
                         temp += currentValue.offset > 0 ? ('+' + currentValue.offset + ' ') : (currentValue.offset + ' ');
                         const multiple = currentValue.offset !== 1;
@@ -10119,9 +10217,7 @@ class Dependency {
         const length = predecessorsCollection.length;
         for (let count = 0; count < length; count++) {
             ganttRecord = predecessorsCollection[count];
-            if (!ganttRecord.hasChildRecords) {
-                this.updatePredecessorHelper(ganttRecord, predecessorsCollection);
-            }
+            this.updatePredecessorHelper(ganttRecord, predecessorsCollection);
         }
     }
     /**
@@ -10171,9 +10267,22 @@ class Dependency {
      */
     updatedRecordsDateByPredecessor() {
         const flatData = this.parent.flatData;
-        for (let count = 0; count < flatData.length; count++) {
+        const totLength = this.parent.flatData.length;
+        for (let count = 0; count < totLength; count++) {
             if (flatData[count].ganttProperties.predecessor) {
                 this.validatePredecessorDates(flatData[count]);
+                if (flatData[count].hasChildRecords && this.parent.editModule) {
+                    this.parent.editModule['updateChildItems'](flatData[count]);
+                }
+            }
+        }
+    }
+    updateParentPredecessor() {
+        if (this.parent.enablePredecessorValidation) {
+            const parentPredecessorLength = this.parentPredecessors.length;
+            for (let i = parentPredecessorLength - 1; i >= 0; i--) {
+                let item = this.parentPredecessors[i];
+                this.validatePredecessorDates(item);
             }
         }
     }
@@ -10204,6 +10313,10 @@ class Dependency {
                 const predecessor = predecessors[count];
                 parentGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor.from);
                 record = this.parent.connectorLineModule.getRecordByID(predecessor.to);
+                if (this.parent.isLoad && this.parentPredecessors.indexOf(ganttRecord) == -1
+                    && (ganttRecord.hasChildRecords || record.hasChildRecords)) {
+                    this.parentPredecessors.push(ganttRecord);
+                }
                 if (record.ganttProperties.isAutoSchedule || this.parent.validateManualTasksOnLinking) {
                     this.validateChildGanttRecord(parentGanttRecord, record);
                 }
@@ -10244,8 +10357,8 @@ class Dependency {
                 this.dateValidateModule.calculateEndDate(childGanttRecord);
             }
             this.parent.dataOperation.updateWidthLeft(childGanttRecord);
-            if (childGanttRecord.parentItem && this.parent.getParentTask(childGanttRecord.parentItem).ganttProperties.isAutoSchedule
-                && this.parent.isInPredecessorValidation && !this.parent.isLoad) {
+            if (!this.parent.isLoad && childGanttRecord.parentItem && this.parent.isInPredecessorValidation &&
+                this.parent.getParentTask(childGanttRecord.parentItem).ganttProperties.isAutoSchedule) {
                 if (this.parentIds.indexOf(childGanttRecord.parentItem.uniqueID) === -1) {
                     this.parentIds.push(childGanttRecord.parentItem.uniqueID);
                     this.parentRecord.push(childGanttRecord.parentItem);
@@ -10599,8 +10712,19 @@ class ConnectorLine {
      */
     createConnectorLineObject(parentGanttData, childGanttData, predecessor) {
         const connectorObj = {};
-        const updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
-            this.parent.flatData : this.expandedRecords;
+        let updatedRecords;
+        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport) {
+            if (this.parent.pdfExportModule['helper']['exportProps'].exportType &&
+                this.parent.pdfExportModule['helper']['exportProps'].exportType === 'CurrentViewData') {
+                updatedRecords = this.expandedRecords;
+            }
+            else {
+                updatedRecords = this.parent.flatData;
+            }
+        }
+        else {
+            updatedRecords = this.expandedRecords;
+        }
         const parentIndex = updatedRecords.indexOf(parentGanttData);
         const childIndex = updatedRecords.indexOf(childGanttData);
         const parentGanttRecord = parentGanttData.ganttProperties;
@@ -10923,6 +11047,63 @@ class ConnectorLine {
             isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
         }
         const heightValue = isVirtual ? connectorLine$$1.height : (height + isMilestoneValue);
+        let borderTopWidth = 0;
+        let addTop = 0;
+        if (this.parent.currentViewData[data.parentIndex] && this.parent.currentViewData[data.childIndex]) {
+            let fromRecordIsParent = this.parent.currentViewData[data.parentIndex].hasChildRecords;
+            let toRecordIsParent = this.parent.currentViewData[data.childIndex].hasChildRecords;
+            let fromRecordIsManual = this.parent.currentViewData[data.parentIndex].ganttProperties.isAutoSchedule;
+            let toRecordIsManual = this.parent.currentViewData[data.childIndex].ganttProperties.isAutoSchedule;
+            let isValid = true;
+            if (((fromRecordIsParent && fromRecordIsManual) && !toRecordIsParent) || ((toRecordIsParent && toRecordIsManual) &&
+                !fromRecordIsParent) || (fromRecordIsParent && fromRecordIsManual && toRecordIsManual && toRecordIsParent)
+                || (!fromRecordIsParent && !toRecordIsParent)) {
+                isValid = false;
+            }
+            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 +
@@ -10942,7 +11123,7 @@ class ConnectorLine {
                 '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 - (this.lineStroke - 1))) + 'position:relative;"></div>';
+                this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
             const duplicateStingFour = leftArrow + 'left:' +
                 (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
                 this.getBorderStyles('right', 10);
@@ -10950,7 +11131,7 @@ class ConnectorLine {
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
@@ -10960,7 +11141,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
                     'width:0px;' + this.getBorderStyles('right', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -10970,7 +11151,7 @@ class ConnectorLine {
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType2') {
-                div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.top : ((data.parentIndex * data.rowHeight) +
+                div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.top : ((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;
@@ -10980,7 +11161,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:' + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'width:0px;' +
-                    this.getBorderStyles('top', (heightValue - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
                     'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
@@ -11002,7 +11183,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:10px;' + this.getBorderStyles('left', 10) +
@@ -11012,7 +11193,7 @@ class ConnectorLine {
                 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 - this.getconnectorLineGap(data) - this.lineStroke + 1)) +
+                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;' +
@@ -11032,7 +11213,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FSType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
@@ -11048,7 +11229,7 @@ class ConnectorLine {
                 div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;left:' +
                     (data.childLeft - (data.parentLeft + data.parentWidth) - 20) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke + 1)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
@@ -11058,7 +11239,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:' + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
@@ -11071,7 +11252,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:10px;' + duplicateStingTwo;
@@ -11084,14 +11265,14 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType2') {
                 div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 - this.lineStroke)) + 'position:relative;"></div>';
+                    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>';
@@ -11104,7 +11285,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SSType1') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) +
+                    ((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;
@@ -11112,7 +11293,7 @@ class ConnectorLine {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    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;
@@ -11122,7 +11303,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType1') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:' + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
@@ -11133,7 +11314,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 20) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (16 + this.lineStroke)) :
@@ -11146,7 +11327,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType2') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 ? 'left:-1px;' : '') + 'width:' +
@@ -11157,7 +11338,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) +
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) +
                     'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
@@ -11172,7 +11353,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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;
@@ -11185,7 +11366,7 @@ class ConnectorLine {
                 div = div + 'left:' + (((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 - this.lineStroke + 1)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? ('left:' + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : ('left:' + ((data.parentLeft + data.parentWidth) -
@@ -11195,7 +11376,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'FFType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + ('left:' + ((data.childLeft + data.childWidth) -
@@ -11214,7 +11395,7 @@ class ConnectorLine {
                 div = div + 'left:' + (((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 - this.lineStroke + 1)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? ('left:-1px;width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (21 + this.lineStroke))) : ('width:' + (((data.childLeft + data.childWidth) -
@@ -11224,7 +11405,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
+                    ((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) +
@@ -11237,7 +11418,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:' + (((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 - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
+                    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;' +
@@ -11252,7 +11433,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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;
@@ -11262,7 +11443,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - (this.lineStroke - 1))) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     ((data.parentLeft - (data.childLeft + data.childWidth + 20)) + this.lineStroke) + 'px;' +
@@ -11270,13 +11451,13 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType1') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
+                    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>';
@@ -11295,7 +11476,7 @@ class ConnectorLine {
             }
             if (this.getParentPosition(data) === 'SFType2') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((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 + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
@@ -11303,7 +11484,7 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestone ? ('left:4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
                     - (14 - this.lineStroke))) : ('left:10px;width:' + (((data.parentLeft) -
@@ -11551,11 +11732,11 @@ class Splitter$1 {
     }
     /**
      * @param {SplitterSettingsModel} splitter .
-     * @param {boolean} isDynamic .
+     
      * @returns {string} .
      * @private
      */
-    calculateSplitterPosition(splitter$$1, isDynamic) {
+    calculateSplitterPosition(splitter$$1) {
         if (!isNullOrUndefined(this.splitterObject) && this.parent.enablePersistence) {
             return this.splitterObject.paneSettings[0].size;
         }
@@ -11571,8 +11752,7 @@ class Splitter$1 {
             }
             else if (!isNullOrUndefined(splitter$$1.columnIndex) && splitter$$1.columnIndex >= 0) {
                 if ((splitter$$1.columnIndex * 150) < this.parent.ganttWidth || !this.parent.element.classList.contains('e-device')) {
-                    return isDynamic ? this.getSpliterPositionInPercentage(this.getTotalColumnWidthByIndex(splitter$$1.columnIndex).toString() + 'px') :
-                        this.getSpliterPositionInPercentage((splitter$$1.columnIndex * 150) + 'px');
+                    return this.getSpliterPositionInPercentage(this.getTotalColumnWidthByIndex(splitter$$1.columnIndex).toString() + 'px');
                 }
                 else {
                     return this.getSpliterPositionInPercentage((splitter$$1.columnIndex * 130) + 'px');
@@ -11608,10 +11788,10 @@ class Splitter$1 {
      */
     getTotalColumnWidthByIndex(index) {
         let width = 0;
-        const tr = this.parent.treeGrid.element.querySelectorAll('.e-headercell');
+        const tr = this.parent.ganttColumns;
         index = tr.length > index ? index : tr.length;
         for (let column = 0; column < index; column++) {
-            width = width + tr[column].offsetWidth;
+            width = width + parseInt(tr[column].width);
         }
         return width;
     }
@@ -11622,7 +11802,7 @@ class Splitter$1 {
     updateSplitterPosition() {
         this.splitterObject.separatorSize = this.parent.splitterSettings.separatorSize >= 4 ?
             this.parent.splitterSettings.separatorSize : 4;
-        const splitterPosition = this.calculateSplitterPosition(this.parent.splitterSettings, true);
+        const splitterPosition = this.calculateSplitterPosition(this.parent.splitterSettings);
         this.splitterObject.paneSettings[0].min = this.getSpliterPositionInPercentage(this.parent.splitterSettings.minimum);
         this.splitterObject.dataBind();
         this.splitterObject.paneSettings[0].size = splitterPosition;
@@ -12038,7 +12218,8 @@ class Tooltip$1 {
      */
     getPredecessorTooltipData(args) {
         const predeceesorParent = args.target.parentElement.id;
-        const taskIds = predeceesorParent.match(/\d+/g);
+        const taskIds = predeceesorParent.match(/ConnectorLineparent(.*)child(.*)/);
+        taskIds.shift();
         let fromTask;
         let toTask;
         if (this.parent.viewType === 'ResourceView') {
@@ -12333,7 +12514,7 @@ class FocusModule {
             if (ganttObj.selectionSettings.mode !== 'Cell' && ganttObj.selectedRowIndex !== -1) {
                 const selectedItem = ganttObj.currentViewData[ganttObj.selectedRowIndex];
                 const focusedRowIndex = this.parent.ganttChartModule.focusedRowIndex;
-                const selectingRowIndex = focusedRowIndex > -1 ? focusedRowIndex : expandedRecords.indexOf(selectedItem);
+                const selectingRowIndex = expandedRecords.indexOf(selectedItem);
                 const currentSelectingRecord = e.action === 'downArrow' ? expandedRecords[selectingRowIndex + 1] :
                     expandedRecords[selectingRowIndex - 1];
                 ganttObj.selectionModule.selectRow(ganttObj.currentViewData.indexOf(currentSelectingRecord), false, true);
@@ -12730,6 +12911,7 @@ let Gantt = class Gantt extends Component {
             if (this.enableValidation) {
                 this.dataOperation.updateGanttData();
             }
+            this.predecessorModule.updateParentPredecessor();
             if (this.dataSource instanceof Object && isCountRequired(this)) {
                 const count = getValue('count', this.dataSource);
                 this.treeGrid.dataSource = { result: this.flatData, count: count };
@@ -12742,6 +12924,7 @@ let Gantt = class Gantt extends Component {
             if (this.enableValidation) {
                 this.dataOperation.updateGanttData();
             }
+            this.predecessorModule.updateParentPredecessor();
             this.treeGridPane.classList.remove('e-temp-content');
             remove(this.treeGridPane.querySelector('.e-gantt-temp-header'));
             this.notify('dataReady', {});
@@ -13052,7 +13235,7 @@ let Gantt = class Gantt extends Component {
             {
                 topTier: { unit: 'Hour', format: 'ddd MMM, h a', count: 1 },
                 bottomTier: { unit: 'Minutes', format: 'mm', count: 30 }, timelineUnitSize: 66, level: 22,
-                timelineViewMode: 'Hour', weekStartDay: _WeekStartDay, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+                timelineViewMode: 'Hour', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
             },
             {
                 topTier: { unit: 'Hour', format: 'ddd MMM, h a', count: 1 },
@@ -14391,7 +14574,7 @@ let Gantt = class Gantt extends Component {
     setSplitterPosition(value, type) {
         const tempSplitterSettings = {};
         tempSplitterSettings[type] = value;
-        const splitterPosition = this.splitterModule.calculateSplitterPosition(tempSplitterSettings, true);
+        const splitterPosition = this.splitterModule.calculateSplitterPosition(tempSplitterSettings);
         const pane1 = this.splitterModule.splitterObject.element.querySelectorAll('.e-pane')[0];
         const pane2 = this.splitterModule.splitterObject.element.querySelectorAll('.e-pane')[1];
         this.splitterModule.splitterPreviousPositionGrid = pane1.scrollWidth + 1 + 'px';
@@ -14473,7 +14656,10 @@ let Gantt = class Gantt extends Component {
             if (this.viewType === 'ResourceView') {
                 this.editModule.addRowPosition = rowPosition;
                 this.editModule.addRowIndex = rowIndex;
-                const resources = data[this.taskFields.resourceInfo];
+                let resources;
+                if (!isNullOrUndefined(data)) {
+                    resources = data[this.taskFields.resourceInfo];
+                }
                 let id;
                 let parentTask;
                 if (!isNullOrUndefined(resources) && resources.length) {
@@ -14970,6 +15156,7 @@ let Gantt = class Gantt extends Component {
      */
     showColumn(keys, showBy) {
         this.treeGrid.showColumns(keys, showBy);
+        this.updateTreeColumns();
     }
     /**
      * Hides a column by column name.
@@ -14981,6 +15168,7 @@ let Gantt = class Gantt extends Component {
      */
     hideColumn(keys, hideBy) {
         this.treeGrid.hideColumns(keys, hideBy);
+        this.updateTreeColumns();
     }
     /**
      * To set scroll top for chart scroll container.
@@ -15715,8 +15903,7 @@ class CellEdit {
         }
         if (data.hasChildRecords && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
             data['isManual'] === false) || this.parent.taskMode === 'Auto')) || field === taskSettings.duration
-            || field === taskSettings.dependency || field === taskSettings.progress
-            || field === taskSettings.work || field === 'taskType')) {
+            || field === taskSettings.progress || field === taskSettings.work || field === 'taskType')) {
             args.cancel = true;
         }
         else {
@@ -16514,6 +16701,9 @@ class TaskbarEdit extends DateProcessor {
         }
     }
     mouseClickHandler(e) {
+        if (!this.parent.editSettings.allowTaskbarEditing) {
+            return;
+        }
         const targetElement = this.getElementByPosition(e);
         const element = parentsUntil$1(targetElement, taskBarMainContainer);
         if (this.parent.selectionModule && this.parent.selectionModule.enableSelectMultiTouch) {
@@ -17043,10 +17233,13 @@ class TaskbarEdit extends DateProcessor {
     startScrollTimer(direction) {
         this.stopScrollTimer();
         this.scrollTimer = window.setInterval(() => {
-            if (direction === 'right' || direction === 'bottom') {
+            if (direction === 'right') {
                 this.timerCount = (this.timerCount + 1) >= this.parent.timelineModule.totalTimelineWidth ?
                     this.parent.timelineModule.totalTimelineWidth : (this.timerCount + 1);
             }
+            else if (direction === 'bottom') {
+                this.timerCount = this.timerCount + 1;
+            }
             else {
                 this.timerCount = (this.timerCount - 1) < 0 ? 0 : (this.timerCount - 1);
             }
@@ -18154,8 +18347,14 @@ class TaskbarEdit extends DateProcessor {
             }
             if ((this.parent.virtualScrollModule && this.parent.enableVirtualization &&
                 !this.elementOffsetLeft) || !this.parent.enableVirtualization) {
-                this.elementOffsetLeft = this.taskBarEditElement.offsetLeft;
-                this.elementOffsetTop = this.taskBarEditElement.offsetTop + scrollTop;
+                if (this.taskBarEditElement.children[0].classList.contains('e-manualparent-main-container')) {
+                    this.elementOffsetLeft = this.taskBarEditElement.children[0]['offsetLeft'] + this.taskBarEditElement.offsetLeft;
+                    this.elementOffsetTop = ((this.taskBarEditElement.offsetTop - 5) + this.taskBarEditElement.children[0]['offsetTop']) + scrollTop;
+                }
+                else {
+                    this.elementOffsetLeft = this.taskBarEditElement.offsetLeft;
+                    this.elementOffsetTop = this.taskBarEditElement.offsetTop + scrollTop;
+                }
                 this.elementOffsetWidth = this.taskBarEditElement.offsetWidth;
                 this.elementOffsetHeight = this.taskBarEditElement.offsetHeight;
             }
@@ -18323,6 +18522,7 @@ class DialogEdit {
         this.addedRecord = null;
         this.dialogEditValidationFlag = false;
         this.ganttResources = [];
+        this.isValidData = true;
         /**
          * @private
          */
@@ -18563,7 +18763,7 @@ class DialogEdit {
                 tempData[field] = 0;
                 tempData.ganttProperties.work = tempData[field];
             }
-            else if (columns[i].field === 'taskType') {
+            else if (columns[i].field === taskSettings.type) {
                 tempData[field] = this.parent.taskType;
                 tempData.ganttProperties.taskType = tempData[field];
             }
@@ -18606,6 +18806,24 @@ class DialogEdit {
      */
     openEditDialog(taskId) {
         const ganttObj = this.parent;
+        if (!isNullOrUndefined(taskId)) {
+            if (!isNullOrUndefined(taskId['ganttProperties'])) {
+                if (typeof taskId['ganttProperties']['taskId'] === 'string') {
+                    this.numericOrString = "stringedit";
+                }
+                else {
+                    this.numericOrString = "numericedit";
+                }
+            }
+            if (isNullOrUndefined(taskId['ganttProperties']) && !isNullOrUndefined(taskId)) {
+                if (isNaN(Number(taskId)) || this.parent.columnByField[this.parent.taskFields.id].editType === "stringedit") {
+                    this.numericOrString = "stringedit";
+                }
+                else {
+                    this.numericOrString = "numericedit";
+                }
+            }
+        }
         if (typeof taskId === 'object' && !isNullOrUndefined(taskId)) {
             this.rowIndex = this.parent.currentViewData.indexOf(taskId);
             if (this.rowIndex > -1) {
@@ -18639,11 +18857,11 @@ class DialogEdit {
         this.beforeOpenArgs.rowIndex = this.rowIndex;
         const dialogMaxWidth = this.parent.isAdaptive ? '' : '600px';
         const dialog = this.parent.createElement('div', { id: ganttObj.element.id + '_dialog', styles: 'max-width:' + dialogMaxWidth });
+        dialog.classList.add('e-gantt-dialog');
         ganttObj.element.appendChild(dialog);
         dialogModel.animationSettings = { effect: 'None' };
         dialogModel.header = this.localeObj.getConstant(this.isEdit ? 'editDialogTitle' : 'addDialogTitle');
         dialogModel.isModal = true;
-        dialogModel.cssClass = 'e-gantt-dialog';
         dialogModel.allowDragging = this.parent.isAdaptive ? false : true;
         dialogModel.showCloseIcon = true;
         const position = this.parent.isAdaptive ? { X: 'top', Y: 'left' } : { X: 'center', Y: 'center' };
@@ -18996,6 +19214,13 @@ class DialogEdit {
             placeholder: column.headerText,
             floatLabelType: 'Auto'
         };
+        if (!isNullOrUndefined(this.parent.taskFields.id) && !isNullOrUndefined(this.parent.columnMapping.id)
+            && !isNullOrUndefined(this.numericOrString)) {
+            if (taskSettings.id === column.field) {
+                column.editType = this.numericOrString;
+            }
+        }
+        
         switch (column.editType) {
             case 'booleanedit':
                 {
@@ -19010,7 +19235,7 @@ class DialogEdit {
             case 'stringedit':
                 {
                     const textBox = common;
-                    if (column.field === ganttObj.columnMapping.duration || column.field === ganttObj.columnMapping.startDate ||
+                    if (column.field === ganttObj.columnMapping.duration || column.field === ganttObj.columnMapping.id || column.field === ganttObj.columnMapping.startDate ||
                         column.field === ganttObj.columnMapping.endDate) {
                         textBox.change = (args) => {
                             this.validateScheduleFields(args, column, ganttObj);
@@ -19067,7 +19292,7 @@ class DialogEdit {
                     break;
                 }
             case 'dropdownedit':
-                if (column.field === 'taskType' || column.field === ganttObj.columnMapping.manual) {
+                if (column.field === ganttObj.columnMapping.type || column.field === ganttObj.columnMapping.manual) {
                     const dataKey = 'dataSource';
                     const fieldsKey = 'fields';
                     const types = [
@@ -19095,12 +19320,18 @@ class DialogEdit {
         return fieldsModel;
     }
     validateScheduleFields(args, column, ganttObj) {
-        const dialog = ganttObj.editModule.dialogModule.dialog;
+        let dialog;
+        if (!isNullOrUndefined(ganttObj.editModule.dialogModule.dialog)) {
+            dialog = ganttObj.editModule.dialogModule.dialog;
+        }
         let targetId = null;
         let inputElement;
         const currentData = ganttObj.editModule.dialogModule.editedRecord;
         let cellValue = null;
         let colName = null;
+        let formObject;
+        const ids = this.parent.viewType === 'ResourceView' ? this.parent.getTaskIds() : this.parent.ids;
+        const strViewType = this.parent.viewType;
         if (!isNullOrUndefined(args.element)) {
             inputElement = args.element;
             targetId = inputElement.getAttribute('id');
@@ -19122,6 +19353,22 @@ class DialogEdit {
         else {
             cellValue = inputElement.value;
             colName = targetId.replace(ganttObj.element.id, '');
+            if (this.parent.columnByField[this.parent.taskFields.id].editType === "stringedit") {
+                let customFn = (args) => {
+                    if (strViewType === 'ResourceView') {
+                        return ids.indexOf('T' + args['value']) === -1 && ids.indexOf('R' + args['value']) === -1;
+                    }
+                    else {
+                        return ids.indexOf(args['value']) === -1;
+                    }
+                };
+                let options = {
+                    rules: {
+                        [this.parent.taskFields.id]: { required: true, minLength: [customFn, 'ID is already present, please enter new value'] }
+                    }
+                };
+                formObject = new FormValidator('#' + this.parent.element.id + 'GeneralTabContainer', options);
+            }
         }
         if (colName.search('Segments') === 0) {
             colName = colName.replace('SegmentsTabContainer', '');
@@ -19345,7 +19592,7 @@ class DialogEdit {
                 this.validateDuration(currentData);
             }
         }
-        if (columnName === 'taskType') {
+        if (columnName === taskSettings.type) {
             this.parent.setRecordValue('taskType', value, ganttProp, true);
         }
         if (taskSettings.manual === columnName) {
@@ -19700,9 +19947,6 @@ class DialogEdit {
                 item.content = this.renderGeneralTab(item.content);
             }
             else if (item.content === 'Dependency') {
-                if (this.editedRecord.hasChildRecords) {
-                    item.disabled = true;
-                }
                 item.content = this.renderPredecessorTab(item.content);
             }
             else if (item.content === 'Resources') {
@@ -19807,6 +20051,7 @@ class DialogEdit {
     }
     isCheckIsDisabled(column) {
         let disabled = false;
+        let stringOrNumber;
         if (column.allowEditing === false || column.isPrimaryKey || this.parent.readOnly) {
             if (this.parent.customColumns.indexOf(column.field) !== -1) {
                 disabled = true;
@@ -19816,8 +20061,19 @@ class DialogEdit {
                     column.field === this.parent.taskFields.duration || column.field === this.parent.taskFields.progress ||
                     column.field === this.parent.taskFields.startDate || column.field === this.parent.taskFields.endDate ||
                     column.field === this.parent.taskFields.baselineStartDate || column.field === this.parent.taskFields.baselineEndDate ||
-                    column.field === this.parent.taskFields.work || column.field === 'taskType') {
-                    disabled = true;
+                    column.field === this.parent.taskFields.work || column.field === this.parent.taskFields.type) {
+                    for (let i = 0; i < this.parent.currentViewData['length']; i++) {
+                        if (!isNullOrUndefined(this.parent.currentViewData[i].ganttProperties.taskId)) {
+                            stringOrNumber = this.parent.currentViewData[i].ganttProperties.taskId;
+                            break;
+                        }
+                    }
+                    if (typeof (stringOrNumber) === "string") {
+                        disabled = false;
+                    }
+                    else {
+                        disabled = true;
+                    }
                 }
             }
         }
@@ -19829,13 +20085,30 @@ class DialogEdit {
                 if ((column.field === this.parent.taskFields.endDate && ((!isNullOrUndefined(this.editedRecord['isManual']) &&
                     this.editedRecord['isManual'] == false) || this.parent.taskMode == 'Auto')) || column.field === this.parent.taskFields.duration ||
                     column.field === this.parent.taskFields.progress || column.field === this.parent.taskFields.work ||
-                    column.field === 'taskType') {
+                    column.field === this.parent.taskFields.type) {
                     disabled = true;
                 }
             }
         }
         return disabled;
     }
+    isParentValid(data) {
+        if (data.length > 0) {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].uniqueID == this.beforeOpenArgs.rowData['uniqueID']) {
+                    this.isValidData = false;
+                    break;
+                }
+                if (data[i].hasChildRecords) {
+                    this.isParentValid(data[i].childRecords);
+                }
+                if (!this.isValidData) {
+                    break;
+                }
+            }
+        }
+        return this.isValidData;
+    }
     renderPredecessorTab(itemName) {
         const ganttObj = this.parent;
         const gridModel = this.beforeOpenArgs[itemName];
@@ -20124,7 +20397,26 @@ class DialogEdit {
         this.preTableCollection = [];
         for (let i = 0; i < flatData.length; i++) {
             const data = flatData[i];
-            if (data.hasChildRecords) {
+            let currentFlatData = data;
+            if (data.parentUniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
+                this.isValidData = false;
+            }
+            else {
+                do {
+                    if (currentFlatData.parentItem) {
+                        currentFlatData = this.parent.flatData[this.parent.ids.indexOf(currentFlatData.parentItem.taskId)];
+                        if (currentFlatData.uniqueID == this.beforeOpenArgs.rowData['uniqueID']) {
+                            this.isValidData = false;
+                            break;
+                        }
+                    }
+                } while (currentFlatData.parentItem);
+            }
+            if (data.hasChildRecords && this.isValidData) {
+                this.isValidData = this.isParentValid(data.childRecords);
+            }
+            if (!this.isValidData) {
+                this.isValidData = true;
                 continue;
             }
             const taskId = this.parent.viewType === 'ResourceView' ? data.ganttProperties.taskId.toString()
@@ -20329,6 +20621,10 @@ class DialogEdit {
             if (inputElement) {
                 const fieldName = inputElement.id.replace(ganttObj.element.id, '');
                 const controlObj = div.querySelector('#' + ganttObj.element.id + fieldName).ej2_instances[0];
+                if (this.parent.columnByField[this.parent.taskFields.id].editType === "stringedit" && fieldName === this.parent.taskFields.id) {
+                    const valueString = controlObj.value.toString();
+                    controlObj.value = valueString;
+                }
                 const column = ganttObj.columnByField[fieldName];
                 if (!isNullOrUndefined(column.edit) && isNullOrUndefined(column.edit.params)) {
                     let read = column.edit.read;
@@ -20364,6 +20660,7 @@ class DialogEdit {
         this.parent.setRecordValue('duration', fromRecord.ganttProperties.duration, toRecord.ganttProperties, true);
         this.parent.setRecordValue('durationUnit', fromRecord.ganttProperties.durationUnit, toRecord.ganttProperties, true);
         this.parent.setRecordValue('work', fromRecord.ganttProperties.work, toRecord.ganttProperties, true);
+        this.parent.setRecordValue('type', fromRecord.ganttProperties.taskType, toRecord.ganttProperties, true);
         if (!isNullOrUndefined(this.parent.taskFields.startDate)) {
             this.parent.dataOperation.updateMappingData(this.rowData, this.parent.taskFields.startDate);
         }
@@ -20386,6 +20683,9 @@ class DialogEdit {
         if (!isNullOrUndefined(this.parent.taskFields.manual)) {
             this.parent.dataOperation.updateMappingData(this.rowData, this.parent.taskFields.manual);
         }
+        if (!isNullOrUndefined(this.parent.taskFields.type)) {
+            this.parent.dataOperation.updateMappingData(this.rowData, "type");
+        }
     }
     updatePredecessorTab(preElement) {
         const gridObj = preElement.ej2_instances[0];
@@ -20627,8 +20927,7 @@ class ConnectorLineEdit {
                     this.parent.connectorLineModule.removeConnectorLineById('parent' + predecessor[from] + 'child' + predecessor[to]);
                     parentGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor[from]);
                     childGanttRecord = this.parent.connectorLineModule.getRecordByID(predecessor[to]);
-                    if ((parentGanttRecord && parentGanttRecord.expanded === true) ||
-                        (childGanttRecord && childGanttRecord.expanded === true)) {
+                    if (parentGanttRecord || childGanttRecord) {
                         connectorObj =
                             this.parent.predecessorModule.updateConnectorLineObject(parentGanttRecord, childGanttRecord, predecessor);
                         if (!isNullOrUndefined(connectorObj)) {
@@ -20667,14 +20966,36 @@ class ConnectorLineEdit {
     idFromPredecessor(pre) {
         const preArray = pre.split(',');
         const preIdArray = [];
+        let values;
+        let match = [];
         for (let j = 0; j < preArray.length; j++) {
             const strArray = [];
-            for (let i = 0; i < preArray[j].length; i++) {
-                if (!isNullOrUndefined(preArray[j].charAt(i)) && parseInt(preArray[j].charAt(i), 10).toString() !== 'NaN') {
-                    strArray.push(preArray[j].charAt(i));
+            values = preArray[j].split('+');
+            if (preArray[j].indexOf('-') >= 0) {
+                values = preArray[j].split('-');
+                
+            }
+            if (!isNullOrUndefined(values[0])) {
+                const ids = this.parent.viewType === 'ResourceView' ? this.parent.getTaskIds() : this.parent.ids;
+                if (ids.indexOf(values[0]) === -1) {
+                    if (values[0].indexOf(" ") != -1) {
+                        match = values[0].split(" ");
+                        if (match.length === 1) {
+                            match = values[0].match(/(\d+|[A-z]+)/g);
+                        }
+                        strArray.push(match[0]);
+                    }
+                    else {
+                        if (values[0].length === 1 || values[0].length === 2) {
+                            strArray.push(values[0]);
+                        }
+                        else {
+                            strArray.push(values[0].slice(0, -2));
+                        }
+                    }
                 }
                 else {
-                    break;
+                    strArray.push(values[0]);
                 }
             }
             preIdArray.push((strArray.join('')));
@@ -20724,6 +21045,75 @@ class ConnectorLineEdit {
         }
         return true;
     }
+    // Get the root parent of the record
+    getRootParent(rec) {
+        let parentRec = rec;
+        if (rec.parentItem) {
+            parentRec = this.parent.flatData.filter((item) => {
+                return item.uniqueID == rec.parentUniqueID;
+            })[0];
+            if (parentRec.parentItem) {
+                parentRec = this.getRootParent(parentRec);
+            }
+            return parentRec;
+        }
+        return parentRec;
+    }
+    // To check whether the predecessor drawn is valid for parent task
+    validateParentPredecessor(fromRecord, toRecord) {
+        if (toRecord.hasChildRecords && !fromRecord.hasChildRecords) {
+            if (fromRecord.parentUniqueID === toRecord.uniqueID) {
+                return false;
+            }
+            else {
+                do {
+                    if (fromRecord.parentItem) {
+                        fromRecord = this.parent.flatData[this.parent.ids.indexOf(fromRecord.parentItem.taskId)];
+                        if (fromRecord.uniqueID === toRecord.uniqueID) {
+                            return false;
+                        }
+                    }
+                } while (fromRecord.parentItem);
+            }
+        }
+        else if (!toRecord.hasChildRecords && fromRecord.hasChildRecords) {
+            if (toRecord.parentUniqueID === fromRecord.uniqueID) {
+                return false;
+            }
+            else {
+                do {
+                    if (toRecord.parentItem) {
+                        toRecord = this.parent.flatData[this.parent.ids.indexOf(toRecord.parentItem.taskId)];
+                        if (toRecord.uniqueID === fromRecord.uniqueID) {
+                            return false;
+                        }
+                    }
+                } while (toRecord.parentItem);
+            }
+        }
+        else if (toRecord.hasChildRecords && fromRecord.hasChildRecords) {
+            if (toRecord.parentItem && fromRecord.parentItem) {
+                if (fromRecord.parentUniqueID === toRecord.uniqueID || fromRecord.uniqueID === toRecord.parentUniqueID) {
+                    return false;
+                }
+            }
+            else {
+                if (!toRecord.parentItem && fromRecord.parentItem) {
+                    let fromRootParent = this.parent.connectorLineEditModule.getRootParent(fromRecord);
+                    if (fromRootParent.uniqueID === toRecord.uniqueID) {
+                        return false;
+                    }
+                }
+                else if (toRecord.parentItem && !fromRecord.parentItem) {
+                    let toRootParent = this.parent.connectorLineEditModule.getRootParent(toRecord);
+                    if (toRootParent.uniqueID === fromRecord.uniqueID) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
     /**
      * To validate predecessor relations
      *
@@ -20733,7 +21123,7 @@ class ConnectorLineEdit {
      * @private
      */
     validatePredecessorRelation(ganttRecord, predecessorString) {
-        const flag = true;
+        let flag = true;
         const recordId = this.parent.viewType === 'ResourceView' ? ganttRecord.ganttProperties.taskId
             : ganttRecord.ganttProperties.rowUniqueID;
         let predecessorIdArray;
@@ -20741,10 +21131,12 @@ class ConnectorLineEdit {
         if (!isNullOrUndefined(predecessorString) && predecessorString.length > 0) {
             predecessorIdArray = this.idFromPredecessor(predecessorString);
             for (let count = 0; count < predecessorIdArray.length; count++) {
-                //Check edited item has parent item in predecessor collection
-                const checkParent = this.checkParentRelation(ganttRecord, predecessorIdArray);
-                if (!checkParent) {
-                    return false;
+                if (parseInt(predecessorIdArray[predecessorIdArray.length - 1]) !== ganttRecord[this.parent.taskFields.id]) {
+                    let num = this.parent.ids.indexOf(predecessorIdArray[predecessorIdArray.length - 1]);
+                    let fromRecord = this.parent.currentViewData[num];
+                    if (fromRecord && ganttRecord) {
+                        flag = this.validateParentPredecessor(fromRecord, ganttRecord);
+                    }
                 }
                 // Check if predecessor exist more then one
                 const tempIdArray = predecessorIdArray.slice(0);
@@ -22108,6 +22500,10 @@ class Edit$2 {
                 }
                 this.parent.predecessorModule.validatePredecessor(ganttRecord, [], '');
             }
+            if (ganttRecord.hasChildRecords && this.parent.previousRecords[ganttRecord.uniqueID].ganttProperties.startDate &&
+                (args.action === "DrawConnectorLine" || args.action === "DialogEditing")) {
+                this.updateChildItems(ganttRecord);
+            }
             this.updateParentItemOnEditing();
         }
         /** Update parent up-to zeroth level */
@@ -22564,9 +22960,16 @@ class Edit$2 {
         }
         for (let index = 0; index < currentLength; index++) {
             const recordIndex = [];
-            const resourceID = parseInt(currentResource[index][this.parent.resourceFields.id], 10);
+            let resourceID = parseInt(currentResource[index][this.parent.resourceFields.id], 10).toString();
+            if (resourceID === "NaN") {
+                resourceID = currentResource[index][this.parent.resourceFields.id];
+            }
             for (let i = 0; i < prevResource.length; i++) {
-                if (parseInt(prevResource[i][this.parent.resourceFields.id], 10) === resourceID) {
+                let prevResourceID = parseInt(prevResource[i][this.parent.resourceFields.id], 10).toString();
+                if (prevResourceID === "NaN") {
+                    prevResourceID = prevResource[i][this.parent.resourceFields.id];
+                }
+                if (prevResourceID === resourceID) {
                     recordIndex.push(i);
                     break;
                 }
@@ -22578,7 +22981,11 @@ class Edit$2 {
                 }
             }
             else {
-                prevResource.splice(parseInt(recordIndex[0].toString(), 10), 1);
+                let record1 = parseInt(recordIndex[0].toString(), 10);
+                if (record1.toString() === "NaN") {
+                    record1 = recordIndex[0].toString();
+                }
+                prevResource.splice(record1, 1);
             }
         }
         const prevLength = prevResource ? prevResource.length : 0;
@@ -22893,6 +23300,10 @@ class Edit$2 {
         for (let i = 0; i < selectedRecords.length; i++) {
             if (selectedRecords[i].parentItem) {
                 const data = selectedRecords[i];
+                const ids = data.ganttProperties.sharedTaskUniqueIds;
+                for (let j = 0; j < ids.length; j++) {
+                    deleteRecords.push(this.parent.flatData[this.parent.ids.indexOf(ids[j].toString())]);
+                }
                 deleteRecords.push(this.parent.flatData[this.parent.ids.indexOf(data.ganttProperties.rowUniqueID)]);
             }
             else {
@@ -23366,12 +23777,34 @@ class Edit$2 {
      * @private
      */
     getNewTaskId() {
-        const maxId = DataUtil.aggregates.max(this.parent.flatData, this.parent.taskFields.id);
-        if (!isNullOrUndefined(maxId)) {
-            return parseInt(maxId.toString(), 10) + 1;
+        const ids = this.parent.viewType === 'ResourceView' ? this.parent.getTaskIds() : this.parent.ids;
+        const maxId = ids.length;
+        let newTaskId = maxId + 1;
+        if (this.parent.viewType === 'ResourceView') {
+            if (ids.indexOf('T' + newTaskId) !== -1 || ids.indexOf('R' + newTaskId) !== -1) {
+                newTaskId = newTaskId + 1;
+                if (ids.indexOf('T' + newTaskId) !== -1 || ids.indexOf('R' + newTaskId) !== -1) {
+                    do {
+                        newTaskId = newTaskId + 1;
+                    } while (ids.indexOf('T' + newTaskId) !== -1 || ids.indexOf('R' + newTaskId) !== -1);
+                }
+            }
         }
         else {
-            return 1;
+            if (ids.indexOf(newTaskId.toString()) != -1) {
+                newTaskId = newTaskId + 1;
+                if (ids.indexOf(newTaskId.toString()) != -1) {
+                    do {
+                        newTaskId = newTaskId + 1;
+                    } while (ids.indexOf(newTaskId.toString()) != -1);
+                }
+            }
+        }
+        if (this.parent.columnByField[this.parent.taskFields.id].editType === "stringedit") {
+            return newTaskId = newTaskId.toString();
+        }
+        else {
+            return newTaskId;
         }
     }
     /**
@@ -23384,6 +23817,7 @@ class Edit$2 {
     prepareNewlyAddedData(obj, rowPosition) {
         const taskModel = this.parent.taskFields;
         let id;
+        let newTaskIDmd;
         const ids = this.parent.ids;
         /*Validate Task Id of data*/
         if (obj[taskModel.id]) {
@@ -23391,7 +23825,13 @@ class Edit$2 {
                 obj[taskModel.id] = null;
             }
             else {
-                obj[taskModel.id] = isNullOrUndefined(obj[taskModel.id]) ? null : parseInt(obj[taskModel.id], 10);
+                if (typeof (obj[taskModel.id]) === "string") {
+                    newTaskIDmd = obj[taskModel.id];
+                }
+                else {
+                    newTaskIDmd = parseInt(obj[taskModel.id], 10);
+                }
+                obj[taskModel.id] = isNullOrUndefined(newTaskIDmd) ? null : newTaskIDmd;
             }
         }
         if (!obj[taskModel.id]) {
@@ -23631,7 +24071,7 @@ class Edit$2 {
                     recordIndex = currentItemIndex + dataChildCount + 1;
                     //Expand Add record's parent item for project view
                     if (!this.addRowSelectedItem.expanded && !this.parent.enableMultiTaskbar) {
-                        this.parent.expandByID(Number(this.addRowSelectedItem.ganttProperties.rowUniqueID));
+                        this.parent.expandByID(this.addRowSelectedItem.ganttProperties.rowUniqueID);
                     }
                     updatedCollectionIndex = currentViewData.indexOf(this.addRowSelectedItem) +
                         this.getVisibleChildRecordCount(this.addRowSelectedItem, 0, currentViewData) + 1;
@@ -23671,6 +24111,10 @@ class Edit$2 {
         /* Record collection update */
         flatRecords.splice(recordIndex, 0, record);
         currentViewData.splice(updatedCollectionIndex, 0, record);
+        if (this.parent.viewType === 'ResourceView' && typeof (record.ganttProperties.taskId) === "number") {
+            let taskString = record.ganttProperties.taskId;
+            ids.push(taskString.toString());
+        }
         ids.splice(recordIndex, 0, record.ganttProperties.rowUniqueID.toString());
         if (this.parent.viewType === 'ResourceView') {
             const taskId = record.level === 0 ? 'R' + record.ganttProperties.taskId : 'T' + record.ganttProperties.taskId;
@@ -23874,6 +24318,7 @@ class Edit$2 {
      * @private
      */
     addRecord(data, rowPosition, rowIndex) {
+        let tempTaskID = this.parent.taskFields.id;
         if (this.parent.editModule && this.parent.editSettings.allowAdding) {
             this.parent.isDynamicData = true;
             const cAddedRecord = [];
@@ -23895,6 +24340,12 @@ class Edit$2 {
             args = this.constructTaskAddedEventArgs(cAddedRecord, this.parent.editedRecords, 'beforeAdd');
             this.parent.showSpinner();
             this.parent.trigger('actionBegin', args, (args) => {
+                if (!isNullOrUndefined(args.data[tempTaskID])) {
+                    if (args.data[tempTaskID] != args.data['ganttProperties']['taskId']) {
+                        args.data['ganttProperties']['taskId'] = args.data[tempTaskID];
+                        args.newTaskData[tempTaskID] = args.data[tempTaskID];
+                    }
+                }
                 if (!args.cancel) {
                     if (isRemoteData(this.parent.dataSource)) {
                         const data = this.parent.dataSource;
@@ -24953,10 +25404,13 @@ class Filter$1 {
         this.parent.on('actionComplete', this.actionComplete, this);
         this.parent.on('columnMenuOpen', this.columnMenuOpen, this);
     }
+    wireEvents(a) {
+        EventHandler.add(document.getElementById(a), 'click', this.mouseClickHandler, this);
+    }
     initiateFiltering(column) {
         const treeColumn = this.parent.getColumnByField(column.field, this.parent.treeGridModule.treeGridColumns);
         column.allowFiltering = column.allowFiltering === false ? false : true;
-        if (column.allowFiltering && this.parent.filterSettings.type === 'Menu' && !column.filter) {
+        if (column.allowFiltering && (this.parent.filterSettings.type === 'Menu' || this.parent.filterSettings.type === 'Excel') && !column.filter) {
             column.filter = { ui: this.getCustomFilterUi(column) };
         }
         if (treeColumn) {
@@ -24986,6 +25440,14 @@ class Filter$1 {
         }
         return filterUI;
     }
+    mouseClickHandler(e) {
+        if (closest(e.target, ".e-excelfilter")) {
+            this.parent.treeGrid.grid.notify("click", e);
+        }
+    }
+    unWireEvents() {
+        EventHandler.remove(this.parent.element, 'click', this.mouseClickHandler);
+    }
     getDatePickerFilter(columnName) {
         const parent = this.parent;
         const timeValue = (columnName === parent.taskFields.startDate) || (columnName === parent.taskFields.baselineStartDate)
@@ -25104,6 +25566,15 @@ class Filter$1 {
         }
     }
     actionComplete(args) {
+        if (!isNullOrUndefined(args['filterModel'])) {
+            if (!isNullOrUndefined(args['filterModel']['dialogObj'])) {
+                if (!isNullOrUndefined(args['filterModel']['dialogObj']['element'])) {
+                    if (this.parent.filterSettings.type === 'Excel') {
+                        this.wireEvents(args['filterModel']['dialogObj']['element'].id);
+                    }
+                }
+            }
+        }
         if (args.requestType === filterAfterOpen) {
             if (this.parent.treeGrid.filterSettings.type === 'Menu') {
                 this.filterMenuElement = getValue('filterModel.dlgObj.element', args);
@@ -25121,12 +25592,15 @@ class Filter$1 {
             if ((args.columnName === predecessor && isNullOrUndefined(getValue(predecessor, filterValues)))
                 || (args.columnName === resource && isNullOrUndefined(getValue(resource, filterValues)))) {
                 const element = this.filterMenuElement.querySelector('.e-dropdownlist');
-                const instanceObj = getValue('ej2_instances[0]', element);
-                instanceObj.index = 2;
-                instanceObj.dataBind();
+                let instanceObj;
+                if (!isNullOrUndefined(element)) {
+                    instanceObj = getValue('ej2_instances[0]', element);
+                    instanceObj.index = 2;
+                    instanceObj.dataBind();
+                }
             }
             else if (args.columnName === taskID && isNullOrUndefined(getValue(taskID, filterValues)) && this.parent.treeGrid.filterSettings.type === 'Menu') {
-                const element = this.filterMenuElement.querySelector('.e-numerictextbox');
+                const element = this.filterMenuElement.querySelector('.e-flmenu-input');
                 const instanceObj = getValue('ej2_instances[0]', element);
                 if (!isNullOrUndefined(instanceObj) && isNullOrUndefined(this.parent.columnByField[args.columnName].format)) {
                     instanceObj.format = 'n';
@@ -25157,6 +25631,7 @@ class Filter$1 {
      */
     destroy() {
         this.removeEventListener();
+        this.unWireEvents();
     }
 }
 
@@ -26271,7 +26746,6 @@ class NonWorkingDay {
             this.nonworkingContainer = createElement('div', {
                 className: nonworkingContainer
             });
-            this.nonworkingContainer.setAttribute("role", "NonWorkingDays");
             this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
         }
     }
@@ -26477,7 +26951,7 @@ class EventMarker$1 {
                 this.eventMarkersContainer = createElement('div', {
                     className: eventMarkersContainer
                 });
-                this.eventMarkersContainer.setAttribute("role", "EventMarker");
+                this.eventMarkersContainer.setAttribute("role", "term");
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';
@@ -26630,7 +27104,7 @@ class CriticalPath {
     showCriticalPath(isCritical) {
         const modelIds = this.parent.ids;
         const totalRecords = this.parent.flatData;
-        if (isCritical && this.parent.flatData.length > 0 && !this.parent.enableMultiTaskbar) {
+        if (isCritical && this.parent.flatData.length > 0) {
             this.parent.enableCriticalPath = true;
             const parentRecords = this.parent.treeGrid.parentData;
             let checkEndDateTaskid;
@@ -26675,12 +27149,12 @@ class CriticalPath {
                 totalRecords[j].slack = dateDifference + ' ' + totalRecords[j].ganttProperties.durationUnit;
                 totalRecords[j].ganttProperties.slack = dateDifference + ' ' + totalRecords[j].ganttProperties.durationUnit;
                 if (totalRecords[j].ganttProperties.endDate >= checkEndDate) {
-                    checkBeyondEnddate.push(parseInt(totalRecords[j].ganttProperties.taskId, 10));
+                    checkBeyondEnddate.push(totalRecords[j].ganttProperties.taskId);
                 }
                 if (totalRecords[j].ganttProperties.predecessor) {
                     if (totalRecords[j].ganttProperties.predecessor.length !== 0) {
                         totalPredecessorsCollection.push(totalRecords[j]);
-                        totalPredecessorsCollectionId.push(parseInt(totalRecords[j].ganttProperties.taskId, 10));
+                        totalPredecessorsCollectionId.push((totalRecords[j].ganttProperties.taskId));
                     }
                 }
             }
@@ -26696,7 +27170,14 @@ class CriticalPath {
                         predecessorIndex = modelIds.indexOf(checkBeyondEnddate[k].toString());
                     }
                     else {
-                        predecessorIndex = this.resourceCollectionIds.indexOf(checkBeyondEnddate[k].toString());
+                        let currentRecords = this.parent.currentViewData.filter((data) => {
+                            return parseInt(data.ganttProperties.taskId) == checkBeyondEnddate[k];
+                        });
+                        for (let i = 0; i < currentRecords.length; i++) {
+                            if (!currentRecords[i].hasChildRecords && currentRecords[i].ganttProperties.endDate >= this.maxEndDate) {
+                                predecessorIndex = currentRecords[i].index;
+                            }
+                        }
                     }
                     if (totalRecords[predecessorIndex].ganttProperties.progress < 100) {
                         totalRecords[predecessorIndex].isCritical = true;
@@ -26717,12 +27198,22 @@ class CriticalPath {
                 let from = -1;
                 let toPredecessor = -1;
                 let fromPredecessor = -1;
+                let tempTaskId;
                 const currentIndex = x;
                 const predecessor = totalPredecessorsCollection[x].ganttProperties.predecessor;
                 const individualPredecessorLength = totalPredecessorsCollection[x].ganttProperties.predecessor.length;
-                const taskid = (parseInt(totalPredecessorsCollection[x].ganttProperties.taskId, 10));
+                const taskid = ((totalPredecessorsCollection[x].ganttProperties.taskId));
                 for (let y = 0; y < individualPredecessorLength; y++) {
-                    if (parseInt(predecessor[y].from, 10) === taskid) {
+                    if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) != "string") {
+                        tempTaskId = parseInt((predecessor[y].from), 10);
+                    }
+                    else if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) === "string") {
+                        tempTaskId = predecessor[y].from;
+                    }
+                    else {
+                        tempTaskId = predecessor[y].from;
+                    }
+                    if (tempTaskId === taskid) {
                         if (to === -1) {
                             if (!predecessor[y].offset) {
                                 to = predecessor[y].to;
@@ -26744,7 +27235,16 @@ class CriticalPath {
                             }
                         }
                     }
-                    if (parseInt(predecessor[y].to, 10) === taskid) {
+                    if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) != "string") {
+                        tempTaskId = parseInt((predecessor[y].to), 10);
+                    }
+                    else if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) === "string") {
+                        tempTaskId = predecessor[y].to;
+                    }
+                    else {
+                        tempTaskId = predecessor[y].to;
+                    }
+                    if (tempTaskId === taskid) {
                         if (from === -1) {
                             if (!predecessor[y].offset) {
                                 from = predecessor[y].from;
@@ -26813,7 +27313,7 @@ class CriticalPath {
             this.detailPredecessorCollection = collection;
             this.predecessorCollectionTaskIds = collectionTaskId;
         }
-        if (isCritical === false && this.parent.flatData.length > 0 && !this.parent.enableMultiTaskbar) {
+        if (isCritical === false && this.parent.flatData.length > 0) {
             let pathIndex;
             this.parent.enableCriticalPath = false;
             for (let z = 0; z < this.criticalPathCollection.length; z++) {
@@ -26829,6 +27329,8 @@ class CriticalPath {
     slackCalculation(fromDataObject, collection, collectionTaskId, checkEndDate, flatRecords, modelRecordIds) {
         const fromDateArray = fromDataObject[0]['fromdata'].split(',');
         const fromDataPredecessor = fromDataObject[0]['fromDataPredecessor'].split(',');
+        collectionTaskId = collectionTaskId.toString();
+        collectionTaskId = collectionTaskId.split(',');
         let fromDateArray1 = [];
         let fromTaskIdIndex;
         let indexFromTaskId;
@@ -26840,8 +27342,8 @@ class CriticalPath {
         let ffslack;
         for (let i = 0; i < fromDateArray.length; i++) {
             fromDateArray1 = fromDateArray[i].split(':');
-            fromTaskIdIndex = collectionTaskId.indexOf(parseInt(fromDateArray1[0], 10));
-            totaskId = collectionTaskId.indexOf(parseInt(fromDataObject[0]['todateID'], 10));
+            fromTaskIdIndex = collectionTaskId.indexOf((fromDateArray1[0].toString()));
+            totaskId = collectionTaskId.indexOf((fromDataObject[0]['todateID'].toString()));
             if (this.parent.viewType === 'ProjectView') {
                 indexFromTaskId = modelRecordIds.indexOf(fromDateArray1[0].toString());
                 indexToTaskId = modelRecordIds.indexOf(fromDataObject[0]['todateID'].toString());
@@ -27186,6 +27688,7 @@ class CriticalPath {
     finalCriticalPath(collection, taskBeyondEnddate, flatRecords, modelRecordIds, checkEndDate) {
         let criticalPathIds = [];
         let index;
+        let predecessorFrom;
         for (let x = collection.length - 1; x >= 0; x--) {
             if (this.parent.viewType === 'ProjectView') {
                 index = modelRecordIds.indexOf(collection[x]['taskid'].toString());
@@ -27229,7 +27732,13 @@ class CriticalPath {
                     /* eslint-disable-next-line */
                     dateDifference = this.parent.dataOperation.getDuration(currentData.endDate, flatRecords[toID].ganttProperties.endDate, currentData.durationUnit, currentData.isAutoSchedule, currentData.isMilestone);
                 }
-                if (parseInt(predecessorLength[i].from, 10) === flatRecords[index][this.parent.taskFields.id] &&
+                if (typeof (flatRecords[index][this.parent.taskFields.id]) === 'number') {
+                    predecessorFrom = parseInt(predecessorLength[i].from, 10);
+                }
+                else {
+                    predecessorFrom = predecessorLength[i].from;
+                }
+                if (predecessorFrom === flatRecords[index][this.parent.taskFields.id] &&
                     flatRecords[toID].slack === noSlackValue && dateDifference <= 0) {
                     flatRecords[index].slack = noSlackValue;
                     flatRecords[index].ganttProperties.slack = noSlackValue;
@@ -27267,15 +27776,35 @@ class CriticalPath {
         for (let i = 0; i < criticalPathIds.length; i++) {
             let criticalData;
             if (this.parent.viewType === 'ProjectView') {
-                criticalData = this.parent.flatData[this.parent.ids.indexOf(criticalPathIds[i].toString())];
+                criticalData = this.parent.currentViewData[this.parent.ids.indexOf(criticalPathIds[i].toString())];
             }
             else {
-                criticalData = this.parent.flatData[this.resourceCollectionIds.indexOf(criticalPathIds[i].toString())];
+                let currentRecords = this.parent.currentViewData.filter((data) => {
+                    return (data.ganttProperties.taskId).toString() == criticalPathIds[i].toString();
+                });
+                for (let i = 0; i < currentRecords.length; i++) {
+                    if (currentRecords[i].ganttProperties.isCritical || currentRecords[i].ganttProperties.endDate >= this.maxEndDate) {
+                        criticalData = currentRecords[i];
+                    }
+                }
             }
             const index = this.parent.currentViewData.indexOf(criticalData);
             const element = this.parent.getRowByIndex(index);
             let taskClass;
             const columnFields = this.parent.taskFields;
+            if (criticalData.parentItem) {
+                const parentRecord = this.parent.currentViewData.filter((data) => {
+                    return criticalData.parentItem.uniqueID == data.uniqueID;
+                });
+                const parentIndex = this.parent.currentViewData.indexOf(parentRecord[0]);
+                const parentElement = this.parent.getRowByIndex(parentIndex);
+                let parentTaskbarElement = parentElement.querySelectorAll('.e-taskbar-main-container');
+                for (let i = 0; i < parentTaskbarElement.length; i++) {
+                    if (parentTaskbarElement[i].getAttribute('rowuniqueid') == criticalData['rowUniqueID']) {
+                        addClass(parentTaskbarElement[i].querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
+                    }
+                }
+            }
             /* eslint-disable-next-line */
             if (this.parent.allowUnscheduledTasks && !criticalData[columnFields.startDate] && !criticalData[columnFields.endDate] && criticalData[columnFields.duration]) {
                 taskClass = criticalUnscheduledTask;
@@ -27283,7 +27812,8 @@ class CriticalPath {
             else {
                 taskClass = criticalChildProgressBarInnerDiv;
             }
-            if (element) {
+            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);
                 }
@@ -27303,13 +27833,22 @@ class CriticalPath {
             let currentdata;
             let checking = [];
             let checkint;
+            let values;
             for (let i = 0; i < this.criticalPathCollection.length; i++) {
                 index = collectionTaskId.indexOf(this.criticalPathCollection[i]);
                 currentdata = collection[index];
                 if (index !== -1 && currentdata['to']) {
                     checking = currentdata['to'].split(',');
                     for (let j = 0; j < checking.length; j++) {
-                        checkint = parseInt(checking[j], 10);
+                        values = checking[j].split('+');
+                        if (checking[j].indexOf('-') >= 0) {
+                            values = checking[j].split('-');
+                            
+                        }
+                        checkint = (values[0].replace(":", ""));
+                        if (typeof (criticalPathIds[j]) === "number") {
+                            checkint = parseInt(values[0], 10);
+                        }
                         if (criticalPathIds.indexOf(checkint) !== -1) {
                             const lineElement = this.parent.element.querySelectorAll('#ConnectorLineparent' +
                                 currentdata['taskid'] + 'child' + checkint);
@@ -27439,7 +27978,12 @@ class ContextMenu$2 {
         }
         switch (this.item) {
             case 'TaskInformation':
-                this.parent.openEditDialog(Number(this.rowData.ganttProperties.rowUniqueID));
+                if (isNaN(Number(this.rowData.ganttProperties.rowUniqueID))) {
+                    this.parent.openEditDialog(this.rowData.ganttProperties.rowUniqueID);
+                }
+                else {
+                    this.parent.openEditDialog(Number(this.rowData.ganttProperties.rowUniqueID));
+                }
                 break;
             case 'Above':
             case 'Below':
@@ -28242,7 +28786,7 @@ class RowDD$1 {
     }
     rowDragStartHelper(args) {
         this.parent.trigger('rowDragStartHelper', args);
-        if (this.parent.readOnly || this.parent.filterSettings.columns.length > 0) {
+        if (this.parent.readOnly) {
             args.cancel = true;
         }
         if (this.parent.viewType === 'ResourceView' && getValue('level', args.data[0]) === 0) {
@@ -28464,6 +29008,62 @@ class RowDD$1 {
                         this.updateSharedResourceTask();
                     }
                 }
+                if (this.parent.taskFields.dependency) {
+                    let isValidPredecessor = true;
+                    let draggedParent;
+                    let toParent;
+                    if (draggedRecord.parentItem) {
+                        draggedParent = this.parent.currentViewData[this.parent.ids.indexOf(draggedRecord.parentItem.taskId)];
+                    }
+                    else {
+                        draggedParent = draggedRecord;
+                    }
+                    if (droppedRecord.parentItem) {
+                        toParent = this.parent.currentViewData[this.parent.ids.indexOf(droppedRecord.parentItem.taskId)];
+                    }
+                    else {
+                        toParent = droppedRecord;
+                    }
+                    let validateRecords;
+                    if (toParent.uniqueID === draggedParent.uniqueID || (draggedParent.parentItem &&
+                        toParent.uniqueID == this.parent.currentViewData[this.parent.ids.indexOf(draggedParent.parentItem.taskId)].uniqueID)) {
+                        validateRecords = this.parent.currentViewData.filter((data) => {
+                            if ((data.ganttProperties.predecessor && data.ganttProperties.predecessor.length > 0)) {
+                                for (let i = 0; i < data.ganttProperties.predecessor.length; i++) {
+                                    return (parseInt(data.ganttProperties.predecessor[i].to) === parseInt(toParent.ganttProperties.taskId) ||
+                                        parseInt(data.ganttProperties.predecessor[i].from) === parseInt(toParent.ganttProperties.taskId));
+                                }
+                            }
+                            return null;
+                        });
+                        let predName = [];
+                        for (let i = 0; i < validateRecords.length; i++) {
+                            predName = [];
+                            if (validateRecords[i].ganttProperties.predecessor) {
+                                for (let k = 0; k < validateRecords[i].ganttProperties.predecessor.length; k++) {
+                                    if (parseInt(validateRecords[i].ganttProperties.taskId) !==
+                                        parseInt(validateRecords[i].ganttProperties.predecessor[k].from)) {
+                                        predName.push(validateRecords[i].ganttProperties.predecessor[k].from);
+                                    }
+                                    else {
+                                        predName.push(validateRecords[i].ganttProperties.predecessor[k].to);
+                                    }
+                                }
+                            }
+                            for (let j = 0; j < predName.length; j++) {
+                                let name = predName[j].replace(/\D/g, '');
+                                let toRec = this.parent.currentViewData.filter((data) => {
+                                    return parseInt(data.ganttProperties.taskId) == parseInt(name);
+                                });
+                                isValidPredecessor = this.parent.connectorLineEditModule.validateParentPredecessor(validateRecords[i], toRec[0]);
+                                if (!isValidPredecessor) {
+                                    this.parent.dataOperation['resetDependency'](validateRecords[i]);
+                                    this.parent.dataOperation['resetDependency'](toRec[0]);
+                                }
+                            }
+                        }
+                    }
+                }
                 // method to update the edited parent records
                 for (let j = 0; j < this.updateParentRecords.length; j++) {
                     this.parent.dataOperation.updateParentItems(this.updateParentRecords[j]);
@@ -28844,7 +29444,7 @@ class RowDD$1 {
                 }
                 let idx;
                 const ganttData = dataSource.length > 0 && this.parent.viewType !== 'ResourceView' ?
-                    dataSource : this.parent.updatedRecords;
+                    dataSource : this.parent.flatData;
                 for (let i = 0; i < ganttData.length; i++) {
                     if (this.parent.viewType === 'ResourceView') {
                         if (ganttData[i].ganttProperties.rowUniqueID === deletedRow.ganttProperties.rowUniqueID) {
@@ -32165,215 +32765,217 @@ class PdfGanttPredecessor {
         let childPageData;
         let parentY = 0;
         let childY = 0;
-        switch (this.type) {
-            case 'FS':
-                if (childTask.startPage > -1 && parentTask.endPage > -1) {
-                    startPage = pages[parentTask.endPage];
-                    endPage = pages[childTask.startPage];
-                    parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
-                    childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
-                    if (this.parentIndex < this.childIndex) {
-                        if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
-                            predecessorType = 'FSType1';
+        if (childTask && parentTask) {
+            switch (this.type) {
+                case 'FS':
+                    if (childTask.startPage > -1 && parentTask.endPage > -1) {
+                        startPage = pages[parentTask.endPage];
+                        endPage = pages[childTask.startPage];
+                        parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
+                        childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
+                        if (this.parentIndex < this.childIndex) {
+                            if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
+                                predecessorType = 'FSType1';
+                            }
+                            else {
+                                predecessorType = 'FSType2';
+                            }
                         }
                         else {
-                            predecessorType = 'FSType2';
+                            if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
+                                predecessorType = 'FSType3';
+                            }
+                            else {
+                                predecessorType = 'FSType4';
+                            }
                         }
                     }
                     else {
-                        if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
-                            predecessorType = 'FSType3';
-                        }
-                        else {
-                            predecessorType = 'FSType4';
-                        }
+                        return;
                     }
-                }
-                else {
-                    return;
-                }
-                break;
-            case 'SF':
-                if (childTask.endPage > -1 && parentTask.startPage > -1) {
-                    startPage = pages[parentTask.startPage];
-                    endPage = pages[childTask.endPage];
-                    parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
-                    childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
-                    if (this.parentIndex < this.childIndex) {
-                        if (this.parentLeft > this.childLeft + this.childWidth) {
-                            predecessorType = 'SFType1';
+                    break;
+                case 'SF':
+                    if (childTask.endPage > -1 && parentTask.startPage > -1) {
+                        startPage = pages[parentTask.startPage];
+                        endPage = pages[childTask.endPage];
+                        parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
+                        childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
+                        if (this.parentIndex < this.childIndex) {
+                            if (this.parentLeft > this.childLeft + this.childWidth) {
+                                predecessorType = 'SFType1';
+                            }
+                            else {
+                                predecessorType = 'SFType2';
+                            }
                         }
                         else {
-                            predecessorType = 'SFType2';
+                            if (this.parentLeft > this.childLeft + this.childWidth) {
+                                predecessorType = 'SFType3';
+                            }
+                            else {
+                                predecessorType = 'SFType4';
+                            }
                         }
                     }
                     else {
-                        if (this.parentLeft > this.childLeft + this.childWidth) {
-                            predecessorType = 'SFType3';
-                        }
-                        else {
-                            predecessorType = 'SFType4';
-                        }
+                        return;
                     }
-                }
-                else {
-                    return;
-                }
-                break;
-            case 'FF':
-                if (childTask.endPage > -1 && parentTask.endPage > -1) {
-                    startPage = pages[parentTask.endPage];
-                    endPage = pages[childTask.endPage];
-                    parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
-                    childPageData = pdfGantt.pdfPageDetail[childTask.endPage - pdfGantt.chartPageIndex];
-                    if (this.parentIndex < this.childIndex) {
-                        if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
-                            predecessorType = 'FFType1';
+                    break;
+                case 'FF':
+                    if (childTask.endPage > -1 && parentTask.endPage > -1) {
+                        startPage = pages[parentTask.endPage];
+                        endPage = pages[childTask.endPage];
+                        parentPageData = pdfGantt.pdfPageDetail[parentTask.endPage - pdfGantt.chartPageIndex];
+                        childPageData = pdfGantt.pdfPageDetail[childTask.endPage - pdfGantt.chartPageIndex];
+                        if (this.parentIndex < this.childIndex) {
+                            if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
+                                predecessorType = 'FFType1';
+                            }
+                            else {
+                                predecessorType = 'FFType2';
+                            }
                         }
                         else {
-                            predecessorType = 'FFType2';
+                            if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
+                                predecessorType = 'FFType3';
+                            }
+                            else {
+                                predecessorType = 'FFType4';
+                            }
                         }
                     }
                     else {
-                        if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
-                            predecessorType = 'FFType3';
-                        }
-                        else {
-                            predecessorType = 'FFType4';
-                        }
+                        return;
                     }
-                }
-                else {
-                    return;
-                }
-                break;
-            case 'SS':
-                if (childTask.startPage > -1 && parentTask.startPage > -1) {
-                    startPage = pages[parentTask.startPage];
-                    endPage = pages[childTask.startPage];
-                    parentPageData = pdfGantt.pdfPageDetail[parentTask.startPage - pdfGantt.chartPageIndex];
-                    childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
-                    if (this.parentIndex < this.childIndex) {
-                        if (this.parentLeft >= this.childLeft) {
-                            predecessorType = 'SSType1';
+                    break;
+                case 'SS':
+                    if (childTask.startPage > -1 && parentTask.startPage > -1) {
+                        startPage = pages[parentTask.startPage];
+                        endPage = pages[childTask.startPage];
+                        parentPageData = pdfGantt.pdfPageDetail[parentTask.startPage - pdfGantt.chartPageIndex];
+                        childPageData = pdfGantt.pdfPageDetail[childTask.startPage - pdfGantt.chartPageIndex];
+                        if (this.parentIndex < this.childIndex) {
+                            if (this.parentLeft >= this.childLeft) {
+                                predecessorType = 'SSType1';
+                            }
+                            else {
+                                predecessorType = 'SSType2';
+                            }
                         }
                         else {
-                            predecessorType = 'SSType2';
+                            if (this.parentLeft >= this.childLeft) {
+                                predecessorType = 'SSType3';
+                            }
+                            else {
+                                predecessorType = 'SSType4';
+                            }
                         }
                     }
                     else {
-                        if (this.parentLeft >= this.childLeft) {
-                            predecessorType = 'SSType3';
-                        }
-                        else {
-                            predecessorType = 'SSType4';
-                        }
+                        return;
                     }
-                }
-                else {
-                    return;
-                }
-                break;
-        }
-        let midPoint = Math.round((this.parent.rowHeight - 1) / 2.0);
-        midPoint = pixelToPoint(midPoint);
-        /* eslint-disable-next-line */
-        let point1, point2, point3, point4, point5, point6;
-        point1 = point2 = point3 = point4 = point5 = point6 = new PointF();
-        const parentTaskpoint = Object.assign({}, parentTask.taskStartPoint);
-        const childTaskpoint = Object.assign({}, childTask.taskStartPoint);
-        parentY = parentTaskpoint.y + parentPageData.startPoint.y;
-        childY = childTaskpoint.y + childPageData.startPoint.y;
-        const ffpoint1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth), parentY + midPoint);
-        const sspoint1 = new PointF(pixelToPoint(this.parentLeft) - 1, parentY + midPoint);
-        const ffpoint3 = new PointF(pixelToPoint(this.childLeft - 20), childY + midPoint);
-        const ffpoint4 = new PointF(pixelToPoint(this.childLeft - 6 - this.lineWidth) - 1, childY + midPoint);
-        const sspoint4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 6 + this.lineWidth) + 1, childY + midPoint);
-        switch (predecessorType) {
-            case 'FSType1':
-            case 'FSType3':
-                point1 = ffpoint1;
-                point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
-                point3 = ffpoint3;
-                point4 = ffpoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                break;
-            case 'FSType2':
-                point1 = ffpoint1;
-                point2 = new PointF(point1.x + 10, parentY + midPoint);
-                point3 = new PointF(point1.x + 10, childY + 2);
-                point4 = new PointF(pixelToPoint(this.childLeft - 20), childY + 2);
-                point5 = ffpoint3;
-                point6 = ffpoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                break;
-            case 'FSType4':
-                point1 = ffpoint1;
-                point2 = new PointF(point1.x + 10, parentY + midPoint);
-                point3 = new PointF(point1.x + 10, parentY + 2);
-                point4 = new PointF(pixelToPoint(this.childLeft - 20), parentY + 2);
-                point5 = ffpoint3;
-                point6 = ffpoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                break;
-            case 'FFType1':
-            case 'FFType3':
-                point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
-                point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
-                point3 = new PointF(point2.x, childY + midPoint);
-                point4 = sspoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                break;
-            case 'FFType2':
-            case 'FFType4':
-                point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
-                point2 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth + 20), parentY + midPoint);
-                point3 = new PointF(point2.x, childY + midPoint);
-                point4 = sspoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                break;
-            case 'SSType1':
-            case 'SSType3':
-                point1 = sspoint1;
-                point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
-                point3 = new PointF(point2.x, childY + midPoint);
-                point4 = ffpoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                break;
-            case 'SSType2':
-            case 'SSType4':
-                point1 = sspoint1;
-                point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
-                point3 = new PointF(point2.x, childY + midPoint);
-                point4 = ffpoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                break;
-            case 'SFType1':
-            case 'SFType3':
-                point1 = sspoint1;
-                point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
-                point3 = new PointF(point2.x, childY + midPoint);
-                point4 = sspoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
-                break;
-            case 'SFType2':
-                point1 = sspoint1;
-                point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
-                point3 = new PointF(point2.x, childY + 2);
-                point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), childY + 2);
-                point5 = new PointF(point4.x, childY + midPoint);
-                point6 = sspoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                break;
-            case 'SFType4':
-                point1 = sspoint1;
-                point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
-                point3 = new PointF(point2.x, parentY + 2);
-                point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + 2);
-                point5 = new PointF(point4.x, childY + midPoint);
-                point6 = sspoint4;
-                this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
-                break;
+                    break;
+            }
+            let midPoint = Math.round((this.parent.rowHeight - 1) / 2.0);
+            midPoint = pixelToPoint(midPoint);
+            /* eslint-disable-next-line */
+            let point1, point2, point3, point4, point5, point6;
+            point1 = point2 = point3 = point4 = point5 = point6 = new PointF();
+            const parentTaskpoint = Object.assign({}, parentTask.taskStartPoint);
+            const childTaskpoint = Object.assign({}, childTask.taskStartPoint);
+            parentY = parentTaskpoint.y + parentPageData.startPoint.y;
+            childY = childTaskpoint.y + childPageData.startPoint.y;
+            const ffpoint1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth), parentY + midPoint);
+            const sspoint1 = new PointF(pixelToPoint(this.parentLeft) - 1, parentY + midPoint);
+            const ffpoint3 = new PointF(pixelToPoint(this.childLeft - 20), childY + midPoint);
+            const ffpoint4 = new PointF(pixelToPoint(this.childLeft - 6 - this.lineWidth) - 1, childY + midPoint);
+            const sspoint4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 6 + this.lineWidth) + 1, childY + midPoint);
+            switch (predecessorType) {
+                case 'FSType1':
+                case 'FSType3':
+                    point1 = ffpoint1;
+                    point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
+                    point3 = ffpoint3;
+                    point4 = ffpoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                    break;
+                case 'FSType2':
+                    point1 = ffpoint1;
+                    point2 = new PointF(point1.x + 10, parentY + midPoint);
+                    point3 = new PointF(point1.x + 10, childY + 2);
+                    point4 = new PointF(pixelToPoint(this.childLeft - 20), childY + 2);
+                    point5 = ffpoint3;
+                    point6 = ffpoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                    break;
+                case 'FSType4':
+                    point1 = ffpoint1;
+                    point2 = new PointF(point1.x + 10, parentY + midPoint);
+                    point3 = new PointF(point1.x + 10, parentY + 2);
+                    point4 = new PointF(pixelToPoint(this.childLeft - 20), parentY + 2);
+                    point5 = ffpoint3;
+                    point6 = ffpoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                    break;
+                case 'FFType1':
+                case 'FFType3':
+                    point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
+                    point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, childY + midPoint);
+                    point4 = sspoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                    break;
+                case 'FFType2':
+                case 'FFType4':
+                    point1 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth) + 1, parentY + midPoint);
+                    point2 = new PointF(pixelToPoint(this.parentLeft + this.parentWidth + 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, childY + midPoint);
+                    point4 = sspoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                    break;
+                case 'SSType1':
+                case 'SSType3':
+                    point1 = sspoint1;
+                    point2 = new PointF(pixelToPoint(this.childLeft - 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, childY + midPoint);
+                    point4 = ffpoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                    break;
+                case 'SSType2':
+                case 'SSType4':
+                    point1 = sspoint1;
+                    point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, childY + midPoint);
+                    point4 = ffpoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                    break;
+                case 'SFType1':
+                case 'SFType3':
+                    point1 = sspoint1;
+                    point2 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, childY + midPoint);
+                    point4 = sspoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint);
+                    break;
+                case 'SFType2':
+                    point1 = sspoint1;
+                    point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, childY + 2);
+                    point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), childY + 2);
+                    point5 = new PointF(point4.x, childY + midPoint);
+                    point6 = sspoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                    break;
+                case 'SFType4':
+                    point1 = sspoint1;
+                    point2 = new PointF(pixelToPoint(this.parentLeft - 20), parentY + midPoint);
+                    point3 = new PointF(point2.x, parentY + 2);
+                    point4 = new PointF(pixelToPoint(this.childLeft + this.childWidth + 20), parentY + 2);
+                    point5 = new PointF(point4.x, childY + midPoint);
+                    point6 = sspoint4;
+                    this.connectLines(startPage, endPage, point1, point2, point3, point4, childTask, midPoint, point5, point6);
+                    break;
+            }
         }
     }
     /**