@syncfusion/ej2-gantt 22.1.34 → 22.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-gantt@*",
-  "_id": "@syncfusion/ej2-gantt@21.2.8",
+  "_id": "@syncfusion/ej2-gantt@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-EhE/zbDbsyf8hUtXYHwZAQ3cLvRuNfdT30nDDv1DDb8zUV5h9ubQSDffrGKzcteA298ZxgqJFBXzoMnLwnTjDw==",
+  "_integrity": "sha512-7MEx9csM58T3eHOhm9EkmpfUp3StyM/nXSx0wTSmAWKJ9zD/98YfEgd1yTSnx94hHHgXOQxngHnAxxVLVx8Ypg==",
   "_location": "/@syncfusion/ej2-gantt",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-gantt",
     "/@syncfusion/ej2-vue-gantt"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-gantt/-/ej2-gantt-21.2.8.tgz",
-  "_shasum": "4ddaeaec8c5dd0d49ecadbbb803f5eafaca906c1",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-gantt/-/ej2-gantt-22.1.36.tgz",
+  "_shasum": "c45c61ba695de72b2b0d8e80c56d87ac2577aed3",
   "_spec": "@syncfusion/ej2-gantt@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -36,20 +36,20 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-buttons": "~22.1.34",
-    "@syncfusion/ej2-calendars": "~22.1.34",
-    "@syncfusion/ej2-data": "~22.1.34",
-    "@syncfusion/ej2-dropdowns": "~22.1.34",
-    "@syncfusion/ej2-grids": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.36",
+    "@syncfusion/ej2-calendars": "~22.1.36",
+    "@syncfusion/ej2-data": "~22.1.36",
+    "@syncfusion/ej2-dropdowns": "~22.1.37",
+    "@syncfusion/ej2-grids": "~22.1.37",
     "@syncfusion/ej2-inputs": "~22.1.34",
-    "@syncfusion/ej2-layouts": "~22.1.34",
+    "@syncfusion/ej2-layouts": "~22.1.37",
     "@syncfusion/ej2-lists": "~22.1.34",
-    "@syncfusion/ej2-navigations": "~22.1.34",
+    "@syncfusion/ej2-navigations": "~22.1.36",
     "@syncfusion/ej2-notifications": "~22.1.34",
-    "@syncfusion/ej2-popups": "~22.1.34",
-    "@syncfusion/ej2-richtexteditor": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.37",
+    "@syncfusion/ej2-richtexteditor": "~22.1.36",
     "@syncfusion/ej2-svg-base": "~22.1.34",
-    "@syncfusion/ej2-treegrid": "~22.1.34"
+    "@syncfusion/ej2-treegrid": "~22.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 Gantt Component",
@@ -74,6 +74,6 @@
     "url": "git+https://github.com/syncfusion/ej2-gantt.git"
   },
   "typings": "index.d.ts",
-  "version": "22.1.34",
+  "version": "22.1.37",
   "sideEffects": false
 }

package/src/gantt/actions/selection.js

@@ -447,6 +447,7 @@ var Selection = /** @class */ (function () {
      */
     Selection.prototype.mouseUpHandler = function (e) {
         var isTaskbarEdited = false;
+        var elements = document.querySelectorAll('.e-drag-item');
         var targetElement = null;
         if (e.target.closest('.e-rowcell')) {
             targetElement = e.target;
@@ -464,7 +465,7 @@ var Selection = /** @class */ (function () {
                 isTaskbarEdited = true;
             }
         }
-        if (!isTaskbarEdited && this.parent.element.contains(e.target)) {
+        if (!isTaskbarEdited && this.parent.element.contains(e.target) && !(elements.length === 1)) {
             var parent_1 = parentsUntil(e.target, 'e-chart-row');
             var isSelected = e.target.classList.contains('e-rowcell') ||
                 e.target.classList.contains('e-row') ||

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

@@ -1749,6 +1749,7 @@ var TaskbarEdit = /** @class */ (function (_super) {
                 }
             }
         }
+        this.parent['isProjectDateUpdated'] = false;
     };
     /**
      * To cancel the taskbar edt action.

package/src/gantt/actions/toolbar.d.ts

@@ -19,6 +19,7 @@ export declare class Toolbar {
      * @private
      */
     renderToolbar(): void;
+    private addReactToolbarPortals;
     private createToolbar;
     private getSearchBarElement;
     private wireEvent;

package/src/gantt/actions/toolbar.js

@@ -89,6 +89,12 @@ var Toolbar = /** @class */ (function () {
             this.createToolbar();
         }
     };
+    Toolbar.prototype.addReactToolbarPortals = function (args) {
+        if (this.parent.isReact && args) {
+            this.parent.portals = this.parent.portals.concat(args);
+            this.parent.renderTemplates();
+        }
+    };
     Toolbar.prototype.createToolbar = function () {
         var items = this.getItems();
         this.toolbar = new NavToolbar({
@@ -98,6 +104,8 @@ var Toolbar = /** @class */ (function () {
             height: this.parent.isAdaptive ? 48 : 'auto'
         });
         this.toolbar.isStringTemplate = true;
+        this.toolbar.isReact = this.parent.isReact;
+        this.toolbar.on('render-react-toolbar-template', this.addReactToolbarPortals, this);
         this.toolbar.appendTo(this.element);
         var cancelItem = this.element.querySelector('#' + this.parent.element.id + '_cancel');
         var updateItem = this.element.querySelector('#' + this.parent.element.id + '_update');
@@ -514,6 +522,7 @@ var Toolbar = /** @class */ (function () {
         if (this.parent.isDestroyed) {
             return;
         }
+        this.toolbar.off('render-react-toolbar-template', this.addReactToolbarPortals);
         this.toolbar.destroy();
         if (this.parent.filterModule) {
             this.unWireEvent();

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

@@ -1331,6 +1331,7 @@ var DateProcessor = /** @class */ (function () {
             setValue('minStartDate', minStartDate, editArgs);
             setValue('maxEndDate', maxEndDate, editArgs);
         }
+        this.parent['isProjectDateUpdated'] = true;
     };
     /**
      *

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

@@ -110,9 +110,9 @@ var GanttChart = /** @class */ (function () {
                     }
                 }
             }
-            if (this.parent.enableCriticalPath) {
-                var crtiticalModule = this.parent.criticalPathModule;
-                this.parent.criticalPathModule.criticalConnectorLine(crtiticalModule.criticalPathCollection, crtiticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, crtiticalModule.predecessorCollectionTaskIds);
+            var criticalModule = this.parent.criticalPathModule;
+            if (this.parent.enableCriticalPath && criticalModule && criticalModule.criticalPathCollection) {
+                this.parent.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, this.parent.enableCriticalPath, criticalModule.predecessorCollectionTaskIds);
             }
             if (this.parent.viewType === 'ResourceView' && this.parent.showOverAllocation) {
                 this.renderOverAllocationContainer();
@@ -707,8 +707,8 @@ var GanttChart = /** @class */ (function () {
         this.parent.updatedConnectorLineCollection = [];
         this.parent.predecessorModule.createConnectorLinesCollection();
         this.parent.connectorLineModule.renderConnectorLines(this.parent.updatedConnectorLineCollection);
-        if (this.parent.enableCriticalPath && this.parent.criticalPathModule) {
-            var criticalModule = this.parent.criticalPathModule;
+        var criticalModule = this.parent.criticalPathModule;
+        if (this.parent.enableCriticalPath && criticalModule && criticalModule.criticalPathCollection) {
             criticalModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
         }
     };

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

@@ -86,6 +86,7 @@ export declare class Gantt extends Component<HTMLElement> implements INotifyProp
     /** @hidden */
     private headerMaskTable;
     /** @hidden */
+    private isProjectDateUpdated;
     columnLoop: any;
     showIndicator: boolean;
     singleTier: number;

package/src/gantt/base/gantt.js

@@ -827,8 +827,8 @@ var Gantt = /** @class */ (function (_super) {
                 this.updateRowHeightInConnectorLine(this.updatedConnectorLineCollection);
                 this.connectorLineModule.renderConnectorLines(this.updatedConnectorLineCollection);
             }
-            if (this.enableCriticalPath) {
-                var criticalModule = this.criticalPathModule;
+            var criticalModule = this.criticalPathModule;
+            if (this.enableCriticalPath && criticalModule && criticalModule.criticalPathCollection) {
                 this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
             }
         }
@@ -1267,8 +1267,8 @@ var Gantt = /** @class */ (function (_super) {
                 document.getElementsByClassName('e-timeline-header-table-container')[i].children[0].children[0].children[j].children[0].setAttribute('tabindex', '-1');
             }
         }
-        if (this.enableCriticalPath && this.criticalPathModule) {
-            var criticalModule = this.criticalPathModule;
+        var criticalModule = this.criticalPathModule;
+        if (this.enableCriticalPath && criticalModule && criticalModule.criticalPathCollection) {
             this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
         }
         this.initialChartRowElements = this.ganttChartModule.getChartRows();
@@ -1371,7 +1371,9 @@ var Gantt = /** @class */ (function (_super) {
                     if (this.enableCriticalPath && this.criticalPathModule) {
                         this.criticalPathModule.showCriticalPath(this.enableCriticalPath);
                         var criticalModule = this.criticalPathModule;
-                        this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+                        if (criticalModule.criticalPathCollection) {
+                            this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
+                        }
                     }
                     else {
                         this.removeCriticalPathStyles();

package/src/gantt/base/splitter.js

@@ -1,4 +1,4 @@
-import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, addClass } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constants';
 import { Splitter as SplitterLayout } from '@syncfusion/ej2-layouts';
 import { Deferred } from '@syncfusion/ej2-data';
@@ -20,6 +20,7 @@ var Splitter = /** @class */ (function () {
         this.parent.splitterElement = createElement('div', { className: cls.splitter });
         this.parent.treeGridPane = createElement('div', { className: cls.treeGridPane });
         this.parent.chartPane = createElement('div', { className: cls.ganttChartPane });
+        addClass([this.parent.chartPane], 'e-droppable');
         if (this.parent.enableRtl) {
             this.parent.splitterElement.appendChild(this.parent.chartPane);
             this.parent.splitterElement.appendChild(this.parent.treeGridPane);

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

@@ -548,7 +548,7 @@ var TaskProcessor = /** @class */ (function (_super) {
                             endDate = this.getEndDate(startDate, duration, data.ganttProperties.durationUnit, data.ganttProperties, false);
                         }
                         else if (!taskSettings.duration && taskSettings.endDate) {
-                            endDate = (!isNullOrUndefined(data.ganttProperties.endDate)) && endDate.getTime() >
+                            endDate = (!isNullOrUndefined(data.ganttProperties.endDate)) && endDate.getTime() <
                                 data.ganttProperties.endDate.getTime() && i !== segments.length - 1 ? endDate : data.ganttProperties.endDate;
                             duration = this.getDuration(startDate, endDate, data.ganttProperties.durationUnit, data.ganttProperties.isAutoSchedule, data.ganttProperties.isMilestone);
                             if (ganttSegments.length > 0 && endDate.getTime() < startDate.getTime()
@@ -1192,38 +1192,59 @@ var TaskProcessor = /** @class */ (function (_super) {
             modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 60 * 1000);
         }
         if (ganttData && ganttData.durationUnit == 'minute') {
-            modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 60 * 60 * 1000);
+            modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 1000);
         }
         for (var i = 0; i < this.parent.dayWorkingTime.length; i++) {
             hour = hour + this.parent.dayWorkingTime[i].to - this.parent.dayWorkingTime[i].from;
         }
         var dateDiff = modifiedsDate.getTime() - sDate.getTime();
-        if (tierMode === 'Day') {
-            if ((Math.floor((dateDiff / (1000 * 60 * 60)) % 24) >= hour || dateDiff === 0)) {
-                isValid = true;
+        if (ganttData && ganttData.durationUnit == 'minute' && ganttData.duration < (hour * 60)) {
+            if (tierMode === 'Day') {
+                if ((Math.floor((dateDiff / (1000 * 60 * 60)) % 24) >= hour || dateDiff === 0)) {
+                    isValid = true;
+                }
+                if (this.getSecondsInDecimal(sDate) === this.parent.defaultStartTime && isValid) {
+                    sDate.setHours(0, 0, 0, 0);
+                }
+                if (this.getSecondsInDecimal(eDate) === this.parent.defaultEndTime) {
+                    eDate.setHours(24);
+                }
+                if (this.getSecondsInDecimal(eDate) === this.parent.defaultStartTime) {
+                    eDate.setHours(0, 0, 0, 0);
+                }
             }
-            if (this.getSecondsInDecimal(sDate) === this.parent.defaultStartTime && isValid) {
-                sDate.setHours(0, 0, 0, 0);
+            else {
+                isValid = true;
             }
-            if (this.getSecondsInDecimal(eDate) === this.parent.defaultEndTime) {
-                eDate.setHours(24);
+            if ((sDate).getTime() === (eDate).getTime()) {
+                return (this.parent.perDayWidth);
             }
-            if (this.getSecondsInDecimal(eDate) === this.parent.defaultStartTime) {
-                eDate.setHours(0, 0, 0, 0);
+            else {
+                if (isValid) {
+                    return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth);
+                }
+                else {
+                    return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * hour)) * this.parent.perDayWidth);
+                }
             }
         }
         else {
-            isValid = true;
-        }
-        if ((sDate).getTime() === (eDate).getTime()) {
-            return (this.parent.perDayWidth);
-        }
-        else {
-            if (isValid) {
-                return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth);
+            if (tierMode === 'Day') {
+                if (this.getSecondsInDecimal(sDate) === this.parent.defaultStartTime) {
+                    sDate.setHours(0, 0, 0, 0);
+                }
+                if (this.getSecondsInDecimal(eDate) === this.parent.defaultEndTime) {
+                    eDate.setHours(24);
+                }
+                if (this.getSecondsInDecimal(eDate) === this.parent.defaultStartTime) {
+                    eDate.setHours(0, 0, 0, 0);
+                }
+            }
+            if ((sDate).getTime() === (eDate).getTime()) {
+                return (this.parent.perDayWidth);
             }
             else {
-                return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * hour)) * this.parent.perDayWidth);
+                return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth);
             }
         }
     };

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

@@ -111,6 +111,9 @@ var GanttTreeGrid = /** @class */ (function () {
         var root = 'root';
         this.parent.treeGrid[root] = this.parent[root] ? this.parent[root] : this.parent;
         this.parent.treeGrid.appendTo(this.treeGridElement);
+        if (this.parent.treeGrid.grid && this.parent.toolbarModule && this.parent.isReact) {
+            this.parent.treeGrid.grid.portals = this.parent.portals;
+        }
         this.wireEvents();
     };
     GanttTreeGrid.prototype.composeProperties = function () {
@@ -552,7 +555,9 @@ var GanttTreeGrid = /** @class */ (function () {
                 this.parent.getDateFormat().toLowerCase().indexOf('hh') !== -1 ? 'datetimepickeredit' : 'datepickeredit';
             column.format = column.format ? column.format : { type: 'date', format: this.parent.getDateFormat() };
             column.width = column.width ? column.width : 150;
-            column.edit = { params: { renderDayCell: this.parent.renderWorkingDayCell.bind(this.parent) } };
+            if (!column.edit || (column.edit && !column.edit.create)) {
+                column.edit = { params: { renderDayCell: this.parent.renderWorkingDayCell.bind(this.parent) } };
+            }
         }
         else if (taskSettings.endDate === column.field) {
             if (this.parent.isLocaleChanged && previousColumn) {
@@ -565,7 +570,9 @@ var GanttTreeGrid = /** @class */ (function () {
             column.editType = column.editType ? column.editType :
                 this.parent.getDateFormat().toLowerCase().indexOf('hh') !== -1 ? 'datetimepickeredit' : 'datepickeredit';
             column.width = column.width ? column.width : 150;
-            column.edit = { params: { renderDayCell: this.parent.renderWorkingDayCell.bind(this.parent) } };
+            if (!column.edit || (column.edit && !column.edit.create)) {
+                column.edit = { params: { renderDayCell: this.parent.renderWorkingDayCell.bind(this.parent) } };
+            }
         }
         else if (taskSettings.duration === column.field) {
             column.width = column.width ? column.width : 150;

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

@@ -834,7 +834,7 @@ var ChartRows = /** @class */ (function (_super) {
             if (this.taskLabelTemplateFunction) {
                 var parentTaskLabelNode = this.taskLabelTemplateFunction(extend({ index: i }, data), this.parent, 'TaskLabelTemplate', this.getTemplateID('TaskLabelTemplate'), false, undefined, progressBarInnerDiv[0]);
                 if (parentTaskLabelNode && parentTaskLabelNode.length > 0) {
-                    div.appendChild(parentTaskLabelNode[0]);
+                    append(parentTaskLabelNode, div);
                     labelString = div.innerHTML;
                 }
             }
@@ -1423,7 +1423,7 @@ var ChartRows = /** @class */ (function (_super) {
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
                 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())) &&
+                    && (!isNullOrUndefined(this.templateData.ganttProperties.baselineEndDate) && !isNullOrUndefined(this.templateData.ganttProperties.endDate) && (this.templateData.ganttProperties.baselineEndDate.getTime() === this.templateData.ganttProperties.endDate.getTime())) &&
                     this.templateData.ganttProperties.isMilestone))
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
@@ -1436,7 +1436,7 @@ var ChartRows = /** @class */ (function (_super) {
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
                 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())) &&
+                    && (!isNullOrUndefined(this.templateData.ganttProperties.baselineEndDate) && !isNullOrUndefined(this.templateData.ganttProperties.endDate) && (this.templateData.ganttProperties.baselineEndDate.getTime() === this.templateData.ganttProperties.endDate.getTime())) &&
                     this.templateData.ganttProperties.isMilestone))
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
@@ -1484,7 +1484,7 @@ var ChartRows = /** @class */ (function (_super) {
             if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
                 this.templateData.ganttProperties.baselineEndDate) {
                 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())) &&
+                    && (!isNullOrUndefined(this.templateData.ganttProperties.baselineEndDate) && !isNullOrUndefined(this.templateData.ganttProperties.endDate) && (this.templateData.ganttProperties.baselineEndDate.getTime() === this.templateData.ganttProperties.endDate.getTime())) &&
                     this.templateData.ganttProperties.isMilestone))
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }

package/src/gantt/renderer/timeline.js

@@ -96,6 +96,9 @@ var Timeline = /** @class */ (function () {
      */
     Timeline.prototype.processZooming = function (isZoomIn) {
         this.isZoomToFit = false;
+        if (!this.parent['isProjectDateUpdated']) {
+            this.parent.dateValidationModule.calculateProjectDates();
+        }
         if (!isNullOrUndefined(this.parent.zoomingProjectStartDate)) {
             this.parent.cloneProjectStartDate = this.parent.cloneProjectStartDate.getTime() < this.parent.zoomingProjectStartDate.getTime()
                 ? this.parent.cloneProjectStartDate : this.parent.zoomingProjectStartDate;
@@ -214,10 +217,10 @@ var Timeline = /** @class */ (function () {
             this.parent.zoomingProjectStartDate = this.parent.cloneProjectStartDate;
             this.parent.zoomingProjectEndDate = this.parent.cloneProjectEndDate;
         }
-        this.parent.dataOperation.calculateProjectDates();
         if (this.parent.zoomingProjectStartDate > this.parent.cloneProjectStartDate) {
             this.parent.cloneProjectStartDate = new Date(this.parent.allowUnscheduledTasks ? this.parent.zoomingProjectStartDate : this.parent.cloneProjectStartDate);
         }
+        this.parent.dataOperation.calculateProjectDates();
         var timeDifference = (this.parent.cloneProjectEndDate.getTime() - this.parent.cloneProjectStartDate.getTime());
         var totalDays = (timeDifference / (1000 * 3600 * 24));
         var chartWidth = this.parent.ganttChartModule.chartElement.offsetWidth;

package/src/gantt/renderer/tooltip.js

@@ -1,7 +1,7 @@
 import { Tooltip as TooltipComponent } from '@syncfusion/ej2-popups';
 import { parentsUntil } from '../base/utils';
 import * as cls from '../base/css-constants';
-import { extend, isNullOrUndefined, getValue, EventHandler, closest, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, getValue, EventHandler, closest, SanitizeHtmlHelper, initializeCSPTemplate, append } from '@syncfusion/ej2-base';
 import { Deferred } from '@syncfusion/ej2-data';
 /**
  * File for handling tooltip in Gantt.
@@ -84,7 +84,11 @@ var Tooltip = /** @class */ (function () {
                     if (parent.tooltipSettings.taskbar) {
                         taskbarTemplateNode = parent.tooltipModule.templateCompiler(parent.tooltipSettings.taskbar, parent, data, 'TooltipTaskbarTemplate');
                     }
-                    argsData.content = this.toolTipObj.content = taskbarTemplateNode ? taskbarTemplateNode[0] :
+                    var tooltipTemplate = document.createElement('div');
+                    if (taskbarTemplateNode) {
+                        append(taskbarTemplateNode, tooltipTemplate);
+                    }
+                    argsData.content = this.toolTipObj.content = taskbarTemplateNode ? tooltipTemplate :
                         parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'taskbar'), data, parent, args);
                 }
                 else if (args.target.classList.contains('e-baseline-bar') ||
@@ -93,7 +97,11 @@ var Tooltip = /** @class */ (function () {
                     if ((parent.tooltipSettings.baseline)) {
                         baseLineTemplateNode = parent.tooltipModule.templateCompiler(parent.tooltipSettings.baseline, parent, data, 'TooltipBaselineTemplate');
                     }
-                    argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baseLineTemplateNode[0] :
+                    var baselineTemplate = document.createElement('div');
+                    if (baseLineTemplateNode) {
+                        append(baseLineTemplateNode, baselineTemplate);
+                    }
+                    argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baselineTemplate :
                         parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'baseline'), data, parent, args);
                 }
                 else if (args.target.classList.contains('e-event-markers')) {

package/styles/gantt/material3-dark.css

@@ -115,21 +115,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -149,7 +154,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -158,7 +163,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -168,8 +173,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -182,6 +187,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/gantt/material3.css

@@ -171,21 +171,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -205,7 +210,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -214,7 +219,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -224,8 +229,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -238,6 +243,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }