@syncfusion/ej2-gantt 20.1.58 → 20.2.36

package/src/gantt/base/gantt.js

@@ -34,6 +34,7 @@ import { DateProcessor } from './date-processor';
 import { ChartRows } from '../renderer/chart-rows';
 import { Dependency } from '../actions/dependency';
 import * as cls from './css-constants';
+import { TreeGrid } from '@syncfusion/ej2-treegrid';
 import { getActualProperties } from '@syncfusion/ej2-grids';
 import { ConnectorLine } from '../renderer/connector-line';
 import { Splitter } from './splitter';
@@ -102,6 +103,7 @@ var Gantt = /** @class */ (function (_super) {
          * @private
          */
         _this.isEdit = false;
+        setValue('mergePersistData', _this.mergePersistGanttData, _this);
         return _this;
     }
     /**
@@ -172,8 +174,10 @@ var Gantt = /** @class */ (function (_super) {
         this.dataOperation.getNonWorkingDayIndex();
         this.columnMapping = {};
         this.controlId = this.element.id;
-        this.cloneProjectStartDate = null;
-        this.cloneProjectEndDate = null;
+        this.cloneProjectStartDate = this.enablePersistence && this.cloneProjectStartDate ?
+            this.cloneProjectStartDate : null;
+        this.cloneProjectEndDate = this.enablePersistence && this.cloneProjectEndDate ?
+            this.cloneProjectEndDate : null;
         this.totalHolidayDates = this.dataOperation.getHolidayDates();
         this.ganttChartModule = new GanttChart(this);
         this.timelineModule = new Timeline(this);
@@ -440,6 +444,10 @@ var Gantt = /** @class */ (function (_super) {
                 this.updateRowHeightInConnectorLine(this.updatedConnectorLineCollection);
                 this.connectorLineModule.renderConnectorLines(this.updatedConnectorLineCollection);
             }
+            if (this.enableCriticalPath) {
+                var criticalModule = this.criticalPathModule;
+                this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+            }
         }
     };
     Gantt.prototype.keyActionHandler = function (e) {
@@ -771,6 +779,39 @@ var Gantt = /** @class */ (function (_super) {
         var value = this.dateValidationModule.getWorkString(work, workUnit);
         return value;
     };
+    Gantt.prototype.updateTreeColumns = function () {
+        var temp;
+        var field;
+        var gridColumns = this.treeGrid.grid.getColumns();
+        if (this.treeColumnIndex !== -1 && this.columns[this.treeColumnIndex] &&
+            !isNullOrUndefined(this.columns[this.treeColumnIndex]['template'])) {
+            temp = this.columns[this.treeColumnIndex]['template'];
+            field = this.columns[this.treeColumnIndex]['field'];
+        }
+        var gridColumn;
+        for (var i = 0; i < gridColumns.length; i++) {
+            gridColumn = {};
+            for (var j = 0; j < this.columns.length; j++) {
+                if (this.columns[j]['field'] == gridColumns[i].field) {
+                    for (var _i = 0, _a = Object.keys(this.columns[j]); _i < _a.length; _i++) {
+                        var prop = _a[_i];
+                        if (!isUndefined(this.columns[j][prop])) {
+                            gridColumn[prop] = gridColumns[i][prop];
+                        }
+                        gridColumn.visible = gridColumns[i].visible;
+                        gridColumn.width = gridColumns[i].width;
+                    }
+                    this.columns[j] = (gridColumn);
+                    if (this.columns[j]['type'] !== 'checkbox' && (!isNullOrUndefined(temp) && temp !== '')) {
+                        this.columns[j]['template'] = temp;
+                    }
+                }
+            }
+        }
+        if (this.columns.length > 0) {
+            this.treeGrid.setProperties({ columns: this.columns }, true);
+        }
+    };
     /**
      *
      * @param {object} args .
@@ -791,6 +832,9 @@ var Gantt = /** @class */ (function (_super) {
             this.splitterElement.style.height = '100%';
         }
         if (this.isLoad) {
+            if (this.enablePersistence) {
+                this.updateTreeColumns();
+            }
             this.updateCurrentViewData();
             if (!this.enableVirtualization) {
                 this.updateContentHeight();
@@ -820,7 +864,14 @@ var Gantt = /** @class */ (function (_super) {
         else {
             this.getCurrentRecords(args);
         }
+        if (this.enableCriticalPath && this.criticalPathModule) {
+            this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
+        }
         this.notify('recordsUpdated', {});
+        if (this.enableCriticalPath && this.criticalPathModule) {
+            var criticalModule = this.criticalPathModule;
+            this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
         this.initialChartRowElements = this.ganttChartModule.getChartRows();
         this.isLoad = false;
         this.trigger('dataBound', args);
@@ -909,6 +960,7 @@ var Gantt = /** @class */ (function (_super) {
                     }
                     break;
                 case 'timezone':
+                case 'enableCriticalPath':
                     this.dataOperation.checkDataBinding(true);
                     break;
                 case 'filterSettings':
@@ -1076,15 +1128,42 @@ var Gantt = /** @class */ (function (_super) {
         }
     };
     /**
-     * Get the properties to be maintained in the persisted state.
+     * Returns the properties to be maintained in persisted state.
      *
      * @returns {string} .
      * @private
      */
     Gantt.prototype.getPersistData = function () {
-        var keyEntity = ['allowSelection'];
+        var keyEntity = ['sortSettings',
+            'filterSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'treeColumnIndex', 'currentZoomingLevel', 'cloneProjectStartDate', 'cloneProjectEndDate'];
+        var ignoreOnPersist = {
+            filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent', 'hierarchyMode'],
+            searchSettings: ['fields', 'operator', 'ignoreCase'],
+            sortSettings: [], columns: [], selectedRowIndex: []
+        };
+        var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',
+            'commandTemplate', 'commands', 'dataSource'];
+        for (var i = 0; i < keyEntity.length; i++) {
+            var currentObject = this[keyEntity[i]];
+            for (var k = 0, val = ignoreOnPersist[keyEntity[i]]; (!isNullOrUndefined(val) && k < val.length); k++) {
+                var objVal = val[k];
+                delete currentObject[objVal];
+            }
+        }
+        this.ignoreInArrays(ignoreOnColumn, this.columns);
         return this.addOnPersist(keyEntity);
     };
+    Gantt.prototype.ignoreInArrays = function (ignoreOnColumn, columns) {
+        for (var i = 0; i < columns.length; i++) {
+            this.ignoreInColumn(ignoreOnColumn, columns[i]);
+        }
+    };
+    Gantt.prototype.ignoreInColumn = function (ignoreOnColumn, column) {
+        for (var i = 0; i < ignoreOnColumn.length; i++) {
+            delete column[ignoreOnColumn[i]];
+            column.filter = {};
+        }
+    };
     /**
      * @returns {void} .
      * @private
@@ -1167,6 +1246,12 @@ var Gantt = /** @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.enableCriticalPath) {
+            modules.push({
+                member: 'criticalPath',
+                args: [this]
+            });
+        }
         if (this.allowResizing) {
             modules.push({
                 member: 'resize',
@@ -1244,6 +1329,17 @@ var Gantt = /** @class */ (function (_super) {
             this.sortModule.sortColumn(columnName, direction, isMultiSort);
         }
     };
+    Gantt.prototype.mergePersistGanttData = function () {
+        if (!this.treeGrid) {
+            this.treeGrid = new TreeGrid();
+        }
+        var persist1 = 'mergePersistGridData';
+        this.treeGrid.grid[persist1].apply(this);
+    };
+    Gantt.prototype.mergeColumns = function (storedColumn, columns) {
+        var persist2 = 'mergeColumns';
+        this.treeGrid.grid[persist2].apply(this, [storedColumn, columns]);
+    };
     /**
      * Clears all the sorted columns of the Gantt.
      *
@@ -1321,7 +1417,7 @@ var Gantt = /** @class */ (function (_super) {
      */
     Gantt.prototype.updateGridLineContainerHeight = function () {
         if (this.chartVerticalLineContainer) {
-            this.chartVerticalLineContainer.style.height = formatUnit(this.contentHeight);
+            this.chartVerticalLineContainer.style.height = formatUnit(this.getContentHeight());
         }
     };
     /**
@@ -1425,6 +1521,7 @@ var Gantt = /** @class */ (function (_super) {
             progress: 'Progress',
             dependency: 'Dependency',
             notes: 'Notes',
+            criticalPath: 'Critical Path',
             baselineStartDate: 'Baseline Start Date',
             baselineEndDate: 'Baseline End Date',
             taskMode: 'Task Mode',
@@ -2122,6 +2219,34 @@ var Gantt = /** @class */ (function (_super) {
             this.editModule.outdent();
         }
     };
+    /**
+     * To render the critical path tasks in Gantt.
+     *
+     * @returns {void} .
+     * @param {boolean} isCritical- whether to render critical path or not .
+     * @public
+     */
+    Gantt.prototype.showCriticalPath = function (isCritical) {
+        if (this.criticalPathModule) {
+            this.criticalPathModule.showCriticalPath(isCritical);
+            var criticalModule = this.criticalPathModule;
+            this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+        }
+    };
+    /**
+     * To get all the critical tasks in Gantt.
+     *
+     * @returns {IGanttData[]} .
+     * @public
+     */
+    Gantt.prototype.getCriticalTasks = function () {
+        if (!isNullOrUndefined(this.criticalPathModule) && this.enableCriticalPath) {
+            return this.criticalPathModule.getCriticalTasks();
+        }
+        else {
+            return null;
+        }
+    };
     /**
      * To perform Zoom in action on Gantt timeline.
      *
@@ -2933,6 +3058,9 @@ var Gantt = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Gantt.prototype, "enableContextMenu", void 0);
+    __decorate([
+        Property(false)
+    ], Gantt.prototype, "enableCriticalPath", void 0);
     __decorate([
         Property()
     ], Gantt.prototype, "contextMenuItems", void 0);

package/src/gantt/base/interface.d.ts

@@ -48,6 +48,10 @@ export interface IGanttData {
     indicators?: IIndicator[];
     /** Defines the delete . */
     isDelete?: boolean;
+    /** Defines the critical path of task. */
+    isCritical?: boolean;
+    /** Defines the slack value of critical path task. */
+    slack?: string | number;
 }
 export interface IParent {
     /** Defines the unique id of task. */
@@ -84,6 +88,10 @@ export interface ITaskData {
     isMilestone?: boolean;
     /** Defines the left of task. */
     left?: number;
+    /** Defines the critical path of task. */
+    isCritical?: boolean;
+    /** Defines the slack value of critical path task. */
+    slack?: string | number;
     /** Defines the progress of task. */
     progress?: number;
     /** Defines the progress width of task. */
@@ -358,6 +366,7 @@ export interface IConnectorLineObject {
     milestoneChild?: boolean;
     parentIndexInCurrentView?: number;
     childIndexInCurrentView?: number;
+    isCritical?: boolean;
 }
 export interface ISplitterResizedEventArgs {
     /** Defines the element. */
@@ -836,6 +845,12 @@ export interface ITaskbarStyle {
     milestoneColor?: PdfColor;
     /** Defines the progress text color */
     progressFontColor?: PdfColor;
+    /** Defines the critical task color */
+    criticalTaskColor?: PdfColor;
+    /** Defines the critical child progressbar background color */
+    criticalProgressColor?: PdfColor;
+    /** Defines the child taskbar border color */
+    criticalTaskBorderColor?: PdfColor;
 }
 export interface IGanttStyle {
     columnHeader?: PdfGanttCellStyle;
@@ -846,6 +861,7 @@ export interface IGanttStyle {
     timeline?: PdfGanttCellStyle;
     chartGridLineColor?: PdfColor;
     connectorLineColor?: PdfColor;
+    criticalConnectorLineColor?: PdfColor;
     footer?: PdfGanttCellStyle;
 }
 export interface PdfQueryTimelineCellInfoEventArgs {

package/src/gantt/base/splitter.js

@@ -25,6 +25,7 @@ var Splitter = /** @class */ (function () {
         this.splitterObject = new SplitterLayout({
             height: null,
             width: this.parent.ganttWidth.toString(),
+            enablePersistence: this.parent.enablePersistence,
             separatorSize: this.parent.splitterSettings.separatorSize,
             paneSettings: [
                 {
@@ -76,6 +77,9 @@ var Splitter = /** @class */ (function () {
      * @private
      */
     Splitter.prototype.calculateSplitterPosition = function (splitter, isDynamic) {
+        if (!isNullOrUndefined(this.splitterObject) && this.parent.enablePersistence) {
+            return this.splitterObject.paneSettings[0].size;
+        }
         if (splitter.view === 'Grid') {
             return '100%';
         }

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

@@ -100,10 +100,11 @@ var TaskProcessor = /** @class */ (function (_super) {
         var mappingData = new DataManager(dataSource).executeLocal(new Query()
             .group(this.parent.taskFields.parentID));
         var rootData = [];
+        var index;
         for (var i = 0; i < mappingData.length; i++) {
             var groupData = mappingData[i];
             if (!isNullOrUndefined(groupData.key)) {
-                var index = this.taskIds.indexOf(groupData.key.toString());
+                index = this.taskIds.indexOf(groupData.key.toString());
                 if (index > -1) {
                     if (!isNullOrUndefined(groupData.key)) {
                         dataSource[index][this.parent.taskFields.child] = groupData.items;
@@ -111,7 +112,9 @@ var TaskProcessor = /** @class */ (function (_super) {
                     }
                 }
             }
-            rootData.push.apply(rootData, groupData.items); // eslint-disable-line
+            if (index !== -1) {
+                rootData.push.apply(rootData, groupData.items); // eslint-disable-line
+            }
         }
         this.hierarchyData = this.dataReorder(dataSource, rootData);
     };
@@ -372,7 +375,11 @@ var TaskProcessor = /** @class */ (function (_super) {
         if (baselineEndDate && baselineEndDate.getHours() === 0 && this.parent.defaultEndTime !== 86400) {
             this.setTime(this.parent.defaultEndTime, baselineEndDate);
         }
-        this.parent.setRecordValue('baselineEndDate', this.checkBaselineEndDate(baselineEndDate), ganttProperties, true);
+        if ((ganttProperties.baselineStartDate && baselineEndDate &&
+            (ganttProperties.baselineStartDate.getTime() > baselineEndDate.getTime())) || ganttProperties.isMilestone) {
+            baselineEndDate = ganttProperties.baselineStartDate;
+        }
+        this.parent.setRecordValue('baselineEndDate', this.checkBaselineEndDate(baselineEndDate, ganttProperties), ganttProperties, true);
         this.parent.setRecordValue('progress', progress, ganttProperties, true);
         this.parent.setRecordValue('totalProgress', progress, ganttProperties, true);
         this.parent.setRecordValue('predecessorsName', predecessors, ganttProperties, true);
@@ -393,7 +400,6 @@ var TaskProcessor = /** @class */ (function (_super) {
             !isNullOrUndefined(taskSettings.child)) {
             this.parent.setRecordValue(taskSettings.child, [], ganttData);
         }
-        this.parent.setRecordValue('baselineEndDate', this.checkBaselineEndDate(baselineEndDate), ganttProperties, true);
         if (!isNullOrUndefined(data[taskSettings.child]) && data[taskSettings.child].length > 0) {
             this.parent.setRecordValue('hasChildRecords', true, ganttData);
             this.parent.setRecordValue('isMilestone', false, ganttProperties, true);
@@ -606,6 +612,13 @@ var TaskProcessor = /** @class */ (function (_super) {
                 work = parseFloat(work.toFixed(2));
             }
         }
+        if (ganttData.childRecords.length > 0 && this.parent.isOnEdit) {
+            var childCompletedWorks = 0;
+            for (var i = 0; i < ganttData.childRecords.length; i++) {
+                childCompletedWorks += ganttData.childRecords[i].ganttProperties.work;
+            }
+            work += childCompletedWorks;
+        }
         this.parent.setRecordValue('work', work, ganttData.ganttProperties, true);
         if (!isNullOrUndefined(this.parent.taskFields.work)) {
             this.parent.dataOperation.updateMappingData(ganttData, 'work');
@@ -1102,7 +1115,7 @@ var TaskProcessor = /** @class */ (function (_super) {
     TaskProcessor.prototype.calculateBaselineWidth = function (ganttProperties) {
         var baselineStartDate = this.getDateFromFormat(ganttProperties.baselineStartDate);
         var baselineEndDate = this.getDateFromFormat(ganttProperties.baselineEndDate);
-        if (baselineStartDate && baselineEndDate) {
+        if (baselineStartDate && baselineEndDate && (baselineStartDate.getTime() !== baselineEndDate.getTime())) {
             return (this.getTaskWidth(baselineStartDate, baselineEndDate));
         }
         else {
@@ -2231,7 +2244,7 @@ var TaskProcessor = /** @class */ (function (_super) {
                 }
                 this.updateWorkWithDuration(parentData);
                 var parentWork = parentProp.work;
-                parentWork += childCompletedWorks;
+                parentWork = this.parent.isOnEdit ? parentWork : (parentWork + childCompletedWorks);
                 this.parent.setRecordValue('work', parentWork, parentProp, true);
                 this.parent.setRecordValue('taskType', 'FixedDuration', parentProp, true);
                 if (!isNullOrUndefined(this.parent.taskFields.type)) {

package/src/gantt/base/tree-grid.js

@@ -157,7 +157,7 @@ var GanttTreeGrid = /** @class */ (function () {
         var scrollWidth = this.getScrollbarWidth();
         var isMobile = /Android|Mac|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         if (scrollWidth !== 0) {
-            content.style.cssText += 'width: calc(100% + ' + (scrollWidth + 1) + 'px);';
+            content.style.cssText += 'width: calc(100% + ' + (scrollWidth + 1) + 'px);'; //actual scrollbar width 17 px but here scrollbar width set to 16px hence adding increment of 1
         }
         else {
             content.classList.add('e-gantt-scroll-padding');

package/src/gantt/export/export-helper.js

@@ -149,6 +149,12 @@ var ExportHelper = /** @class */ (function () {
                 predecessor.milestoneParent = data.milestoneParent;
                 predecessor.milestoneChild = data.milestoneChild;
                 predecessor.lineWidth = _this.parent.connectorLineWidth > 5 ? pixelToPoint(5) : pixelToPoint(_this.parent.connectorLineWidth);
+                if (data.isCritical) {
+                    predecessor.connectorLineColor = _this.ganttStyle.criticalConnectorLineColor;
+                }
+                else {
+                    predecessor.connectorLineColor = _this.ganttStyle.connectorLineColor;
+                }
                 predecessor.connectorLineColor = _this.ganttStyle.connectorLineColor;
                 _this.gantt.predecessorCollection.push(predecessor);
             });
@@ -272,9 +278,16 @@ var ExportHelper = /** @class */ (function () {
                 taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.parentProgressColor);
             }
             else {
-                taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.taskColor);
-                taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.taskBorderColor);
-                taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.progressColor);
+                if (data.isCritical) {
+                    taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskColor);
+                    taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.criticalProgressColor);
+                    taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.criticalTaskBorderColor);
+                }
+                else {
+                    taskbar.taskColor = new PdfColor(_this.ganttStyle.taskbar.taskColor);
+                    taskbar.progressColor = new PdfColor(_this.ganttStyle.taskbar.progressColor);
+                    taskbar.taskBorderColor = new PdfColor(_this.ganttStyle.taskbar.taskBorderColor);
+                }
             }
             taskbar.gridLineColor = new PdfColor(_this.ganttStyle.chartGridLineColor);
             _this.gantt.taskbarCollection.push(taskbar);
@@ -502,13 +515,13 @@ var ExportValueFormatter = /** @class */ (function () {
             if (typeof args.column.format === 'string') {
                 var format = void 0;
                 if (args.column.type === 'date') {
-                    format = { type: 'date', skeleton: args.column.format };
+                    format = { type: 'date', format: args.column.format };
                 }
                 else if (args.column.type === 'time') {
-                    format = { type: 'time', skeleton: args.column.format };
+                    format = { type: 'time', format: args.column.format };
                 }
                 else {
-                    format = { type: 'dateTime', skeleton: args.column.format };
+                    format = { type: 'dateTime', format: args.column.format };
                 }
                 return this.returnFormattedValue(args, format);
             }

package/src/gantt/export/pdf-base/pdf-style/gantt-theme.js

@@ -53,6 +53,10 @@ var PdfGanttTheme = /** @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(49, 122, 185);
                 ganttStyle.taskbar.progressColor = new PdfColor(33, 82, 125);
+                ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
+                ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(119, 119, 119);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(85, 85, 85);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(33, 82, 125);
@@ -69,6 +73,10 @@ var PdfGanttTheme = /** @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(0, 123, 255);
                 ganttStyle.taskbar.progressColor = new PdfColor(0, 86, 179);
+                ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
+                ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(108, 117, 125);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(73, 80, 87);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(0, 86, 179);
@@ -87,6 +95,10 @@ var PdfGanttTheme = /** @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(0, 120, 214);
                 ganttStyle.taskbar.progressColor = new PdfColor(0, 91, 163);
+                ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
+                ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(118, 118, 118);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(80, 80, 80);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(0, 91, 163);
@@ -103,6 +115,10 @@ var PdfGanttTheme = /** @class */ (function () {
                 //chart side theme
                 ganttStyle.taskbar.taskColor = new PdfColor(88, 105, 197);
                 ganttStyle.taskbar.progressColor = new PdfColor(63, 81, 181);
+                ganttStyle.taskbar.criticalTaskColor = new PdfColor(255, 139, 139);
+                ganttStyle.taskbar.criticalProgressColor = new PdfColor(255, 85, 85);
+                ganttStyle.criticalConnectorLineColor = new PdfColor(255, 85, 85);
+                ganttStyle.taskbar.criticalTaskBorderColor = new PdfColor(255, 85, 85);
                 ganttStyle.taskbar.parentTaskColor = new PdfColor(132, 132, 132);
                 ganttStyle.taskbar.parentProgressColor = new PdfColor(97, 97, 97);
                 ganttStyle.taskbar.taskBorderColor = new PdfColor(63, 81, 181);

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

@@ -175,7 +175,8 @@ var ChartRows = /** @class */ (function (_super) {
                 labelString = labelString === 'isCustomTemplate' ? this.parent.labelSettings.taskLabel : labelString;
             }
             if (labelString.indexOf('null') === -1) {
-                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' && !this.isTemplate(this.parent.labelSettings.taskLabel)) {
+                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' &&
+                    !this.isTemplate(this.parent.labelSettings.taskLabel)) {
                     labelString = '';
                 }
                 if (isNaN(parseInt(labelString))) {
@@ -225,7 +226,7 @@ var ChartRows = /** @class */ (function (_super) {
                         progressDiv[0].querySelectorAll('.e-task-label')[0].children[0])
                         progressDiv[0].querySelectorAll('.e-task-label')[0].children[0].remove();
                     if (progressDiv[0].querySelectorAll('.e-task-label')[0].textContent == '' &&
-                        childLabel && !childLabel['elementRef'] && tempDiv.innerHTML != '')
+                        childLabel && !childLabel['elementRef'] && tempDiv.innerHTML !== '')
                         progressDiv[0].querySelectorAll('.e-task-label')[0].textContent = childLabel;
                 }
                 if (!isNullOrUndefined(taskbarInnerDiv) && taskbarInnerDiv.length > 0) {
@@ -243,6 +244,13 @@ var ChartRows = /** @class */ (function (_super) {
         var splitTasks = '';
         for (var i = 0; i < data.ganttProperties.segments.length; i++) {
             var segment = data.ganttProperties.segments[i];
+            var progressBarVisible = void 0;
+            if (!segment.showProgress) {
+                progressBarVisible = 'hidden';
+            }
+            else {
+                progressBarVisible = 'initial';
+            }
             var segmentPosition = (i === 0) ? 'e-segment-first' : (i === data.ganttProperties.segments.length - 1)
                 ? 'e-segment-last' : 'e-segment-inprogress';
             splitTasks += (
@@ -250,7 +258,7 @@ var ChartRows = /** @class */ (function (_super) {
             '<div class="' + cls.childTaskBarInnerDiv + ' ' + segmentPosition + ' ' + cls.traceChildTaskBar + ' ' +
                 ' e-segmented-taskbar' +
                 '"style="width:' + segment.width + 'px;position: absolute; left:' + segment.left + 'px;height:' +
-                (this.taskBarHeight) + 'px; overflow: initial;" data-segment-index = "' + i + '" aria-label = "' +
+                (this.taskBarHeight) + 'px; overflow:' + progressBarVisible + ';" data-segment-index = "' + i + '" aria-label = "' +
                 this.generateSpiltTaskAriaLabel(segment, data.ganttProperties) + '"> ' +
                 this.getSplitTaskbarLeftResizerNode() +
                 //split progress bar
@@ -372,6 +380,7 @@ var ChartRows = /** @class */ (function (_super) {
             this.parent.dataOperation.updateMappingData(mergeData, 'segments');
             if (segments.length === 1) {
                 this.parent.setRecordValue('endDate', endDate, mergeData.ganttProperties, true);
+                this.parent.setRecordValue('EndDate', endDate, mergeData, true);
                 this.parent.setRecordValue('segments', null, mergeData.ganttProperties, true);
                 this.parent.dataOperation.updateMappingData(mergeData, 'segments');
             }
@@ -540,6 +549,7 @@ var ChartRows = /** @class */ (function (_super) {
             else {
                 startDate = new Date(splitDate.getTime());
                 startDate.setDate(startDate.getDate() + 1 + increment);
+                this.setTime(this.parent.defaultStartTime, startDate);
                 startDate = this.parent.dataOperation.checkStartDate(startDate, ganttProp, false);
                 segmentEndDate = new Date(endDate.getTime());
                 segmentEndDate.setDate(segmentEndDate.getDate() + 1);
@@ -813,7 +823,8 @@ var ChartRows = /** @class */ (function (_super) {
                 labelString = labelString === 'isCustomTemplate' ? this.parent.labelSettings.taskLabel : labelString;
             }
             if (labelString.indexOf('null') === -1) {
-                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' && !this.isTemplate(this.parent.labelSettings.taskLabel)) {
+                if (this.getTaskLabel(this.parent.labelSettings.taskLabel) === 'isCustomTemplate' &&
+                    !this.isTemplate(this.parent.labelSettings.taskLabel)) {
                     labelString = '';
                 }
                 if (isNaN(parseInt(labelString))) {
@@ -842,7 +853,7 @@ var ChartRows = /** @class */ (function (_super) {
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].children[0])
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].children[0].remove();
                 if (progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent == '' &&
-                    parentLabel && !parentLabel['elementRef'] && div.innerHTML != '')
+                    parentLabel && !parentLabel['elementRef'] && div.innerHTML !== '')
                     progressBarInnerDiv[0].querySelectorAll('.e-task-label')[0].textContent = parentLabel;
             }
             var milestoneTemplate = '<div class="' + cls.parentMilestone + '" style="position:absolute;">' +

package/src/gantt/renderer/nonworking-day.js

@@ -1,5 +1,6 @@
-import { createElement, formatUnit, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, formatUnit, remove } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constants';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 var NonWorkingDay = /** @class */ (function () {
     function NonWorkingDay(gantt) {
         this.weekendWidthUpdated = false;
@@ -56,8 +57,9 @@ var NonWorkingDay = /** @class */ (function () {
         var toDate;
         var container = createElement('div');
         var height = this.parent.contentHeight;
+        // eslint-disable-next-line
         var toolbarHeight = 0;
-        if (!isNullOrUndefined(this.parent.toolbarModule)) {
+        if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
             toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
         }
         var viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
@@ -162,6 +164,7 @@ var NonWorkingDay = /** @class */ (function () {
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
         var height = this.parent.getContentHeight();
+        // eslint-disable-next-line
         var toolbarHeight = 0;
         if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
             toolbarHeight = this.parent.toolbarModule.element.offsetHeight;