@syncfusion/ej2-gantt 20.3.60 → 20.4.38

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

@@ -149,6 +149,7 @@ function updateDates(record, parent) {
 function formatString(str, args) {
     let regx;
     for (let i = 0; i < args.length; i++) {
+        // eslint-disable-next-line detect-non-literal-regexp
         regx = new RegExp('\\{' + (i) + '\\}', 'gm');
         str = str.replace(regx, args[i].toString());
     }
@@ -413,6 +414,10 @@ class DateProcessor {
                     }
                 }
             }
+            if (ganttProp && ganttProp.baselineStartDate && cloneDate &&
+                ganttProp.baselineStartDate.getTime() > cloneDate.getTime()) {
+                cloneDate.setDate(cloneDate.getDate() + 1);
+            }
             return cloneDate;
         }
     }
@@ -483,7 +488,7 @@ class DateProcessor {
             tDuration = this.parent.editModule.taskbarEditModule.sumOfDuration(ganttProperties.segments);
         }
         else {
-            if (!isNullOrUndefined(ganttProperties.startDate) && !isNullOrUndefined(ganttProperties.endDate) &&
+            if ((!isNullOrUndefined(this.parent.taskFields.milestone)) && (!isNullOrUndefined(ganttProperties.startDate)) && !isNullOrUndefined(ganttProperties.endDate) &&
                 (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && !isNullOrUndefined(ganttData.taskData[this.parent.taskFields.milestone])) {
                 tDuration = 1;
             }
@@ -1846,7 +1851,6 @@ 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);
@@ -2037,8 +2041,10 @@ class TaskProcessor extends DateProcessor {
                     taskData.push(this.setSegmentTaskData(segment, segments[i]));
                 }
                 this.parent.setRecordValue('duration', sumOfDuration, data.ganttProperties, true);
-                this.parent.setRecordValue('endDate', ganttSegments[ganttSegments.length - 1].endDate, data.ganttProperties, true);
-                if (!isNullOrUndefined(taskSettings.endDate)) {
+                if (!isNullOrUndefined(ganttSegments[ganttSegments.length - 1])) {
+                    this.parent.setRecordValue('endDate', ganttSegments[ganttSegments.length - 1].endDate, data.ganttProperties, true);
+                }
+                if (!isNullOrUndefined(taskSettings.endDate) && !isNullOrUndefined(ganttSegments[ganttSegments.length - 1])) {
                     this.parent.setRecordValue(this.parent.taskFields.endDate, ganttSegments[ganttSegments.length - 1].endDate, data, true);
                 }
                 this.parent.setRecordValue('taskData.' + this.parent.taskFields.segments, taskData, data);
@@ -3955,6 +3961,8 @@ class ChartScroll {
     addEventListeners() {
         this.parent.on('grid-scroll', this.gridScrollHandler, this);
         EventHandler.add(this.element, 'scroll', this.onScroll, this);
+        this.parent.treeGrid.grid.on('showGanttShimmer', this.updateShimmer, this);
+        this.parent.treeGrid.grid.on('removeGanttShimmer', this.removeShimmer, this);
     }
     /**
      * Unbind events
@@ -3964,6 +3972,8 @@ class ChartScroll {
     removeEventListeners() {
         EventHandler.remove(this.element, 'scroll', this.onScroll);
         this.parent.off('grid-scroll', this.gridScrollHandler);
+        this.parent.treeGrid.grid.off('showGanttShimmer', this.updateShimmer);
+        this.parent.treeGrid.grid.off('removeGanttShimmer', this.removeShimmer);
     }
     /**
      *
@@ -4009,6 +4019,27 @@ class ChartScroll {
             this.parent.chartVerticalLineContainer.style.top = formatUnit(scrollTop);
         }
     }
+    removeShimmer() {
+        let parent = this.parent;
+        setTimeout(function () {
+            parent.hideMaskRow();
+        }, 0);
+    }
+    ;
+    updateShimmer() {
+        let parent = this.parent;
+        setTimeout(function () {
+            parent.showMaskRow();
+        }, 0);
+    }
+    updateSpinner() {
+        let parent = this.parent;
+        this.parent.showSpinner();
+        window.clearTimeout(this.isScrolling);
+        this.isScrolling = setTimeout(function () {
+            parent.hideSpinner();
+        }, 200);
+    }
     /**
      * Scroll event handler
      *
@@ -4034,6 +4065,16 @@ class ChartScroll {
             scrollArgs.scrollDirection = 'Horizontal';
             scrollArgs.action = 'HorizontalScroll';
         }
+        if ((scrollArgs.scrollDirection != 'Horizontal' && !isNullOrUndefined(scrollArgs.scrollDirection)) && this.parent.enableVirtualization === true && (this.parent.isToolBarClick
+            || isNullOrUndefined(this.parent.isToolBarClick))) {
+            this.parent.isVirtualScroll = true;
+            if (this.parent.showIndicator || isNullOrUndefined(this.parent.showIndicator)) {
+                if (!this.parent.enableVirtualMaskRow && this.parent.enableVirtualization && this.parent.loadingIndicator.indicatorType === "Spinner") {
+                    this.updateSpinner();
+                }
+            }
+        }
+        this.parent.isToolBarClick = true;
         scrollArgs.requestType = 'scroll';
         this.parent.trigger('actionComplete', scrollArgs);
     }
@@ -4074,7 +4115,10 @@ class ChartScroll {
      * @param {number} scrollLeft  - To set scroll left for scroll container
      * @returns {void} .
      */
-    setScrollLeft(scrollLeft) {
+    setScrollLeft(scrollLeft, leftSign) {
+        if (leftSign) {
+            scrollLeft = leftSign == -1 && this.parent.enableRtl ? -scrollLeft : scrollLeft;
+        }
         this.element.scrollLeft = scrollLeft;
         this.parent.ganttChartModule.chartTimelineContainer.scrollLeft = this.element.scrollLeft;
         this.previousScroll.left = this.element.scrollLeft;
@@ -4221,6 +4265,21 @@ class GanttChart {
                 this.parent.predecessorModule.createConnectorLinesCollection();
             }
             this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+            for (let i = 0; i < this.parent.chartRowsModule.ganttChartTableBody.children.length; i++) {
+                if (this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[4]) {
+                    this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[1].setAttribute('tabindex', '-1');
+                    this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[2].setAttribute('tabindex', '-1');
+                    this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[4].setAttribute('tabindex', '-1');
+                }
+                else {
+                    if (this.parent.viewType === 'ProjectView') {
+                        this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[1].setAttribute('tabindex', '-1');
+                    }
+                    else if (this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[0]) {
+                        this.parent.chartRowsModule.ganttChartTableBody.children[i].children[0].children[1].children[0].setAttribute('tabindex', '-1');
+                    }
+                }
+            }
             if (this.parent.enableCriticalPath) {
                 let crtiticalModule = this.parent.criticalPathModule;
                 this.parent.criticalPathModule.criticalConnectorLine(crtiticalModule.criticalPathCollection, crtiticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, crtiticalModule.predecessorCollectionTaskIds);
@@ -4284,13 +4343,15 @@ class GanttChart {
         for (let i = 0; i < rangeCollection.length; i++) {
             const height = this.getRangeHeight(currentRecord);
             const leftDiv = createElement('div', {
-                className: rangeChildContainer + ' ' + 'e-leftarc', styles: `left:${rangeCollection[i].left}px;
+                className: rangeChildContainer + ' ' + 'e-leftarc', styles: (this.parent.enableRtl ? 'right:' : 'left:') +
+                    `${(this.parent.enableRtl ? rangeCollection[i].left + rangeCollection[i].width - 5 : rangeCollection[i].left)}px;
                 top: ${Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2)}px;
                 height: ${height + 1}px; border-right: 0px`
             });
             const rightDiv = createElement('div', {
                 className: rangeChildContainer + ' ' + 'e-rightarc',
-                styles: `left:${rangeCollection[i].left + rangeCollection[i].width - 5}px;
+                styles: (this.parent.enableRtl ? 'right:' : 'left:') + `${(this.parent.enableRtl ? rangeCollection[i].left :
+                    rangeCollection[i].left + rangeCollection[i].width - 5)}px;
                 top: ${Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2)}px; height: ${height + 1}px;
                 border-left: 0px`
             });
@@ -4307,6 +4368,10 @@ class GanttChart {
     renderTimelineContainer() {
         this.chartTimelineContainer =
             createElement('div', { className: timelineHeaderContainer });
+        if (this.parent.enableRtl) {
+            this.chartTimelineContainer.style.borderLeftWidth = '1px';
+            this.chartTimelineContainer.style.borderRightWidth = '0px';
+        }
         this.chartTimelineContainer.setAttribute("role", "presentation");
         this.chartElement.appendChild(this.chartTimelineContainer);
     }
@@ -4479,7 +4544,7 @@ class GanttChart {
         scrollLeft = this.scrollElement.scrollWidth <= scrollLeft ? this.scrollElement.scrollWidth : scrollLeft;
         if ((this.scrollElement.offsetWidth + this.parent.ganttChartModule.scrollElement.scrollLeft) < scrollLeft
             || (this.scrollElement.scrollLeft > scrollLeft)) {
-            this.scrollObject.setScrollLeft(scrollLeft - 50);
+            this.scrollObject.setScrollLeft(scrollLeft - 50, this.parent.enableRtl ? -1 : 0);
         }
         //  this.parent.ganttChartModule.scrollObject.updateLeftPosition();
     }
@@ -4514,6 +4579,12 @@ class GanttChart {
      */
     documentMouseUp(e) {
         this.isGanttElement = true;
+        if (e.target.classList.contains('e-treegridexpand') ||
+            e.target.classList.contains('e-treegridcollapse')) {
+            if (getValue('isEditCollapse', this.parent.treeGrid) === true) {
+                setValue('isEditCollapse', false, this.parent.treeGrid);
+            }
+        }
         if (this.parent.allowRowDragAndDrop) {
             const ganttDragElemet = this.parent.element.querySelector('.e-ganttdrag');
             if (ganttDragElemet) {
@@ -4531,6 +4602,13 @@ class GanttChart {
         }
         this.parent.notify('chartMouseUp', e);
         if (this.parent.showActiveElement) {
+            this.parent.showIndicator = true;
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
             if (this.focusedElement && !e.target.classList.contains('e-split-bar')) {
                 this.focusedElement.tabIndex = this.focusedElement.tabIndex === 0 ? -1 : this.focusedElement.tabIndex;
                 removeClass([this.focusedElement], 'e-active-container');
@@ -4777,7 +4855,7 @@ class GanttChart {
         this.parent.predecessorModule.createConnectorLinesCollection();
         this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
         if (this.parent.enableCriticalPath && this.parent.criticalPathModule) {
-            let criticalModule = this.parent.criticalPathModule;
+            const criticalModule = this.parent.criticalPathModule;
             criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
         }
     }
@@ -5536,6 +5614,12 @@ class Timeline {
             cancel: false
         };
         this.parent.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.showMaskRow();
+        }
+        else {
+            this.parent.showSpinner();
+        }
         if (!args.cancel) {
             newTimeline = args.timeline;
             this.changeTimelineSettings(newTimeline);
@@ -5576,6 +5660,12 @@ class Timeline {
                 timeline: this.parent.currentZoomingLevel
             };
             this.parent.trigger('actionComplete', args);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
         }
     }
     /**
@@ -5641,6 +5731,12 @@ class Timeline {
             this.parent.toolbarModule.enableItems([this.parent.controlId + '_zoomin', this.parent.controlId + '_zoomout'], true);
         }
         this.parent.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.showMaskRow();
+        }
+        else {
+            this.parent.showSpinner();
+        }
         this.changeTimelineSettings(newTimeline);
     }
     bottomTierCellWidthCalc(mode, zoomLevel, date) {
@@ -6747,7 +6843,9 @@ class Timeline {
                 const validStartLeft = this.parent.dataOperation.getTaskLeft(validStartDate, false);
                 const validEndLeft = this.parent.dataOperation.getTaskLeft(validEndDate, false);
                 let isChanged;
-                if (!isNullOrUndefined(maxStartLeft) && ((minStartDate < this.timelineStartDate) || (!isNullOrUndefined(this.parent.editModule.taskbarEditModule)) && (!isNullOrUndefined(this.parent.editModule.taskbarEditModule.taskBarEditAction))) && (maxStartLeft < this.bottomTierCellWidth || maxStartLeft <= validStartLeft)) {
+                if (!isNullOrUndefined(maxStartLeft) && ((minStartDate < this.timelineStartDate) ||
+                    (!isNullOrUndefined(this.parent.editModule.taskbarEditModule)) &&
+                        (!isNullOrUndefined(this.parent.editModule.taskbarEditModule.taskBarEditAction))) && (maxStartLeft < this.bottomTierCellWidth || maxStartLeft <= validStartLeft)) {
                     isChanged = 'prevTimeSpan';
                     minStartDate = minStartDate > this.timelineStartDate ? this.timelineStartDate : minStartDate;
                 }
@@ -6986,9 +7084,12 @@ class GanttTreeGrid {
         this.parent.treeGrid.showColumnMenu = this.parent.showColumnMenu;
         this.parent.treeGrid.enableCollapseAll = this.parent.collapseAllParentTasks;
         this.parent.treeGrid.columnMenuItems = this.parent.columnMenuItems;
+        this.parent.treeGrid.enableRtl = this.parent.enableRtl;
         this.parent.treeGrid.childMapping = isNullOrUndefined(this.parent.taskFields.child) ? '' : this.parent.taskFields.child;
         this.parent.treeGrid.treeColumnIndex = this.parent.treeColumnIndex;
         this.parent.treeGrid.columns = this.treeGridColumns;
+        this.parent.treeGrid.loadingIndicator = this.parent.loadingIndicator;
+        this.parent.treeGrid.enableVirtualMaskRow = this.parent.enableVirtualMaskRow;
         if (this.parent.dataSource instanceof Object && isCountRequired(this.parent)) {
             // In order to bind the observable data at load time, hasChildMapping is necessary to be mapped.
             this.parent.treeGrid.hasChildMapping = 'isParent';
@@ -7082,6 +7183,14 @@ class GanttTreeGrid {
     dataBound(args) {
         this.ensureScrollBar();
         this.parent.treeDataBound(args);
+        if (this.parent.isVirtualScroll) {
+            if ((this.parent.enableVirtualMaskRow && this.parent.enableVirtualization) ||
+                (this.parent.enableVirtualization && !this.parent.enableVirtualMaskRow && this.parent.loadingIndicator.indicatorType === "Shimmer") ||
+                (this.parent.loadingIndicator.indicatorType === "Shimmer")) {
+                this.parent.hideMaskRow();
+            }
+            this.parent.isVirtualScroll = false;
+        }
         this.prevCurrentView = extend([], [], this.parent.currentViewData, true);
     }
     dataStateChange(args) {
@@ -7116,6 +7225,12 @@ class GanttTreeGrid {
             const collapsedArgs = this.createExpandCollapseArgs(args);
             this.parent.ganttChartModule.collapsedGanttRow(collapsedArgs);
         }
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     }
     expanded(args) {
         if (!this.parent.ganttChartModule.isExpandCollapseFromChart && !this.parent.isExpandCollapseLevelMethod) {
@@ -7124,6 +7239,12 @@ class GanttTreeGrid {
                 this.parent.ganttChartModule.expandedGanttRow(expandedArgs);
             }
         }
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     }
     actionBegin(args) {
         this.parent.notify('actionBegin', args);
@@ -7132,6 +7253,14 @@ class GanttTreeGrid {
             setValue('doubleClickTarget', null, this.parent.treeGrid.editModule);
         }
         this.parent.trigger('actionBegin', args);
+        if (args.requestType != "virtualscroll" && args.type != "edit" && args.requestType != "beginEdit") {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
+        }
     } // eslint-disable-next-line
     created(args) {
         this.updateKeyConfigSettings();
@@ -7200,6 +7329,12 @@ class GanttTreeGrid {
             this.parent.addDeleteRecord = false;
         }
         this.parent.trigger('actionComplete', updatedArgs);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     }
     updateKeyConfigSettings() {
         delete this.parent.treeGrid.grid.keyboardModule.keyConfigs.delete;
@@ -7469,7 +7604,7 @@ class GanttTreeGrid {
      */
     composeIDColumn(column) {
         const isProjectView = this.parent.viewType === 'ProjectView';
-        let lengthDataSource = this.parent.dataSource['length'];
+        const lengthDataSource = this.parent.dataSource['length'];
         let taskIDName;
         column.isPrimaryKey = isProjectView ? true : false;
         column.headerText = column.headerText ? column.headerText : this.parent.localeObj.getConstant('id');
@@ -8082,6 +8217,21 @@ __decorate$16([
     Property(null)
 ], ResourceFields.prototype, "group", void 0);
 
+var __decorate$17 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Configures the Loading Indicator of the Gantt.
+ */
+class LoadingIndicator extends ChildProperty {
+}
+__decorate$17([
+    Property('Spinner')
+], LoadingIndicator.prototype, "indicatorType", void 0);
+
 /**
  * Export all generated models for complex settings
  */
@@ -8180,7 +8330,7 @@ class ChartRows extends DateProcessor {
     getIndicatorNode(indicator) {
         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>';
+            (this.parent.enableRtl ? 'right:' : 'left:') + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
         return this.createDivElement(templateString);
     }
     /**
@@ -8206,6 +8356,13 @@ class ChartRows extends DateProcessor {
     getChildTaskbarNode(i, rootElement) {
         let childTaskbarNode = null;
         const data = this.templateData;
+        let direction;
+        if (this.parent.enableRtl) {
+            direction = 'right:';
+        }
+        else {
+            direction = 'left:';
+        }
         if (this.childTaskbarTemplateFunction) {
             childTaskbarNode = this.childTaskbarTemplateFunction(extend({ index: i }, data), this.parent, 'TaskbarTemplate', this.getTemplateID('TaskbarTemplate'), false, undefined, rootElement[0], this.parent.treeGrid['root']);
         }
@@ -8248,14 +8405,15 @@ class ChartRows extends DateProcessor {
                 }
                 if (isNaN(parseInt(labelString))) {
                     taskLabel$$1 = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; text-align: left;' +
+                        (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.enableRtl ? 'right;' : 'left;') +
                         'display:' + 'inline-block;' +
                         'width:' + (data.ganttProperties.width - 10) + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
                 }
                 else {
                     taskLabel$$1 = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'text-align: left;' : '') +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? ('text-align:' +
+                        (this.parent.enableRtl ? 'right;' : 'left;')) : '') +
                         +(this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
                         +(this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
@@ -8267,17 +8425,17 @@ class ChartRows extends DateProcessor {
                 (data.ganttProperties.startDate && !data.ganttProperties.endDate && !data.ganttProperties.duration) ? ('<div class="' + childProgressBarInnerDiv + ' ' + traceChildTaskBar + ' ' +
                     unscheduledTaskbarLeft + ' ' + (data.ganttProperties.isAutoSchedule ?
                     '' : manualChildTaskBar) + '"' +
-                    'style="left:' + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
+                    'style="' + direction + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
                     (data.ganttProperties.endDate && !data.ganttProperties.startDate && !data.ganttProperties.duration) ?
                         ('<div class="' + childProgressBarInnerDiv + ' ' + traceChildTaskBar + ' ' +
                             unscheduledTaskbarRight + ' ' + (data.ganttProperties.isAutoSchedule ?
                             '' : manualChildTaskBar) + '"' +
-                            'style="left:' + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
+                            'style="' + direction + data.ganttProperties.left + 'px; height:' + this.taskBarHeight + 'px;"></div>') :
                         (data.ganttProperties.duration && !data.ganttProperties.startDate && !data.ganttProperties.endDate) ?
                             ('<div class="' + childProgressBarInnerDiv + ' ' + traceChildTaskBar + ' ' +
                                 unscheduledTaskbar + ' ' + (data.ganttProperties.isAutoSchedule ?
                                 '' : manualChildTaskBar) + '"' +
-                                'style="left:' + data.ganttProperties.left + 'px; width:' + data.ganttProperties.width + 'px;' +
+                                'style="' + direction + data.ganttProperties.left + 'px; width:' + data.ganttProperties.width + 'px;' +
                                 ' height:' + this.taskBarHeight + 'px;"></div>') : '';
             if (data.ganttProperties.startDate && data.ganttProperties.endDate && data.ganttProperties.duration &&
                 (isNullOrUndefined(data.ganttProperties.segments) || (!isNullOrUndefined(data.ganttProperties.segments) &&
@@ -8305,6 +8463,13 @@ class ChartRows extends DateProcessor {
                 childTaskbarNode = this.createDivElement(template);
             }
         }
+        if (this.parent.enableRtl && childTaskbarNode[0] && childTaskbarNode[0].querySelector('.e-task-label')) {
+            childTaskbarNode[0].querySelector('.e-task-label').style.marginLeft = '15px';
+            childTaskbarNode[0].querySelector('.e-task-label').style.marginRight = '8px';
+            if (childTaskbarNode[0].querySelector('.e-gantt-child-progressbar')) {
+                childTaskbarNode[0].querySelector('.e-gantt-child-progressbar').style.textAlign = 'left';
+            }
+        }
         return childTaskbarNode;
     }
     splitTaskbar(data, labelString) {
@@ -8324,7 +8489,7 @@ class ChartRows extends DateProcessor {
             //split taskbar
             '<div class="' + childTaskBarInnerDiv + ' ' + segmentPosition + ' ' + traceChildTaskBar + ' ' +
                 ' e-segmented-taskbar' +
-                '"style="width:' + segment.width + 'px;position: absolute; left:' + segment.left + 'px;height:' +
+                '"style="width:' + segment.width + 'px;position: absolute;' + (this.parent.enableRtl ? 'right:' : 'left:') + segment.left + 'px;height:' +
                 (this.taskBarHeight) + 'px; overflow:' + progressBarVisible + ';" data-segment-index = "' + i + '" aria-label = "' +
                 this.generateSpiltTaskAriaLabel(segment, data.ganttProperties) + '"> ' +
                 this.getSplitTaskbarLeftResizerNode() +
@@ -8332,7 +8497,7 @@ class ChartRows extends DateProcessor {
                 '<div class="' + childProgressBarInnerDiv + ' ' + traceChildProgressBar + ' ' +
                 '" style="border-style:' + (segment.progressWidth ? 'solid;' : 'none;') +
                 'display:' + (segment.progressWidth >= 0 ? 'block;' : 'none;') +
-                'width:' + segment.progressWidth + 'px;height:100%;' +
+                'width:' + segment.progressWidth + 'px;height:100%;' + 'text-align:' + (this.parent.enableRtl ? 'left;' : 'right;') +
                 'border-top-right-radius:' + this.getSplitTaskBorderRadius(segment) + 'px;' +
                 'border-bottom-right-radius:' + this.getSplitTaskBorderRadius(segment) + 'px;">' +
                 // progress label
@@ -8349,19 +8514,20 @@ class ChartRows extends DateProcessor {
     getSplitTaskbarLeftResizerNode() {
         const lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         const template = '<div class="' + taskBarLeftResizer + ' ' + icon + '"' +
-            ' style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return template;
     }
     getSplitTaskbarRightResizerNode(segment) {
         const rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         const template = '<div class="' + taskBarRightResizer + ' ' + icon + '"' +
-            ' style="left:' + (segment.width + rResizerLeft) + 'px;' +
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (segment.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return template;
     }
     getSplitProgressResizerNode(segment) {
+        let width = this.parent.enableRtl ? (segment.progressWidth + 8) : (segment.progressWidth - 6);
         const template = '<div class="' + childProgressResizer + '"' +
-            ' style="left:' + (segment.progressWidth - 6) + 'px;margin-top:' +
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + width + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + progressBarHandler + '"' +
             '><div class="' + progressHandlerElement + '"></div>' +
             '<div class="' + progressBarHandlerAfter + '"></div></div>';
@@ -8491,6 +8657,12 @@ class ChartRows extends DateProcessor {
             }
         }
         this.parent.trigger('actionComplete', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
         setValue('isEdit', false, this.parent.contextMenuModule);
         setValue('isEdit', false, this.parent);
     }
@@ -8695,7 +8867,7 @@ class ChartRows extends DateProcessor {
     getTaskBaselineNode() {
         const data = this.templateData;
         const template = '<div class="' + baselineBar + ' ' + '" role="term" style="margin-top:' + this.baselineTop +
-            'px;left:' + data.ganttProperties.baselineLeft + 'px;' +
+            'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + data.ganttProperties.baselineLeft + 'px;' +
             'width:' + data.ganttProperties.baselineWidth + 'px;height:' +
             this.baselineHeight + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + '"></div>';
         return this.createDivElement(template);
@@ -8710,7 +8882,7 @@ class ChartRows extends DateProcessor {
         const data = this.templateData;
         let baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         const template = '<div class="' + baselineMilestoneContainer + ' ' + '" style="' +
-            'left:' + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
+            (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
             'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) +
             'px">' + '<div class="' + baselineMilestoneDiv + '">' + '<div class="' + baselineMilestoneDiv +
             ' ' + baselineMilestoneTop + '"  ' +
@@ -8760,6 +8932,10 @@ class ChartRows extends DateProcessor {
             }
             leftLabelNode[0].appendChild([].slice.call(leftLabelTemplateNode)[0]);
         }
+        if (this.parent.enableRtl) {
+            leftLabelNode[0].style.paddingLeft = '25px';
+            leftLabelNode[0].style.paddingRight = '0px';
+        }
         return leftLabelNode;
     }
     getLableText(labelString, labelDiv) {
@@ -8806,6 +8982,10 @@ class ChartRows extends DateProcessor {
             }
             rightLabelNode[0].appendChild([].slice.call(rightLabelTemplateNode)[0]);
         }
+        if (this.parent.enableRtl) {
+            rightLabelNode[0].style.marginLeft = '0px';
+            rightLabelNode[0].style.paddingRight = '25px';
+        }
         return rightLabelNode;
     }
     getManualTaskbar() {
@@ -8825,17 +9005,18 @@ class ChartRows extends DateProcessor {
                 taskbarHeight * 2 + 'px;border-left-width:' + taskbarHeight / 5 +
                 'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>');
         const template = '<div class="' + manualParentMainContainer + '"' +
-            'style=left:' + (data.ganttProperties.left - data.ganttProperties.autoLeft) + 'px;' +
+            'style=' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left - data.ganttProperties.autoLeft) + 'px;' +
             'width:' + data.ganttProperties.width + 'px;' +
             'height:' + taskbarHeight + 'px;>' + innerDiv + ((data.ganttProperties.startDate && data.ganttProperties.endDate &&
             data.ganttProperties.duration) || data.ganttProperties.duration ? '<div class="e-gantt-manualparenttaskbar-left" style=' +
-            '"height:' + taskbarHeight + 'px;border-left-width:' + taskbarHeight / 5 +
+            (this.parent.enableRtl ? 'margin-right:0px;' : '') + '"height:' + taskbarHeight + 'px;border-left-width:' + taskbarHeight / 5 +
             'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>' +
-            '<div class="e-gantt-manualparenttaskbar-right" style=' +
-            'left:' + (data.ganttProperties.width - taskbarHeight / 5) + 'px;height:' +
+            '<div class="e-gantt-manualparenttaskbar-right" style=' + (this.parent.enableRtl ? 'margin-right:-8px;' : '') +
+            (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.width - taskbarHeight / 5) + 'px;height:' +
             (taskbarHeight) + 'px;border-right-width:' + taskbarHeight / 5 + 'px;border-bottom:' +
             taskbarHeight / 5 + 'px solid transparent;>' + '</div></div>' : '');
-        const milestoneTemplate = '<div class="' + manualParentMilestone + '" style="position:absolute;left:' +
+        const milestoneTemplate = '<div class="' + manualParentMilestone + '" style="position:absolute;' +
+            (this.parent.enableRtl ? 'right:' : 'left:') +
             (data.ganttProperties.left - data.ganttProperties.autoLeft - (this.milestoneHeight / 2)) +
             'px;width:' + (this.milesStoneRadius * 2) +
             'px;">' + '<div class="' + manualParentMilestoneTop + '" style="border-right-width:' +
@@ -8896,7 +9077,7 @@ class ChartRows extends DateProcessor {
                 }
                 if (isNaN(parseInt(labelString))) {
                     labelDiv = '<span class="' + taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; text-align: left;' +
+                        (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.enableRtl ? 'right;' : 'left;') +
                         'display:' + 'inline-block;' +
                         'width:' + (data.ganttProperties.width - 10) + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
@@ -8934,6 +9115,13 @@ class ChartRows extends DateProcessor {
             parentTaskbarNode = data.ganttProperties.isMilestone ?
                 this.createDivElement(data.ganttProperties.isAutoSchedule ? milestoneTemplate : '') : template;
         }
+        if (this.parent.enableRtl && parentTaskbarNode[0] && parentTaskbarNode[0].querySelector('.e-task-label')) {
+            parentTaskbarNode[0].querySelector('.e-task-label').style.marginLeft = '15px';
+            parentTaskbarNode[0].querySelector('.e-task-label').style.marginRight = '8px';
+            if (parentTaskbarNode[0].querySelector('.e-gantt-parent-progressbar')) {
+                parentTaskbarNode[0].querySelector('.e-gantt-parent-progressbar').style.textAlign = 'left';
+            }
+        }
         return parentTaskbarNode;
     }
     /**
@@ -9029,35 +9217,36 @@ class ChartRows extends DateProcessor {
             ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
             ' 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 + 'px;margin-top:' + this.milestoneMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left -
                 (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
-            'px;margin-top:' + this.taskBarMarginTop + 'px;left:' + (!data.hasChildRecords || data.ganttProperties.isAutoSchedule ?
+            'px;margin-top:' + this.taskBarMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (!data.hasChildRecords || data.ganttProperties.isAutoSchedule ?
             data.ganttProperties.left : data.ganttProperties.autoLeft) + 'px;height:' +
             this.taskBarHeight + 'px;cursor:' + (data.ganttProperties.isAutoSchedule ? 'move;' : 'auto;'))) + '"></div>';
         return this.createDivElement(template);
     }
     rightLabelContainer() {
         const template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? rightLabelTempContainer :
-            rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
+            rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="' + (this.parent.enableRtl ? 'right:' : '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 + '"' +
-            'style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            'style="' + (this.parent.enableRtl ? 'right:' : '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 + '"' +
-            'style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
+            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     }
     childTaskbarProgressResizer() {
+        let width = this.parent.enableRtl ? (this.templateData.ganttProperties.progressWidth + 8) : (this.templateData.ganttProperties.progressWidth - 6);
         const template = '<div class="' + childProgressResizer + '"' +
-            'style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
+            'style="' + (this.parent.enableRtl ? 'right:' : 'left:') + width + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + progressBarHandler + '"' +
             '><div class="' + progressHandlerElement + '"></div>' +
             '<div class="' + progressBarHandlerAfter + '"></div></div>';
@@ -9079,7 +9268,7 @@ class ChartRows extends DateProcessor {
             ((data.ganttProperties.isMilestone) ? ('margin-top:' + pointerTop + 'px;left:' + mileStoneLeft +
                 'px;') : (marginTop + ';left:' + pointerLeft + 'px;')) + '">' +
             '<div class="' + connectorPointLeft + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
-            '" style="width: ' + this.connectorPointWidth + 'px;' +
+            '" style="width: ' + this.connectorPointWidth + 'px;' + (this.parent.enableRtl ? 'margin-right:2px;' : '') +
             'height: ' + this.connectorPointWidth + 'px;">' + this.touchLeftConnectorpoint + '</div></div>';
         return this.createDivElement(template);
     }
@@ -9352,8 +9541,14 @@ class ChartRows extends DateProcessor {
         else {
             for (let i = 0; i < this.parent.currentViewData.length; i++) {
                 const tempTemplateData = this.parent.currentViewData[i];
-                if (this.parent.viewType === 'ResourceView' && !tempTemplateData.expanded && this.parent.enableMultiTaskbar) {
-                    collapsedResourceRecord.push(tempTemplateData);
+                if (this.parent.viewType === 'ResourceView') {
+                    if (this.parent.editModule && this.parent.editModule.isResourceTaskDeleted) {
+                        this.parent.initialChartRowElements = this.parent.ganttChartModule.getChartRows();
+                        this.parent.editModule.isResourceTaskDeleted = false;
+                    }
+                    if (!tempTemplateData.expanded && this.parent.enableMultiTaskbar) {
+                        collapsedResourceRecord.push(tempTemplateData);
+                    }
                 }
                 const tRow = this.getGanttChartRow(i, tempTemplateData);
                 this.ganttChartTableBody.appendChild(tRow);
@@ -9397,7 +9592,7 @@ class ChartRows extends DateProcessor {
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
         const connectorLineLeftNode = this.getLeftPointNode();
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType === 'ProjectView') || !this.templateData.hasChildRecords) {
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
         }
         if (this.templateData.hasChildRecords) {
@@ -9481,7 +9676,7 @@ class ChartRows extends DateProcessor {
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
-        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !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]);
         }
@@ -10767,19 +10962,8 @@ class ConnectorLine {
      */
     createConnectorLineObject(parentGanttData, childGanttData, predecessor) {
         const connectorObj = {};
-        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 updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
+            this.parent.flatData : this.expandedRecords;
         const parentIndex = updatedRecords.indexOf(parentGanttData);
         const childIndex = updatedRecords.indexOf(childGanttData);
         const parentGanttRecord = parentGanttData.ganttProperties;
@@ -10845,6 +11029,9 @@ class ConnectorLine {
             }
         }
         this.parent.ganttChartModule.chartBodyContent.appendChild(this.dependencyViewContainer);
+        for (let i = 0; i < this.dependencyViewContainer.children.length; i++) {
+            this.dependencyViewContainer.children[i].children[0].setAttribute('tabindex', '-1');
+        }
     }
     /**
      * To get parent position.
@@ -11163,85 +11350,96 @@ class ConnectorLine {
             connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
             let div = '<div class="' + connectorLineContainer +
                 '" tabindex="-1" style="';
+            let direction = this.parent.enableRtl ? 'right:' : 'left:';
             const eLine = '<div class="' + connectorLine + '" style="' +
                 (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            const rightArrow = '<div class="' + connectorLineRightArrow + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            const leftArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            const duplicateStingOne = leftArrow + (isMilestone ? 'left:0px;' : '') +
-                this.getBorderStyles('right', 10) +
+            let rightArrow;
+            let leftArrow;
+            if (this.parent.enableRtl) {
+                leftArrow = '<div class="' + connectorLineRightArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+                rightArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+            }
+            else {
+                rightArrow = '<div class="' + connectorLineRightArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+                leftArrow = '<div class="' + connectorLineLeftArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+            }
+            const duplicateStingOne = leftArrow + (isMilestone ? (this.parent.enableRtl ? 'right:0px;' : 'left:0px;') : '') +
+                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10) +
                 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                 'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
-            const duplicateStingTwo = this.getBorderStyles('left', 10) +
+            const duplicateStingTwo = this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                 'top:' + (-6) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                 'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
             const duplicateStingThree = this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>' + eLine +
                 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                 this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
-            const duplicateStingFour = leftArrow + 'left:' +
+            const duplicateStingFour = leftArrow + (this.parent.enableRtl ? 'right:' : 'left:') +
                 (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
-                this.getBorderStyles('right', 10);
+                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10);
             const duplicateStingFive = 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;' +
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType1">';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
+                div = div + direction + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
                     ((((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10) + 1) :
                     (((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
+                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
                     'width:0px;' + this.getBorderStyles('right', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
+                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType2') {
-                div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine$$1.top : ((data.parentIndex * data.rowHeight) + addTop +
+                div = div + direction + 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;
-                div = div + 'left:' + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
+                div = div + direction + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
                     (isMilestoneParent ? 11 : 10) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
+                div = div + direction + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'width:0px;' +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
+                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
                     'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft +
+                div = div + direction + (data.parentWidth - (((data.parentLeft +
                     data.parentWidth) - data.childLeft) + 20)) + 'px;width:0px;' +
                     this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) +
                     this.getBorderStyles('left', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft +
+                div = div + direction + (data.parentWidth - (((data.parentLeft +
                     data.parentWidth) - data.childLeft) + 20)) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
+                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;top:' + (-6 - this.lineStroke) +
                     'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType3') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType3">';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
+                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) + 'px;' +
                     'top:' + (-6) + 'px;width:0;height:0;position:relative;"></div>';
                 div = div + eLine;
@@ -11255,49 +11453,49 @@ class ConnectorLine {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
+                div = div + direction + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
                     'px;width:0px;' + 'height:' + (this.getconnectorLineGap(data) - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'position:relative;' +
                     'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:' + (((data.parentLeft +
-                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : 'left:' +
+                div = div + (isMilestoneParent ? direction + (((data.parentLeft +
+                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : direction +
                     (((data.parentLeft + data.parentWidth) - data.childLeft) + 20) + 'px;width:10px;') +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType4') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType4">';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6) + 'px;' +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
                     (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
                     'px;top:' + (-(6 + (5 + this.lineStroke) + Math.round(this.lineStroke / 2))) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;left:' +
+                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' + direction +
                     (data.childLeft - (data.parentLeft + data.parentWidth) - 20) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'top:' +
+                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     (isMilestoneParent ? ((data.childLeft - (data.parentLeft + data.parentWidth + 20) + 1) + this.lineStroke) :
                         ((data.childLeft - (data.parentLeft + data.parentWidth + 20)) + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType4') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType4">';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
+                div = div + direction + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
                 div = div + eLine;
                 div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:' +
                     (data.childLeft - data.parentLeft) + 'px;' + duplicateStingThree;
@@ -11306,11 +11504,11 @@ class ConnectorLine {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType3') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType3">';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + duplicateStingTwo;
+                div = div + direction + '10px;' + duplicateStingTwo;
                 div = div + eLine;
                 div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:10px;' + duplicateStingThree;
                 div = div + eLine;
@@ -11319,7 +11517,7 @@ class ConnectorLine {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType2') {
-                div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((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;
@@ -11332,14 +11530,14 @@ class ConnectorLine {
                 div = div + 'width:' + setInnerElementWidthSSType2 + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + setInnerElementWidthSSType2 + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
+                div = div + direction + setInnerElementWidthSSType2 + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
                     (5 + this.lineStroke) + 'px;width:0;' +
                     'height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType1') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop +
                         this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
@@ -11352,114 +11550,114 @@ class ConnectorLine {
                 div = div + eLine;
                 div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
+                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType1') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType1">';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
+                div = div + direction + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) - 1) : ((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth))) + 'px;' +
                     'width:' + (isMilestoneParent ? (21 + this.lineStroke) : (20 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) -
+                div = div + direction + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 20) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
+                div = div + direction + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (16 + this.lineStroke)) :
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (10 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + (isMilestone ? 'left:0px;' : '') + this.getBorderStyles('right', 10) +
+                div = div + (isMilestone ? direction + '0px;' : '') + this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType2') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType2">';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'width:' +
+                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'width:' +
                     (isMilestoneParent ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) +
                         (21 + this.lineStroke)) : (((data.childLeft + data.childWidth) -
                         (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
+                div = div + direction + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
                     (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 10)) + 'px;' +
                     'width:' + (isMilestone ? (16 + this.lineStroke) : (10 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + 'left:' + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
-                    this.getBorderStyles('right', 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
+                div = div + direction + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
+                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) +
                     'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType3') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:4px;width:' +
+                div = div + (isMilestone ? (direction + '4px;width:' +
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 16)) :
-                    ('left:10px;width:' + (((data.parentLeft + data.parentWidth) -
+                    (direction + '10px;width:' + (((data.parentLeft + data.parentWidth) -
                         (data.childLeft + data.childWidth)) + 10))) + 'px;top:' + (-(6 + (5 + this.lineStroke) +
                     (this.lineStroke / 2))) + 'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
+                div = div + direction + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
                     'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? ('left:' + (((data.parentLeft + data.parentWidth) -
-                    (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : ('left:' + ((data.parentLeft + data.parentWidth) -
+                div = div + (isMilestoneParent ? (direction + (((data.parentLeft + data.parentWidth) -
+                    (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : (direction + ((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 'px;width:20')) +
                     'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType4') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType4">';
                 div = div + leftArrow;
-                div = div + ('left:' + ((data.childLeft + data.childWidth) -
+                div = div + (direction + ((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth))) + 'px;' +
-                    this.getBorderStyles('right', 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
+                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:' + (((data.childLeft + data.childWidth) -
+                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 4) +
-                    'px;width:' + (16 + this.lineStroke)) : ('left:' + (((data.childLeft + data.childWidth) -
+                    'px;width:' + (16 + this.lineStroke)) : (direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 10) + 'px;width:' + (10 + this.lineStroke))) +
                     'px;' + duplicateStingFive;
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) -
+                div = div + direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 20) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? ('left:-1px;width:' + (((data.childLeft + data.childWidth) -
+                div = div + (isMilestoneParent ? (direction + '-1px;width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (21 + this.lineStroke))) : ('width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke)))) + 'px;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType4') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
                     'height:' + heightValue + 'px;position:absolute" data-connectortype="SFType4">';
                 div = div + duplicateStingFour + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
@@ -11467,11 +11665,11 @@ class ConnectorLine {
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
+                div = div + direction + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
                     'px;width:16') : ((((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' +
                     (10 + this.lineStroke))) + 'px;' + duplicateStingFive;
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
@@ -11487,25 +11685,25 @@ class ConnectorLine {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType3') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
-                div = div + (isMilestone ? 'left:4px;width:' + (16 + this.lineStroke) : 'left:10px;width:' +
+                div = div + (isMilestone ? direction + '4px;width:' + (16 + this.lineStroke) : direction + '10px;width:' +
                     (10 + this.lineStroke)) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2) - 1)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
+                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
+                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     ((data.parentLeft - (data.childLeft + data.childWidth + 20)) + this.lineStroke) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType1') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType1">';
                 div = div + eLine;
@@ -11517,12 +11715,12 @@ class ConnectorLine {
                 div = div + 'width:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:' + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : ('left:' +
+                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
+                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : (direction +
                     (((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' + (10 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + duplicateStingFour + 'top:' + (-6 - this.lineStroke) + 'px;' +
@@ -11530,23 +11728,23 @@ class ConnectorLine {
                     (5 + this.lineStroke) + 'px;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType2') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine$$1.top :
                     ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType2">';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
+                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
+                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
-                    - (14 - this.lineStroke))) : ('left:10px;width:' + (((data.parentLeft) -
+                div = div + (isMilestone ? (direction + '4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
+                    - (14 - this.lineStroke))) : (direction + '10px;width:' + (((data.parentLeft) -
                     (data.childLeft + data.childWidth)) - (20 - this.lineStroke)))) +
                     'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + 'left:0px;' + this.getBorderStyles('right', 10) +
+                div = div + direction + '0px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
@@ -11733,12 +11931,19 @@ class Splitter$1 {
         this.parent.splitterElement = createElement('div', { className: splitter });
         this.parent.treeGridPane = createElement('div', { className: treeGridPane });
         this.parent.chartPane = createElement('div', { className: ganttChartPane });
-        this.parent.splitterElement.appendChild(this.parent.treeGridPane);
-        this.parent.splitterElement.appendChild(this.parent.chartPane);
+        if (this.parent.enableRtl) {
+            this.parent.splitterElement.appendChild(this.parent.chartPane);
+            this.parent.splitterElement.appendChild(this.parent.treeGridPane);
+        }
+        else {
+            this.parent.splitterElement.appendChild(this.parent.treeGridPane);
+            this.parent.splitterElement.appendChild(this.parent.chartPane);
+        }
         this.splitterObject = new Splitter({
             height: null,
             width: this.parent.ganttWidth.toString(),
             enablePersistence: this.parent.enablePersistence,
+            enableRtl: this.parent.enableRtl,
             separatorSize: this.parent.splitterSettings.separatorSize,
             paneSettings: [
                 {
@@ -11752,6 +11957,9 @@ class Splitter$1 {
             ],
             orientation: 'Horizontal',
             resizeStart: (args) => {
+                if (this.parent.contextMenuModule && this.parent.contextMenuModule.isOpen) {
+                    this.parent.contextMenuModule.contextMenu.close();
+                }
                 const leftPane = args.pane[0];
                 const rightPane = args.pane[1];
                 this.splitterPreviousPositionGrid = leftPane.scrollWidth + 1 + 'px';
@@ -11913,6 +12121,7 @@ class Tooltip$1 {
             '.e-taskbar-left-resizer, .e-taskbar-right-resizer, .e-baseline-gantt-milestone, .e-gantt-manualparenttaskbar';
         this.toolTipObj.position = 'BottomCenter';
         this.toolTipObj.openDelay = 700;
+        this.toolTipObj.enableRtl = this.parent.enableRtl;
         this.toolTipObj.enableHtmlSanitizer = false;
         this.toolTipObj.cssClass = ganttTooltip;
         this.toolTipObj.animation = { open: { effect: 'None', delay: 0 }, close: { effect: 'None', delay: 0 } };
@@ -12552,6 +12761,7 @@ class FocusModule {
                     const top = containerPosition.top + (containerPosition.height / 2);
                     const left = containerPosition.left + (containerPosition.width / 2);
                     this.setActiveElement(e.target);
+                    // eslint-disable-next-line security/detect-non-literal-fs-filename
                     contextMenu.open(top, left);
                     e.preventDefault();
                     break;
@@ -12641,6 +12851,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 let Gantt = class Gantt extends Component {
     constructor(options, element) {
         super(options, element);
+        this.showIndicator = true;
+        this.singleTier = 0;
         /** @hidden */
         this.isCancelled = false;
         /** @hidden */
@@ -12835,7 +13047,7 @@ let Gantt = class Gantt extends Component {
     /**
      * To check whether the date is in DST.
      *
-     * @param {Date} date .
+     * @param {Date} date - Defines the date to check whether it is DST.
      * @returns {boolean} .
      * @private
      */
@@ -12926,9 +13138,348 @@ let Gantt = class Gantt extends Component {
         }
         this.splitterModule.renderSplitter();
         this.notify('renderPanels', null);
-        this.showSpinner();
+        if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+            this.showMaskRow();
+        }
+        else {
+            this.showSpinner();
+        }
         this.dataOperation.checkDataBinding();
     }
+    hideMaskRow() {
+        let isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
+        if (!isNullOrUndefined(this.contentMaskTable) && isTablePresent != 0) {
+            const maskTable = this.contentMaskTable;
+            remove(maskTable);
+            this.contentMaskTable = null;
+        }
+        isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
+        if (!isNullOrUndefined(this.headerMaskTable) && isTablePresent != 0) {
+            const maskTable = this.headerMaskTable;
+            remove(maskTable);
+            this.headerMaskTable = null;
+        }
+        while ((this.element.querySelectorAll('.e-table-background')).length != 0) {
+            this.element.querySelectorAll('.e-table-background')[0].remove();
+        }
+        while ((this.element.querySelectorAll('.e-temp-timeline')).length != 0) {
+            this.element.querySelectorAll('.e-temp-timeline')[0].remove();
+        }
+        if (this.element.querySelectorAll('.' + timelineHeaderTableContainer).length != 0) {
+            for (var i = 0; i < this.singleTier; i++) {
+                if (!isNullOrUndefined(this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i])) {
+                    this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i]['style'].visibility = "visible";
+                }
+            }
+        }
+        if (!isNullOrUndefined(this.element.querySelector('.' + timelineHeaderContainer))) {
+            this.element.querySelector('.' + timelineHeaderContainer)['style'].position = "relative";
+        }
+        if (!isNullOrUndefined(this.element.getElementsByClassName(chartBodyContent)[0])) {
+            this.element.getElementsByClassName(chartBodyContent)[0]['style'].visibility = "visible";
+        }
+    }
+    showMaskRow() {
+        const ganttHeader = this.chartPane.childNodes[0].childNodes[0];
+        this.scrollLeftValue = this.chartPane.childNodes[0].childNodes[0]['scrollLeft'];
+        const ganttContent = this.chartPane.childNodes[0].childNodes[1];
+        if (!this.contentMaskTable) {
+            if (ganttContent) {
+                let content$$1 = ganttContent;
+                this.renderBackGround(content$$1);
+                if (this.element.querySelectorAll('.' + timelineHeaderTableContainer).length != 0) {
+                    this.singleTier = this.timelineModule.isSingleTier ? 1 : 2;
+                    for (var i = 0; i < this.singleTier; i++) {
+                        this.element.querySelectorAll('.' + timelineHeaderTableContainer)[i]['style'].visibility = "hidden";
+                    }
+                }
+                if (this.singleTier === 0) {
+                    this.singleTier = 2;
+                }
+                this.element.getElementsByClassName(chartBodyContent)[0]['style'].visibility = "hidden";
+                this.contentMaskTable = this.contentMaskTable = this.createMaskTable(content$$1);
+            }
+            if (ganttHeader) {
+                this.element.querySelector('.' + timelineHeaderContainer)['style'].position = "static";
+                let content$$1 = ganttHeader;
+                this.renderHeaderBackground(content$$1);
+                this.headerMaskTable = this.headerMaskTable = this.createMaskTable(content$$1);
+            }
+        }
+    }
+    renderHeaderBackground(element) {
+        const parentElement = element;
+        const timelineHeight = element.getBoundingClientRect().height;
+        const header = closest(parentElement, '.' + timelineHeaderContainer) ? true : false;
+        if (header) {
+            const div = this.createElement('div', { className: 'e-table-background' });
+            const tempRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                    style: 'height: ' + timelineHeight + 'px;'
+                } });
+            let backgroundLines = 0;
+            let containerWidth = Math.round(element.getBoundingClientRect().width);
+            for (let i = 0; i < 3; i++) {
+                if (this.enableRtl) {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (containerWidth -= ((160))) + 'px; top:0px;'
+                        } }));
+                }
+                else {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (backgroundLines += ((160))) + 'px; top:0px;'
+                        } }));
+                }
+            }
+            parentElement.insertBefore(div, parentElement.firstChild);
+        }
+    }
+    renderBackGround(element) {
+        const parentElement = element;
+        const timelineHeight = element.getBoundingClientRect().height;
+        const content$$1 = closest(parentElement, '.' + chartBodyContainer) ? true : false;
+        if (content$$1) {
+            const div = this.createElement('div', { className: 'e-table-background' });
+            const tempRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                    style: 'height: ' + timelineHeight + 'px;'
+                } });
+            let backgroundLines = 0;
+            let containerWidth = Math.round(element.getBoundingClientRect().width);
+            for (let i = 0; i < 3; i++) {
+                if (this.enableRtl) {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (containerWidth -= (160)) + 'px;z-index:1;'
+                        } }));
+                }
+                else {
+                    div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
+                            style: 'left: ' + (backgroundLines += (160)) + 'px;z-index:1;'
+                        } }));
+                }
+            }
+            parentElement.insertBefore(div, parentElement.firstChild);
+        }
+    }
+    createMaskTable(element) {
+        const parentElement = element;
+        const shimmerContainerHeight = element.getBoundingClientRect().height;
+        const header = closest(parentElement, '.' + timelineHeaderContainer) ? true : false;
+        let maskTable;
+        if (header) {
+            maskTable = this.createEmptyTimeLineTable(shimmerContainerHeight);
+            maskTable.style.position = 'sticky';
+            maskTable.style.left = 0 + 'px';
+            if (this.enableRtl) {
+                maskTable.style.removeProperty('left');
+            }
+        }
+        else {
+            maskTable = this.createEmptyMaskTable(shimmerContainerHeight);
+            maskTable.style.position = 'absolute';
+            maskTable.style.zIndex = 1;
+        }
+        if (!header) {
+            maskTable.style.height = element.getBoundingClientRect().height + 'px';
+            parentElement.insertBefore(maskTable, parentElement.firstChild);
+        }
+        else {
+            maskTable.style.height = element.getBoundingClientRect().height + 'px';
+            let div = this.createElement('div', { className: 'e-temp-timeline' });
+            div.style.width = 614 + 'px';
+            div.style.position = 'sticky';
+            if (this.enableRtl) {
+                div.style['margin-right'] = Math.abs(this.scrollLeftValue) + 'px';
+            }
+            else {
+                div.style['margin-left'] = this.scrollLeftValue + 'px';
+            }
+            div.appendChild(maskTable);
+            parentElement.insertBefore(div, parentElement.firstChild);
+        }
+        return maskTable;
+    }
+    createEmptyTimeLineTable(timelineHeight) {
+        const table = this.createElement('table', { className: 'e-table e-masked-table' });
+        const tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
+        let row = [];
+        const duplicateRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                style: 'height: ' + timelineHeight / 2 + 'px;'
+            } });
+        for (let i = 0; i < this.singleTier; i++) {
+            row.push(duplicateRow.cloneNode(true));
+        }
+        this.topBottomHeader = 0;
+        for (let i = 0; i < row.length; i++) {
+            tbody.appendChild(this.applyTimelineMaskRow(row[i]));
+            this.topBottomHeader = this.topBottomHeader + 1;
+        }
+        table.appendChild(tbody);
+        table.style.width = 100 + '%';
+        return table;
+    }
+    applyTimelineMaskRow(row) {
+        const maskRow = row;
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+        for (let i = 0; i < maskRow.childNodes.length - 1; i++) {
+            maskRow.childNodes[i]['style']['width'] = 166 + 'px';
+        }
+        const maskCells = [].slice.call(maskRow.childNodes);
+        for (let i = 0; i < maskCells.length; i++) {
+            const maskCell = maskCells[i];
+            switch (this.topBottomHeader) {
+                case 0:
+                    if (this.enableRtl) {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-timelineHeader"></span>';
+                        maskCell.children[0]['style'].left = -20 + 'px';
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-timelineHeader"></span>';
+                    }
+                    break;
+                case 1:
+                    maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+                    maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+                    maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
+                    const innerMaskCells = [].slice.call(maskCell.childNodes);
+                    for (let i = 0; i < innerMaskCells.length; i++) {
+                        const htmlInner = innerMaskCells[i];
+                        if (i === 0) {
+                            if (this.enableRtl) {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
+                                htmlInner.children[0]['style'].left = -14 + 'px';
+                            }
+                            else {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
+                            }
+                        }
+                        else if (i === 1) {
+                            if (this.enableRtl) {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML1"></span>';
+                                htmlInner.children[0]['style'].left = -30 + 'px';
+                            }
+                            else {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML1"></span>';
+                            }
+                        }
+                        else {
+                            if (this.enableRtl) {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML2"></span>';
+                                htmlInner.children[0]['style'].left = -60 + 'px';
+                            }
+                            else {
+                                htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML2"></span>';
+                            }
+                        }
+                    }
+                    break;
+            }
+        }
+        return maskRow;
+    }
+    createEmptyMaskTable(timelineHeight) {
+        const table = this.createElement('table', { className: 'e-table e-masked-table' });
+        const tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
+        let row = [];
+        const duplicateRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
+                style: 'height: ' + timelineHeight / 7 + 'px;'
+            } });
+        this.columnLoop = 0;
+        for (let i = 0; i < 6; i++) {
+            row.push(duplicateRow.cloneNode(true));
+        }
+        for (let j = 0; j < row.length; j++) {
+            if (this.columnLoop < 4) {
+                this.columnLoop = this.columnLoop + 1;
+            }
+            else if (this.columnLoop === 4) {
+                this.columnLoop = 1;
+            }
+            tbody.appendChild(this.applyMaskRow(row[j]));
+        }
+        table.appendChild(tbody);
+        table.style.width = 100 + '%';
+        let div = this.createElement('div', { className: 'e-temp-container' });
+        div.style.width = 'calc(100% - ' + 17 + 'px)';
+        div.style.overflow = 'hidden';
+        div.appendChild(table);
+        return div;
+    }
+    applyMaskRow(row) {
+        const maskRow = row;
+        if (this.columnLoop < 4) {
+            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+        }
+        else {
+            maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
+        }
+        const maskCells = [].slice.call(maskRow.childNodes);
+        for (let i = 0; i < maskCells.length; i++) {
+            const maskCell = maskCells[i];
+            switch (this.columnLoop) {
+                case 1:
+                    if (i === 0) {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell01"></span>';
+                            maskCell.children[0]['style'].left = -14 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell01"></span>';
+                        }
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell02"></span>';
+                    }
+                    break;
+                case 2:
+                    if (i === 0) {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell03"></span>';
+                            maskCell.children[0]['style'].left = -14 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell03"></span>';
+                        }
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell04"></span>';
+                    }
+                    break;
+                case 3:
+                    if (i === 0) {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell05"></span>';
+                            maskCell.children[0]['style'].left = -64 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell05"></span>';
+                        }
+                    }
+                    else {
+                        if (this.enableRtl) {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell06"></span>';
+                            maskCell.children[0]['style'].left = -192 + 'px';
+                        }
+                        else {
+                            maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell06"></span>';
+                        }
+                    }
+                    break;
+                case 4:
+                    if (this.enableRtl) {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell07"></span>';
+                        maskCell.children[0]['style'].left = -388 + 'px';
+                    }
+                    else {
+                        maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell07"></span>';
+                    }
+                    break;
+            }
+        }
+        return maskRow;
+    }
     /**
      * Method used to show spinner.
      *
@@ -12954,7 +13505,7 @@ let Gantt = class Gantt extends Component {
         this.timelineModule.calculateZoomingLevelsPerDayWidth(); // To calculate the perDaywidth
     }
     /**
-     * @param {boolean} isChange .
+     * @param {boolean} isChange -Defines whether task data is changed.
      * @returns {void} .
      * @private
      */
@@ -13054,7 +13605,7 @@ let Gantt = class Gantt extends Component {
     /**
      * Method for updating row height value in connector line collections
      *
-     * @param {IConnectorLineObject[]} collection .
+     * @param {IConnectorLineObject[]} collection  -Defines the CollectorLine collection.
      * @returns {void} .
      * @private
      */
@@ -13090,7 +13641,7 @@ let Gantt = class Gantt extends Component {
         this.currentViewData = this.treeGrid.getCurrentViewRecords().slice();
     }
     /**
-     * @param {IGanttData} records .
+     * @param {IGanttData} records -Defines the delete record collections.
      * @returns {IGanttData} .
      * @private
      */
@@ -13102,7 +13653,7 @@ let Gantt = class Gantt extends Component {
         return updatedRecord;
     }
     /**
-     * @param {object} args .
+     * @param {object} args -Update the gantt element content height.
      * @returns {void} .
      * @private
      */
@@ -13453,7 +14004,12 @@ let Gantt = class Gantt extends Component {
                 this.treeGrid.height = '100%';
                 this.notify('tree-grid-created', {});
                 this.createGanttPopUpElement();
-                this.hideSpinner();
+                if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+                    this.hideMaskRow();
+                }
+                else {
+                    this.hideSpinner();
+                }
                 setValue('isGanttCreated', true, args);
                 this.renderComplete();
             }
@@ -13465,6 +14021,11 @@ let Gantt = class Gantt extends Component {
             this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
         }
         this.notify('recordsUpdated', {});
+        for (let i = 0; i < document.getElementsByClassName('e-timeline-header-table-container').length; i++) {
+            for (let j = 0; j < document.getElementsByClassName('e-timeline-header-table-container')[i].children[0].children[0].children.length; j++) {
+                document.getElementsByClassName('e-timeline-header-table-container')[i].children[0].children[0].children[j].children[0].setAttribute('tabindex', '-1');
+            }
+        }
         if (this.enableCriticalPath && this.criticalPathModule) {
             let criticalModule = this.criticalPathModule;
             this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
@@ -13496,8 +14057,8 @@ let Gantt = class Gantt extends Component {
     /**
      * Called internally, if any of the property value changed.
      *
-     * @param {GanttModel} newProp .
-     * @param {GanttModel} oldProp .
+     * @param {GanttModel} newProp - Defines the New GanttModel.
+     * @param {GanttModel} oldProp - Defines the old GanttModel.
      * @returns {void} .
      * @private
      */
@@ -13559,6 +14120,12 @@ let Gantt = class Gantt extends Component {
                     this.dataOperation.checkDataBinding(true);
                     break;
                 case 'enableCriticalPath':
+                    if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+                        this.hideMaskRow();
+                    }
+                    else {
+                        this.hideSpinner();
+                    }
                     if (this.enableCriticalPath && this.criticalPathModule) {
                         this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
                         let criticalModule = this.criticalPathModule;
@@ -14105,7 +14672,7 @@ let Gantt = class Gantt extends Component {
             thWidth = thElements[n].style.width;
             const divElement = createElement('div', {
                 className: 'e-line-container-cell',
-                styles: 'left:' + leftPos + 'px'
+                styles: (this.enableRtl ? 'right:' + (leftPos + 1) : 'left:' + leftPos) + 'px'
             });
             containerDiv.appendChild(divElement);
         }
@@ -14240,12 +14807,18 @@ let Gantt = class Gantt extends Component {
     }
     /**
      *
-     * @param {object} args .
+     * @param {object} args -Defines the edited event args.
      * @returns {void} .
      * @private
      */
     actionBeginTask(args) {
         this.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === "Shimmer") {
+            this.showMaskRow();
+        }
+        else {
+            this.showSpinner();
+        }
     }
     /**
      * To move horizontal scroll bar of Gantt to specific date.
@@ -14281,7 +14854,7 @@ let Gantt = class Gantt extends Component {
         if (!isNullOrUndefined(left)) {
             left = this.ganttChartModule.scrollElement.scrollWidth <= left ?
                 this.ganttChartModule.scrollElement.scrollWidth : left;
-            this.ganttChartModule.scrollObject.setScrollLeft(left);
+            this.ganttChartModule.scrollObject.setScrollLeft(left, this.enableRtl ? -1 : 0);
         }
         if (!isNullOrUndefined(top)) {
             top = this.ganttChartModule.scrollElement.scrollHeight <= top ? this.ganttChartModule.scrollElement.scrollHeight : top;
@@ -14314,8 +14887,8 @@ let Gantt = class Gantt extends Component {
     /**
      * Get parent task by clone parent item.
      *
-     * @param {IGanttData} ganttRecord .
-     * @param {number} level .
+     * @param {IGanttData} ganttRecord -Defines the Gantt record.
+     * @param {number} level -Defines the selected record level.
      * @returns {IGanttData} .
      * @hidden
      */
@@ -14428,7 +15001,7 @@ let Gantt = class Gantt extends Component {
     /**
      * To update timeline at start point with one unit.
      *
-     * @param {string} mode .
+     * @param {string} mode - Render previous span of Timeline.
      * @returns {void} .
      * @public
      */
@@ -14438,7 +15011,7 @@ let Gantt = class Gantt extends Component {
     /**
      * To update timeline at end point with one unit.
      *
-     * @param {string} mode .
+     * @param {string} mode - Render next span of Timeline.
      * @returns {void} .
      * @public
      */
@@ -14512,7 +15085,7 @@ let Gantt = class Gantt extends Component {
     /**
      * Method to clear edited collections in gantt set edit flag value
      *
-     * @param {boolean} isStart .
+     * @param {boolean} isStart -Defines whether to initiate edit action.
      * @returns {void} .
      * @private
      */
@@ -14785,8 +15358,8 @@ let Gantt = class Gantt extends Component {
     /**
      * To update existing taskId with new unique Id.
      *
-     * @param {number | string} currentId .
-     * @param {number | string} newId .
+     * @param {number | string} currentId - Defines the current Id of the record.
+     * @param {number | string} newId - Defines the new Id of the record.
      * @returns {void} .
      */
     updateTaskId(currentId, newId) {
@@ -14888,9 +15461,9 @@ let Gantt = class Gantt extends Component {
     /**
      * Reorder the rows based on given indexes and position
      *
-     * @param {number[]} fromIndexes .
-     * @param {number} toIndex .
-     * @param {string} position .
+     * @param {number[]} fromIndexes - Defines the Dragged record index.
+     * @param {number} toIndex - Defines the Dropped record index.
+     * @param {string} position -Defines the position of the dropped row.
      * @returns {void} .
      */
     reorderRows(fromIndexes, toIndex, position) {
@@ -15065,7 +15638,7 @@ let Gantt = class Gantt extends Component {
     /**
      * Method to get class name for unscheduled tasks
      *
-     * @param {ITaskData} ganttProp .
+     * @param {ITaskData} ganttProp -Defines the Gantt propertie.
      * @returns {boolean} .
      * @private
      */
@@ -15139,7 +15712,7 @@ let Gantt = class Gantt extends Component {
         const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;
         const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
         const top = box.top + scrollTop - clientTop;
-        const left = box.left + scrollLeft - clientLeft;
+        const left = this.enableRtl ? box.right + scrollLeft - clientLeft : box.left + scrollLeft - clientLeft;
         return { top: Math.round(top), left: Math.round(left), width: box.width, height: box.height };
     }
     /**
@@ -15411,7 +15984,7 @@ let Gantt = class Gantt extends Component {
     /**
      * To change the mode of a record.
      *
-     * @param {object} data .
+     * @param {object} data - Use to change the TaskMode either manual, auto or custom.
      * @returns {void} .
      */
     changeTaskMode(data) {
@@ -15483,6 +16056,12 @@ __decorate([
 __decorate([
     Property(true)
 ], Gantt.prototype, "disableHtmlEncode", void 0);
+__decorate([
+    Complex({}, LoadingIndicator)
+], Gantt.prototype, "loadingIndicator", void 0);
+__decorate([
+    Property(true)
+], Gantt.prototype, "enableVirtualMaskRow", void 0);
 __decorate([
     Property(true)
 ], Gantt.prototype, "autoFocusTasks", void 0);
@@ -16508,6 +17087,7 @@ class EditTooltip {
         this.toolTipObj = new Tooltip({
             opensOn: opensOn,
             position: 'TopRight',
+            enableRtl: this.parent.enableRtl,
             mouseTrail: mouseTrail,
             cssClass: ganttTooltip,
             target: target ? target : null,
@@ -16557,12 +17137,15 @@ class EditTooltip {
             this.parent.tooltipModule.toolTipObj.close();
             this.updateTooltip(segmentIndex);
             if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointLeftDrag') {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + connectorPointLeft));
             }
             else if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointRightDrag') {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + connectorPointRight));
             }
             else {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.taskBarEditElement);
             }
         }
@@ -16595,14 +17178,29 @@ class EditTooltip {
                 this.toolTipObj.content = this.getTooltipText(segmentIndex);
                 this.toolTipObj.refresh(this.taskbarEdit.taskBarEditElement);
                 if (this.taskbarEdit.taskBarEditAction === 'LeftResizing') {
-                    this.toolTipObj.offsetX = -taskWidth;
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = 0;
+                    }
+                    else {
+                        this.toolTipObj.offsetX = -taskWidth;
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'RightResizing' ||
                     this.taskbarEdit.taskBarEditAction === 'ParentResizing') {
-                    this.toolTipObj.offsetX = 0;
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = -taskWidth;
+                    }
+                    else {
+                        this.toolTipObj.offsetX = 0;
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'ProgressResizing') {
-                    this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = -(progressWidth);
+                    }
+                    else {
+                        this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'MilestoneDrag') {
                     this.toolTipObj.offsetX = -(this.parent.chartRowsModule.milestoneHeight / 2);
@@ -17108,8 +17706,14 @@ class TaskbarEdit extends DateProcessor {
         const e = this.getCoordinate(event);
         if (e.pageX || e.pageY) {
             const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
-            this.mouseDownX = (e.pageX - containerPosition.left) +
-                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                this.mouseDownX = Math.abs(e.pageX - (containerPosition.left +
+                    Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left)));
+            }
+            else {
+                this.mouseDownX = (e.pageX - containerPosition.left) +
+                    this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            }
             this.tooltipPositionX = this.mouseDownX;
             this.mouseDownY = e.pageY - containerPosition.top +
                 this.parent.ganttChartModule.scrollObject.previousScroll.top;
@@ -17153,8 +17757,14 @@ class TaskbarEdit extends DateProcessor {
         }
         const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
         const e = this.getCoordinate(event);
-        this.mouseMoveX = e.pageX - containerPosition.left +
-            this.parent.ganttChartModule.scrollObject.previousScroll.left;
+        if (this.parent.enableRtl) {
+            this.mouseMoveX = Math.abs(e.pageX - (containerPosition.left +
+                Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left)));
+        }
+        else {
+            this.mouseMoveX = e.pageX - containerPosition.left +
+                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+        }
         this.mouseMoveY = e.pageY - containerPosition.top +
             this.parent.ganttChartModule.scrollObject.previousScroll.top;
         this.dragMouseLeave = false;
@@ -17170,6 +17780,17 @@ class TaskbarEdit extends DateProcessor {
                 args.requestType = 'mergeSegment';
             }
             this.parent.trigger('actionBegin', args, (arg) => {
+                if (args.taskBarEditAction === "ConnectorPointRightDrag" || args.taskBarEditAction === "ConnectorPointLeftDrag"
+                    || args.taskBarEditAction === "LeftResizing" || args.taskBarEditAction === "RightResizing"
+                    || args.taskBarEditAction === "ProgressResizing" || args.taskBarEditAction === "ChildDrag" || args.taskBarEditAction === "ParentDrag" || args.taskBarEditAction === "MilestoneDrag" || args.taskBarEditAction === "ManualParentDrag") {
+                    this.parent.showIndicator = false;
+                }
+                if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer" && this.parent.showIndicator) {
+                    this.parent.showMaskRow();
+                }
+                else if (this.parent.showIndicator) {
+                    this.parent.showSpinner();
+                }
                 if (arg.cancel === false) {
                     this.taskBarEditingAction(event, false);
                 }
@@ -17251,8 +17872,14 @@ class TaskbarEdit extends DateProcessor {
         const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
         const e = this.getCoordinate(event);
         if (e.pageX || e.pageY) {
-            this.mouseMoveX = e.pageX - containerPosition.left +
-                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                this.mouseMoveX = Math.abs(e.pageX - (containerPosition.left +
+                    Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left)));
+            }
+            else {
+                this.mouseMoveX = e.pageX - containerPosition.left +
+                    this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            }
             this.tooltipPositionX = this.mouseMoveX;
             this.mouseMoveY = e.pageY - containerPosition.top +
                 this.parent.ganttChartModule.scrollObject.previousScroll.top;
@@ -17263,8 +17890,15 @@ class TaskbarEdit extends DateProcessor {
         if ((this.taskBarEditRecord.ganttProperties.width > 3 && !(this.taskBarEditAction === 'ProgressResizing' &&
             (this.taskBarEditRecord.ganttProperties.progress === 0 || this.taskBarEditRecord.ganttProperties.progress === 100))) ||
             isConnectorLineEdit) {
-            const mouseX = this.mouseMoveX - this.parent.ganttChartModule.scrollObject.previousScroll.left +
-                containerPosition.left;
+            let mouseX = 0;
+            if (this.parent.enableRtl) {
+                mouseX = Math.abs(Math.abs(this.mouseMoveX) - Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left) +
+                    containerPosition.left);
+            }
+            else {
+                mouseX = this.mouseMoveX - this.parent.ganttChartModule.scrollObject.previousScroll.left +
+                    containerPosition.left;
+            }
             const mouseY = this.mouseMoveY - this.parent.ganttChartModule.scrollObject.previousScroll.top +
                 containerPosition.top;
             if ((mouseX + 20) >
@@ -17272,6 +17906,12 @@ class TaskbarEdit extends DateProcessor {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('right');
             }
+            else if ((mouseX + 40) >
+                containerPosition.left + this.parent.ganttChartModule.chartBodyContainer.offsetWidth && this.parent.enableRtl && this.parent.ganttChartModule.scrollObject.previousScroll.left == 0) {
+                this.parent.ganttChartModule.scrollObject.previousScroll.left = -1;
+                this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
+                this.startScrollTimer('right');
+            }
             else if ((mouseX - 20) < containerPosition.left) {
                 this.timerCount = this.parent.ganttChartModule.scrollObject.previousScroll.left;
                 this.startScrollTimer('left');
@@ -17302,7 +17942,12 @@ class TaskbarEdit extends DateProcessor {
      */
     startScrollTimer(direction) {
         this.stopScrollTimer();
+        let leftSign = 0;
         this.scrollTimer = window.setInterval(() => {
+            if (Math.sign(this.timerCount) == -1) {
+                leftSign = -1;
+                this.timerCount = Math.abs(this.timerCount);
+            }
             if (direction === 'right') {
                 this.timerCount = (this.timerCount + 1) >= this.parent.timelineModule.totalTimelineWidth ?
                     this.parent.timelineModule.totalTimelineWidth : (this.timerCount + 1);
@@ -17317,7 +17962,7 @@ class TaskbarEdit extends DateProcessor {
                 this.parent.ganttChartModule.scrollObject.setScrollTop(this.timerCount);
             }
             else {
-                this.parent.ganttChartModule.scrollObject.setScrollLeft(this.timerCount);
+                this.parent.ganttChartModule.scrollObject.setScrollLeft(this.timerCount, leftSign);
             }
             if (this.taskBarEditAction === 'ConnectorPointLeftDrag'
                 || this.taskBarEditAction === 'ConnectorPointRightDrag') {
@@ -18013,6 +18658,7 @@ class TaskbarEdit extends DateProcessor {
      */
     setItemPosition() {
         const item = this.taskBarEditRecord.ganttProperties;
+        let position = this.parent.enableRtl ? "right" : "left";
         const segment = !isNullOrUndefined(item.segments) ? item.segments[this.segmentIndex] : null;
         const width = this.taskBarEditAction === 'MilestoneDrag' || item.isMilestone ?
             this.parent.chartRowsModule.milestoneHeight : item.width;
@@ -18044,11 +18690,16 @@ class TaskbarEdit extends DateProcessor {
                 if (segmentedTaskBarContainer && !isNullOrUndefined(item.segments)
                     && (this.taskBarEditAction === 'RightResizing' || this.segmentIndex !== 0)) {
                     this.taskBarEditElement.style.width = (segment.width) + 'px';
-                    this.taskBarEditElement.style.left = (segment.left) + 'px';
+                    if (this.parent.enableRtl) {
+                        this.taskBarEditElement.style.right = (segment.left) + 'px';
+                    }
+                    else {
+                        this.taskBarEditElement.style.left = (segment.left) + 'px';
+                    }
                 }
                 taskBarMainContainer$$1.style.width = (width) + 'px';
-                taskBarMainContainer$$1.style.left = (item.left) + 'px';
                 leftLabelContainer$$1.style.width = (item.left) + 'px';
+                taskBarMainContainer$$1.style.setProperty(position, (item.left) + 'px');
                 if (this.taskBarEditAction === 'LeftResizing' && this.segmentIndex === 0) {
                     const parent = this.taskBarEditElement.parentElement;
                     const segmentedTasks = parent.getElementsByClassName('e-segmented-taskbar');
@@ -18056,31 +18707,42 @@ class TaskbarEdit extends DateProcessor {
                         const segment = item.segments[i];
                         const segmentElement = segmentedTasks[i];
                         segmentElement.style.width = (segment.width) + 'px';
-                        segmentElement.style.left = (segment.left) + 'px';
+                        if (this.parent.enableRtl) {
+                            segmentElement.style.right = (segment.left) + 'px';
+                        }
+                        else {
+                            segmentElement.style.left = (segment.left) + 'px';
+                        }
                     }
                 }
                 if (!isNullOrUndefined(rightLabelContainer$$1)) {
-                    rightLabelContainer$$1.style.left = (item.left + width) + 'px';
+                    rightLabelContainer$$1.style.setProperty(position, (item.left + width) + 'px');
                 }
             }
             if (traceConnectorPointRight) {
-                traceConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width + 2)) + 'px';
+                if (this.parent.enableRtl) {
+                    traceConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width - 2)) + 'px';
+                }
+                else {
+                    traceConnectorPointRight.style.left = (this.parent.isAdaptive ? (width + 10) : (width + 2)) + 'px';
+                }
             }
             if (this.taskBarEditAction === 'MilestoneDrag' || item.isMilestone) {
-                taskBarMainContainer$$1.style.left = (item.left - (width / 2)) + 'px';
+                taskBarMainContainer$$1.style.setProperty(position, (item.left - (width / 2)) + 'px');
                 leftLabelContainer$$1.style.width = (item.left - (width / 2)) + 'px';
                 if (!isNullOrUndefined(rightLabelContainer$$1)) {
-                    rightLabelContainer$$1.style.left = (item.left + (width / 2)) + 'px';
+                    rightLabelContainer$$1.style.setProperty(position, (item.left + (width / 2)) + 'px');
                 }
             }
             else if (this.taskBarEditAction === 'ProgressResizing') {
                 if (this.segmentIndex === -1) {
-                    traceChildTaskBar$$1.style.left = (item.left + item.progressWidth - 10) + 'px';
+                    traceChildTaskBar$$1.style.setProperty(position, (item.left + item.progressWidth - 10) + 'px');
                     if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                         traceChildProgressBar$$1.style.width = item.progressWidth + 'px';
                         traceChildProgressBar$$1.style.borderBottomRightRadius = this.progressBorderRadius + 'px';
                         traceChildProgressBar$$1.style.borderTopRightRadius = this.progressBorderRadius + 'px';
-                        childProgressResizer$$1.style.left = item.progressWidth - 8 + 'px';
+                        const width = this.parent.enableRtl ? item.progressWidth + 8 : item.progressWidth - 8;
+                        childProgressResizer$$1.style.setProperty(position, width + 'px');
                     }
                 }
                 else {
@@ -18088,16 +18750,17 @@ class TaskbarEdit extends DateProcessor {
                     traceChildProgressBar$$1.style.width = item.segments[this.segmentIndex].progressWidth + 'px';
                     traceChildProgressBar$$1.style.borderBottomRightRadius = this.progressBorderRadius + 'px';
                     traceChildProgressBar$$1.style.borderTopRightRadius = this.progressBorderRadius + 'px';
-                    childProgressResizer$$1.style.left = item.segments[this.segmentIndex].progressWidth - 8 + 'px';
+                    const width = this.parent.enableRtl ? item.segments[this.segmentIndex].progressWidth + 8 : item.segments[this.segmentIndex].progressWidth - 8;
+                    childProgressResizer$$1.style.setProperty(position, width + 'px');
                 }
             }
             else if (this.taskBarEditAction === 'RightResizing' && !isNullOrUndefined(traceChildTaskBar$$1)) {
                 traceChildTaskBar$$1.style.width = (width) + 'px';
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
                     traceChildProgressBar$$1.style.width = (item.progressWidth) + 'px';
-                    taskBarRightResizer$$1.style.left = rightResizer + 'px';
+                    taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.left = (item.progressWidth - 10) + 'px';
+                        childProgressResizer$$1.style.setProperty(position, item.progressWidth - 10 + 'px');
                     }
                 }
             }
@@ -18111,27 +18774,27 @@ class TaskbarEdit extends DateProcessor {
             }
             else if (this.taskBarEditAction === 'ParentResizing') {
                 manualParentTaskbar.style.width = manualTaskbar.style.width = (item.width) + 'px';
-                manualParentRight.style.left = (item.width - manualParentLeft.offsetLeft) + 'px';
+                manualParentRight.style.setProperty(position, item.width - manualParentLeft.offsetLeft + 'px');
             }
             else if (this.taskBarEditAction === 'ManualParentDrag') {
-                manualParentTaskbar.style.left = (item.left - item.autoLeft) + 'px';
+                manualParentTaskbar.style.setProperty(position, item.left - item.autoLeft + 'px');
             }
             else {
                 if (!isNullOrUndefined(traceChildTaskBar$$1) && !segmentedTaskBarContainer) {
                     traceChildTaskBar$$1.style.width = (width) + 'px';
                 }
                 if (!isNullOrUndefined(traceChildProgressBar$$1)) {
-                    taskBarRightResizer$$1.style.left = rightResizer + 'px';
+                    taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
                     traceChildProgressBar$$1.style.width = (item.progressWidth) + 'px';
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.left = item.progressWidth - 10 + 'px';
+                        childProgressResizer$$1.style.setProperty(position, item.progressWidth - 10 + 'px');
                     }
                 }
                 if (segmentedTaskBarContainer) {
-                    taskBarRightResizer$$1.style.left = rightResizer + 'px';
+                    taskBarRightResizer$$1.style.setProperty(position, rightResizer + 'px');
                     traceChildProgressBar$$1.style.width = (segment.progressWidth) + 'px';
                     if (!isNullOrUndefined(childProgressResizer$$1)) {
-                        childProgressResizer$$1.style.left = segment.progressWidth - 10 + 'px';
+                        childProgressResizer$$1.style.setProperty(position, segment.progressWidth - 10 + 'px');
                     }
                 }
             }
@@ -18353,25 +19016,51 @@ class TaskbarEdit extends DateProcessor {
         const y2 = this.mouseMoveY;
         const length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
         const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-        const transform = 'rotate(' + angle + 'deg)';
+        const transform = 'rotate(' + (this.parent.enableRtl ? -angle : angle) + 'deg)';
         let left;
+        let width = 0;
+        if (!isNullOrUndefined(document.querySelectorAll(".e-chart-row")[0])) {
+            width = document.querySelectorAll(".e-chart-row")[0].offsetWidth;
+        }
         if (this.taskBarEditAction === 'ConnectorPointLeftDrag') {
-            left = (this.elementOffsetLeft - (this.parent.chartRowsModule.connectorPointWidth / 2)) -
-                this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                left = ((width - (this.elementOffsetLeft + (this.parent.chartRowsModule.connectorPointWidth / 2)))) -
+                    Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left);
+            }
+            else {
+                left = (this.elementOffsetLeft - (this.parent.chartRowsModule.connectorPointWidth / 2)) -
+                    this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            }
         }
         if (this.taskBarEditAction === 'ConnectorPointRightDrag') {
-            left = (this.elementOffsetLeft + this.elementOffsetWidth) +
-                (this.parent.chartRowsModule.connectorPointWidth / 2) - this.parent.ganttChartModule.scrollObject.previousScroll.left;
+            if (this.parent.enableRtl) {
+                left = (width - (this.elementOffsetLeft + this.elementOffsetWidth +
+                    (this.parent.chartRowsModule.connectorPointWidth / 2))) - Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left);
+            }
+            else {
+                left = (this.elementOffsetLeft + this.elementOffsetWidth) +
+                    (this.parent.chartRowsModule.connectorPointWidth / 2) - Math.abs(this.parent.ganttChartModule.scrollObject.previousScroll.left);
+            }
         }
         const top = ((this.elementOffsetTop) + (this.elementOffsetHeight / 2) +
             this.parent.ganttChartModule.chartBodyContainer.offsetTop) - this.parent.ganttChartModule.scrollObject.previousScroll.top;
         this.removeFalseLine(false);
         this.falseLine = createElement('div', {
             className: falseLine, id: 'ganttfalseline' + this.parent.element.id,
-            styles: 'transform-origin: 0% 100%;right: auto;position: absolute;transform:' + transform + ';' +
+            styles: 'position: absolute;transform:' + transform + ';' +
                 'border-top-width: 1px;border-top-style: dashed;z-index: 5;width:' + (length - 3) + 'px;' +
-                'left:' + left + 'px;top:' + top + 'px;'
+                'top:' + top + 'px;'
         });
+        if (this.parent.enableRtl) {
+            this.falseLine.style.left = 'auto';
+            this.falseLine.style.right = left + 'px';
+            this.falseLine.style.transformOrigin = '100% 0%';
+        }
+        else {
+            this.falseLine.style.right = 'auto';
+            this.falseLine.style.left = left + 'px';
+            this.falseLine.style.transformOrigin = '0% 100%';
+        }
         this.parent.ganttChartModule.chartBodyContainer.appendChild(this.falseLine);
     }
     /**
@@ -18456,19 +19145,19 @@ class TaskbarEdit extends DateProcessor {
         const element = target;
         const uniqueId = this.parent.viewType === 'ResourceView' ? fromItem.taskId : fromItem.rowUniqueID;
         if (this.taskBarEditAction === 'ConnectorPointLeftDrag') {
-            predecessor = uniqueId + 'S';
+            predecessor = uniqueId + (this.parent.enableRtl ? 'F' : 'S');
         }
         else if (this.taskBarEditAction === 'ConnectorPointRightDrag') {
-            predecessor = uniqueId + 'F';
+            predecessor = uniqueId + (this.parent.enableRtl ? 'S' : 'F');
         }
         if (this.connectorSecondAction) {
             if (this.connectorSecondAction === 'ConnectorPointLeftDrag') {
-                predecessor += 'S';
-                currentTarget = 'start';
+                predecessor += this.parent.enableRtl ? 'F' : 'S';
+                currentTarget = this.parent.enableRtl ? 'finish' : 'start';
             }
             else if (this.connectorSecondAction === 'ConnectorPointRightDrag') {
-                predecessor += 'F';
-                currentTarget = 'finish';
+                predecessor += this.parent.enableRtl ? 'S' : 'F';
+                currentTarget = this.parent.enableRtl ? 'start' : 'finish';
             }
         }
         if (isNullOrUndefined(toItem)) {
@@ -18492,6 +19181,12 @@ class TaskbarEdit extends DateProcessor {
         args.isValidLink = isValidLink;
         args.requestType = 'ValidateDependency';
         this.parent.trigger('actionBegin', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer" && args.requestType != "ValidateDependency") {
+            this.parent.showMaskRow();
+        }
+        else if (args.requestType != "ValidateDependency") {
+            this.parent.showSpinner();
+        }
         args.isValidLink = !isValidLink && args.isValidLink ? false : args.isValidLink;
         if (args.isValidLink) {
             if (!this.editTooltip.toolTipObj && !this.parent.isAdaptive) {
@@ -18885,18 +19580,18 @@ class DialogEdit {
         if (!isNullOrUndefined(taskId)) {
             if (!isNullOrUndefined(taskId['ganttProperties'])) {
                 if (typeof taskId['ganttProperties']['taskId'] === 'string') {
-                    this.numericOrString = "stringedit";
+                    this.numericOrString = 'stringedit';
                 }
                 else {
-                    this.numericOrString = "numericedit";
+                    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";
+                    this.numericOrString = 'stringedit';
                 }
                 else {
-                    this.numericOrString = "numericedit";
+                    this.numericOrString = 'numericedit';
                 }
             }
         }
@@ -18938,6 +19633,7 @@ class DialogEdit {
         dialogModel.animationSettings = { effect: 'None' };
         dialogModel.header = this.localeObj.getConstant(this.isEdit ? 'editDialogTitle' : 'addDialogTitle');
         dialogModel.isModal = true;
+        dialogModel.enableRtl = this.parent.enableRtl;
         dialogModel.allowDragging = this.parent.isAdaptive ? false : true;
         dialogModel.showCloseIcon = true;
         const position = this.parent.isAdaptive ? { X: 'top', Y: 'left' } : { X: 'center', Y: 'center' };
@@ -18948,8 +19644,8 @@ class DialogEdit {
         dialogModel.close = this.dialogClose.bind(this);
         dialogModel.closeOnEscape = true;
         dialogModel.beforeClose = function (args) {
-            if (args.closedBy == "escape") {
-                if (args.event.name == "key-pressed" && args.event.target.nodeName == 'INPUT') {
+            if (args.closedBy === "escape") {
+                if (args.event.name === "key-pressed" && args.event.target.nodeName === 'INPUT') {
                     args.cancel = true;
                 }
             }
@@ -19119,6 +19815,7 @@ class DialogEdit {
         const length = dialogSettings.length;
         tabModel.items = tabItems;
         tabModel.locale = this.parent.locale;
+        tabModel.enableRtl = this.parent.enableRtl;
         this.beforeOpenArgs.tabModel = tabModel;
         let index = 0;
         if (length > 0) {
@@ -19198,6 +19895,12 @@ class DialogEdit {
             cancel: this.beforeOpenArgs.cancel
         };
         this.parent.trigger('actionBegin', this.beforeOpenArgs, (arg) => {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             this.renderTabItems();
             if (!arg.cancel) {
                 tabModel.selected = this.tabSelectedEvent.bind(this);
@@ -19220,6 +19923,12 @@ class DialogEdit {
                     cancel: false
                 };
                 this.parent.trigger('actionComplete', actionCompleteArgs, (actionCompleteArg) => {
+                    if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                        this.parent.hideMaskRow();
+                    }
+                    else {
+                        this.parent.hideSpinner();
+                    }
                     if (actionCompleteArg.cancel) {
                         this.resetValues();
                     }
@@ -19302,7 +20011,8 @@ class DialogEdit {
                 {
                     const checkboxModel = {
                         label: column.headerText,
-                        locale: locale
+                        locale: locale,
+                        enableRtl: this.parent.enableRtl
                     };
                     fieldsModel[column.field] = checkboxModel;
                     break;
@@ -19311,6 +20021,7 @@ class DialogEdit {
             case 'stringedit':
                 {
                     const textBox = common;
+                    textBox.enableRtl = this.parent.enableRtl;
                     if (column.field === ganttObj.columnMapping.duration || column.field === ganttObj.columnMapping.id || column.field === ganttObj.columnMapping.startDate ||
                         column.field === ganttObj.columnMapping.endDate) {
                         textBox.change = (args) => {
@@ -19323,6 +20034,7 @@ class DialogEdit {
             case 'numericedit':
                 {
                     const numeric = common;
+                    numeric.enableRtl = this.parent.enableRtl;
                     if (taskSettings.progress === column.field) {
                         numeric.min = 0;
                         numeric.max = 100;
@@ -19339,6 +20051,7 @@ class DialogEdit {
                 {
                     const datePickerObj = common;
                     datePickerObj.format = this.parent.getDateFormat();
+                    datePickerObj.enableRtl = this.parent.enableRtl;
                     datePickerObj.strictMode = true;
                     datePickerObj.firstDayOfWeek = ganttObj.timelineModule.customTimelineSettings.weekStartDay;
                     if (column.field === ganttObj.columnMapping.startDate ||
@@ -19355,6 +20068,7 @@ class DialogEdit {
                 {
                     const dateTimePickerObj = common;
                     dateTimePickerObj.format = this.parent.getDateFormat();
+                    dateTimePickerObj.enableRtl = this.parent.enableRtl;
                     dateTimePickerObj.strictMode = true;
                     dateTimePickerObj.firstDayOfWeek = ganttObj.timelineModule.customTimelineSettings.weekStartDay;
                     if (column.field === ganttObj.columnMapping.startDate ||
@@ -19377,6 +20091,7 @@ class DialogEdit {
                     common[dataKey] = types;
                     common[fieldsKey] = { value: 'Value' };
                     const dropDownListObj = common;
+                    dropDownListObj.enableRtl = this.parent.enableRtl;
                     dropDownListObj.change = (args) => {
                         if (column.field === taskSettings.manual) {
                             this.editedRecord.ganttProperties.isAutoSchedule = !args.value;
@@ -19748,8 +20463,8 @@ class DialogEdit {
                     break;
                 case 'duration':
                     gridColumn = {
-                        field: fields[i], headerText: this.localeObj.getConstant(fields[i]), editType: 'stringedit', width: '100px',
-                        edit: {
+                        field: fields[i], headerText: this.localeObj.getConstant(fields[i]), editType: 'stringedit',
+                        width: '100px', edit: {
                             write: (args) => {
                                 let inputTextModel;
                                 if (!isNullOrUndefined(this.beforeOpenArgs[generalTabString])) {
@@ -19810,7 +20525,7 @@ class DialogEdit {
             inputValue = dialog.querySelector('#' + ganttId + 'SegmentsTabContainer' + columnName)
                 .ej2_instances[0];
         }
-        if (inputValue.value.toString() !== tempValue.toString()) {
+        if ((!isNullOrUndefined(inputValue.value)) && (inputValue.value.toString() !== tempValue.toString())) {
             inputValue.value = tempValue;
             inputValue.dataBind();
         }
@@ -20144,7 +20859,7 @@ class DialogEdit {
                             break;
                         }
                     }
-                    if (typeof (stringOrNumber) === "string") {
+                    if (typeof (stringOrNumber) === 'string') {
                         disabled = false;
                     }
                     else {
@@ -20159,7 +20874,7 @@ class DialogEdit {
             }
             if (this.editedRecord.hasChildRecords) {
                 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 ||
+                    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 === this.parent.taskFields.type) {
                     disabled = true;
@@ -20214,6 +20929,7 @@ class DialogEdit {
                     dataSource: new DataManager(this.idCollection),
                     popupHeight: '180px',
                     allowCustom: false,
+                    enableRtl: this.parent.enableRtl,
                     fields: { value: 'text' },
                     value: args.rowData[field],
                     change: (arg) => {
@@ -20481,7 +21197,7 @@ class DialogEdit {
                 do {
                     if (currentFlatData.parentItem) {
                         currentFlatData = this.parent.flatData[this.parent.ids.indexOf(currentFlatData.parentItem.taskId)];
-                        if (currentFlatData.uniqueID == this.beforeOpenArgs.rowData['uniqueID']) {
+                        if (currentFlatData.uniqueID === this.beforeOpenArgs.rowData['uniqueID']) {
                             this.isValidData = false;
                             break;
                         }
@@ -20733,7 +21449,9 @@ class DialogEdit {
             }
         }
         if (this.isEdit) {
-            this.updateScheduleProperties(this.editedRecord, this.rowData);
+            if (!isCustom) {
+                this.updateScheduleProperties(this.editedRecord, this.rowData);
+            }
             ganttObj.editModule.validateUpdateValues(tasksData, this.rowData, true);
         }
     }
@@ -21388,6 +22106,7 @@ class ConnectorLineEdit {
         const validationDialog = new Dialog({
             header: 'Validate Editing',
             isModal: true,
+            enableRtl: this.parent.enableRtl,
             visible: false,
             width: '50%',
             showCloseIcon: true,
@@ -21759,6 +22478,7 @@ class ConnectorLineEdit {
         this.confirmPredecessorDialog = new Dialog({
             width: '320px',
             isModal: true,
+            enableRtl: this.parent.enableRtl,
             content: this.parent.localeObj.getConstant('confirmPredecessorDelete'),
             buttons: [
                 {
@@ -21806,6 +22526,7 @@ class Edit$2 {
         this.taskbarMoved = false;
         this.predecessorUpdated = false;
         this.isBreakLoop = false;
+        this.isResourceTaskDeleted = false;
         /**
          * @private
          */
@@ -21880,6 +22601,7 @@ class Edit$2 {
         const editParam = {
             min: 0,
             decimals: 0,
+            enableRtl: this.parent.enableRtl,
             validateDecimalOnType: true,
             format: 'n0',
             showSpinButton: false
@@ -21895,6 +22617,7 @@ class Edit$2 {
     updateProgessColumnEditParams(column) {
         const editParam = {
             min: 0,
+            enableRtl: this.parent.enableRtl,
             decimals: 0,
             validateDecimalOnType: true,
             max: 100,
@@ -21952,6 +22675,7 @@ class Edit$2 {
             editor = new MultiSelect({
                 dataSource: new DataManager(this.parent.resources),
                 fields: { text: resourceSettings.name, value: resourceSettings.id },
+                enableRtl: this.parent.enableRtl,
                 mode: 'CheckBox',
                 showDropDownIcon: true,
                 popupHeight: '350px',
@@ -22012,6 +22736,7 @@ class Edit$2 {
             this.parent.treeGridModule.currentEditRow = {};
             editor = new DropDownList({
                 dataSource: new DataManager(types),
+                enableRtl: this.parent.enableRtl,
                 fields: { value: 'Value' },
                 popupHeight: '350px',
                 value: getValue('taskType', args.rowData.ganttProperties)
@@ -22896,7 +23621,6 @@ class Edit$2 {
      * @private
      */
     initiateSaveAction(args) {
-        this.parent.showSpinner();
         let eventArgs = {};
         eventArgs.requestType = 'beforeSave';
         eventArgs.data = args.data;
@@ -22910,6 +23634,12 @@ class Edit$2 {
             eventArgs.action = 'DrawConnectorLine';
         }
         this.parent.trigger('actionBegin', eventArgs, (eventArg) => {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             if (eventArg.cancel) {
                 this.reUpdatePreviousRecords();
                 this.parent.chartRowsModule.refreshRecords([args.data]);
@@ -22943,6 +23673,52 @@ class Edit$2 {
         });
     }
     dmSuccess(e, args) {
+        let eLength = e['length'];
+        for (let i = 0; i < eLength; i++) {
+            let rec = e[i];
+            let _aLength = Object.keys(rec).length;
+            for (let j = 0, _a = Object.keys(rec); j < _aLength; j++) {
+                let key = _a[j];
+                this.parent.editedRecords[i][key] = rec[key];
+                this.parent.editedRecords[i].taskData[key] = rec[key];
+            }
+            if (this.parent.taskFields.id !== null) {
+                this.parent.editedRecords[i].ganttProperties["taskId"] = rec[this.parent.taskFields.id];
+            }
+            if (this.parent.taskFields.name !== null) {
+                this.parent.editedRecords[i].ganttProperties["taskName"] = rec[this.parent.taskFields.name];
+            }
+            if (this.parent.taskFields.startDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["startDate"] = rec[this.parent.taskFields.startDate];
+            }
+            if (this.parent.taskFields.endDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["endDate"] = rec[this.parent.taskFields.endDate];
+            }
+            if (this.parent.taskFields.duration !== null) {
+                this.parent.editedRecords[i].ganttProperties["duration"] = parseInt(rec[this.parent.taskFields.duration]);
+            }
+            if (this.parent.taskFields.durationUnit !== null) {
+                this.parent.editedRecords[i].ganttProperties["durationUnit"] = rec[this.parent.taskFields.durationUnit];
+            }
+            if (this.parent.taskFields.progress !== null) {
+                this.parent.editedRecords[i].ganttProperties["progress"] = rec[this.parent.taskFields.progress];
+            }
+            if (this.parent.taskFields.dependency !== null) {
+                this.parent.editedRecords[i].ganttProperties["dependency"] = rec[this.parent.taskFields.dependency];
+            }
+            if (this.parent.taskFields.parentID !== null) {
+                this.parent.editedRecords[i].ganttProperties["parentID"] = rec[this.parent.taskFields.parentID];
+            }
+            if (this.parent.taskFields.baselineEndDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["baselineEndDate"] = rec[this.parent.taskFields.baselineEndDate];
+            }
+            if (this.parent.taskFields.baselineStartDate !== null) {
+                this.parent.editedRecords[i].ganttProperties["baselineStartDate"] = rec[this.parent.taskFields.baselineStartDate];
+            }
+            if (this.parent.taskFields.resourceInfo !== null) {
+                this.parent.editedRecords[i].ganttProperties["resources"] = rec[this.parent.taskFields.resourceInfo];
+            }
+        }
         this.saveSuccess(args);
     }
     dmFailure(e, args) {
@@ -22961,7 +23737,7 @@ class Edit$2 {
         const ids = data.ganttProperties.sharedTaskUniqueIds;
         for (let i = 0; i < ids.length; i++) {
             const editRecord = this.parent.flatData[this.parent.ids.indexOf(ids[i].toString())];
-            if (editRecord.uniqueID !== data.uniqueID) {
+            if (editRecord && editRecord.uniqueID !== data.uniqueID) {
                 this.updateGanttProperties(data, editRecord);
                 this.parent.setRecordValue('taskData', data.taskData, editRecord, true);
                 this.parent.dataOperation.updateTaskData(editRecord);
@@ -23035,6 +23811,12 @@ class Edit$2 {
                 criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
             }
             this.parent.trigger('actionComplete', eventArgs);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
         }
         else {
             this.taskbarEditModule.dependencyCancel = false;
@@ -23056,12 +23838,12 @@ class Edit$2 {
         for (let index = 0; index < currentLength; index++) {
             const recordIndex = [];
             let resourceID = parseInt(currentResource[index][this.parent.resourceFields.id], 10).toString();
-            if (resourceID === "NaN") {
+            if (resourceID === 'NaN') {
                 resourceID = currentResource[index][this.parent.resourceFields.id];
             }
             for (let i = 0; i < prevResource.length; i++) {
                 let prevResourceID = parseInt(prevResource[i][this.parent.resourceFields.id], 10).toString();
-                if (prevResourceID === "NaN") {
+                if (prevResourceID === 'NaN') {
                     prevResourceID = prevResource[i][this.parent.resourceFields.id];
                 }
                 if (prevResourceID === resourceID) {
@@ -23122,12 +23904,6 @@ class Edit$2 {
         }
         if (!isNullOrUndefined(unassignedTasks)) {
             this.addNewRecord(updateRecord, unassignedTasks);
-            const updatedData = this.parent.currentViewData.filter((data) => {
-                return (data.ganttProperties.taskId === updateRecord.ganttProperties.taskId &&
-                    (data.hasChildRecords === updateRecord.hasChildRecords));
-            })[0];
-            updateRecord.parentItem = updatedData.parentItem;
-            updateRecord.parentUniqueID = updatedData.parentUniqueID;
         }
         else {
             // Block for create the unassigned task.
@@ -23142,6 +23918,12 @@ class Edit$2 {
             const parentRecord = this.parent.flatData[this.parent.flatData.length - 1];
             this.addNewRecord(updateRecord, parentRecord);
         }
+        const updatedData = this.parent.currentViewData.filter((data) => {
+            return (data.ganttProperties.taskId === updateRecord.ganttProperties.taskId &&
+                (data.hasChildRecords === updateRecord.hasChildRecords));
+        })[0];
+        updateRecord.parentItem = updatedData.parentItem;
+        updateRecord.parentUniqueID = updatedData.parentUniqueID;
     }
     addRecordAsBottom(cAddedRecord) {
         const recordIndex1 = this.parent.flatData.length;
@@ -23348,6 +24130,7 @@ class Edit$2 {
             width: '320px',
             isModal: true,
             visible: false,
+            enableRtl: this.parent.enableRtl,
             content: this.parent.localeObj.getConstant('confirmDelete'),
             buttons: [
                 {
@@ -23400,15 +24183,17 @@ class Edit$2 {
         const deleteRecords = [];
         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++) {
-                    if (this.parent.ids.indexOf(ids[j].toString()) !== -1) {
-                        deleteRecords.push(this.parent.flatData[this.parent.ids.indexOf(ids[j].toString())]);
+                if (selectedRecords[i].ganttProperties.sharedTaskUniqueIds.length === 1) {
+                    const data = selectedRecords[i];
+                    const ids = data.ganttProperties.sharedTaskUniqueIds;
+                    for (let j = 0; j < ids.length; j++) {
+                        if (this.parent.ids.indexOf(ids[j].toString()) !== -1) {
+                            deleteRecords.push(this.parent.flatData[this.parent.ids.indexOf(ids[j].toString())]);
+                        }
+                    }
+                    if (this.parent.ids.indexOf(data.ganttProperties.rowUniqueID) !== -1) {
+                        deleteRecords.push(this.parent.flatData[this.parent.ids.indexOf(data.ganttProperties.rowUniqueID)]);
                     }
-                }
-                if (this.parent.ids.indexOf(data.ganttProperties.rowUniqueID) !== -1) {
-                    deleteRecords.push(this.parent.flatData[this.parent.ids.indexOf(data.ganttProperties.rowUniqueID)]);
                 }
             }
             else {
@@ -23534,8 +24319,9 @@ class Edit$2 {
                 if (this.deletedTaskDetails.indexOf(deleteRecord) !== -1) {
                     continue;
                 }
+                const parentTask = this.parent.getParentTask(deleteRecord.parentItem);
                 if (deleteRecord.parentItem) {
-                    const childRecord = this.parent.getParentTask(deleteRecord.parentItem).childRecords;
+                    const childRecord = parentTask.childRecords;
                     const filteredRecord = childRecord.length === 1 ?
                         childRecord : childRecord.filter((data) => {
                         return !data.isDelete;
@@ -23545,7 +24331,12 @@ class Edit$2 {
                     }
                 }
                 const predecessor = deleteRecord.ganttProperties.predecessor;
-                if (predecessor && predecessor.length) {
+                let canDeletePredecessor = true;
+                if (this.parent.viewType === 'ResourceView' && parentTask && parentTask.ganttProperties.taskName !==
+                    this.parent.localeObj.getConstant('unassignedTask')) {
+                    canDeletePredecessor = false;
+                }
+                if (predecessor && predecessor.length && canDeletePredecessor) {
                     this.removePredecessorOnDelete(deleteRecord);
                 }
                 this.deletedTaskDetails.push(deleteRecord);
@@ -23694,7 +24485,13 @@ class Edit$2 {
                 continue;
             }
             const predecessor = childRecord.ganttProperties.predecessor;
-            if (predecessor && predecessor.length) {
+            let canDeletePredecessor = true;
+            const parentTask = this.parent.getParentTask(childRecord.parentItem);
+            if (this.parent.viewType === 'ResourceView' && parentTask && parentTask.ganttProperties.taskName !==
+                this.parent.localeObj.getConstant('unassignedTask')) {
+                canDeletePredecessor = false;
+            }
+            if (predecessor && predecessor.length && canDeletePredecessor) {
                 this.removePredecessorOnDelete(childRecord);
             }
             this.deletedTaskDetails.push(childRecord);
@@ -23745,6 +24542,12 @@ class Edit$2 {
         eventArgs.modifiedRecords = args.updatedRecordCollection;
         eventArgs.modifiedTaskData = getTaskData(args.updatedRecordCollection, null, null, this.parent);
         this.parent.trigger('actionBegin', eventArgs, (eventArg) => {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             if (eventArg.cancel) {
                 const deleteRecords = this.deletedTaskDetails;
                 for (let d = 0; d < deleteRecords.length; d++) {
@@ -23823,6 +24626,14 @@ class Edit$2 {
                     this.parent.ids.splice(flatIndex, 1);
                     if (this.parent.viewType === 'ResourceView') {
                         this.parent.getTaskIds().splice(flatIndex, 1);
+                        this.isResourceTaskDeleted = true;
+                        if (!deleteRecord.hasChildRecords) {
+                            deleteRecord.ganttProperties.resourceInfo = null;
+                            delete deleteRecord.ganttProperties.resourceNames;
+                            deleteRecord[this.parent.taskFields.resourceInfo] = null;
+                            deleteRecord.ganttProperties.sharedTaskUniqueIds = [];
+                            delete deleteRecord.taskData[this.parent.taskFields.resourceInfo];
+                        }
                     }
                 }
                 if (deleteRecord.level === 0 && treeGridParentIndex !== -1) {
@@ -23871,9 +24682,12 @@ class Edit$2 {
                 const unassignedTask = this.parent.flatData.filter((data) => {
                     return data.ganttProperties.taskName === this.parent.localeObj.getConstant('unassignedTask');
                 })[0];
-                const isDuplicate = unassignedTask.childRecords.filter((data) => {
-                    return data.ganttProperties.taskId === updateUnAssignedResources[i].ganttProperties.taskId;
-                });
+                let isDuplicate = [];
+                if (unassignedTask) {
+                    isDuplicate = unassignedTask.childRecords.filter((data) => {
+                        return data.ganttProperties.taskId === updateUnAssignedResources[i].ganttProperties.taskId;
+                    });
+                }
                 const parentTask = this.parent.getParentTask(updateUnAssignedResources[i].parentItem);
                 if (parentTask && parentTask.ganttProperties.taskName !==
                     this.parent.localeObj.getConstant('unassignedTask') && isDuplicate.length === 0) {
@@ -23882,9 +24696,9 @@ class Edit$2 {
                         this.parent.dataOperation.updateParentItems(updateUnAssignedResources[i].parentItem);
                     }
                 }
-                else if (!parentTask && isDuplicate.length === 0) {
+                else if (!parentTask && (!isDuplicate || isDuplicate.length === 0)) {
                     this.checkWithUnassignedTask(updateUnAssignedResources[i]);
-                    if (updateUnAssignedResources[i].parentItem) {
+                    if (updateUnAssignedResources[i].parentItem && unassignedTask) {
                         this.parent.dataOperation.updateParentItems(updateUnAssignedResources[i].parentItem);
                     }
                 }
@@ -23893,7 +24707,12 @@ class Edit$2 {
         this.parent.trigger('actionComplete', eventArgs);
         this.deletedTaskDetails = [];
         this.parent.initiateEditAction(false);
-        this.parent.hideSpinner();
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
     }
     /**
      *
@@ -24347,9 +25166,9 @@ class Edit$2 {
         for (let i = 0; i < this.parent.modifiedRecords.length; i++) {
             const originalData = this.parent.modifiedRecords[i];
             let treeIndex = this.parent.allowRowDragAndDrop ? 1 : 0;
-            let uniqueTaskID = this.parent.taskFields.id;
-            var originalIndex = this.parent.currentViewData.findIndex((data) => {
-                return (data[uniqueTaskID] == originalData[uniqueTaskID]);
+            const uniqueTaskID = this.parent.taskFields.id;
+            let originalIndex = this.parent.currentViewData.findIndex((data) => {
+                return (data[uniqueTaskID] === originalData[uniqueTaskID]);
             });
             if (this.parent.treeGrid.getRows()[originalIndex]) {
                 this.parent.treeGrid.renderModule.cellRender({
@@ -24469,8 +25288,13 @@ class Edit$2 {
             }
             let args = {};
             args = this.constructTaskAddedEventArgs(cAddedRecord, this.parent.editedRecords, 'beforeAdd');
-            this.parent.showSpinner();
             this.parent.trigger('actionBegin', args, (args) => {
+                if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                    this.parent.showMaskRow();
+                }
+                else {
+                    this.parent.showSpinner();
+                }
                 if (!isNullOrUndefined(args.data[tempTaskID])) {
                     if (args.data[tempTaskID] != args.data['ganttProperties']['taskId']) {
                         args.data['ganttProperties']['taskId'] = args.data[tempTaskID];
@@ -24674,7 +25498,7 @@ class Edit$2 {
         switch (rowPosition) {
             case 'Top':
             case 'Bottom':
-                if (this.parent.viewType === "ResourceView") {
+                if (this.parent.viewType === 'ResourceView') {
                     level = 1;
                 }
                 else {
@@ -24757,6 +25581,12 @@ class Edit$2 {
             this.parent.dataOperation.updateWorkWithDuration(cAddedRecord[0]);
         }
         this.parent.trigger('actionComplete', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
         if (this.dialogModule.dialog && !this.dialogModule.dialogObj.isDestroyed) {
             this.dialogModule.dialogObj.hide();
         }
@@ -24915,6 +25745,12 @@ class Edit$2 {
                 cancel: false
             };
             this.parent.trigger('actionBegin', actionArgs, (actionArg) => {
+                if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                    this.parent.showMaskRow();
+                }
+                else {
+                    this.parent.showSpinner();
+                }
                 if (!actionArg.cancel) {
                     this.reArrangeRows(args, isByMethod);
                 }
@@ -25086,6 +25922,12 @@ class Edit$2 {
             }
         }
         this.parent.trigger('actionComplete', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.hideMaskRow();
+        }
+        else {
+            this.parent.hideSpinner();
+        }
         this.parent.editedRecords = [];
     }
     refreshDataSource() {
@@ -25597,6 +26439,7 @@ class Filter$1 {
                 const flValInput = createElement('input', { className: 'flm-input' });
                 args.target.appendChild(flValInput);
                 dropDateInstance = new DatePicker({ placeholder: this.parent.localeObj.getConstant('enterValue'), format: format });
+                dropDateInstance.enableRtl = this.parent.enableRtl;
                 dropDateInstance.appendTo(flValInput);
             },
             write: (args) => {
@@ -25619,6 +26462,7 @@ class Filter$1 {
                 const flValInput = createElement('input', { className: 'flm-input' });
                 args.target.appendChild(flValInput);
                 dropInstance = new DateTimePicker({ placeholder: this.parent.localeObj.getConstant('enterValue'), format: format });
+                dropInstance.enableRtl = this.parent.enableRtl;
                 dropInstance.appendTo(flValInput);
             },
             write: (args) => {
@@ -25640,6 +26484,7 @@ class Filter$1 {
                 flValInput.setAttribute('placeholder', this.parent.localeObj.getConstant('enterValue'));
                 args.target.appendChild(flValInput);
                 textBoxInstance = new TextBox();
+                textBoxInstance.enableRtl = this.parent.enableRtl;
                 textBoxInstance.appendTo(flValInput);
             },
             write: (args) => {
@@ -26428,6 +27273,14 @@ class Toolbar$3 {
                             this.parent.localeObj.getConstant('tasks') : ''),
                     align: this.parent.isAdaptive ? 'Right' : 'Left'
                 };
+                if (this.parent.enableRtl) {
+                    if (item === 'PrevTimeSpan') {
+                        this.predefinedItems[item].prefixIcon = 'e-nexttimespan';
+                    }
+                    if (item === 'NextTimeSpan') {
+                        this.predefinedItems[item].prefixIcon = 'e-prevtimespan';
+                    }
+                }
             }
             const searchLocalText = this.parent.localeObj.getConstant('search');
             if (this.parent.isAdaptive) {
@@ -26459,6 +27312,7 @@ class Toolbar$3 {
         const items = this.getItems();
         this.toolbar = new Toolbar$1({
             items: items,
+            enableRtl: this.parent.enableRtl,
             clicked: this.toolbarClickHandler.bind(this),
             height: this.parent.isAdaptive ? 48 : 'auto'
         });
@@ -26477,6 +27331,7 @@ class Toolbar$3 {
             this.searchElement = this.element.querySelector('#' + this.parent.element.id + '_searchbar');
             const textObj = new TextBox({
                 placeholder: this.parent.localeObj.getConstant('search'),
+                enableRtl: this.parent.enableRtl,
                 floatLabelType: 'Never',
                 showClearButton: true
             });
@@ -26592,7 +27447,16 @@ class Toolbar$3 {
     toolbarClickHandler(arg) {
         const gObj = this.parent;
         const gID = this.id;
+        this.parent.isToolBarClick = false;
         extend(arg, { cancel: false });
+        if (arg.item['properties'].id === this.parent.element.id + "_pdfexport" || arg.item['properties'].id === this.parent.element.id + "_critical-path") {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
+        }
         gObj.trigger(toolbarClick, arg, (args) => {
             if (args.cancel) {
                 return;
@@ -26794,7 +27658,8 @@ class Toolbar$3 {
             else {
                 disableItems.push(gID + '_update', gID + '_cancel');
                 for (let t = 0; t < toolbarItems.length; t++) {
-                    if (enableItems.indexOf(toolbarItems[t].id) === -1 && disableItems.indexOf(toolbarItems[t].id) === -1) {
+                    if (enableItems.indexOf(toolbarItems[t].id) === -1 &&
+                        disableItems.indexOf(toolbarItems[t].id) === -1) {
                         enableItems.push(toolbarItems[t].id);
                     }
                 }
@@ -26949,8 +27814,9 @@ class NonWorkingDay {
             const width = (this.parent.holidays[i].from && this.parent.holidays[i].to) ?
                 this.parent.dataOperation.getTaskWidth(fromDate, toDate) : this.parent.perDayWidth;
             const left = this.parent.dataOperation.getTaskLeft(fromDate, false);
+            const align = this.parent.enableRtl ? `right:${left}px;` : `left:${left}px;`;
             const holidayDiv = createElement('div', {
-                className: holidayElement, styles: `left:${left}px; width:${width}px; height:100%;`
+                className: holidayElement, styles: `${align} width:${width}px; height:100%;`
             });
             const spanTop = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
             const spanElement = createElement('span', {
@@ -27019,8 +27885,9 @@ class NonWorkingDay {
                         this.weekendWidthUpdated = true;
                     }
                 }
+                const align = this.parent.enableRtl ? `right:${left}px;` : `left:${left}px;`;
                 const weekendDiv = createElement('div', {
-                    className: weekend, styles: `left:${left}px;width:${width}px;height:100%;`
+                    className: weekend, styles: `${align} width:${width}px;height:100%;`
                 });
                 container.appendChild(weekendDiv);
             }
@@ -27092,7 +27959,7 @@ class EventMarker$1 {
                 this.eventMarkersContainer = createElement('div', {
                     className: eventMarkersContainer
                 });
-                this.eventMarkersContainer.setAttribute("role", "term");
+                this.eventMarkersContainer.setAttribute('role', 'term');
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';
@@ -27125,8 +27992,15 @@ class EventMarker$1 {
         let rightArrow;
         for (let i = 0; i < this.parent.eventMarkers.length; i++) {
             left = this.parent.dataOperation.getTaskLeft(this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false);
+            let align;
+            if (this.parent.enableRtl) {
+                align = `right:${left}px;`;
+            }
+            else {
+                align = `left:${left}px;`;
+            }
             eventMarkerElement = createElement('div', {
-                className: eventMarkersChild, styles: `left:${left}px;  height:100%;`,
+                className: eventMarkersChild, styles: `${align}  height:100%;`,
                 id: 'stripline' + i
             });
             if (this.parent.eventMarkers[i].label) {
@@ -27135,6 +28009,12 @@ class EventMarker$1 {
                 });
                 const property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
                 spanElement[property] = this.parent.eventMarkers[i].label;
+                if (this.parent.enableRtl) {
+                    spanElement.style.right = '5px';
+                }
+                else {
+                    spanElement.style.left = '5px';
+                }
                 eventMarkerElement.appendChild(spanElement);
                 rightArrow = createElement('div', {
                     className: 'e-gantt-right-arrow'
@@ -27311,8 +28191,8 @@ class CriticalPath {
                         predecessorIndex = modelIds.indexOf(checkBeyondEnddate[k].toString());
                     }
                     else {
-                        let currentRecords = this.parent.currentViewData.filter((data) => {
-                            return parseInt(data.ganttProperties.taskId) == checkBeyondEnddate[k];
+                        const 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) {
@@ -27345,10 +28225,10 @@ class CriticalPath {
                 const individualPredecessorLength = totalPredecessorsCollection[x].ganttProperties.predecessor.length;
                 const taskid = ((totalPredecessorsCollection[x].ganttProperties.taskId));
                 for (let y = 0; y < individualPredecessorLength; y++) {
-                    if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) != "string") {
+                    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") {
+                    else if (!isNaN(Number(predecessor[y].from)) && typeof (taskid) === 'string') {
                         tempTaskId = predecessor[y].from;
                     }
                     else {
@@ -27371,15 +28251,16 @@ class CriticalPath {
                                 toPredecessor = toPredecessor + ',' + predecessor[y].type;
                             }
                             else {
-                                to = to + ',' + predecessor[y].to + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                to = to + ',' + predecessor[y].to + ':' + predecessor[y].offset +
+                                    predecessor[y].offsetUnit;
                                 toPredecessor = toPredecessor + ',' + predecessor[y].type;
                             }
                         }
                     }
-                    if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) != "string") {
+                    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") {
+                    else if (!isNaN(Number(predecessor[y].to)) && typeof (taskid) === 'string') {
                         tempTaskId = predecessor[y].to;
                     }
                     else {
@@ -27392,7 +28273,8 @@ class CriticalPath {
                                 fromPredecessor = predecessor[y].type;
                             }
                             else {
-                                from = predecessor[y].from + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                from = predecessor[y].from + ':' + predecessor[y].offset +
+                                    predecessor[y].offsetUnit;
                                 fromPredecessor = predecessor[y].type;
                             }
                         }
@@ -27402,7 +28284,8 @@ class CriticalPath {
                                 fromPredecessor = fromPredecessor + ',' + predecessor[y].type;
                             }
                             else {
-                                from = from + ',' + predecessor[y].from + ':' + predecessor[y].offset + predecessor[y].offsetUnit;
+                                from = from + ',' + predecessor[y].from + ':' + predecessor[y].offset +
+                                    predecessor[y].offsetUnit;
                                 fromPredecessor = fromPredecessor + ',' + predecessor[y].type;
                             }
                         }
@@ -27529,7 +28412,8 @@ class CriticalPath {
                     }
                 }
                 // execute if the current calculated slack value is less than the previous slack value.
-                else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                else if (collection[fromTaskIdIndex]['slack'] > dateDifference &&
+                    collection[fromTaskIdIndex]['slack'] !== 0) {
                     // execute if the offset value is not given.
                     if (fromDateArray1.length <= 1) {
                         if (collection[totaskId]['slack'] + dateDifference < 0) {
@@ -27579,7 +28463,8 @@ class CriticalPath {
                         }
                     }
                     //It execute while already the slack value is set and it is higher than the datedifference. 
-                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference &&
+                        collection[fromTaskIdIndex]['slack'] !== 0) {
                         if (fromDateArray1.length <= 1) {
                             if (collection[totaskId]['slack'] + dateDifference < 0) {
                                 collection[fromTaskIdIndex]['slack'] = 0;
@@ -27607,7 +28492,8 @@ class CriticalPath {
                     if (isNullOrUndefined(collection[fromTaskIdIndex]['slack'])) {
                         collection[fromTaskIdIndex]['slack'] = dateDifference;
                     }
-                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference && collection[fromTaskIdIndex]['slack'] !== 0) {
+                    else if (collection[fromTaskIdIndex]['slack'] > dateDifference &&
+                        collection[fromTaskIdIndex]['slack'] !== 0) {
                         collection[fromTaskIdIndex]['slack'] = dateDifference;
                     }
                 }
@@ -27618,7 +28504,8 @@ class CriticalPath {
             //  calculate slack value for the task contains predecessor connection in "finish to finish".
             if (fromDataPredecessor[i] === 'FF') {
                 // execute if the previous task is from finish to start or finish to finish state.
-                if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1 || collection[totaskId]['fs'] === -1) {
+                if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1 ||
+                    collection[totaskId]['fs'] === -1) {
                     if (collection[totaskId]['fs'] === 1 || collection[totaskId]['ff'] === 1) {
                         prevTaskEnddate = toIdFlatData.endDate;
                         ffslack = collection[totaskId]['slack'];
@@ -27921,7 +28808,7 @@ class CriticalPath {
             }
             else {
                 let currentRecords = this.parent.currentViewData.filter((data) => {
-                    return (data.ganttProperties.taskId).toString() == criticalPathIds[i].toString();
+                    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) {
@@ -27935,13 +28822,13 @@ class CriticalPath {
             const columnFields = this.parent.taskFields;
             if (criticalData.parentItem) {
                 const parentRecord = this.parent.currentViewData.filter((data) => {
-                    return criticalData.parentItem.uniqueID == data.uniqueID;
+                    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']) {
+                    if (parentTaskbarElement[i].getAttribute('rowuniqueid') === criticalData['rowUniqueID']) {
                         addClass(parentTaskbarElement[i].querySelectorAll('.e-gantt-child-taskbar-inner-div'), criticalChildTaskBarInnerDiv);
                     }
                 }
@@ -28087,6 +28974,7 @@ class ContextMenu$2 {
         this.contextMenu = new ContextMenu$1({
             items: this.getMenuItems(),
             locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
             target: target,
             animationSettings: { effect: 'None' },
             select: this.contextMenuItemClick.bind(this),
@@ -28227,6 +29115,12 @@ class ContextMenu$2 {
         };
         // eslint-disable-next-line
         this.parent.trigger('actionBegin', eventArgs, (eventArgs) => {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             this.parent.chartRowsModule.splitTask(this.rowData[taskSettings.id], currentClickedDate);
         });
     }
@@ -28247,6 +29141,12 @@ class ContextMenu$2 {
             target: this.targetElement
         };
         this.parent.trigger('actionBegin', eventArgs, (eventArgs) => {
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             if (eventArgs.cancel === false) {
                 this.parent.chartRowsModule.mergeTask(this.rowData[taskSettings.id], segmentIndexes);
             }
@@ -28255,12 +29155,30 @@ class ContextMenu$2 {
     // eslint-disable-next-line
     getClickedDate(element) {
         // context menu click position
-        const ganttElementPosition = this.parent.getOffsetRect(this.parent.element);
+        let ganttElementPositionLeft;
         // task left position
-        const pageLeft = ganttElementPosition.left + this.parent.ganttChartModule.chartElement.offsetLeft +
-            this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft;
-        // difference from task start date to current click position.
-        const currentTaskDifference = this.clickedPosition - pageLeft;
+        if (this.parent.enableRtl) {
+            const box = this.parent.element.getBoundingClientRect();
+            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft ||
+                document.body.scrollLeft;
+            const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
+            ganttElementPositionLeft = box.left + scrollLeft - clientLeft;
+        }
+        else {
+            ganttElementPositionLeft = this.parent.getOffsetRect(this.parent.element).left;
+        }
+        let pageLeft;
+        let currentTaskDifference;
+        if (this.parent.enableRtl) {
+            pageLeft = Math.abs(ganttElementPositionLeft + this.parent.ganttChartModule.chartElement.offsetWidth -
+                this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft);
+            currentTaskDifference = Math.abs(this.clickedPosition - pageLeft);
+        }
+        else {
+            pageLeft = ganttElementPositionLeft + this.parent.ganttChartModule.chartElement.offsetLeft +
+                this.rowData.ganttProperties.left - this.parent.ganttChartModule.scrollElement.scrollLeft;
+            currentTaskDifference = this.clickedPosition - pageLeft;
+        }
         let splitTaskDuration = Math.ceil(currentTaskDifference / this.parent.perDayWidth);
         const startDate = this.rowData.ganttProperties.startDate;
         if (!isNullOrUndefined(this.parent.timelineSettings.bottomTier) && this.parent.timelineSettings.bottomTier.unit === 'Hour') {
@@ -28770,6 +29688,12 @@ class ExcelExport$1 {
     bindEvents() {
         this.parent.treeGrid.beforeExcelExport = (args) => {
             this.parent.trigger('beforeExcelExport', args);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
         };
         this.parent.treeGrid.excelQueryCellInfo = (args) => {
             this.parent.trigger('excelQueryCellInfo', args);
@@ -28779,6 +29703,12 @@ class ExcelExport$1 {
         };
         this.parent.treeGrid.excelExportComplete = (args) => {
             this.parent.trigger('excelExportComplete', args);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
         };
     }
 }
@@ -28961,6 +29891,12 @@ class RowDD$1 {
         if (!args.cancel) {
             args.requestType = 'beforeDrop';
             this.parent.trigger('actionBegin', args);
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.showMaskRow();
+            }
+            else {
+                this.parent.showSpinner();
+            }
             if (!args.cancel) {
                 this.dropRows(args, true); // method to update the data collections based on drop action
                 args.cancel = true;
@@ -29058,15 +29994,15 @@ class RowDD$1 {
                         }
                     }
                     if (!this.parent.enableVirtualization) {
-                        let data = gObj.flatData;
+                        const data = gObj.flatData;
                         let startIndex;
                         let endIndex;
-                        let ganttData = this.parent.dataSource;
-                        let uniqueTaskID = this.parent.taskFields.id;
+                        const ganttData = this.parent.dataSource;
+                        const uniqueTaskID = this.parent.taskFields.id;
                         if (draggedRecord.index < droppedRecord.index) {
                             startIndex = draggedRecord.index;
                             for (let i = 0; i < ganttData.length; i++) {
-                                let currentData = this.parent.currentViewData.filter(function (e) {
+                                const currentData = this.parent.currentViewData.filter(function (e) {
                                     return e[uniqueTaskID] === ganttData[i][uniqueTaskID];
                                 })[0];
                                 if (currentData && currentData.index > droppedRecord.index) {
@@ -29078,7 +30014,7 @@ class RowDD$1 {
                         else {
                             startIndex = droppedRecord.index;
                             for (let i = 0; i < ganttData.length; i++) {
-                                let currentData = this.parent.currentViewData.filter(function (e) {
+                                const currentData = this.parent.currentViewData.filter(function (e) {
                                     return e[uniqueTaskID] === ganttData[i][uniqueTaskID];
                                 })[0];
                                 if (currentData && currentData.index > draggedRecord.index) {
@@ -29091,7 +30027,7 @@ class RowDD$1 {
                             if (!isNullOrUndefined(data[i])) {
                                 data[i].index = i;
                                 if (!isNullOrUndefined(data[i].parentItem)) {
-                                    let updatedParent = data.filter((e) => {
+                                    const updatedParent = data.filter((e) => {
                                         return e.uniqueID === data[i].parentUniqueID;
                                     })[0];
                                     data[i].parentItem.index = updatedParent.index;
@@ -29169,7 +30105,7 @@ class RowDD$1 {
                     }
                     let validateRecords;
                     if (toParent.uniqueID === draggedParent.uniqueID || (draggedParent.parentItem &&
-                        toParent.uniqueID == this.parent.flatData[this.parent.ids.indexOf(draggedParent.parentItem.taskId)].uniqueID)) {
+                        toParent.uniqueID === this.parent.flatData[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++) {
@@ -29587,7 +30523,7 @@ class RowDD$1 {
                 }
                 let idx;
                 const ganttData = dataSource.length > 0 && this.parent.viewType !== 'ResourceView' ?
-                    dataSource : this.parent.flatData;
+                    dataSource : this.parent.updatedRecords;
                 for (let i = 0; i < ganttData.length; i++) {
                     if (this.parent.viewType === 'ResourceView') {
                         if (ganttData[i].ganttProperties.rowUniqueID === deletedRow.ganttProperties.rowUniqueID) {
@@ -32936,217 +33872,215 @@ class PdfGanttPredecessor {
         let childPageData;
         let parentY = 0;
         let childY = 0;
-        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';
-                            }
+        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 {
-                            if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
-                                predecessorType = 'FSType3';
-                            }
-                            else {
-                                predecessorType = 'FSType4';
-                            }
+                            predecessorType = 'FSType2';
                         }
                     }
                     else {
-                        return;
+                        if (this.parentLeft < this.childLeft && this.childLeft > (this.parentLeft + this.parentWidth + 25)) {
+                            predecessorType = 'FSType3';
+                        }
+                        else {
+                            predecessorType = 'FSType4';
+                        }
                     }
-                    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 {
+                    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';
                         }
                         else {
-                            if (this.parentLeft > this.childLeft + this.childWidth) {
-                                predecessorType = 'SFType3';
-                            }
-                            else {
-                                predecessorType = 'SFType4';
-                            }
+                            predecessorType = 'SFType2';
                         }
                     }
                     else {
-                        return;
+                        if (this.parentLeft > this.childLeft + this.childWidth) {
+                            predecessorType = 'SFType3';
+                        }
+                        else {
+                            predecessorType = 'SFType4';
+                        }
                     }
-                    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 {
+                    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';
                         }
                         else {
-                            if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
-                                predecessorType = 'FFType3';
-                            }
-                            else {
-                                predecessorType = 'FFType4';
-                            }
+                            predecessorType = 'FFType2';
                         }
                     }
                     else {
-                        return;
+                        if ((this.childLeft + this.childWidth) >= (this.parentLeft + this.parentWidth)) {
+                            predecessorType = 'FFType3';
+                        }
+                        else {
+                            predecessorType = 'FFType4';
+                        }
                     }
-                    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 {
+                    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';
                         }
                         else {
-                            if (this.parentLeft >= this.childLeft) {
-                                predecessorType = 'SSType3';
-                            }
-                            else {
-                                predecessorType = 'SSType4';
-                            }
+                            predecessorType = 'SSType2';
                         }
                     }
                     else {
-                        return;
+                        if (this.parentLeft >= this.childLeft) {
+                            predecessorType = 'SSType3';
+                        }
+                        else {
+                            predecessorType = 'SSType4';
+                        }
                     }
-                    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;
-            }
+                }
+                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;
         }
     }
     /**
@@ -33629,6 +34563,12 @@ class PdfExport {
             cancel: false
         };
         this.parent.trigger('beforePdfExport', args);
+        if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+            this.parent.showMaskRow();
+        }
+        else {
+            this.parent.showSpinner();
+        }
         if (getValue('cancel', args)) {
             /* eslint-disable-next-line */
             return new Promise((resolve, reject) => {
@@ -33660,6 +34600,12 @@ class PdfExport {
         }
         this.processExport(data, pdfExportProperties, isMultipleExport).then(() => {
             this.parent.trigger('pdfExportComplete', {});
+            if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === "Shimmer") {
+                this.parent.hideMaskRow();
+            }
+            else {
+                this.parent.hideSpinner();
+            }
             resolve(this.pdfDocument);
         });
     }
@@ -33847,5 +34793,5 @@ class VirtualScroll$1 {
  * Gantt index file
  */
 
-export { Gantt, PdfHorizontalOverflowType, parentsUntil$1 as parentsUntil, isScheduledTask, isCountRequired, getSwapKey, isRemoteData, getTaskData, updateDates, formatString, getIndex, pixelToPoint, pointToPixel, getUid$1 as getUid, load, rowDataBound, queryCellInfo, toolbarClick, keyPressed, Edit$2 as Edit, Reorder$1 as Reorder, Resize$1 as Resize, Filter$1 as Filter, Sort$1 as Sort, Dependency, Selection$1 as Selection, Toolbar$3 as Toolbar, DayMarkers, CriticalPath, ContextMenu$2 as ContextMenu, ExcelExport$1 as ExcelExport, ColumnMenu$1 as ColumnMenu, RowDD$1 as RowDD, PdfExport, VirtualScroll$1 as VirtualScroll, Column, DayWorkingTime, AddDialogFieldSettings, EditDialogFieldSettings, EditSettings, EventMarker, FilterSettings, SearchSettings, Holiday, LabelSettings, SelectionSettings, SplitterSettings, TaskFields, TimelineTierSettings, TimelineSettings, TooltipSettings, SortDescriptor, SortSettings, ResourceFields };
+export { Gantt, PdfHorizontalOverflowType, parentsUntil$1 as parentsUntil, isScheduledTask, isCountRequired, getSwapKey, isRemoteData, getTaskData, updateDates, formatString, getIndex, pixelToPoint, pointToPixel, getUid$1 as getUid, load, rowDataBound, queryCellInfo, toolbarClick, keyPressed, Edit$2 as Edit, Reorder$1 as Reorder, Resize$1 as Resize, Filter$1 as Filter, Sort$1 as Sort, Dependency, Selection$1 as Selection, Toolbar$3 as Toolbar, DayMarkers, CriticalPath, ContextMenu$2 as ContextMenu, ExcelExport$1 as ExcelExport, ColumnMenu$1 as ColumnMenu, RowDD$1 as RowDD, PdfExport, VirtualScroll$1 as VirtualScroll, Column, DayWorkingTime, AddDialogFieldSettings, EditDialogFieldSettings, EditSettings, EventMarker, FilterSettings, SearchSettings, Holiday, LabelSettings, SelectionSettings, SplitterSettings, TaskFields, TimelineTierSettings, TimelineSettings, TooltipSettings, SortDescriptor, SortSettings, ResourceFields, LoadingIndicator };
 //# sourceMappingURL=ej2-gantt.es2015.js.map