@syncfusion/ej2-gantt 20.3.61 → 20.4.38

package/src/gantt/actions/taskbar-edit.js

@@ -439,8 +439,14 @@ var TaskbarEdit = /** @class */ (function (_super) {
         var e = this.getCoordinate(event);
         if (e.pageX || e.pageY) {
             var 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;
@@ -485,23 +491,40 @@ var TaskbarEdit = /** @class */ (function (_super) {
         }
         var containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
         var 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;
         this.isMouseDragCheck();
         if (this.isMouseDragged && this.taskBarEditAction) {
-            var args = {
+            var args_1 = {
                 cancel: false,
                 requestType: 'taskbarediting',
                 taskBarEditAction: this.taskBarEditAction,
                 data: this.taskBarEditRecord
             };
             if (this.segmentIndex !== -1) {
-                args.requestType = 'mergeSegment';
+                args_1.requestType = 'mergeSegment';
             }
-            this.parent.trigger('actionBegin', args, function (arg) {
+            this.parent.trigger('actionBegin', args_1, function (arg) {
+                if (args_1.taskBarEditAction === "ConnectorPointRightDrag" || args_1.taskBarEditAction === "ConnectorPointLeftDrag"
+                    || args_1.taskBarEditAction === "LeftResizing" || args_1.taskBarEditAction === "RightResizing"
+                    || args_1.taskBarEditAction === "ProgressResizing" || args_1.taskBarEditAction === "ChildDrag" || args_1.taskBarEditAction === "ParentDrag" || args_1.taskBarEditAction === "MilestoneDrag" || args_1.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);
                 }
@@ -584,8 +607,14 @@ var TaskbarEdit = /** @class */ (function (_super) {
         var containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
         var 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;
@@ -596,8 +625,15 @@ var TaskbarEdit = /** @class */ (function (_super) {
         if ((this.taskBarEditRecord.ganttProperties.width > 3 && !(this.taskBarEditAction === 'ProgressResizing' &&
             (this.taskBarEditRecord.ganttProperties.progress === 0 || this.taskBarEditRecord.ganttProperties.progress === 100))) ||
             isConnectorLineEdit) {
-            var mouseX = this.mouseMoveX - this.parent.ganttChartModule.scrollObject.previousScroll.left +
-                containerPosition.left;
+            var 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;
+            }
             var mouseY = this.mouseMoveY - this.parent.ganttChartModule.scrollObject.previousScroll.top +
                 containerPosition.top;
             if ((mouseX + 20) >
@@ -605,6 +641,12 @@ var TaskbarEdit = /** @class */ (function (_super) {
                 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');
@@ -636,7 +678,12 @@ var TaskbarEdit = /** @class */ (function (_super) {
     TaskbarEdit.prototype.startScrollTimer = function (direction) {
         var _this = this;
         this.stopScrollTimer();
+        var leftSign = 0;
         this.scrollTimer = window.setInterval(function () {
+            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);
@@ -651,7 +698,7 @@ var TaskbarEdit = /** @class */ (function (_super) {
                 _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') {
@@ -1347,6 +1394,7 @@ var TaskbarEdit = /** @class */ (function (_super) {
      */
     TaskbarEdit.prototype.setItemPosition = function () {
         var item = this.taskBarEditRecord.ganttProperties;
+        var position = this.parent.enableRtl ? "right" : "left";
         var segment = !isNullOrUndefined(item.segments) ? item.segments[this.segmentIndex] : null;
         var width = this.taskBarEditAction === 'MilestoneDrag' || item.isMilestone ?
             this.parent.chartRowsModule.milestoneHeight : item.width;
@@ -1378,11 +1426,16 @@ var TaskbarEdit = /** @class */ (function (_super) {
                 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.style.width = (width) + 'px';
-                taskBarMainContainer.style.left = (item.left) + 'px';
                 leftLabelContainer.style.width = (item.left) + 'px';
+                taskBarMainContainer.style.setProperty(position, (item.left) + 'px');
                 if (this.taskBarEditAction === 'LeftResizing' && this.segmentIndex === 0) {
                     var parent_1 = this.taskBarEditElement.parentElement;
                     var segmentedTasks = parent_1.getElementsByClassName('e-segmented-taskbar');
@@ -1390,31 +1443,42 @@ var TaskbarEdit = /** @class */ (function (_super) {
                         var segment_4 = item.segments[i];
                         var segmentElement = segmentedTasks[i];
                         segmentElement.style.width = (segment_4.width) + 'px';
-                        segmentElement.style.left = (segment_4.left) + 'px';
+                        if (this.parent.enableRtl) {
+                            segmentElement.style.right = (segment_4.left) + 'px';
+                        }
+                        else {
+                            segmentElement.style.left = (segment_4.left) + 'px';
+                        }
                     }
                 }
                 if (!isNullOrUndefined(rightLabelContainer)) {
-                    rightLabelContainer.style.left = (item.left + width) + 'px';
+                    rightLabelContainer.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.style.left = (item.left - (width / 2)) + 'px';
+                taskBarMainContainer.style.setProperty(position, (item.left - (width / 2)) + 'px');
                 leftLabelContainer.style.width = (item.left - (width / 2)) + 'px';
                 if (!isNullOrUndefined(rightLabelContainer)) {
-                    rightLabelContainer.style.left = (item.left + (width / 2)) + 'px';
+                    rightLabelContainer.style.setProperty(position, (item.left + (width / 2)) + 'px');
                 }
             }
             else if (this.taskBarEditAction === 'ProgressResizing') {
                 if (this.segmentIndex === -1) {
-                    traceChildTaskBar.style.left = (item.left + item.progressWidth - 10) + 'px';
+                    traceChildTaskBar.style.setProperty(position, (item.left + item.progressWidth - 10) + 'px');
                     if (!isNullOrUndefined(traceChildProgressBar)) {
                         traceChildProgressBar.style.width = item.progressWidth + 'px';
                         traceChildProgressBar.style.borderBottomRightRadius = this.progressBorderRadius + 'px';
                         traceChildProgressBar.style.borderTopRightRadius = this.progressBorderRadius + 'px';
-                        childProgressResizer.style.left = item.progressWidth - 8 + 'px';
+                        var width_1 = this.parent.enableRtl ? item.progressWidth + 8 : item.progressWidth - 8;
+                        childProgressResizer.style.setProperty(position, width_1 + 'px');
                     }
                 }
                 else {
@@ -1422,16 +1486,17 @@ var TaskbarEdit = /** @class */ (function (_super) {
                     traceChildProgressBar.style.width = item.segments[this.segmentIndex].progressWidth + 'px';
                     traceChildProgressBar.style.borderBottomRightRadius = this.progressBorderRadius + 'px';
                     traceChildProgressBar.style.borderTopRightRadius = this.progressBorderRadius + 'px';
-                    childProgressResizer.style.left = item.segments[this.segmentIndex].progressWidth - 8 + 'px';
+                    var width_2 = this.parent.enableRtl ? item.segments[this.segmentIndex].progressWidth + 8 : item.segments[this.segmentIndex].progressWidth - 8;
+                    childProgressResizer.style.setProperty(position, width_2 + 'px');
                 }
             }
             else if (this.taskBarEditAction === 'RightResizing' && !isNullOrUndefined(traceChildTaskBar)) {
                 traceChildTaskBar.style.width = (width) + 'px';
                 if (!isNullOrUndefined(traceChildProgressBar)) {
                     traceChildProgressBar.style.width = (item.progressWidth) + 'px';
-                    taskBarRightResizer.style.left = rightResizer + 'px';
+                    taskBarRightResizer.style.setProperty(position, rightResizer + 'px');
                     if (!isNullOrUndefined(childProgressResizer)) {
-                        childProgressResizer.style.left = (item.progressWidth - 10) + 'px';
+                        childProgressResizer.style.setProperty(position, item.progressWidth - 10 + 'px');
                     }
                 }
             }
@@ -1445,27 +1510,27 @@ var TaskbarEdit = /** @class */ (function (_super) {
             }
             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) && !segmentedTaskBarContainer) {
                     traceChildTaskBar.style.width = (width) + 'px';
                 }
                 if (!isNullOrUndefined(traceChildProgressBar)) {
-                    taskBarRightResizer.style.left = rightResizer + 'px';
+                    taskBarRightResizer.style.setProperty(position, rightResizer + 'px');
                     traceChildProgressBar.style.width = (item.progressWidth) + 'px';
                     if (!isNullOrUndefined(childProgressResizer)) {
-                        childProgressResizer.style.left = item.progressWidth - 10 + 'px';
+                        childProgressResizer.style.setProperty(position, item.progressWidth - 10 + 'px');
                     }
                 }
                 if (segmentedTaskBarContainer) {
-                    taskBarRightResizer.style.left = rightResizer + 'px';
+                    taskBarRightResizer.style.setProperty(position, rightResizer + 'px');
                     traceChildProgressBar.style.width = (segment.progressWidth) + 'px';
                     if (!isNullOrUndefined(childProgressResizer)) {
-                        childProgressResizer.style.left = segment.progressWidth - 10 + 'px';
+                        childProgressResizer.style.setProperty(position, segment.progressWidth - 10 + 'px');
                     }
                 }
             }
@@ -1687,25 +1752,51 @@ var TaskbarEdit = /** @class */ (function (_super) {
         var y2 = this.mouseMoveY;
         var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
         var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-        var transform = 'rotate(' + angle + 'deg)';
+        var transform = 'rotate(' + (this.parent.enableRtl ? -angle : angle) + 'deg)';
         var left;
+        var 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);
+            }
         }
         var 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: cls.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);
     };
     /**
@@ -1790,19 +1881,19 @@ var TaskbarEdit = /** @class */ (function (_super) {
         var element = target;
         var 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)) {
@@ -1826,6 +1917,12 @@ var TaskbarEdit = /** @class */ (function (_super) {
         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) {

package/src/gantt/actions/toolbar.js

@@ -54,6 +54,14 @@ var Toolbar = /** @class */ (function () {
                             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';
+                    }
+                }
             }
             var searchLocalText = this.parent.localeObj.getConstant('search');
             if (this.parent.isAdaptive) {
@@ -85,6 +93,7 @@ var Toolbar = /** @class */ (function () {
         var items = this.getItems();
         this.toolbar = new NavToolbar({
             items: items,
+            enableRtl: this.parent.enableRtl,
             clicked: this.toolbarClickHandler.bind(this),
             height: this.parent.isAdaptive ? 48 : 'auto'
         });
@@ -103,6 +112,7 @@ var Toolbar = /** @class */ (function () {
             this.searchElement = this.element.querySelector('#' + this.parent.element.id + '_searchbar');
             var textObj = new TextBox({
                 placeholder: this.parent.localeObj.getConstant('search'),
+                enableRtl: this.parent.enableRtl,
                 floatLabelType: 'Never',
                 showClearButton: true
             });
@@ -221,7 +231,16 @@ var Toolbar = /** @class */ (function () {
         var _this = this;
         var gObj = this.parent;
         var 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(events.toolbarClick, arg, function (args) {
             if (args.cancel) {
                 return;
@@ -423,7 +442,8 @@ var Toolbar = /** @class */ (function () {
             else {
                 disableItems.push(gID + '_update', gID + '_cancel');
                 for (var 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);
                     }
                 }

package/src/gantt/base/date-processor.js

@@ -286,7 +286,7 @@ var DateProcessor = /** @class */ (function () {
             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;
             }

package/src/gantt/base/gantt-chart.js

@@ -93,6 +93,21 @@ var GanttChart = /** @class */ (function () {
                 this.parent.predecessorModule.createConnectorLinesCollection();
             }
             this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
+            for (var 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) {
                 var crtiticalModule = this.parent.criticalPathModule;
                 this.parent.criticalPathModule.criticalConnectorLine(crtiticalModule.criticalPathCollection, crtiticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, crtiticalModule.predecessorCollectionTaskIds);
@@ -156,11 +171,13 @@ var GanttChart = /** @class */ (function () {
         for (var i = 0; i < rangeCollection.length; i++) {
             var height = this.getRangeHeight(currentRecord);
             var leftDiv = createElement('div', {
-                className: cls.rangeChildContainer + ' ' + 'e-leftarc', styles: "left:" + rangeCollection[i].left + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px;\n                height: " + (height + 1) + "px; border-right: 0px"
+                className: cls.rangeChildContainer + ' ' + 'e-leftarc', styles: (this.parent.enableRtl ? 'right:' : 'left:') +
+                    ((this.parent.enableRtl ? rangeCollection[i].left + rangeCollection[i].width - 5 : rangeCollection[i].left) + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px;\n                height: " + (height + 1) + "px; border-right: 0px")
             });
             var rightDiv = createElement('div', {
                 className: cls.rangeChildContainer + ' ' + 'e-rightarc',
-                styles: "left:" + (rangeCollection[i].left + rangeCollection[i].width - 5) + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px; height: " + (height + 1) + "px;\n                border-left: 0px"
+                styles: (this.parent.enableRtl ? 'right:' : 'left:') + ((this.parent.enableRtl ? rangeCollection[i].left :
+                    rangeCollection[i].left + rangeCollection[i].width - 5) + "px;\n                top: " + Math.floor((this.parent.rowHeight - this.parent.chartRowsModule.taskBarHeight) / 2) + "px; height: " + (height + 1) + "px;\n                border-left: 0px")
             });
             parentDiv.appendChild(leftDiv);
             parentDiv.appendChild(rightDiv);
@@ -175,6 +192,10 @@ var GanttChart = /** @class */ (function () {
     GanttChart.prototype.renderTimelineContainer = function () {
         this.chartTimelineContainer =
             createElement('div', { className: cls.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);
     };
@@ -347,7 +368,7 @@ var GanttChart = /** @class */ (function () {
         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();
     };
@@ -405,6 +426,13 @@ var GanttChart = /** @class */ (function () {
         }
         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');

package/src/gantt/base/gantt-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, createElement, Complex, addClass, removeClass, Event, EmitType, formatUnit, Browser } from '@syncfusion/ej2-base';import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, L10n, ModuleDeclaration, EventHandler } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEvents, KeyboardEventArgs, Collection, append, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner, Dialog } from '@syncfusion/ej2-popups';import { RowDragEventArgs, GridColumn } from '@syncfusion/ej2-grids';import { TaskProcessor } from './task-processor';import { GanttChart } from './gantt-chart';import { Timeline } from '../renderer/timeline';import { GanttTreeGrid } from './tree-grid';import { Toolbar } from '../actions/toolbar';import { CriticalPath } from '../actions/critical-path';import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs } from './interface';import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';import { TaskFieldsModel, TimelineSettingsModel, SplitterSettingsModel, SortSettings, SortSettingsModel } from '../models/models';import { EventMarkerModel, AddDialogFieldSettingsModel, EditDialogFieldSettingsModel, EditSettingsModel } from '../models/models';import { HolidayModel, DayWorkingTimeModel, FilterSettingsModel, SelectionSettingsModel } from '../models/models';import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings, LabelSettingsModel } from '../models/models';import { SearchSettingsModel, SearchSettings, ResourceFields, ResourceFieldsModel } from '../models/models';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { DateProcessor } from './date-processor';import { ChartRows } from '../renderer/chart-rows';import { Dependency } from '../actions/dependency';import * as cls from './css-constants';import { Query, DataManager } from '@syncfusion/ej2-data';import { Column, ColumnModel } from '../models/column';import { TreeGrid, FilterSettingsModel as TreeGridFilterSettingModel } from '@syncfusion/ej2-treegrid';import { Sort } from '../actions/sort';import { CellSelectEventArgs, ISelectedCell, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { CellDeselectEventArgs, IIndex, FailureEventArgs } from '@syncfusion/ej2-grids';import { HeaderCellInfoEventArgs, ColumnMenuClickEventArgs, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuItemModel, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { RowDD } from '../actions/rowdragdrop';import { Filter } from '../actions/filter';import { PageEventArgs, FilterEventArgs, SortEventArgs, ResizeArgs, ColumnDragEventArgs, getActualProperties } from '@syncfusion/ej2-grids';import { RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';import { ConnectorLine } from '../renderer/connector-line';import { ConnectorLineEdit } from '../actions/connector-line-edit';import { Edit } from '../actions/edit';import { Splitter } from './splitter';import { ResizeEventArgs, ResizingEventArgs } from '@syncfusion/ej2-layouts';import { TooltipSettingsModel } from '../models/tooltip-settings-model';import { Tooltip } from '../renderer/tooltip';import { ToolbarItem, ColumnMenuItem, RowPosition, DurationUnit, SortDirection } from './enum';import { GridLine, ContextMenuItem, ScheduleMode, ViewType } from './enum';import { Selection } from '../actions/selection';import { ExcelExport } from '../actions/excel-export';import { DayMarkers } from '../actions/day-markers';import { ContextMenu } from './../actions/context-menu';import { RowSelectingEventArgs } from './interface';import { ContextMenuOpenEventArgs as CMenuOpenEventArgs, ContextMenuClickEventArgs as CMenuClickEventArgs } from './interface';import { ColumnMenu } from '../actions/column-menu';import { ITaskbarClickEventArgs, RecordDoubleClickEventArgs, IMouseMoveEventArgs } from './interface';import { PdfExport } from '../actions/pdf-export';import { WorkUnit, TaskType } from './enum';import { FocusModule } from '../actions/keyboard';import { VirtualScroll } from '../actions/virtual-scroll';import { isCountRequired } from './utils';import { TaskbarEdit } from '../actions/taskbar-edit';
+import { Component, createElement, Complex, addClass, removeClass, Event, EmitType, formatUnit, Browser, closest } from '@syncfusion/ej2-base';import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, L10n, ModuleDeclaration, EventHandler } from '@syncfusion/ej2-base';import { isNullOrUndefined, KeyboardEvents, KeyboardEventArgs, Collection, append, remove } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner, Dialog } from '@syncfusion/ej2-popups';import { RowDragEventArgs, GridColumn} from '@syncfusion/ej2-grids';import { TaskProcessor } from './task-processor';import { GanttChart } from './gantt-chart';import { Timeline } from '../renderer/timeline';import { GanttTreeGrid } from './tree-grid';import { Toolbar } from '../actions/toolbar';import { CriticalPath } from '../actions/critical-path';import { IGanttData, IWorkingTimeRange, IQueryTaskbarInfoEventArgs, BeforeTooltipRenderEventArgs, IDependencyEventArgs } from './interface';import { DataStateChangeEventArgs } from '@syncfusion/ej2-treegrid';import { ITaskbarEditedEventArgs, IParent, ITaskData, PdfColumnHeaderQueryCellInfoEventArgs } from './interface';import { ICollapsingEventArgs, CellEditArgs, PdfQueryTimelineCellInfoEventArgs } from './interface';import { IConnectorLineObject, IValidateArgs, IValidateMode, ITaskAddedEventArgs, IKeyPressedEventArgs } from './interface';import { PdfExportProperties, ISplitterResizedEventArgs } from './interface';import { ZoomEventArgs, IActionBeginEventArgs, CellSelectingEventArgs, RowDeselectEventArgs, PdfQueryCellInfoEventArgs } from './interface';import { ITimeSpanEventArgs, ZoomTimelineSettings, QueryCellInfoEventArgs, RowDataBoundEventArgs, RowSelectEventArgs } from './interface';import { TaskFieldsModel, TimelineSettingsModel, SplitterSettingsModel, SortSettings, SortSettingsModel } from '../models/models';import { EventMarkerModel, AddDialogFieldSettingsModel, EditDialogFieldSettingsModel, EditSettingsModel } from '../models/models';import { HolidayModel, DayWorkingTimeModel, FilterSettingsModel, SelectionSettingsModel,LoadingIndicatorModel, LoadingIndicator } from '../models/models';import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings, LabelSettingsModel } from '../models/models';import { SearchSettingsModel, SearchSettings, ResourceFields, ResourceFieldsModel } from '../models/models';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { DateProcessor } from './date-processor';import { ChartRows } from '../renderer/chart-rows';import { Dependency } from '../actions/dependency';import * as cls from './css-constants';import { Query, DataManager } from '@syncfusion/ej2-data';import { Column, ColumnModel } from '../models/column';import { TreeGrid, FilterSettingsModel as TreeGridFilterSettingModel } from '@syncfusion/ej2-treegrid';import { Sort } from '../actions/sort';import { CellSelectEventArgs, ISelectedCell, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { CellDeselectEventArgs, IIndex, FailureEventArgs } from '@syncfusion/ej2-grids';import { HeaderCellInfoEventArgs, ColumnMenuClickEventArgs, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuItemModel, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { RowDD } from '../actions/rowdragdrop';import { Filter } from '../actions/filter';import { PageEventArgs, FilterEventArgs, SortEventArgs, ResizeArgs, ColumnDragEventArgs, getActualProperties } from '@syncfusion/ej2-grids';import { RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';import { ConnectorLine } from '../renderer/connector-line';import { ConnectorLineEdit } from '../actions/connector-line-edit';import { Edit } from '../actions/edit';import { Splitter } from './splitter';import { ResizeEventArgs, ResizingEventArgs } from '@syncfusion/ej2-layouts';import { TooltipSettingsModel } from '../models/tooltip-settings-model';import { Tooltip } from '../renderer/tooltip';import { ToolbarItem, ColumnMenuItem, RowPosition, DurationUnit, SortDirection } from './enum';import { GridLine, ContextMenuItem, ScheduleMode, ViewType } from './enum';import { Selection } from '../actions/selection';import { ExcelExport } from '../actions/excel-export';import { DayMarkers } from '../actions/day-markers';import { ContextMenu } from './../actions/context-menu';import { RowSelectingEventArgs } from './interface';import { ContextMenuOpenEventArgs as CMenuOpenEventArgs, ContextMenuClickEventArgs as CMenuClickEventArgs } from './interface';import { ColumnMenu } from '../actions/column-menu';import { ITaskbarClickEventArgs, RecordDoubleClickEventArgs, IMouseMoveEventArgs } from './interface';import { PdfExport } from '../actions/pdf-export';import { WorkUnit, TaskType } from './enum';import { FocusModule } from '../actions/keyboard';import { VirtualScroll } from '../actions/virtual-scroll';import { isCountRequired } from './utils';import { TaskbarEdit } from '../actions/taskbar-edit';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -28,6 +28,20 @@ export interface GanttModel extends ComponentModel{
      */
     disableHtmlEncode?: boolean;
 
+    /**
+     * Configures the loading indicator of the Gantt Chart. Specifies whether to display spinner or shimmer effect during the waiting time on any actions performed in Gantt Chart.
+     *
+     * @default {indicatorType: 'Spinner'}
+     */
+    loadingIndicator?: LoadingIndicatorModel;
+
+    /**
+     * Specifies whether to display shimmer effect during scrolling action in virtual scrolling feature. If disabled, spinner is shown instead of shimmer effect.
+     *
+     * @default true
+     */
+    enableVirtualMaskRow?: boolean;
+
     /**
      * Enables or disables the focusing the task bar on click action.
      *
@@ -156,6 +170,8 @@ export interface GanttModel extends ComponentModel{
 
     /**
      * Configures the grid lines in tree grid and gantt chart.
+     * 
+     *  @default 'Horizontal'
      */
     gridLines?: GridLine;
 
@@ -188,6 +204,8 @@ export interface GanttModel extends ComponentModel{
 
     /**
      * Defines the baseline bar color.
+     * 
+     *  @default null
      */
     baselineColor?: string;
 
@@ -273,7 +291,8 @@ export interface GanttModel extends ComponentModel{
 
     /**
      * Defines height of taskbar element in Gantt.
-     *
+     * 
+     * @default null
      * @aspType int?
      */
     taskbarHeight?: number;
@@ -393,6 +412,8 @@ export interface GanttModel extends ComponentModel{
 
     /**
      * Defines the view type of the Gantt.
+     * 
+     *  @default 'ProjectView'
      */
     viewType?: ViewType;
 
@@ -566,6 +587,8 @@ export interface GanttModel extends ComponentModel{
 
     /**
      * Specifies task schedule mode for a project.
+     * 
+     * @default 'Auto'
      */
     taskMode?: ScheduleMode;