@syncfusion/ej2-treegrid 29.2.8 → 30.1.37

package/src/treegrid/base/treegrid-model.d.ts

@@ -481,6 +481,13 @@ export interface TreeGridModel extends ComponentModel{
      */
     enableImmutableMode?: boolean;
 
+    /**
+     *  Enables the sticky header feature, which keeps the column headers visible while scrolling the Tree Grid content or the entire document.
+     *
+     * @default false
+     */
+    enableStickyHeader?: boolean;
+
     /**
      * Defines the scrollable height of the TreeGrid content.
      *

package/src/treegrid/base/treegrid.d.ts

@@ -615,6 +615,12 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     enableImmutableMode: boolean;
+    /**
+     *  Enables the sticky header feature, which keeps the column headers visible while scrolling the Tree Grid content or the entire document.
+     *
+     * @default false
+     */
+    enableStickyHeader: boolean;
     /**
      * Defines the scrollable height of the TreeGrid content.
      *
@@ -1317,6 +1323,7 @@ export declare class TreeGrid extends Component<HTMLElement> implements INotifyP
     private lastRowBorder;
     private isPixelHeight;
     private extendedGridDataBoundEvent;
+    private lastRowBorderEventListener;
     private objectEqualityChecker;
     private bindCallBackEvents;
     private extendedGridEditEvents;

package/src/treegrid/base/treegrid.js

@@ -432,7 +432,7 @@ var TreeGrid = /** @class */ (function (_super) {
                             parentTarget = target.parentElement;
                             if (!isNullOrUndefined(parentTarget)) {
                                 var cellIndex = parentTarget.cellIndex;
-                                if (this.grid.getColumnByIndex(cellIndex).editType === 'dropdownedit' && isNullOrUndefined(this.grid.getColumnByIndex(cellIndex).edit['obj'])) {
+                                if (cellIndex && this.grid.getColumnByIndex(cellIndex).editType === 'dropdownedit' && isNullOrUndefined(this.grid.getColumnByIndex(cellIndex).edit['obj'])) {
                                     parentTarget = target;
                                 }
                                 summaryElement = this.findnextRowElement(parentTarget);
@@ -440,8 +440,11 @@ var TreeGrid = /** @class */ (function (_super) {
                                     var cellIndex_1 = target.cellIndex;
                                     var row_1 = summaryElement.children[parseInt(cellIndex_1.toString(), 10)];
                                     if (!isNullOrUndefined(row_1) && !this.grid.isEdit) {
-                                        addClass([row_1], 'e-focused');
-                                        addClass([row_1], 'e-focus');
+                                        var focusedCells = this.grid.getContent().querySelectorAll('.e-rowcell.e-focused, .e-rowcell.e-focus');
+                                        focusedCells.forEach(function (cell) {
+                                            removeClass([cell], ['e-focused', 'e-focus']);
+                                        });
+                                        addClass([row_1], ['e-focused', 'e-focus']);
                                     }
                                 }
                                 else {
@@ -461,7 +464,7 @@ var TreeGrid = /** @class */ (function (_super) {
                             parentTarget = target.parentElement;
                             if (!isNullOrUndefined(parentTarget)) {
                                 var cellIndex = parentTarget.cellIndex;
-                                if (this.grid.getColumnByIndex(cellIndex).editType === 'dropdownedit' && isNullOrUndefined(this.grid.getColumnByIndex(cellIndex).edit['obj'])) {
+                                if (cellIndex && this.grid.getColumnByIndex(cellIndex).editType === 'dropdownedit' && isNullOrUndefined(this.grid.getColumnByIndex(cellIndex).edit['obj'])) {
                                     parentTarget = target;
                                 }
                                 summaryElement = this.findPreviousRowElement(parentTarget);
@@ -470,8 +473,11 @@ var TreeGrid = /** @class */ (function (_super) {
                                     if (!isNullOrUndefined(cellIndex_2)) {
                                         var row_2 = summaryElement.children[parseInt(cellIndex_2.toString(), 10)];
                                         if (!isNullOrUndefined(row_2) && !this.grid.isEdit) {
-                                            addClass([row_2], 'e-focused');
-                                            addClass([row_2], 'e-focus');
+                                            var focusedCells = this.grid.getContent().querySelectorAll('.e-rowcell.e-focused, .e-rowcell.e-focus');
+                                            focusedCells.forEach(function (cell) {
+                                                removeClass([cell], ['e-focused', 'e-focus']);
+                                            });
+                                            addClass([row_2], ['e-focused', 'e-focus']);
                                         }
                                     }
                                 }
@@ -838,11 +844,14 @@ var TreeGrid = /** @class */ (function (_super) {
         var destroyTemplate = 'destroyTemplate';
         var destroyTemplateFn = this.grid["" + destroyTemplate];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.grid["" + destroyTemplate] = function (args, index) {
+        this.grid["" + destroyTemplate] = function (args, index, callback) {
             destroyTemplateFn.apply(_this.grid);
             var portals = 'portals';
             if (!(_this.isReact && isNullOrUndefined(_this["" + portals]))) {
-                _this.clearTemplate(args, index);
+                _this.clearTemplate(args, index, callback);
+            }
+            else if (!isNullOrUndefined(callback)) {
+                callback();
             }
         };
     };
@@ -938,18 +947,24 @@ var TreeGrid = /** @class */ (function (_super) {
         this.clipboardModule = this.grid.clipboardModule = new TreeClipboard(this, this.grid.serviceLocator);
     };
     TreeGrid.prototype.convertTreeData = function (data) {
-        var _this = this;
         if (isCountRequired(this)) {
             data = getValue('result', data);
         }
         if (data instanceof Array && data.length > 0 && Object.prototype.hasOwnProperty.call(data[0], 'level')) {
             this.flatData = data;
-            this.flatData.filter(function (e) {
-                setValue('uniqueIDCollection.' + e.uniqueID, e, _this);
-                if (e.level === 0 && !_this.parentData.some(function (record) { return record.uniqueID === e.uniqueID; })) {
-                    _this.parentData.push(e);
+            var _loop_1 = function (i, len) {
+                var rowData = this_1.flatData[parseInt(i.toString(), 10)];
+                setValue('uniqueIDCollection.' + rowData['uniqueID'], rowData, this_1);
+                if (rowData.level === 0 && !this_1.parentData.some(function (record) {
+                    return record.uniqueID === rowData.uniqueID;
+                })) {
+                    this_1.parentData.push(rowData);
                 }
-            });
+            };
+            var this_1 = this;
+            for (var i = 0, len = this.flatData.length; i < len; i++) {
+                _loop_1(i, len);
+            }
         }
         else {
             if (isCountRequired(this)) {
@@ -1039,6 +1054,9 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid["" + isJsComponent] = true;
         var enableHtmlSanitizer = 'enableHtmlSanitizer';
         this.grid["" + enableHtmlSanitizer] = this.enableHtmlSanitizer;
+        this.grid.enableStickyHeader = this.enableStickyHeader;
+        var isTreeGrid = 'isTreeGrid';
+        this.grid["" + isTreeGrid] = true;
     };
     TreeGrid.prototype.triggerEvents = function (args) {
         this.trigger(getObject('name', args), args);
@@ -1176,6 +1194,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.extendedGridDataBoundEvent = function () {
         var _this = this;
         this.grid.dataBound = function (args) {
+            _this.lastRowBorderEventListener();
             _this.updateRowTemplate();
             _this.updateColumnModel();
             _this.updateAltRow(_this.getRows());
@@ -1268,6 +1287,9 @@ var TreeGrid = /** @class */ (function (_super) {
             }
         };
     };
+    TreeGrid.prototype.lastRowBorderEventListener = function () {
+        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
+    };
     TreeGrid.prototype.bindCallBackEvents = function () {
         var _this = this;
         this.grid.toolbarClick = function (args) {
@@ -1435,6 +1457,7 @@ var TreeGrid = /** @class */ (function (_super) {
             if (args.requestType === 'sorting' && args.target && args.target.parentElement &&
                 args.target.parentElement.classList.contains('e-hierarchycheckbox')) {
                 args.cancel = true;
+                return;
             }
             var requestType = getObject('requestType', args);
             if (requestType === 'reorder') {
@@ -1625,6 +1648,7 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.autoGenerateColumns = function () {
+        var _this = this;
         if (!this.columns.length && (!this.dataModule.isRemote() && Object.keys(this.dataSource).length)) {
             this.columns = [];
             // if (this.dataSource instanceof DataManager) {
@@ -1633,11 +1657,7 @@ var TreeGrid = /** @class */ (function (_super) {
             var record = this.dataSource[0];
             // }
             var keys = Object.keys(record);
-            for (var i = 0; i < keys.length; i++) {
-                if ([this.childMapping, this.parentIdMapping].indexOf(keys[parseInt(i.toString(), 10)]) === -1) {
-                    this.columns.push(keys[parseInt(i.toString(), 10)]);
-                }
-            }
+            this.columns = keys.filter(function (key) { return [_this.childMapping, _this.parentIdMapping].indexOf(key) === -1; });
         }
     };
     TreeGrid.prototype.getGridEditSettings = function () {
@@ -1791,8 +1811,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 gridColumn.field = treeGridColumn.field = this.columns[parseInt(i.toString(), 10)];
             }
             else {
-                for (var _i = 0, _a = Object.keys(column[parseInt(i.toString(), 10)]); _i < _a.length; _i++) {
-                    var prop = _a[_i];
+                var columnProps = Object.keys(column[parseInt(i.toString(), 10)]);
+                for (var j = 0; j < columnProps.length; j++) {
+                    var prop = columnProps[parseInt(j.toString(), 10)];
                     if (index === this.treeColumnIndex && prop === 'template') {
                         treeGridColumn["" + prop] = column[parseInt(i.toString(), 10)]["" + prop];
                     }
@@ -1963,6 +1984,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     break;
                 case 'rowHeight':
                     this.grid.rowHeight = this.rowHeight;
+                    this.refresh();
                     break;
                 case 'height':
                     if (!isNullOrUndefined(this.height) && typeof (this.height) === 'string' && this.height.indexOf('%') !== -1) {
@@ -2038,6 +2060,9 @@ var TreeGrid = /** @class */ (function (_super) {
                 case 'columnMenuItems':
                     this.grid.columnMenuItems = getActualProperties(this.columnMenuItems);
                     break;
+                case 'enableStickyHeader':
+                    this.grid.enableStickyHeader = this.enableStickyHeader;
+                    break;
                 case 'editSettings':
                     if (this.grid.isEdit && this.grid.editSettings.mode === 'Normal' && newProp["" + prop].mode &&
                         (newProp["" + prop].mode === 'Cell' || newProp["" + prop].mode === 'Row')) {
@@ -2925,14 +2950,7 @@ var TreeGrid = /** @class */ (function (_super) {
      * @returns {Column[]} - Returns an array of visible column objects.
      */
     TreeGrid.prototype.getVisibleColumns = function () {
-        var cols = [];
-        for (var _i = 0, _a = this.columnModel; _i < _a.length; _i++) {
-            var col = _a[_i];
-            if (col.visible) {
-                cols.push(col);
-            }
-        }
-        return cols;
+        return this.columnModel.filter(function (col) { return col.visible; });
     };
     /**
      * Displays a loading spinner overlay across the TreeGrid for any data action or long-running process.
@@ -3060,17 +3078,14 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.getTreeColumn = function () {
         var columnModel = 'columnModel';
         var treeColumn = this["" + columnModel][this.treeColumnIndex];
-        var treeIndex;
         var updatedCols = this.getColumns();
-        for (var f = 0; f < updatedCols.length; f++) {
-            var treeColumnfield = getObject('field', treeColumn);
-            var parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
-            if (treeColumnfield === parentColumnfield) {
-                treeIndex = f;
-                break;
-            }
+        var treeColumnField = getObject('field', treeColumn);
+        var treeIndex = updatedCols.findIndex(function (col) {
+            return getObject('field', col) === treeColumnField;
+        });
+        if (!isNullOrUndefined(treeIndex)) {
+            this.setProperties({ treeColumnIndex: treeIndex }, true);
         }
-        this.setProperties({ treeColumnIndex: treeIndex }, true);
     };
     /**
      * Refreshes the header section of the TreeGrid to reflect any structural or data changes.
@@ -3393,14 +3408,14 @@ var TreeGrid = /** @class */ (function (_super) {
     };
     TreeGrid.prototype.expandAction = function (record, key, level, isPaging) {
         if (isPaging === void 0) { isPaging = false; }
-        var _loop_1 = function (i) {
+        var _loop_2 = function (i) {
             if (!isNullOrUndefined(record[parseInt(i.toString(), 10)].parentItem)) {
                 var puniqueID_1 = record[parseInt(i.toString(), 10)].parentItem.uniqueID;
-                var parentItem = this_1.flatData.filter(function (e) {
+                var parentItem = this_2.flatData.filter(function (e) {
                     return e.uniqueID === puniqueID_1;
                 });
-                if (isRemoteData(this_1)) {
-                    parentItem = this_1.getCurrentViewRecords().filter(function (e) {
+                if (isRemoteData(this_2)) {
+                    parentItem = this_2.getCurrentViewRecords().filter(function (e) {
                         return e.uniqueID === puniqueID_1;
                     });
                 }
@@ -3409,7 +3424,7 @@ var TreeGrid = /** @class */ (function (_super) {
                     parentItem[0].expanded = true;
                 }
                 else {
-                    if (!getExpandStatus(this_1, parentItem[0], this_1.parentData)) {
+                    if (!getExpandStatus(this_2, parentItem[0], this_2.parentData)) {
                         if (parentItem[0].expanded && parentItem[0].parentItem !== undefined) {
                             record.push(parentItem[0]);
                         }
@@ -3417,12 +3432,12 @@ var TreeGrid = /** @class */ (function (_super) {
                 }
             }
             if (!isPaging) {
-                this_1.expandRow(null, record[parseInt(i.toString(), 10)], key, level);
+                this_2.expandRow(null, record[parseInt(i.toString(), 10)], key, level);
             }
         };
-        var this_1 = this;
+        var this_2 = this;
         for (var i = 0; i < record.length; i++) {
-            _loop_1(i);
+            _loop_2(i);
         }
         if (isPaging) {
             this.expandRow(null, record, key, level);
@@ -3526,8 +3541,12 @@ var TreeGrid = /** @class */ (function (_super) {
         if (this.editSettings.mode === 'Batch') {
             var obj = 'dialogObj';
             var showDialog = 'showDialog';
-            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
-                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+            var changes = this.getBatchChanges ? this.getBatchChanges() : {};
+            var changed = Array.isArray(changes.changedRecords) ? changes.changedRecords : [];
+            var deleted = Array.isArray(changes.deletedRecords) ? changes.deletedRecords : [];
+            var added = Array.isArray(changes.addedRecords) ? changes.addedRecords : [];
+            var hasChanges = changed.length > 0 || deleted.length > 0 || added.length > 0;
+            if (hasChanges && this.editSettings.showConfirmDialog) {
                 var dialogObj = this.grid.editModule["" + obj];
                 this.grid.editModule["" + showDialog]('CancelEdit', dialogObj);
                 return;
@@ -3553,8 +3572,12 @@ var TreeGrid = /** @class */ (function (_super) {
         if (this.editSettings.mode === 'Batch') {
             var obj = 'dialogObj';
             var showDialog = 'showDialog';
-            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
-                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+            var changes = this.getBatchChanges ? this.getBatchChanges() : {};
+            var changed = Array.isArray(changes.changedRecords) ? changes.changedRecords : [];
+            var deleted = Array.isArray(changes.deletedRecords) ? changes.deletedRecords : [];
+            var added = Array.isArray(changes.addedRecords) ? changes.addedRecords : [];
+            var hasChanges = changed.length > 0 || deleted.length > 0 || added.length > 0;
+            if (hasChanges && this.editSettings.showConfirmDialog) {
                 var dialogObj = this.grid.editModule["" + obj];
                 this.grid.editModule["" + showDialog]('CancelEdit', dialogObj);
                 return;
@@ -3844,6 +3867,8 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.remoteExpand = function (action, row, record) {
         var gridRows = this.getRows();
         var fetchRemoteChildData = 'fetchRemoteChildData';
+        var requestType = getValue('isCollapseAll', this) ? 'collapseAll' : 'refresh';
+        this.grid.contentModule.requestType = requestType;
         if (this.rowTemplate) {
             var rows_1 = this.getContentTable().rows;
             gridRows = [].slice.call(rows_1);
@@ -3918,6 +3943,13 @@ var TreeGrid = /** @class */ (function (_super) {
             gridRowsObject[parseInt(currentIndex.toString(), 10)].visible !== false) {
             gridRowsObject[parseInt(currentIndex.toString(), 10)].visible = true;
         }
+        if (this.detailTemplate) {
+            gridRows.forEach(function (row) {
+                if (row.classList.contains('e-detailrow') && row.style.display === 'none') {
+                    row.style.display = '';
+                }
+            });
+        }
         var detailrows = gridRows.filter(function (r) {
             return r.classList.contains('e-griddetailrowindex' + record.index + 'level' + (record.level + 1));
         });
@@ -4082,7 +4114,6 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.addListener = function () {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
-        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
     };
     TreeGrid.prototype.updateResultModel = function (returnResult) {
         this.dataResults = returnResult;
@@ -4675,6 +4706,9 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeGrid.prototype, "enableImmutableMode", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "enableStickyHeader", void 0);
     __decorate([
         Property('auto')
     ], TreeGrid.prototype, "height", void 0);

package/src/treegrid/renderer/virtual-row-model-generator.js

@@ -39,10 +39,15 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
     };
     TreeVirtualRowModelGenerator.prototype.generateRows = function (data, notifyArgs) {
         var info = this.getDataInfo();
-        if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
-            if ((!isRemoteData(this.parent.root) || isCountRequired(this.parent))
-                || notifyArgs.virtualInfo.blockIndexes.length === 1) {
-                notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
+        if (notifyArgs.requestType === 'refresh' && notifyArgs.isExpandCollapse) {
+            notifyArgs.virtualInfo = this['prevInfo'];
+        }
+        if (!isNullOrUndefined(notifyArgs.virtualInfo) && !(this.parent.root.loadChildOnDemand && isRemoteData(this.parent.root))) {
+            if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
+                if ((!isRemoteData(this.parent.root) || isCountRequired(this.parent))
+                    || notifyArgs.virtualInfo.blockIndexes.length === 1) {
+                    notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
+                }
             }
             else {
                 notifyArgs.virtualInfo.blockIndexes = this.getBlockIndexes(notifyArgs.virtualInfo.page);
@@ -83,7 +88,10 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
             else if (action === 'virtualscroll' && this.cache[parseInt(currentPage.toString(), 10)] &&
                 this.cache[parseInt(currentPage.toString(), 10)].length >
                     (this.parent.contentModule).getBlockSize()) {
-                delete this.cache[parseInt(currentPage.toString(), 10)];
+                if (this.cache[parseInt(currentPage.toString(), 10)].length > (this.parent.contentModule).getBlockSize()) {
+                    this.cache[parseInt(currentPage.toString(), 10)] =
+                        this.cache[parseInt(currentPage.toString(), 10)].slice(0, (this.parent.contentModule).getBlockSize());
+                }
             }
         }
         else {

package/src/treegrid/renderer/virtual-tree-content-render.d.ts

@@ -197,6 +197,7 @@ export declare class VirtualTreeContentRenderer extends VirtualContentRenderer {
      * @returns {void} This method does not return any value.
      */
     private restoreEditState;
+    private SetVirtualPageQury;
     /**
      * Resets the edit state if certain conditions are met.
      *

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -11,7 +11,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { Cell, CellType } from '@syncfusion/ej2-grids';
+import { Cell, CellType, getVisiblePage } from '@syncfusion/ej2-grids';
 import { VirtualContentRenderer } from '@syncfusion/ej2-grids';
 import * as literals from '../base/constant';
 import { InterSectionObserver } from '@syncfusion/ej2-grids';
@@ -19,7 +19,7 @@ import { TreeVirtualRowModelGenerator } from '../renderer/virtual-row-model-gene
 import * as events from '../base/constant';
 import { isNullOrUndefined, EventHandler, getValue, setValue, Browser, debounce } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
-import { isCountRequired } from '../utils';
+import { isCountRequired, isRemoteData } from '../utils';
 /**
  * VirtualTreeContentRenderer
  *
@@ -219,6 +219,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             this.parent["" + action]('refresh-virtual-editform-cells', this.refreshCell, this);
             this.parent["" + action]('virtaul-cell-focus', this.cellFocus, this);
             this.parent["" + action]('virtual-scroll-edit', this.restoreEditState, this);
+            this.parent["" + action]('set-virtual-page-query', this.SetVirtualPageQury, this);
         }
         else {
             _super.prototype.eventListener.call(this, 'on');
@@ -471,6 +472,18 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         var restoreEdit = 'restoreEdit';
         _super.prototype["" + restoreEdit].call(this);
     };
+    VirtualTreeContentRenderer.prototype.SetVirtualPageQury = function (args) {
+        var visiblePage = [];
+        if (this.prevInfo && this.prevInfo.blockIndexes) {
+            visiblePage = getVisiblePage(this.prevInfo.blockIndexes);
+        }
+        if ((this.requestType === 'refresh') && visiblePage.length) {
+            args.query.skip(this.parent.pageSettings.pageSize * (visiblePage[0] - 1));
+            args.query.take(this.parent.pageSettings.pageSize * visiblePage.length);
+            args.skipPage = true;
+            return;
+        }
+    };
     /**
      * Resets the edit state if certain conditions are met.
      *
@@ -611,6 +624,19 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 var xAxis = current.axis === 'X';
                 var x = _this.getColumnOffset(xAxis ? _this.vgenerator.getColumnIndexes()[0] - 1 : _this.prevInfo.columnIndexes[0]
                     - 1);
+                if (_this.parent.isFrozenGrid() && _this.parent.enableColumnVirtualization && _this.currentInfo &&
+                    _this.currentInfo.columnIndexes) {
+                    var cBlock = _this.currentInfo.columnIndexes[0] - 1;
+                    var frzLeftWidth_1 = 0;
+                    _this.parent.getColumns().filter(function (col) {
+                        if (col.visible && col.freeze === 'Left') {
+                            frzLeftWidth_1 += parseInt(col.width.toString(), 10);
+                        }
+                    });
+                    if (cBlock > _this.parent.getVisibleFrozenLeftCount()) {
+                        x = x - frzLeftWidth_1;
+                    }
+                }
                 if (xAxis) {
                     var idx = Object.keys(_this.vgenerator.cOffsets).length - _this.prevInfo.columnIndexes.length;
                     var maxLeft = _this.vgenerator.cOffsets[idx - 1];
@@ -628,6 +654,9 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                     }
                     if (_this.parent.enableColumnVirtualization) {
                         _this.header.virtualEle.adjustTable(x, 0);
+                        if (_this.parent.isFrozenGrid()) {
+                            _this.parent.contentModule['resetStickyLeftPos'](x);
+                        }
                     }
                 }
             }
@@ -772,10 +801,10 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
         if (((downScroll && scrollArgs.direction !== 'up' && (scrollArgs.offset.top < (rowHeight * this.totalRecords)))
             || (upScroll)) || (scrollArgs.direction === 'right' || scrollArgs.direction === 'left') ||
             ((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
-                && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') && (downScroll || upScroll) || isCountRequired(this.parent))) {
+                && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== ''))) {
             var viewInfo = this.currentInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
             this.previousInfo = viewInfo;
-            if (this.prevInfo && viewInfo.event !== 'refresh-virtual-block' && ((info.axis === 'Y' && this.prevInfo.blockIndexes.toString() === viewInfo.blockIndexes.toString())
+            if (this.prevInfo && ((info.axis === 'Y' && this.prevInfo.blockIndexes.toString() === viewInfo.blockIndexes.toString())
                 || ((info.axis === 'X' && this.prevInfo.columnIndexes.toString() === viewInfo.columnIndexes.toString())
                     || (this.parent.isFrozenGrid() && this.parent.getVisibleFrozenLeftCount() >= viewInfo.columnIndexes[0]
                         && this.prevInfo.columnIndexes.toString().includes(viewInfo.columnIndexes.toString()))))) {
@@ -797,7 +826,7 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
                 viewInfo.loadNext = false;
             }
             this.requestType = 'virtualscroll';
-            if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') {
+            if (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left' && !isRemoteData(this.parent.root)) {
                 viewInfo.event = viewInfo.event === 'refresh-virtual-block' ? 'model-changed' : viewInfo.event;
             }
             if (this.parent.enableVirtualMaskRow) {
@@ -870,9 +899,33 @@ var VirtualTreeContentRenderer = /** @class */ (function (_super) {
             if (e.requestType === 'virtualscroll' && e.virtualInfo.sentinelInfo.axis === 'Y') {
                 this.isExpandCollapse = false;
             }
+            var reduceWidth_1 = 0;
+            if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid()) {
+                var frzLeftWidth_2 = 0;
+                this.parent.getColumns().filter(function (col) {
+                    if (col.visible) {
+                        reduceWidth_1 += parseInt(col.width.toString(), 10);
+                        if (col.freeze === 'Left') {
+                            frzLeftWidth_2 += parseInt(col.width.toString(), 10);
+                        }
+                    }
+                });
+                var cIndex = info.columnIndexes;
+                width = this.getColumnOffset(cIndex[cIndex.length - 1]) - this.getColumnOffset(cIndex[0] - 1) + '';
+                if (cBlock > this.parent.getVisibleFrozenLeftCount()) {
+                    cOffset = cOffset - frzLeftWidth_2;
+                }
+                this.resetStickyLeftPos(cOffset, newChild);
+            }
             if (!this.isExpandCollapse || this.translateY === 0) {
                 this.translateY = this.translateY < 0 ? 0 : this.translateY;
                 getValue('virtualEle', this).adjustTable(cOffset, this.translateY);
+                if (this.parent.enableColumnVirtualization) {
+                    this.header.virtualEle.adjustTable(cOffset, 0);
+                    if (this.parent.isFrozenGrid()) {
+                        this.resetStickyLeftPos(cOffset);
+                    }
+                }
             }
             else {
                 this.isExpandCollapse = false;
@@ -991,7 +1044,12 @@ var TreeInterSectionObserver = /** @class */ (function (_super) {
         this["" + options].prevTop = this["" + options].prevLeft = 0;
         var isScrollByFocus = 'isScrollByFocus';
         return function (e) {
-            if (instance.isEdit && instance.root.editModule["" + isScrollByFocus]) {
+            var keyPress = 'keyPress';
+            var keyaction;
+            if (instance && instance.root && instance.root.editModule && instance.root.editModule["" + keyPress]) {
+                keyaction = instance.root.editModule["" + keyPress];
+            }
+            if ((instance.isEdit && instance.root.editModule["" + isScrollByFocus]) || (instance.isEdit && (keyaction === 'tab' || keyaction === 'shiftTab'))) {
                 instance.root.editModule["" + isScrollByFocus] = false;
                 return;
             }

package/styles/bds-lite.css

@@ -371,6 +371,12 @@
   content: "\e72a";
 }
 
+@media print {
+  .e-treecell-child {
+    width: 10px;
+    display: inline-block;
+  }
+}
 .e-treegrid .e-icons.e-none::before {
   content: "";
 }
@@ -390,6 +396,22 @@
   text-align: center;
   vertical-align: unset;
 }
+.e-treegrid .e-treecolumn-container .e-treecell-icon {
+  width: 4px;
+  display: inline-block;
+}
+.e-treegrid .e-treecolumn-container .e-treecell-child {
+  width: 10px;
+  display: inline-block;
+}
+.e-treegrid .e-expand-iconstyle {
+  width: 16px;
+}
+.e-treegrid .e-print-layout {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
 .e-treegrid tr.e-childrow-hidden {
   display: none;
 }
@@ -507,6 +529,7 @@
   width: 0;
 }
 .e-treegrid .e-detailheadercell,
+.e-treegrid .e-detailcell-visible,
 .e-treegrid .e-headercontent .e-table .e-detail-intent,
 .e-treegrid .e-gridcontent .e-table .e-detail-intent,
 .e-treegrid .e-table .e-detailrow .e-detailindentcell,
@@ -515,6 +538,13 @@
 .e-treegrid tr.e-detailrow.e-childrow-hidden {
   display: none;
 }
+.e-treegrid .e-table-cell::before {
+  content: none;
+  display: none;
+}
+.e-treegrid .e-table-cell {
+  display: table-cell;
+}
 .e-treegrid .e-icons.e-errorelem {
   padding-left: 10px;
   display: inline-block;