@syncfusion/ej2-gantt 19.4.55 → 20.1.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.55
+*  version : 20.1.48
 *  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@19.4.54",
+  "_id": "@syncfusion/ej2-gantt@20.1.47",
   "_inBundle": false,
-  "_integrity": "sha512-MLuEBMN++SYGBbYyb4j7PpGp/92/ztO0MBIxUC18Fhzf7uYTEXHd5aHY2reGHsAENQa+MjUaHO44cm68Fz6cvA==",
+  "_integrity": "sha512-60lkObo1sLVOuUOCasgszwBvryKWbHtCish7JIz4IlZ7aEOVHaZMzu84p839ay02/uIw5IKLnxcFY+SE5WW/pA==",
   "_location": "/@syncfusion/ej2-gantt",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-gantt",
     "/@syncfusion/ej2-vue-gantt"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-gantt/-/ej2-gantt-19.4.54.tgz",
-  "_shasum": "3e6e2c9c949ce93b3398f386e09656607022e4d5",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-gantt/-/ej2-gantt-20.1.47.tgz",
+  "_shasum": "d0d50fd8f2502745938a6e16bfae7b01e97dbfa6",
   "_spec": "@syncfusion/ej2-gantt@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,19 +35,19 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-calendars": "~19.4.55",
-    "@syncfusion/ej2-data": "~19.4.54",
-    "@syncfusion/ej2-dropdowns": "~19.4.55",
-    "@syncfusion/ej2-grids": "~19.4.55",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-layouts": "~19.4.52",
-    "@syncfusion/ej2-lists": "~19.4.55",
-    "@syncfusion/ej2-navigations": "~19.4.55",
-    "@syncfusion/ej2-popups": "~19.4.53",
-    "@syncfusion/ej2-richtexteditor": "~19.4.55",
-    "@syncfusion/ej2-treegrid": "~19.4.55"
+    "@syncfusion/ej2-base": "~20.1.48",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-calendars": "~20.1.47",
+    "@syncfusion/ej2-data": "~20.1.47",
+    "@syncfusion/ej2-dropdowns": "~20.1.47",
+    "@syncfusion/ej2-grids": "~20.1.48",
+    "@syncfusion/ej2-inputs": "~20.1.48",
+    "@syncfusion/ej2-layouts": "~20.1.47",
+    "@syncfusion/ej2-lists": "~20.1.47",
+    "@syncfusion/ej2-navigations": "~20.1.48",
+    "@syncfusion/ej2-popups": "~20.1.47",
+    "@syncfusion/ej2-richtexteditor": "~20.1.48",
+    "@syncfusion/ej2-treegrid": "~20.1.48"
   },
   "deprecated": false,
   "description": "Essential JS 2 Gantt Component",
@@ -75,6 +75,6 @@
     "url": "git+https://github.com/syncfusion/ej2-gantt.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.55",
+  "version": "20.1.48",
   "sideEffects": false
 }

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

@@ -48,7 +48,8 @@ var CellEdit = /** @class */ (function () {
             args.cancel = true;
             return;
         }
-        if (data.hasChildRecords && (field === taskSettings.endDate || field === taskSettings.duration
+        if (data.hasChildRecords && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
+            data['isManual'] == false) || this.parent.taskMode == 'Auto')) || field === taskSettings.duration
             || field === taskSettings.dependency || field === taskSettings.progress
             || field === taskSettings.work || field === 'taskType')) {
             args.cancel = true;

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

@@ -1537,7 +1537,8 @@ var DialogEdit = /** @class */ (function () {
                 disabled = true;
             }
             if (this.editedRecord.hasChildRecords) {
-                if (column.field === this.parent.taskFields.endDate || column.field === this.parent.taskFields.duration ||
+                if ((column.field === this.parent.taskFields.endDate && ((!isNullOrUndefined(this.editedRecord['isManual']) &&
+                    this.editedRecord['isManual'] == false) || this.parent.taskMode == 'Auto')) || column.field === this.parent.taskFields.duration ||
                     column.field === this.parent.taskFields.progress || column.field === this.parent.taskFields.work ||
                     column.field === 'taskType') {
                     disabled = true;

package/src/gantt/actions/edit.js

@@ -2348,7 +2348,15 @@ var Edit = /** @class */ (function () {
         }
         /* data Source update */
         if (!isNullOrUndefined(parentItem)) {
-            childIndex = parentItem.childRecords.indexOf(this.addRowSelectedItem);
+            if (rowPosition == 'Above') {
+                childIndex = parentItem.childRecords.indexOf(this.addRowSelectedItem);
+            }
+            else if (rowPosition == 'Below') {
+                childIndex = parentItem.childRecords.indexOf(this.addRowSelectedItem) + 1;
+            }
+            else {
+                childIndex = parentItem.childRecords.length;
+            }
             /*Child collection update*/
             parentItem.childRecords.splice(childIndex, 0, record);
             if ((this.parent.dataSource instanceof DataManager &&
@@ -2356,12 +2364,9 @@ var Edit = /** @class */ (function () {
                 !isNullOrUndefined(this.parent.dataSource)) {
                 var child = this.parent.taskFields.child;
                 if (parentItem.taskData[child] && parentItem.taskData[child].length > 0) {
-                    if (rowPosition === 'Above') {
+                    if (rowPosition === 'Above' || rowPosition === 'Below') {
                         parentItem.taskData[child].splice(childIndex, 0, record.taskData);
                     }
-                    else if (rowPosition === 'Below') {
-                        parentItem.taskData[child].splice(childIndex + 1, 0, record.taskData);
-                    }
                     else {
                         parentItem.taskData[child].push(record.taskData);
                     }
@@ -2427,11 +2432,27 @@ var Edit = /** @class */ (function () {
         }
     };
     Edit.prototype.refreshRecordInImmutableMode = function () {
+        var _loop_1 = function (i) {
+            var originalData = this_1.parent.modifiedRecords[i];
+            var treeIndex = this_1.parent.allowRowDragAndDrop ? 1 : 0;
+            var uniqueTaskID = this_1.parent.taskFields.id;
+            originalIndex = this_1.parent.currentViewData.findIndex(function (data) {
+                return (data[uniqueTaskID] == originalData[uniqueTaskID]);
+            });
+            if (this_1.parent.treeGrid.getRows()[originalIndex]) {
+                this_1.parent.treeGrid.renderModule.cellRender({
+                    data: originalData, cell: this_1.parent.treeGrid.getRows()[originalIndex].cells[this_1.parent.treeColumnIndex + treeIndex],
+                    column: this_1.parent.treeGrid.grid.getColumns()[this_1.parent.treeColumnIndex],
+                    requestType: 'rowDragAndDrop'
+                });
+                this_1.parent.treeGrid.renderModule.RowModifier({
+                    data: originalData, row: this_1.parent.treeGrid.getRows()[originalIndex], rowHeight: this_1.parent.rowHeight
+                });
+            }
+        };
+        var this_1 = this, originalIndex;
         for (var i = 0; i < this.parent.modifiedRecords.length; i++) {
-            var originalData = this.parent.modifiedRecords[i];
-            var dataId = this.parent.viewType === 'ProjectView' ?
-                originalData.ganttProperties.taskId : originalData.ganttProperties.rowUniqueID;
-            this.parent.treeGrid.grid.setRowData(dataId, originalData);
+            _loop_1(i);
         }
     };
     /**
@@ -2809,6 +2830,9 @@ var Edit = /** @class */ (function () {
         }
         this.addSuccess(args);
         args = this.constructTaskAddedEventArgs(cAddedRecord, args.modifiedRecords, 'add');
+        if (this.dialogModule.isAddNewResource && !this.parent.isEdit && this.parent.taskFields.work) {
+            this.parent.dataOperation.updateWorkWithDuration(cAddedRecord[0]);
+        }
         this.parent.trigger('actionComplete', args);
         if (this.dialogModule.dialog && !this.dialogModule.dialogObj.isDestroyed) {
             this.dialogModule.dialogObj.hide();
@@ -3185,15 +3209,18 @@ var Edit = /** @class */ (function () {
                 if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
                     draggedRec[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.parentID];
                     draggedRec.taskData[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.parentID];
+                    draggedRec.ganttProperties['parentId'] = droppedRec[this.parent.taskFields.parentID];
                 }
                 else {
                     draggedRec[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.id];
                     draggedRec.taskData[this.parent.taskFields.parentID] = droppedRec[this.parent.taskFields.id];
+                    draggedRec.ganttProperties['parentId'] = droppedRec[this.parent.taskFields.id];
                 }
             }
             else {
                 draggedRec[this.parent.taskFields.parentID] = null;
                 draggedRec.taskData[this.parent.taskFields.parentID] = null;
+                draggedRec.ganttProperties['parentId'] = null;
             }
         }
     };

package/src/gantt/actions/filter.js

@@ -185,11 +185,13 @@ var Filter = /** @class */ (function () {
         // ...
     };
     Filter.prototype.closeFilterOnContextClick = function (element) {
+        var datePickerElement = document.querySelector('body > div.e-datepicker');
+        var dateTimePickerElement = document.querySelector('body > div.e-datetimepicker');
         if (this.filterMenuElement && document.body.contains(this.filterMenuElement)) {
             var ganttElement = closest(element, '#' + this.parent.element.id)
                 || element.querySelector('#' + this.parent.element.id);
-            if ((!(this.filterMenuElement.contains(element)) && !isNullOrUndefined(ganttElement)) || element.nodeName === 'HTML'
-                || ((element.nodeName === 'DIV') && (!element.classList.contains('e-day')))) {
+            if ((!(this.filterMenuElement.contains(element)) && !isNullOrUndefined(ganttElement)) || (!(this.filterMenuElement.contains(element)) && (isNullOrUndefined(datePickerElement))
+                && (isNullOrUndefined(dateTimePickerElement)) && ((element.nodeName === 'DIV') || (element.nodeName === 'HTML')))) {
                 remove(this.filterMenuElement);
                 this.parent.treeGrid.grid.notify('filter-menu-close', { isOpen: false });
                 this.filterMenuElement = null;

package/src/gantt/actions/rowdragdrop.js

@@ -149,10 +149,12 @@ var RowDD = /** @class */ (function () {
             }
         }
         if (!args.cancel) {
-            args.cancel = true;
             args.requestType = 'beforeDrop';
             this.parent.trigger('actionBegin', args);
-            this.dropRows(args, true); // method to update the data collections based on drop action
+            if (!args.cancel) {
+                this.dropRows(args, true); // method to update the data collections based on drop action
+                args.cancel = true;
+            }
         }
     };
     RowDD.prototype.dropRows = function (args, isByMethod) {
@@ -249,33 +251,55 @@ var RowDD = /** @class */ (function () {
                         var data_1 = gObj.flatData;
                         var startIndex = void 0;
                         var endIndex = void 0;
+                        var ganttData_1 = this_1.parent.dataSource;
+                        var uniqueTaskID_1 = this_1.parent.taskFields.id;
                         if (draggedRecord.index < droppedRecord.index) {
                             startIndex = draggedRecord.index;
-                            endIndex = droppedRecord.index;
+                            var _loop_2 = function (i_1) {
+                                var currentData = this_1.parent.currentViewData.filter(function (e) {
+                                    return e[uniqueTaskID_1] === ganttData_1[i_1][uniqueTaskID_1];
+                                })[0];
+                                if (currentData.index > droppedRecord.index) {
+                                    endIndex = currentData.index;
+                                    return "break";
+                                }
+                            };
+                            for (var i_1 = 0; i_1 < ganttData_1.length; i_1++) {
+                                var state_2 = _loop_2(i_1);
+                                if (state_2 === "break")
+                                    break;
+                            }
                         }
                         else {
                             startIndex = droppedRecord.index;
-                            var rootChildRecord = draggedRecord;
-                            if (rootChildRecord.childRecords.length > 0) {
-                                do {
-                                    rootChildRecord = rootChildRecord.childRecords[rootChildRecord.childRecords.length - 1];
-                                } while (rootChildRecord.childRecords.length > 0);
+                            var _loop_3 = function (i_2) {
+                                var currentData = this_1.parent.currentViewData.filter(function (e) {
+                                    return e[uniqueTaskID_1] === ganttData_1[i_2][uniqueTaskID_1];
+                                })[0];
+                                if (currentData.index > draggedRecord.index) {
+                                    endIndex = currentData.index;
+                                    return "break";
+                                }
+                            };
+                            for (var i_2 = 0; i_2 < ganttData_1.length; i_2++) {
+                                var state_3 = _loop_3(i_2);
+                                if (state_3 === "break")
+                                    break;
                             }
-                            endIndex = rootChildRecord.index;
                         }
-                        var _loop_2 = function (i_1) {
-                            if (!isNullOrUndefined(data_1[i_1])) {
-                                data_1[i_1].index = i_1;
-                                if (!isNullOrUndefined(data_1[i_1].parentItem)) {
+                        var _loop_4 = function (i_3) {
+                            if (!isNullOrUndefined(data_1[i_3])) {
+                                data_1[i_3].index = i_3;
+                                if (!isNullOrUndefined(data_1[i_3].parentItem)) {
                                     var updatedParent = data_1.filter(function (e) {
-                                        return e.uniqueID === data_1[i_1].parentUniqueID;
+                                        return e.uniqueID === data_1[i_3].parentUniqueID;
                                     })[0];
-                                    data_1[i_1].parentItem.index = updatedParent.index;
+                                    data_1[i_3].parentItem.index = updatedParent.index;
                                 }
                             }
                         };
-                        for (var i_1 = startIndex; i_1 <= endIndex; i_1++) {
-                            _loop_2(i_1);
+                        for (var i_3 = startIndex; i_3 <= endIndex; i_3++) {
+                            _loop_4(i_3);
                         }
                     }
                     gObj.rowDragAndDropModule.refreshDataSource();

package/src/gantt/actions/selection.js

@@ -133,8 +133,9 @@ var Selection = /** @class */ (function () {
         }
         this.addRemoveClass(index);
         this.selectedRowIndexes = extend([], this.getSelectedRowIndexes(), [], true);
-        if (this.selectedRowIndexes.length == 0) {
-            this.parent.setProperties({ selectedRowIndex: -1 }, true);
+        this.parent.setProperties({ selectedRowIndex: -1 }, true);
+        if (this.selectedRowIndexes.length === 1) {
+            this.parent.setProperties({ selectedRowIndex: this.selectedRowIndexes[0] }, true);
         }
         if (!isNullOrUndefined(this.parent.toolbarModule)) {
             this.parent.toolbarModule.refreshToolbarItems();

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

@@ -282,7 +282,6 @@ var DateProcessor = /** @class */ (function () {
             tDuration = this.parent.editModule.taskbarEditModule.sumOfDuration(ganttProperties.segments);
         }
         else {
-            // eslint-disable-next-line
             if (!isNullOrUndefined(ganttProperties.startDate) && !isNullOrUndefined(ganttProperties.endDate) &&
                 (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && !isNullOrUndefined(ganttData.taskData[this.parent.taskFields.milestone])) {
                 tDuration = 1;

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

@@ -16,6 +16,7 @@ var GanttChart = /** @class */ (function () {
         this.chartTimelineContainer = null;
         this.rangeViewContainer =
             createElement('div', { className: cls.rangeContainer });
+        this.rangeViewContainer.setAttribute("role", "RangeContainer");
         this.virtualRender = new VirtualContentRenderer(this.parent);
         this.addEventListener();
     }
@@ -170,6 +171,7 @@ var GanttChart = /** @class */ (function () {
     GanttChart.prototype.renderTimelineContainer = function () {
         this.chartTimelineContainer =
             createElement('div', { className: cls.timelineHeaderContainer });
+        this.chartTimelineContainer.setAttribute("role", "TimelineHeader");
         this.chartElement.appendChild(this.chartTimelineContainer);
     };
     /**
@@ -209,8 +211,19 @@ var GanttChart = /** @class */ (function () {
         //empty row height
         var emptydivHeight = 36;
         var emptyHeight = this.parent.contentHeight === 0 ? this.parent.flatData.length > 1 ? emptydivHeight : 0 : this.parent.contentHeight;
-        this.chartBodyContent.style.height = formatUnit(emptyHeight);
-        //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
+        var contentElement = this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
+        if (emptyHeight >= contentElement['offsetHeight'] || this.parent.height === 'auto') {
+            this.chartBodyContent.style.height = formatUnit(emptyHeight);
+        }
+        else {
+            var scrollHeight = this.parent.element.getElementsByClassName('e-chart-rows-container')[0]['offsetHeight'];
+            if (contentElement['offsetHeight'] >= scrollHeight) {
+                this.chartBodyContent.style.height = contentElement['offsetHeight'] - 17 + 'px';
+            }
+            else {
+                this.chartBodyContent.style.height = contentElement['offsetHeight'] + 'px';
+            }
+        } //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
         this.chartBodyContent.style.width = formatUnit(this.parent.timelineModule.totalTimelineWidth);
         this.setVirtualHeight();
         this.parent.notify('updateHeight', {});
@@ -242,7 +255,21 @@ var GanttChart = /** @class */ (function () {
             if (this.chartBodyContent.clientHeight < this.chartBodyContainer.clientHeight) {
                 if (lastRow) {
                     addClass(lastRow.querySelectorAll('td'), 'e-lastrow');
-                    this.chartBodyContent.style.height = formatUnit(this.parent.contentHeight + 1);
+                    var emptydivHeight = 36;
+                    var emptyHeight = this.parent.contentHeight === 0 ? this.parent.flatData.length > 1 ? emptydivHeight : 0 : this.parent.contentHeight;
+                    var contentElement = this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0];
+                    if (emptyHeight >= contentElement['offsetHeight']) {
+                        this.chartBodyContent.style.height = formatUnit(emptyHeight);
+                    }
+                    else {
+                        var scrollHeight = this.parent.element.getElementsByClassName('e-chart-rows-container')[0]['offsetHeight'];
+                        if (contentElement['offsetHeight'] >= scrollHeight) {
+                            this.chartBodyContent.style.height = contentElement['offsetHeight'] - 17 + 'px';
+                        }
+                        else {
+                            this.chartBodyContent.style.height = contentElement['offsetHeight'] + 'px';
+                        }
+                    }
                 }
             }
         }
@@ -374,7 +401,7 @@ var GanttChart = /** @class */ (function () {
             var target = e.target;
             var isOnTaskbarElement = e.target.classList.contains(cls.taskBarMainContainer)
                 || closest(e.target, '.' + cls.taskBarMainContainer);
-            if (closest(target, '.e-gantt-parent-taskbar')) {
+            if (closest(target, '.e-gantt-parent-taskbar') && !this.parent.editSettings.allowEditing) {
                 this.chartExpandCollapseRequest(e);
             }
             else if (!isOnTaskbarElement && this.parent.autoFocusTasks) {
@@ -898,6 +925,10 @@ var GanttChart = /** @class */ (function () {
                 $target.classList.contains('e-headercell') || $target.closest('.e-segmented-taskbar')) {
                 e.preventDefault();
             }
+            if (isTab && $target.classList.contains('e-rowdragdrop')) {
+                this.parent.treeGrid.grid.notify('key-pressed', e);
+                return;
+            }
             if ($target.classList.contains('e-rowcell') && (nextElement && nextElement.classList.contains('e-rowcell')) ||
                 $target.classList.contains('e-headercell')) { // eslint-disable-line                                                                                                                                                                                                                                    
                 if (isTab) {
@@ -940,7 +971,7 @@ var GanttChart = /** @class */ (function () {
                     else {
                         this.manageFocus($target, 'remove', true);
                     }
-                    if (nextElement.classList.contains('e-rowcell')) {
+                    if (nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) {
                         if (!$target.classList.contains('e-rowcell')) {
                             this.parent.treeGrid.grid.notify('key-pressed', e);
                             var fmodule = getValue('focusModule', this.parent.treeGrid.grid);

package/src/gantt/base/gantt.js

@@ -290,25 +290,7 @@ var Gantt = /** @class */ (function (_super) {
      * @returns {void} .
      */
     Gantt.prototype.calculateDimensions = function () {
-        var settingsHeight;
-        if (typeof (this.height) !== 'number' && this.height.indexOf('%') !== -1 && (this.element.parentElement &&
-            !this.element.parentElement.style.height || this.element.parentElement.style.height.indexOf('%') !== -1)) {
-            var ganttHeight = void 0;
-            if (this.element.parentElement.style.height.indexOf('%') == -1) {
-                ganttHeight = Number(this.height.split("%")[0]);
-            }
-            else {
-                ganttHeight = Number(this.element.parentElement.style.height.split("%")[0]);
-            }
-            ganttHeight = (ganttHeight * window.innerHeight) / 100;
-            if (this.height === '100%') {
-                ganttHeight = ganttHeight - 16;
-            }
-            settingsHeight = this.validateDimentionValue(ganttHeight);
-        }
-        else {
-            settingsHeight = this.validateDimentionValue(this.height);
-        }
+        var settingsHeight = this.validateDimentionValue(this.height);
         var settingsWidth = this.validateDimentionValue(this.width);
         if (!isNullOrUndefined(this.width) && typeof (this.width) === 'string' && this.width.indexOf('%') !== -1) {
             settingsWidth = this.width;
@@ -451,40 +433,6 @@ var Gantt = /** @class */ (function (_super) {
      */
     Gantt.prototype.windowResize = function () {
         if (!isNullOrUndefined(this.element)) {
-            var settingsHeight = void 0;
-            if (this.height.indexOf('%') !== -1) {
-                var ganttHeight = Number(this.height.split("%")[0]);
-                if (this.element.parentElement && (this.element.parentElement.style.height)) {
-                    var containerHeight = void 0;
-                    if (this.element.parentElement.style.height.indexOf('%') == -1) {
-                        containerHeight = Number(this.element.parentElement.style.height.split("px")[0]);
-                        ganttHeight = (ganttHeight * containerHeight) / 100;
-                    }
-                    else {
-                        containerHeight = Number(this.element.parentElement.style.height.split("%")[0]);
-                        ganttHeight = (window.innerHeight * containerHeight) / 100;
-                    }
-                }
-                else {
-                    ganttHeight = Number(this.height.split("%")[0]);
-                    ganttHeight = (ganttHeight * window.innerHeight) / 100;
-                }
-                if (this.height === '100%') {
-                    ganttHeight = ganttHeight - 16;
-                }
-                var toolbarHeight = 0;
-                if (!isNullOrUndefined(this.toolbarModule) && !isNullOrUndefined(this.toolbarModule.element)) {
-                    toolbarHeight = this.toolbarModule.element.offsetHeight;
-                }
-                var contentHeight = ganttHeight - this.ganttChartModule.chartTimelineContainer.offsetHeight - toolbarHeight;
-                settingsHeight = this.validateDimentionValue(ganttHeight);
-                this.element.style.height = settingsHeight;
-                this.element.querySelectorAll('.e-content')[0]['style'].height = contentHeight + 'px';
-                this.element.querySelectorAll('.e-content')[2]['style'].height = contentHeight + 'px';
-            }
-            else {
-                settingsHeight = this.validateDimentionValue(this.height);
-            }
             this.updateContentHeight();
             this.ganttChartModule.updateWidthAndHeight(); // Updating chart scroll conatiner height for row mismatch
             this.treeGridModule.ensureScrollBar();
@@ -830,6 +778,18 @@ var Gantt = /** @class */ (function (_super) {
      * @private
      */
     Gantt.prototype.treeDataBound = function (args) {
+        this.element.getElementsByClassName('e-chart-root-container')[0]['style'].height = '100%';
+        var gridHeight = this.element.getElementsByClassName('e-gridcontent')[0]['style'].height;
+        var timelineContainer = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
+        gridHeight = 'calc(100% - ' + timelineContainer + 'px)';
+        // eslint-disable-next-line
+        this.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
+        if (!isNullOrUndefined(this.toolbarModule) && !isNullOrUndefined(this.toolbarModule.element)) {
+            this.splitterElement.style.height = 'calc(100% - ' + this.toolbarModule.element.offsetHeight + 'px)';
+        }
+        else {
+            this.splitterElement.style.height = '100%';
+        }
         if (this.isLoad) {
             this.updateCurrentViewData();
             if (!this.enableVirtualization) {
@@ -849,8 +809,7 @@ var Gantt = /** @class */ (function (_super) {
                     removeClass(this.treeGrid.element.querySelectorAll('.e-headercell'), cls.timelineSingleHeaderOuterDiv);
                     removeClass(this.treeGrid.element.querySelectorAll('.e-columnheader'), cls.timelineSingleHeaderOuterDiv);
                 }
-                this.treeGrid.height = this.ganttHeight - toolbarHeight -
-                    this.treeGrid.grid.getHeaderContent().offsetHeight;
+                this.treeGrid.height = '100%';
                 this.notify('tree-grid-created', {});
                 this.createGanttPopUpElement();
                 this.hideSpinner();
@@ -1361,7 +1320,7 @@ var Gantt = /** @class */ (function (_super) {
      */
     Gantt.prototype.updateGridLineContainerHeight = function () {
         if (this.chartVerticalLineContainer) {
-            this.chartVerticalLineContainer.style.height = formatUnit(this.getContentHeight());
+            this.chartVerticalLineContainer.style.height = formatUnit(this.contentHeight);
         }
     };
     /**

package/src/gantt/base/splitter.js

@@ -60,6 +60,7 @@ var Splitter = /** @class */ (function () {
                         _this.splitterObject.paneSettings[1].size = null;
                         _this.splitterObject.paneSettings[1].size = _this.getSpliterPositionInPercentage(_this.splitterPreviousPositionChart);
                     }
+                    _this.parent.timelineModule.updateTimelineAfterZooming(_this.parent.timelineModule.timelineEndDate, true);
                     callBackPromise.resolve(splitterResizedArgs);
                 });
                 return callBackPromise;

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

@@ -92,6 +92,8 @@ var GanttTreeGrid = /** @class */ (function () {
     GanttTreeGrid.prototype.renderTreeGrid = function () {
         this.composeProperties();
         this.bindEvents();
+        var root = 'root';
+        this.parent.treeGrid[root] = this.parent[root] ? this.parent[root] : this.parent;
         this.parent.treeGrid.appendTo(this.treeGridElement);
         this.wireEvents();
     };
@@ -155,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 + 'px);';
+            content.style.cssText += 'width: calc(100% + ' + (scrollWidth + 1) + 'px);';
         }
         else {
             content.classList.add('e-gantt-scroll-padding');