@syncfusion/ej2-gantt 23.2.5 → 24.1.41

package/src/gantt/renderer/timeline.js

@@ -22,6 +22,11 @@ var Timeline = /** @class */ (function () {
         this.isZoomToFit = false;
         this.topTierCollection = [];
         this.bottomTierCollection = [];
+        this.pdfExportTopTierCollection = [];
+        this.pdfExportBottomTierCollection = [];
+        this.restrictRender = true;
+        this.performedTimeSpanAction = false;
+        this.isZoomedToFit = false;
         this.parent = ganttObj;
         this.initProperties();
     }
@@ -65,6 +70,10 @@ var Timeline = /** @class */ (function () {
         if (!this.parent.isFromOnPropertyChange) {
             this.parent.updateProjectDates(this.parent.cloneProjectStartDate, this.parent.cloneProjectEndDate, this.parent.isTimelineRoundOff);
         }
+        var timelineContainer = this.parent.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
+        this.parent.element.getElementsByClassName('e-gridcontent')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+        // eslint-disable-next-line
+        this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
     };
     /**
      * Function used to refresh Gantt rows.
@@ -98,6 +107,7 @@ var Timeline = /** @class */ (function () {
      */
     Timeline.prototype.processZooming = function (isZoomIn) {
         this.isZoomToFit = false;
+        this.isZoomedToFit = false;
         if (!this.parent['isProjectDateUpdated']) {
             this.parent.dateValidationModule.calculateProjectDates();
         }
@@ -205,6 +215,13 @@ var Timeline = /** @class */ (function () {
                 this.parent.hideSpinner();
             }
         }
+        var tier = this.topTier === 'None' ? 'bottomTier' : 'topTier';
+        if (this.parent.enableTimelineVirtualization && (!this.parent.pdfExportModule || this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport)) {
+            this.wholeTimelineWidth = this.calculateWidthBetweenTwoDate(tier, this.parent.timelineModule.timelineStartDate, this.parent.timelineModule.timelineEndDate);
+            this.parent.element.querySelectorAll(".e-chart-scroll-container")[0].querySelector(".e-virtualtrack")['style'].width = this.wholeTimelineWidth + 'px';
+            this.parent.element.querySelectorAll(".e-timeline-header-container")[0].querySelector(".e-virtualtrack")['style'].width = this.wholeTimelineWidth + 'px';
+            this.parent.ganttChartModule.updateWidthAndHeight();
+        }
     };
     /**
      * To perform the zoom to fit operation in Gantt.
@@ -215,6 +232,7 @@ var Timeline = /** @class */ (function () {
     Timeline.prototype.processZoomToFit = function () {
         this.isZoomToFit = true;
         this.isZooming = false;
+        this.isZoomedToFit = true;
         if (!this.parent.zoomingProjectStartDate) {
             this.parent.zoomingProjectStartDate = this.parent.cloneProjectStartDate;
             this.parent.zoomingProjectEndDate = this.parent.cloneProjectEndDate;
@@ -279,6 +297,7 @@ var Timeline = /** @class */ (function () {
         }
         this.changeTimelineSettings(newTimeline);
         this.parent.isTimelineRoundOff = isNullOrUndefined(this.parent.projectStartDate) ? true : false;
+        this.isZoomToFit = false;
     };
     Timeline.prototype.bottomTierCellWidthCalc = function (mode, zoomLevel, date) {
         var convertedMilliSeconds;
@@ -622,6 +641,28 @@ var Timeline = /** @class */ (function () {
                 this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
         }
     };
+    Timeline.prototype.dateByLeftValue = function (left, isMilestone, property) {
+        var pStartDate = new Date(this.parent.timelineModule.timelineStartDate.toString());
+        var milliSecondsPerPixel = (24 * 60 * 60 * 1000) / this.parent.perDayWidth;
+        pStartDate.setTime(pStartDate.getTime() + (left * milliSecondsPerPixel));
+        /* To render the milestone in proper date while editing */
+        if (isMilestone && !isNullOrUndefined(property.predecessorsName) && property.predecessorsName !== '') {
+            pStartDate.setDate(pStartDate.getDate() - 1);
+            this.parent.dateValidationModule.setTime(this.parent.defaultEndTime, pStartDate);
+            pStartDate = this.parent.dateValidationModule.checkStartDate(pStartDate, property, true);
+        }
+        var tierMode = this.parent.timelineModule.bottomTier !== 'None' ? this.parent.timelineModule.topTier :
+            this.parent.timelineModule.bottomTier;
+        if (tierMode !== 'Hour' && tierMode !== 'Minutes') {
+            if (this.parent.isInDst(new Date(this.parent.timelineModule.timelineStartDate.toString())) && !this.parent.isInDst(pStartDate)) {
+                pStartDate.setTime(pStartDate.getTime() + (60 * 60 * 1000));
+            }
+            else if (!this.parent.isInDst(new Date(this.parent.timelineModule.timelineStartDate.toString())) && this.parent.isInDst(pStartDate)) {
+                pStartDate.setTime(pStartDate.getTime() - (60 * 60 * 1000));
+            }
+        }
+        return pStartDate;
+    };
     /**
      * To create timeline header template.
      *
@@ -634,32 +675,109 @@ var Timeline = /** @class */ (function () {
         var div;
         var table;
         var thead;
+        var virtualTableDiv;
+        var virtualTrackDiv;
         var loopCount = this.isSingleTier ? 1 : 2;
         var tier = this.topTier === 'None' ? 'bottomTier' : 'topTier';
-        this.updateTimelineHeaderHeight();
         this.topTierCollection = [];
         this.bottomTierCollection = [];
-        for (var count = 0; count < loopCount; count++) {
-            table = createElement('table', { className: cls.timelineHeaderTableContainer, styles: 'display: block;' });
-            thead = createElement('thead', { className: cls.timelineHeaderTableBody, styles: 'display:block; border-collapse:collapse' });
-            tr = createElement('tr', { innerHTML: this.createTimelineTemplate(tier) });
-            if (!this.parent.pdfExportModule || (this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport) || (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps && !this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
-                td = createElement('th');
+        if (this.restrictRender == true) {
+            this.updateTimelineHeaderHeight();
+            this.wholeTimelineWidth = this.calculateWidthBetweenTwoDate(tier, this.parent.timelineModule.timelineStartDate, this.parent.timelineModule.timelineEndDate);
+        }
+        if (this.parent.enableTimelineVirtualization && (this.wholeTimelineWidth > this.parent.element.offsetWidth * 3)) {
+            for (var count = 0; count < loopCount; count++) {
+                table = createElement('table', { className: cls.timelineHeaderTableContainer, styles: 'display: block;' });
+                table.setAttribute('role', 'presentation');
+                thead = createElement('thead', { className: cls.timelineHeaderTableBody, styles: 'display:block; border-collapse:collapse' });
+                tr = createElement('tr', { innerHTML: this.createTimelineTemplate(tier) });
+                td = createElement('td');
+                div = createElement('div', { styles: 'width: 20px' });
+                virtualTableDiv = createElement('div', { className: cls.virtualTable });
+                virtualTrackDiv = createElement('div', { className: cls.virtualTrack });
+                td.appendChild(div);
+                tr.appendChild(td);
+                virtualTableDiv.appendChild(tr);
+                thead.appendChild(virtualTableDiv);
+                thead.appendChild(virtualTrackDiv);
+                table.appendChild(thead);
+                this.parent.ganttChartModule.chartTimelineContainer.appendChild(table);
+                tier = 'bottomTier';
+                tr = null;
+                this.restrictRender = false;
+            }
+            if (this.parent.height === "Auto" || this.parent.timelineModule.isSingleTier) {
+                var timelineContainer = this.parent.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
+                this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+                if (!isNullOrUndefined(this.parent.element.getElementsByClassName('e-gridcontent')[0])) {
+                    this.parent.treeGrid.element.getElementsByClassName('e-gridcontent')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+                }
+            }
+            this.timelineVirtualizationStyles();
+        }
+        else {
+            for (var count = 0; count < loopCount; count++) {
+                table = createElement('table', { className: cls.timelineHeaderTableContainer, styles: 'display: block;' });
+                table.setAttribute('role', 'presentation');
+                thead = createElement('thead', { className: cls.timelineHeaderTableBody, styles: 'display:block; border-collapse:collapse' });
+                tr = createElement('tr', { innerHTML: this.createTimelineTemplate(tier) });
+                td = createElement('td');
                 div = createElement('div', { styles: 'width: 20px' });
                 td.appendChild(div);
                 tr.appendChild(td);
                 thead.appendChild(tr);
                 table.appendChild(thead);
                 this.parent.ganttChartModule.chartTimelineContainer.appendChild(table);
+                tier = 'bottomTier';
+                tr = null;
+            }
+            if (this.parent.height === "Auto" || this.parent.timelineModule.isSingleTier) {
+                var timelineContainer = this.parent.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
+                this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+                if (!isNullOrUndefined(this.parent.element.getElementsByClassName('e-gridcontent')[0])) {
+                    this.parent.treeGrid.element.getElementsByClassName('e-gridcontent')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+                }
             }
-            tier = 'bottomTier';
-            tr = null;
         }
-        if (this.parent.height === "Auto" || this.parent.timelineModule.isSingleTier) {
-            var timelineContainer = this.parent.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
-            this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
-            if (!isNullOrUndefined(this.parent.element.getElementsByClassName('e-gridcontent')[0])) {
-                this.parent.treeGrid.element.getElementsByClassName('e-gridcontent')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+    };
+    Timeline.prototype.timelineVirtualizationStyles = function () {
+        var translateXValue = 0;
+        var translateYValue = 0;
+        var trackWidth = this.wholeTimelineWidth;
+        if (this.parent.enableTimelineVirtualization) {
+            //e-content styles updating
+            translateXValue = (this.parent.enableTimelineVirtualization && !isNullOrUndefined(this.parent.ganttChartModule.scrollObject.element.scrollLeft)
+                && this.parent.ganttChartModule.scrollObject.element.scrollLeft != 0) ? this.parent.ganttChartModule.scrollObject.getTimelineLeft() : 0;
+            if (this.parent.enableRtl) {
+                translateXValue = -(translateXValue);
+            }
+            var contentVirtualTable = this.parent.element.querySelectorAll(".e-chart-scroll-container")[0].querySelector(".e-virtualtable");
+            contentVirtualTable.style.transform = "translate(" + translateXValue + "px, " + translateYValue + "px)";
+            var contentVirtualTrack = this.parent.element.querySelectorAll(".e-chart-scroll-container")[0].querySelector(".e-virtualtrack");
+            contentVirtualTrack.style.position = "relative";
+            contentVirtualTrack.style.width = trackWidth + 'px';
+            //timeline styles updating
+            if (this.parent.ganttChartModule.scrollObject['isSetScrollLeft']) {
+                var virtualTableStylesT = this.parent.element.querySelectorAll(".e-timeline-header-table-container")[0].querySelector(".e-virtualtable");
+                var virtualTableStylesB = this.parent.element.querySelectorAll(".e-timeline-header-table-container")[1].querySelector(".e-virtualtable");
+                virtualTableStylesT.style.transform = "translate(" + translateXValue + "px, " + translateYValue + "px)";
+                virtualTableStylesB.style.transform = "translate(" + translateXValue + "px, " + translateYValue + "px)";
+            }
+            var virtualTrackStylesT = this.parent.element.querySelectorAll(".e-timeline-header-table-container")[0].querySelector(".e-virtualtrack");
+            var virtualTrackStylesB = this.parent.element.querySelectorAll(".e-timeline-header-table-container")[1].querySelector(".e-virtualtrack");
+            virtualTrackStylesT.style.position = "relative";
+            virtualTrackStylesB.style.position = "relative";
+            virtualTrackStylesT.style.width = trackWidth + 'px';
+            virtualTrackStylesB.style.width = trackWidth + 'px';
+            //dependency viewer styles updating
+            var dependencyViewer = this.parent.connectorLineModule.svgObject;
+            dependencyViewer['style'].width = trackWidth + 'px';
+            // timeline header container width updating
+            var timelineHeader = this.parent.element.querySelector('.' + cls.timelineHeaderContainer);
+            timelineHeader['style'].width = 'calc(100% - ' + 17 + 'px)';
+            if (this.parent.timelineModule.isZooming || this.parent.timelineModule.isZoomToFit) {
+                this.parent.ganttChartModule.scrollElement.scrollLeft = 0;
+                this.parent.ganttChartModule.scrollObject.updateChartElementStyles();
             }
         }
     };
@@ -869,7 +987,12 @@ var Timeline = /** @class */ (function () {
                 dateString = dateString.slice(1);
             }
             else {
-                dateString = dateString.slice(0, 1);
+                if (this.parent.locale === 'ar') {
+                    dateString = dateString;
+                }
+                else {
+                    dateString = dateString.slice(0, 1);
+                }
             }
         }
         else {
@@ -910,9 +1033,14 @@ var Timeline = /** @class */ (function () {
             parent.timelineModule.customTimelineSettings.bottomTier.count;
         var increment;
         var newTime;
-        var startDate = new Date(this.parent.timelineModule.timelineStartDate.toString());
+        var leftValueForStartDate = (this.parent.enableTimelineVirtualization && this.parent.ganttChartModule.scrollObject.element.scrollLeft != 0)
+            ? this.parent.ganttChartModule.scrollObject.getTimelineLeft() : null;
+        var startDate = (this.parent.enableTimelineVirtualization && !isNullOrUndefined(leftValueForStartDate))
+            ? new Date((this.dateByLeftValue(leftValueForStartDate)).toString()) : new Date(this.parent.timelineModule.timelineStartDate.toString());
         var endDate = new Date(this.timelineRoundOffEndDate.toString());
         var scheduleDateCollection = [];
+        var width = 0;
+        var WidthForVirtualTable = this.parent.element.offsetWidth * 3;
         do {
             // PDf export collection
             var timelineCell = {};
@@ -942,8 +1070,20 @@ var Timeline = /** @class */ (function () {
             parentTh = parentTh + parentTr;
             var tierCollection = tier === 'topTier' ? this.topTierCollection : this.bottomTierCollection;
             timelineCell.endDate = new Date(startDate.getTime());
-            tierCollection.push(timelineCell);
-        } while ((startDate < endDate));
+            if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.enableTimelineVirtualization) {
+                if (tier == 'topTier') {
+                    this.pdfExportTopTierCollection.push(timelineCell);
+                }
+                else {
+                    this.pdfExportBottomTierCollection.push(timelineCell);
+                }
+            }
+            else {
+                tierCollection.push(timelineCell);
+            }
+            width += timelineCell.width;
+            this.weekendEndDate = timelineCell.endDate >= endDate ? endDate : timelineCell.endDate;
+        } while ((this.parent.enableTimelineVirtualization && (!this.parent.pdfExportModule || this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport)) ? (width < WidthForVirtualTable) && (startDate < endDate) : (startDate < endDate));
         return parentTh;
     };
     Timeline.prototype.updateTimelineAfterZooming = function (endDate, resized) {
@@ -1429,9 +1569,10 @@ var Timeline = /** @class */ (function () {
                 var validEndLeft = this.parent.dataOperation.getTaskLeft(validEndDate, false);
                 var isChanged = void 0;
                 var taskbarModule = this.parent.editModule.taskbarEditModule;
-                if (!isNullOrUndefined(maxStartLeft) && ((!isNullOrUndefined(taskbarModule)) && (!isNullOrUndefined(taskbarModule.taskBarEditAction)
+                if (!isNullOrUndefined(maxStartLeft) && (((!isNullOrUndefined(taskbarModule)) && (!isNullOrUndefined(taskbarModule.taskBarEditAction)
                     && taskbarModule.taskBarEditAction !== 'ProgressResizing' &&
-                    taskbarModule.taskBarEditAction !== 'RightResizing' && taskbarModule.taskBarEditAction !== 'LeftResizing')) && (maxStartLeft < this.bottomTierCellWidth || maxStartLeft <= validStartLeft)) {
+                    taskbarModule.taskBarEditAction !== 'RightResizing' && taskbarModule.taskBarEditAction !== 'LeftResizing')) || ((taskbarModule)
+                    && isNullOrUndefined(taskbarModule.taskBarEditAction))) && (maxStartLeft < this.bottomTierCellWidth || maxStartLeft <= validStartLeft)) {
                     isChanged = 'prevTimeSpan';
                     minStartDate = minStartDate > this.timelineStartDate ? this.timelineStartDate : minStartDate;
                 }
@@ -1481,13 +1622,16 @@ var Timeline = /** @class */ (function () {
         }
         var args = this.timeSpanActionEvent('actionBegin', type, isFrom);
         if (!args.cancel) {
+            this.restrictRender = true;
+            this.performedTimeSpanAction = true;
+            var previousScrollLeft = this.parent.ganttChartModule.scrollElement.scrollLeft;
             this.parent.updateProjectDates(args.projectStartDate, args.ProjectEndDate, args.isTimelineRoundOff, isFrom);
             if (type === 'prevTimeSpan' && isFrom === 'publicMethod') {
                 this.parent.ganttChartModule.updateScrollLeft(0);
                 this.parent.timelineModule.isZoomToFit = false;
             }
             else if (type === 'nextTimeSpan' && isFrom === 'publicMethod') {
-                this.parent.ganttChartModule.updateScrollLeft(this.parent.timelineModule.totalTimelineWidth);
+                this.parent.ganttChartModule.updateScrollLeft(this.parent.enableTimelineVirtualization ? this.wholeTimelineWidth : this.totalTimelineWidth);
                 this.parent.timelineModule.isZoomToFit = false;
             }
             else if (type === 'nextTimeSpan' && isFrom === 'TaskbarEditing') {
@@ -1495,6 +1639,10 @@ var Timeline = /** @class */ (function () {
                 this.parent.element.querySelector('.e-timeline-header-container').scrollLeft = currentScrollLeft;
                 this.parent.timelineModule.isZoomToFit = false;
             }
+            if (isFrom === 'TaskbarEditing' && this.parent.enableTimelineVirtualization && this.wholeTimelineWidth > this.parent.element.offsetWidth * 3) {
+                this.parent.ganttChartModule.scrollObject.setScrollLeft(previousScrollLeft);
+                this.parent.ganttChartModule.scrollObject.updateContent();
+            }
             this.parent.timelineModule.timeSpanActionEvent('actionComplete', type, isFrom);
         }
         else {

package/styles/bootstrap-dark.css

@@ -264,6 +264,22 @@
   content: "\e85f";
 }
 
+.e-bigger .e-gantt .e-gantt-chart .e-taskbar-left-resizer,
+.e-bigger .e-gantt .e-gantt-chart .e-taskbar-right-resizer {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 25px;
+  z-index: 4;
+}
+.e-bigger .e-gantt .e-gantt-chart .e-left-resize-gripper,
+.e-bigger .e-gantt .e-gantt-chart .e-right-resize-gripper {
+  -ms-flex-align: center;
+      align-items: center;
+  cursor: ew-resize;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
 .e-bigger .e-gantt .e-gantt-chart .e-timeline-header-container {
   height: 64px;
 }
@@ -343,7 +359,8 @@
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
-  left: 0 !important;
+  left: -11px;
+  top: 3px;
 }
 .e-bigger .e-gantt .e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
   font-size: 12px !important;
@@ -355,8 +372,8 @@
 .e-bigger .e-gantt .e-dialog .e-footer-content .e-btn {
   margin-left: 12px;
 }
-.e-bigger .e-gantt .e-dialog .e-dlg-header {
-  line-height: 28px;
+.e-bigger .e-gantt .e-dialog .e-dlg-header:not(.e-gantt-adaptive-dialog .e-dialog .e-dlg-header) {
+  line-height: 37px;
 }
 .e-bigger .e-gantt .e-grid .e-flmenu-valuediv {
   padding: 16px 0 0 !important;
@@ -370,6 +387,7 @@
 }
 .e-bigger .e-gantt-dialog .e-dialog {
   border-radius: 6px;
+  width: 556px !important;
 }
 .e-bigger .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
   padding: 0 16px !important; /* stylelint-disable-line declaration-no-important */
@@ -450,6 +468,16 @@
 .e-bigger .e-gantt-dialog .e-input-group-icon.e-date-icon {
   min-width: 36px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt-dialog .e-gantt-adaptive-dialog .e-dialog {
+  position: absolute !important; /* stylelint-disable-line declaration-no-important */
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-bigger .e-gantt-dialog .e-gantt-adaptive-dialog .e-dialog .e-dlg-header-content {
+  padding: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-bigger .e-gantt-dialog .e-gantt-adaptive-dialog .e-dialog td {
+  width: 100% !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-bigger .e-predecessor-tooltip .e-arrow-tip-outer.e-tip-bottom {
   border-top: 8px solid #000;
 }
@@ -675,9 +703,6 @@
 .e-gantt .e-gantt-tree-grid-pane .e-gridcontent .e-content {
   overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-tree-grid-pane .e-gridcontent .e-gantt-frozen {
-  overflow-x: hidden !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-gantt .e-gantt-tree-grid-pane .e-gridcontent .e-content.e-gantt-scroll-padding {
   width: calc(100% + 17px);
 }
@@ -800,7 +825,7 @@
   box-sizing: border-box;
 }
 .e-gantt .e-gantt-chart .e-zero-spacing {
-  border-spacing: 0;
+  border-spacing: 0.25px;
 }
 .e-gantt .e-gantt-chart .e-chart-row:first-child .e-chart-row-border {
   border-top: 0;
@@ -830,9 +855,6 @@
   vertical-align: middle;
   z-index: 3;
 }
-.e-gantt .e-gantt-chart .e-taskbar-main-container:hover {
-  z-index: 4;
-}
 .e-gantt .e-gantt-chart .e-taskbar-main-container.e-gantt-multi-taskbar:hover {
   z-index: 4;
 }
@@ -1309,7 +1331,7 @@
   border-spacing: 0;
 }
 .e-gantt-dialog .e-item {
-  height: 241px;
+  height: 100%;
 }
 .e-gantt-dialog .e-dependent-div {
   border-bottom-width: 0px;
@@ -1368,6 +1390,9 @@
 .e-gantt-dialog > .e-dlg-content {
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-gantt-dialog .e-dlg-header {
+  line-height: 30px;
+}
 .e-gantt-dialog .e-dlg-header-content {
   border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -1375,6 +1400,10 @@
   border-radius: 6px 6px 0px 0px;
   padding-bottom: 20px;
 }
+.e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
+  left: -11px;
+  top: 2px !important;
+}
 .e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
   border-radius: 50%;
   height: auto !important; /* stylelint-disable-line declaration-no-important */
@@ -1440,13 +1469,14 @@
   font-size: 14px;
 }
 
-.e-bigger .e-gantt .e-gantt-chart .e-timeline-single-header-outer-div {
-  height: 64px !important; /* stylelint-disable-line declaration-no-important */
+.e-bigger .e-filter-popup .e-control .e-dialog .e-lib .e-popup .e-popup-open .e-excelfilter .e-gantt,
+.e-bigger .e-gantt .e-excelfilter .e-dialog .e-dlg-content {
+  padding: 0 18px 0 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-bigger .e-timeline-single-header-cell {
-  height: 64px !important; /* stylelint-disable-line declaration-no-important */
-  line-height: 64px !important; /* stylelint-disable-line declaration-no-important */
+.e-bigger .e-filter-popup .e-control .e-dialog .e-lib .e-popup .e-popup-open .e-excelfilter .e-gantt,
+.e-bigger .e-gantt .e-contextmenu-wrapper ul {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-gantt-tooltip-label {
@@ -1561,6 +1591,29 @@
   z-index: 1;
 }
 
+.e-gantt .e-gantt-chart .e-chart-root-container .e-content td.e-chart-row-cell.e-droptop {
+  border-top: 1px solid #0070f0;
+  border-width: 1px 0 0;
+}
+
+.e-gantt .e-gantt-chart .e-chart-root-container .e-content td.e-chart-row-cell.e-dropbottom {
+  border-bottom: 1px solid #0070f0;
+  box-shadow: #0070f0;
+}
+
+.e-gantt .e-gantt-chart .e-chart-root-container .e-content td.e-chart-row-cell.e-childborder {
+  border-bottom: 1px solid #0070f0;
+  border-top: 1px solid #0070f0;
+  box-shadow: #0070f0;
+}
+
+@media (max-width: 767px) {
+  .e-bigger .e-gantt .e-dialog .e-edit-form-column:nth-child(odd), .e-bigger .e-gantt .e-dialog .e-edit-form-column:nth-child(even) {
+    float: none;
+    padding: 16px 12px 0 16px;
+    width: 100%;
+  }
+}
 /*! Gantt theme */
 .e-gantt .e-gantt-splitter {
   border-color: #484848;
@@ -1613,6 +1666,13 @@
   background: #484848;
   opacity: 1;
 }
+.e-gantt .e-gantt-tree-grid-pane .e-grid td.e-active.e-leftfreeze,
+.e-gantt .e-gantt-tree-grid-pane .e-grid td.e-active.e-unfreeze,
+.e-gantt .e-gantt-tree-grid-pane .e-grid td.e-active.e-rightfreeze,
+.e-gantt .e-gantt-tree-grid-pane .e-grid td.e-active.e-fixedfreeze {
+  background: #484848;
+  opacity: 1;
+}
 .e-gantt .e-taskbar-resize-div {
   border-color: #0070f0;
 }
@@ -1929,6 +1989,7 @@
 }
 .e-gantt-dialog .e-dlg-header {
   color: #fff;
+  position: relative;
 }
 .e-gantt-dialog .e-dlg-header-content {
   background: #0070f0;