@syncfusion/ej2-gantt 20.3.61 → 20.4.40

package/src/gantt/models/loading-indicator.js

@@ -0,0 +1,34 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__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;
+};
+import { ChildProperty, Property } from "@syncfusion/ej2-base";
+/**
+ * Configures the Loading Indicator of the Gantt.
+ */
+var LoadingIndicator = /** @class */ (function (_super) {
+    __extends(LoadingIndicator, _super);
+    function LoadingIndicator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Spinner')
+    ], LoadingIndicator.prototype, "indicatorType", void 0);
+    return LoadingIndicator;
+}(ChildProperty));
+export { LoadingIndicator };

package/src/gantt/models/models.d.ts

@@ -34,3 +34,5 @@ export * from './sort-settings';
 export * from './sort-settings-model';
 export * from './resource-fields';
 export * from './resource-fields-model';
+export * from './loading-indicator';
+export * from './loading-indicator-model';

package/src/gantt/models/models.js

@@ -18,3 +18,4 @@ export * from './timeline-settings';
 export * from './tooltip-settings';
 export * from './sort-settings';
 export * from './resource-fields';
+export * from './loading-indicator';

package/src/gantt/renderer/chart-rows.js

@@ -113,7 +113,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getIndicatorNode = function (indicator) {
         var templateString = '<label class="' + cls.label + ' ' + cls.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);
     };
     /**
@@ -139,6 +139,13 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getChildTaskbarNode = function (i, rootElement) {
         var childTaskbarNode = null;
         var data = this.templateData;
+        var 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']);
         }
@@ -181,14 +188,15 @@ var ChartRows = /** @class */ (function (_super) {
                 }
                 if (isNaN(parseInt(labelString))) {
                     taskLabel = '<span class="' + cls.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 = '<span class="' + cls.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>';
@@ -200,17 +208,17 @@ var ChartRows = /** @class */ (function (_super) {
                 (data.ganttProperties.startDate && !data.ganttProperties.endDate && !data.ganttProperties.duration) ? ('<div class="' + cls.childProgressBarInnerDiv + ' ' + cls.traceChildTaskBar + ' ' +
                     cls.unscheduledTaskbarLeft + ' ' + (data.ganttProperties.isAutoSchedule ?
                     '' : cls.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="' + cls.childProgressBarInnerDiv + ' ' + cls.traceChildTaskBar + ' ' +
                             cls.unscheduledTaskbarRight + ' ' + (data.ganttProperties.isAutoSchedule ?
                             '' : cls.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="' + cls.childProgressBarInnerDiv + ' ' + cls.traceChildTaskBar + ' ' +
                                 cls.unscheduledTaskbar + ' ' + (data.ganttProperties.isAutoSchedule ?
                                 '' : cls.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) &&
@@ -238,6 +246,13 @@ var ChartRows = /** @class */ (function (_super) {
                 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;
     };
     ChartRows.prototype.splitTaskbar = function (data, labelString) {
@@ -257,7 +272,7 @@ var ChartRows = /** @class */ (function (_super) {
             //split taskbar
             '<div class="' + cls.childTaskBarInnerDiv + ' ' + segmentPosition + ' ' + cls.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() +
@@ -265,7 +280,7 @@ var ChartRows = /** @class */ (function (_super) {
                 '<div class="' + cls.childProgressBarInnerDiv + ' ' + cls.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
@@ -282,19 +297,20 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getSplitTaskbarLeftResizerNode = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.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;
     };
     ChartRows.prototype.getSplitTaskbarRightResizerNode = function (segment) {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + cls.taskBarRightResizer + ' ' + cls.icon + '"' +
-            ' style="left:' + (segment.width + rResizerLeft) + 'px;' +
+            ' style="' + (this.parent.enableRtl ? 'right:' : 'left:') + (segment.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return template;
     };
     ChartRows.prototype.getSplitProgressResizerNode = function (segment) {
+        var width = this.parent.enableRtl ? (segment.progressWidth + 8) : (segment.progressWidth - 6);
         var template = '<div class="' + cls.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="' + cls.progressBarHandler + '"' +
             '><div class="' + cls.progressHandlerElement + '"></div>' +
             '<div class="' + cls.progressBarHandlerAfter + '"></div></div>';
@@ -424,6 +440,12 @@ var ChartRows = /** @class */ (function (_super) {
             }
         }
         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);
     };
@@ -628,7 +650,7 @@ var ChartRows = /** @class */ (function (_super) {
     ChartRows.prototype.getTaskBaselineNode = function () {
         var data = this.templateData;
         var template = '<div class="' + cls.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);
@@ -643,7 +665,7 @@ var ChartRows = /** @class */ (function (_super) {
         var data = this.templateData;
         var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         var template = '<div class="' + cls.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="' + cls.baselineMilestoneDiv + '">' + '<div class="' + cls.baselineMilestoneDiv +
             ' ' + cls.baselineMilestoneTop + '"  ' +
@@ -693,6 +715,10 @@ var ChartRows = /** @class */ (function (_super) {
             }
             leftLabelNode[0].appendChild([].slice.call(leftLabelTemplateNode)[0]);
         }
+        if (this.parent.enableRtl) {
+            leftLabelNode[0].style.paddingLeft = '25px';
+            leftLabelNode[0].style.paddingRight = '0px';
+        }
         return leftLabelNode;
     };
     ChartRows.prototype.getLableText = function (labelString, labelDiv) {
@@ -739,6 +765,10 @@ var ChartRows = /** @class */ (function (_super) {
             }
             rightLabelNode[0].appendChild([].slice.call(rightLabelTemplateNode)[0]);
         }
+        if (this.parent.enableRtl) {
+            rightLabelNode[0].style.marginLeft = '0px';
+            rightLabelNode[0].style.paddingRight = '25px';
+        }
         return rightLabelNode;
     };
     ChartRows.prototype.getManualTaskbar = function () {
@@ -758,17 +788,18 @@ var ChartRows = /** @class */ (function (_super) {
                 taskbarHeight * 2 + 'px;border-left-width:' + taskbarHeight / 5 +
                 'px; border-bottom:' + taskbarHeight / 5 + 'px solid transparent;"></div>');
         var template = '<div class="' + cls.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>' : '');
-        var milestoneTemplate = '<div class="' + cls.manualParentMilestone + '" style="position:absolute;left:' +
+        var milestoneTemplate = '<div class="' + cls.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="' + cls.manualParentMilestoneTop + '" style="border-right-width:' +
@@ -829,7 +860,7 @@ var ChartRows = /** @class */ (function (_super) {
                 }
                 if (isNaN(parseInt(labelString))) {
                     labelDiv = '<span class="' + cls.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>';
@@ -867,6 +898,13 @@ var ChartRows = /** @class */ (function (_super) {
             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;
     };
     /**
@@ -962,35 +1000,36 @@ var ChartRows = /** @class */ (function (_super) {
             ((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);
     };
     ChartRows.prototype.rightLabelContainer = function () {
         var template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? cls.rightLabelTempContainer :
-            cls.rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
+            cls.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);
     };
     ChartRows.prototype.childTaskbarLeftResizer = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.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);
     };
     ChartRows.prototype.childTaskbarRightResizer = function () {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + cls.taskBarRightResizer + ' ' + cls.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);
     };
     ChartRows.prototype.childTaskbarProgressResizer = function () {
+        var width = this.parent.enableRtl ? (this.templateData.ganttProperties.progressWidth + 8) : (this.templateData.ganttProperties.progressWidth - 6);
         var template = '<div class="' + cls.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="' + cls.progressBarHandler + '"' +
             '><div class="' + cls.progressHandlerElement + '"></div>' +
             '<div class="' + cls.progressBarHandlerAfter + '"></div></div>';
@@ -1012,7 +1051,7 @@ var ChartRows = /** @class */ (function (_super) {
             ((data.ganttProperties.isMilestone) ? ('margin-top:' + pointerTop + 'px;left:' + mileStoneLeft +
                 'px;') : (marginTop + ';left:' + pointerLeft + 'px;')) + '">' +
             '<div class="' + cls.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);
     };
@@ -1245,6 +1284,7 @@ var ChartRows = /** @class */ (function (_super) {
             }
             this.parent.ganttChartModule.renderRangeContainer(this.parent.currentViewData);
         }
+        this.parent.ganttChartModule.updateLastRowBottomWidth();
     };
     /**
      * To render taskbars.
@@ -1285,8 +1325,14 @@ var ChartRows = /** @class */ (function (_super) {
         else {
             for (var i = 0; i < this.parent.currentViewData.length; i++) {
                 var 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);
+                    }
                 }
                 var tRow = this.getGanttChartRow(i, tempTemplateData);
                 this.ganttChartTableBody.appendChild(tRow);
@@ -1330,7 +1376,7 @@ var ChartRows = /** @class */ (function (_super) {
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
         var 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) {
@@ -1347,9 +1393,9 @@ var ChartRows = /** @class */ (function (_super) {
             }
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
-                taskBaselineTemplateNode = ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
+                taskBaselineTemplateNode = ((this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.baselineEndDate.getTime()) || ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
                     && (!isNullOrUndefined(this.templateData.ganttProperties.baselineEndDate) && !isNullOrUndefined(this.templateData.ganttProperties.endDate) && (this.templateData.ganttProperties.baselineEndDate.toLocaleDateString() === this.templateData.ganttProperties.endDate.toLocaleDateString())) &&
-                    this.templateData.ganttProperties.isMilestone)
+                    this.templateData.ganttProperties.isMilestone))
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
@@ -1360,9 +1406,9 @@ var ChartRows = /** @class */ (function (_super) {
             }
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
-                taskBaselineTemplateNode = ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
+                taskBaselineTemplateNode = ((this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.baselineEndDate.getTime()) || ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
                     && (!isNullOrUndefined(this.templateData.ganttProperties.baselineEndDate) && !isNullOrUndefined(this.templateData.ganttProperties.endDate) && (this.templateData.ganttProperties.baselineEndDate.toLocaleDateString() === this.templateData.ganttProperties.endDate.toLocaleDateString())) &&
-                    this.templateData.ganttProperties.isMilestone)
+                    this.templateData.ganttProperties.isMilestone))
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
@@ -1408,13 +1454,13 @@ var ChartRows = /** @class */ (function (_super) {
             }
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
-                taskBaselineTemplateNode = ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
+                taskBaselineTemplateNode = ((this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.baselineEndDate.getTime()) || ((!isNullOrUndefined(this.templateData.ganttProperties.baselineStartDate) && !isNullOrUndefined(this.templateData.ganttProperties.startDate) && (this.templateData.ganttProperties.baselineStartDate.getTime() === this.templateData.ganttProperties.startDate.getTime()))
                     && (!isNullOrUndefined(this.templateData.ganttProperties.baselineEndDate) && !isNullOrUndefined(this.templateData.ganttProperties.endDate) && (this.templateData.ganttProperties.baselineEndDate.toLocaleDateString() === this.templateData.ganttProperties.endDate.toLocaleDateString())) &&
-                    this.templateData.ganttProperties.isMilestone)
+                    this.templateData.ganttProperties.isMilestone))
                     ? 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) {
             var connectorLineRightNode = this.getRightPointNode();
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineRightNode)[0]);
         }
@@ -1510,6 +1556,10 @@ var ChartRows = /** @class */ (function (_super) {
         var taskbarElement = !isNullOrUndefined(data.ganttProperties.segments) && data.ganttProperties.segments.length > 0 ? trElement :
             trElement.querySelector('.' + cls.taskBarMainContainer);
         var rowElement;
+        var segmentRowElement;
+        if (data.ganttProperties.segments && data.ganttProperties.segments.length > 0) {
+            segmentRowElement = trElement.parentElement.parentElement.parentElement;
+        }
         var triggerTaskbarElement;
         var args = {
             data: data,
@@ -1522,7 +1572,8 @@ var ChartRows = /** @class */ (function (_super) {
             args.milestoneColor = taskbarElement.querySelector(classCollections[0]) ?
                 getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderBottomColor : null;
             args.baselineColor = trElement.querySelector(classCollections[1]) ?
-                getComputedStyle(trElement.querySelector(classCollections[1])).borderBottomColor : null;
+                getComputedStyle(trElement.querySelector(classCollections[1])).borderBottomColor :
+                (trElement.querySelector('.' + cls.baselineBar) ? getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor : null);
         }
         else {
             var childTask = taskbarElement.querySelector(classCollections[0]);
@@ -1539,17 +1590,33 @@ var ChartRows = /** @class */ (function (_super) {
                     getComputedStyle(taskbarElement.querySelector(classCollections[1])).backgroundColor;
             // args.progressBarBorderColor = taskbarElement.querySelector(progressBarClass) ?
             //     getComputedStyle(taskbarElement.querySelector(progressBarClass)).borderColor : null;
-            args.baselineColor = trElement.querySelector('.' + cls.baselineBar) ?
-                getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor : null;
+            if (segmentRowElement) {
+                args.baselineColor = segmentRowElement.querySelector('.' + cls.baselineBar) ?
+                    getComputedStyle(segmentRowElement.querySelector('.' + cls.baselineBar)).backgroundColor : null;
+            }
+            else {
+                args.baselineColor = trElement.querySelector('.' + cls.baselineBar) ?
+                    getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor : null;
+            }
             args.taskLabelColor = taskbarElement.querySelector('.' + cls.taskLabel) ?
                 getComputedStyle(taskbarElement.querySelector('.' + cls.taskLabel)).color : null;
         }
-        args.rightLabelColor = trElement.querySelector('.' + cls.rightLabelContainer) &&
-            (trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label) ?
-            getComputedStyle((trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label)).color : null;
-        args.leftLabelColor = trElement.querySelector('.' + cls.leftLabelContainer) &&
-            (trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label) ?
-            getComputedStyle((trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label)).color : null;
+        if (segmentRowElement) {
+            args.rightLabelColor = segmentRowElement.querySelector('.' + cls.rightLabelContainer) &&
+                (segmentRowElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label) ?
+                getComputedStyle((segmentRowElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label)).color : null;
+            args.leftLabelColor = segmentRowElement.querySelector('.' + cls.leftLabelContainer) &&
+                (segmentRowElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label) ?
+                getComputedStyle((segmentRowElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label)).color : null;
+        }
+        else {
+            args.rightLabelColor = trElement.querySelector('.' + cls.rightLabelContainer) &&
+                (trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label) ?
+                getComputedStyle((trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label)).color : null;
+            args.leftLabelColor = trElement.querySelector('.' + cls.leftLabelContainer) &&
+                (trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label) ?
+                getComputedStyle((trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label)).color : null;
+        }
         this.parent.trigger('queryTaskbarInfo', args, function (taskbarArgs) {
             _this.updateQueryTaskbarInfoArgs(taskbarArgs, rowElement, triggerTaskbarElement);
         });
@@ -1567,6 +1634,10 @@ var ChartRows = /** @class */ (function (_super) {
         var trElement = args.rowElement;
         var taskbarElement = args.taskbarElement;
         var classCollections = this.getClassName(args);
+        var segmentRowElement;
+        if (args.data.ganttProperties.segments && args.data.ganttProperties.segments.length > 0) {
+            segmentRowElement = trElement.parentElement.parentElement.parentElement;
+        }
         if (args.taskbarType === 'Milestone') {
             if (taskbarElement.querySelector(classCollections[0]) &&
                 getComputedStyle(taskbarElement.querySelector(classCollections[0])).borderBottomColor !== args.milestoneColor) {
@@ -1578,6 +1649,10 @@ var ChartRows = /** @class */ (function (_super) {
                 trElement.querySelector(classCollections[1]).style.borderBottomColor = args.baselineColor;
                 trElement.querySelector('.' + cls.baselineMilestoneBottom).style.borderTopColor = args.baselineColor;
             }
+            if (trElement.querySelector('.' + cls.baselineBar) &&
+                getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).borderTopColor !== args.baselineColor) {
+                trElement.querySelector('.' + cls.baselineBar).style.backgroundColor = args.baselineColor;
+            }
         }
         else {
             if (taskbarElement.querySelector(classCollections[0]) &&
@@ -1612,20 +1687,42 @@ var ChartRows = /** @class */ (function (_super) {
                 getComputedStyle(taskbarElement.querySelector('.' + cls.taskLabel)).color !== args.taskLabelColor) {
                 taskbarElement.querySelector('.' + cls.taskLabel).style.color = args.taskLabelColor;
             }
-            if (trElement.querySelector('.' + cls.baselineBar) &&
-                getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor !== args.baselineColor) {
-                trElement.querySelector('.' + cls.baselineBar).style.backgroundColor = args.baselineColor;
+            if (segmentRowElement) {
+                if (segmentRowElement.querySelector('.' + cls.baselineBar) &&
+                    getComputedStyle(segmentRowElement.querySelector('.' + cls.baselineBar)).backgroundColor !== args.baselineColor) {
+                    segmentRowElement.querySelector('.' + cls.baselineBar).style.backgroundColor = args.baselineColor;
+                }
+            }
+            else {
+                if (trElement.querySelector('.' + cls.baselineBar) &&
+                    getComputedStyle(trElement.querySelector('.' + cls.baselineBar)).backgroundColor !== args.baselineColor) {
+                    trElement.querySelector('.' + cls.baselineBar).style.backgroundColor = args.baselineColor;
+                }
             }
         }
-        if (trElement.querySelector('.' + cls.leftLabelContainer) &&
-            (trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label) &&
-            getComputedStyle((trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label)).color !== args.leftLabelColor) {
-            (trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label).style.color = args.leftLabelColor;
+        if (segmentRowElement) {
+            if (segmentRowElement.querySelector('.' + cls.leftLabelContainer) &&
+                (segmentRowElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label) &&
+                getComputedStyle((segmentRowElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label)).color !== args.leftLabelColor) {
+                (segmentRowElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label).style.color = args.leftLabelColor;
+            }
+            if (segmentRowElement.querySelector('.' + cls.rightLabelContainer) &&
+                (segmentRowElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label) &&
+                getComputedStyle((segmentRowElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label)).color !== args.rightLabelColor) {
+                (segmentRowElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label).style.color = args.rightLabelColor;
+            }
         }
-        if (trElement.querySelector('.' + cls.rightLabelContainer) &&
-            (trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label) &&
-            getComputedStyle((trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label)).color !== args.rightLabelColor) {
-            (trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label).style.color = args.rightLabelColor;
+        else {
+            if (trElement.querySelector('.' + cls.leftLabelContainer) &&
+                (trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label) &&
+                getComputedStyle((trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label)).color !== args.leftLabelColor) {
+                (trElement.querySelector('.' + cls.leftLabelContainer)).querySelector('.' + cls.label).style.color = args.leftLabelColor;
+            }
+            if (trElement.querySelector('.' + cls.rightLabelContainer) &&
+                (trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label) &&
+                getComputedStyle((trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label)).color !== args.rightLabelColor) {
+                (trElement.querySelector('.' + cls.rightLabelContainer)).querySelector('.' + cls.label).style.color = args.rightLabelColor;
+            }
         }
     };
     ChartRows.prototype.getClassName = function (args) {