@syncfusion/ej2-treegrid 29.2.4 → 30.1.37

package/dist/es6/ej2-treegrid.es2015.js

@@ -1,5 +1,5 @@
 import { merge, Property, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, Component, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
-import { Logger as Logger$1, Grid, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, RowRenderer } from '@syncfusion/ej2-grids';
+import { Logger as Logger$1, Grid, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, getVisiblePage, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, RowRenderer } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { DataManager, ODataAdaptor, WebApiAdaptor, WebMethodAdaptor, CacheAdaptor, UrlAdaptor, Query, DataUtil, RemoteSaveAdaptor, Deferred, JsonAdaptor, Predicate as Predicate$1 } from '@syncfusion/ej2-data';
 import { showSpinner, hideSpinner, createSpinner } from '@syncfusion/ej2-popups';
@@ -519,12 +519,13 @@ class TreeClipboard extends Clipboard {
                     if (i > 0) {
                         this.treeCopyContent += '\n';
                     }
-                    if (!rows[selectedIndexes[parseInt(i.toString(), 10)]].classList.contains('e-summaryrow')) {
-                        const cells = [].slice.call(rows[selectedIndexes[parseInt(i.toString(), 10)]].querySelectorAll('.e-rowcell'));
+                    const selectedRowIndex = selectedIndexes[parseInt(i.toString(), 10)];
+                    if (!rows[selectedRowIndex].classList.contains('e-summaryrow')) {
+                        const cells = [].slice.call(rows[selectedRowIndex].querySelectorAll('.e-rowcell'));
                         const uniqueid = this.treeGridParent.getSelectedRecords()[parseInt(i.toString(), 10)][`${uniqueID}`];
                         if (this.copiedUniqueIdCollection.indexOf(uniqueid) === -1) {
                             if (this.treeGridParent.copyHierarchyMode === 'Parent' || this.treeGridParent.copyHierarchyMode === 'Both') {
-                                this.parentContentData(currentRecords, selectedIndexes[parseInt(i.toString(), 10)], rows, withHeader, i);
+                                this.parentContentData(currentRecords, selectedRowIndex, rows, withHeader, i);
                             }
                             this[`${getCopyData}`](cells, false, '\t', withHeader);
                             this.treeCopyContent += this[`${copyContent}`];
@@ -537,11 +538,7 @@ class TreeClipboard extends Clipboard {
                     }
                 }
                 if (withHeader) {
-                    const headerTextArray = [];
-                    for (let i = 0; i < this.treeGridParent.getVisibleColumns().length; i++) {
-                        headerTextArray[parseInt(i.toString(), 10)] =
-                            this.treeGridParent.getVisibleColumns()[parseInt(i.toString(), 10)].headerText;
-                    }
+                    const headerTextArray = this.treeGridParent.getVisibleColumns().map((col) => col.headerText);
                     this[`${getCopyData}`](headerTextArray, false, '\t', withHeader);
                     this.treeCopyContent = this[`${copyContent}`] + '\n' + this.treeCopyContent;
                 }
@@ -2113,6 +2110,15 @@ class DataManipulation {
                             if (parentRec) {
                                 records[parseInt(rec.toString(), 10)].level = parentRec.level + 1;
                             }
+                            else {
+                                const parentRec = args.actual.flatData.find((record) => record[`${this.parent.idMapping}`] === parentID);
+                                if (isNullOrUndefined(parentRec[`${this.parent.parentIdMapping}`])) {
+                                    records[parseInt(rec.toString(), 10)].level = 1;
+                                }
+                                else {
+                                    records[parseInt(rec.toString(), 10)].level = parentRec.level + 1;
+                                }
+                            }
                         }
                         else {
                             records[parseInt(rec.toString(), 10)].level = 0;
@@ -2207,33 +2213,33 @@ class DataManipulation {
     fetchRemoteChildData(rowDetails) {
         const args = { row: rowDetails.parentRow, data: rowDetails.record };
         const dm = this.parent.dataSource;
-        const qry = this.parent.grid.getDataModule().generateQuery();
-        const clonequries = qry.queries.filter((e) => e.fn !== 'onPage' && e.fn !== 'onWhere');
-        qry.queries = clonequries;
-        qry.isCountRequired = true;
+        const query = this.parent.grid.getDataModule().generateQuery();
+        const clonequries = query.queries.filter((e) => e.fn !== 'onPage' && e.fn !== 'onWhere');
+        query.queries = clonequries;
+        query.isCountRequired = true;
         let idMappingValue = parseInt(rowDetails.record[this.parent.idMapping], 10);
         if (isNaN(idMappingValue)) {
             idMappingValue = rowDetails.record[this.parent.idMapping].toString();
         }
         if (this.parent.enableVirtualization && rowDetails.action === 'remoteExpand') {
-            qry.take(this.parent.pageSettings.pageSize);
+            query.take(this.parent.grid.pageSettings.pageSize);
             const expandDetail = [];
             expandDetail.push('ExpandingAction', idMappingValue.toString());
-            qry.expand(expandDetail);
+            query.expand(expandDetail);
         }
         else if (this.parent.enableVirtualization && rowDetails.action === 'collapse') {
-            qry.take(this.parent.grid.pageSettings.pageSize);
+            query.take(this.parent.grid.pageSettings.pageSize);
             const expandDetail = [];
             expandDetail.push('CollapsingAction', idMappingValue.toString());
-            qry.expand(expandDetail);
+            query.expand(expandDetail);
         }
-        qry.where(this.parent.parentIdMapping, 'equal', rowDetails.record[this.parent.idMapping]);
+        query.where(this.parent.parentIdMapping, 'equal', rowDetails.record[this.parent.idMapping]);
         if (rowDetails.action === 'remoteExpand' && this.parent.grid.filterSettings && this.parent.grid.filterSettings.columns.length) {
             const filterqry = this.parent.grid.getDataModule().generateQuery().queries.filter((e) => e.fn !== 'onPage' && typeof e.e.predicates !== 'undefined');
-            qry.queries.push(filterqry[0]);
+            query.queries.push(filterqry[0]);
         }
         showSpinner(this.parent.element);
-        dm.executeQuery(qry).then((e) => {
+        dm.executeQuery(query).then((e) => {
             const remoteExpandedData = 'remoteExpandedData';
             const remoteCollapsedData = 'remoteCollapsedData';
             const level = 'level';
@@ -2406,8 +2412,15 @@ class DataManipulation {
                         record.expanded = false;
                     }
                 }
-                datas.splice(inx + r + 1, 0, record);
+                const exists = datas.some((data) => data[`${this.parent.idMapping}`] === record[this.parent.idMapping]);
+                if (!exists) {
+                    datas.splice(inx + r + 1, 0, record);
+                }
             }
+            const localIdMapping = this.parent.idMapping;
+            datas.sort(function (firstRecord, secondRecord) {
+                return firstRecord[`${localIdMapping}`] - secondRecord[`${localIdMapping}`];
+            });
             setValue('result', datas, e);
             setValue('action', 'beforecontentrender', e);
             this.parent.trigger(actionComplete, e);
@@ -2450,7 +2463,8 @@ class DataManipulation {
         const contentModule = getValue('grid.contentModule', this.parent);
         const currentInfo = getValue('currentInfo', contentModule);
         const prevInfo = getValue('prevInfo', contentModule);
-        if (currentInfo.loadNext && this.parent.grid.pageSettings.currentPage === currentInfo.nextInfo.page) {
+        if (currentInfo.loadNext && this.parent.grid.pageSettings.currentPage === currentInfo.nextInfo.page
+            && !this.parent.loadChildOnDemand) {
             this.parent.grid.pageSettings.currentPage = prevInfo.page;
         }
     }
@@ -3352,7 +3366,9 @@ function updateParentRow(key, record, action, control, isSelfReference, child) {
                 }
                 else {
                     if (!isNullOrUndefined(child) && record[`${key}`] !== child[`${key}`]) {
-                        record.childRecords.push(child);
+                        if (!record.childRecords.some((records) => records.uniqueID === child.uniqueID)) {
+                            record.childRecords.push(child);
+                        }
                     }
                 }
                 if (record.childRecords.indexOf(childRecords) === -1 && record[`${key}`] !== child[`${key}`]) {
@@ -3817,7 +3833,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                             parentTarget = target.parentElement;
                             if (!isNullOrUndefined(parentTarget)) {
                                 const 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);
@@ -3825,8 +3841,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                                     const cellIndex = target.cellIndex;
                                     const row = summaryElement.children[parseInt(cellIndex.toString(), 10)];
                                     if (!isNullOrUndefined(row) && !this.grid.isEdit) {
-                                        addClass([row], 'e-focused');
-                                        addClass([row], 'e-focus');
+                                        const focusedCells = this.grid.getContent().querySelectorAll('.e-rowcell.e-focused, .e-rowcell.e-focus');
+                                        focusedCells.forEach((cell) => {
+                                            removeClass([cell], ['e-focused', 'e-focus']);
+                                        });
+                                        addClass([row], ['e-focused', 'e-focus']);
                                     }
                                 }
                                 else {
@@ -3846,7 +3865,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                             parentTarget = target.parentElement;
                             if (!isNullOrUndefined(parentTarget)) {
                                 const 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);
@@ -3855,8 +3874,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                                     if (!isNullOrUndefined(cellIndex)) {
                                         const row = summaryElement.children[parseInt(cellIndex.toString(), 10)];
                                         if (!isNullOrUndefined(row) && !this.grid.isEdit) {
-                                            addClass([row], 'e-focused');
-                                            addClass([row], 'e-focus');
+                                            const focusedCells = this.grid.getContent().querySelectorAll('.e-rowcell.e-focused, .e-rowcell.e-focus');
+                                            focusedCells.forEach((cell) => {
+                                                removeClass([cell], ['e-focused', 'e-focus']);
+                                            });
+                                            addClass([row], ['e-focused', 'e-focus']);
                                         }
                                     }
                                 }
@@ -4221,11 +4243,14 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         const destroyTemplate = 'destroyTemplate';
         const destroyTemplateFn = this.grid[`${destroyTemplate}`];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.grid[`${destroyTemplate}`] = (args, index) => {
+        this.grid[`${destroyTemplate}`] = (args, index, callback) => {
             destroyTemplateFn.apply(this.grid);
             const portals = 'portals';
             if (!(this.isReact && isNullOrUndefined(this[`${portals}`]))) {
-                this.clearTemplate(args, index);
+                this.clearTemplate(args, index, callback);
+            }
+            else if (!isNullOrUndefined(callback)) {
+                callback();
             }
         };
     }
@@ -4325,12 +4350,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         if (data instanceof Array && data.length > 0 && Object.prototype.hasOwnProperty.call(data[0], 'level')) {
             this.flatData = data;
-            this.flatData.filter((e) => {
-                setValue('uniqueIDCollection.' + e.uniqueID, e, this);
-                if (e.level === 0 && !this.parentData.some((record) => record.uniqueID === e.uniqueID)) {
-                    this.parentData.push(e);
+            for (let i = 0, len = this.flatData.length; i < len; i++) {
+                const rowData = this.flatData[parseInt(i.toString(), 10)];
+                setValue('uniqueIDCollection.' + rowData['uniqueID'], rowData, this);
+                if (rowData.level === 0 && !this.parentData.some((record) => record.uniqueID === rowData.uniqueID)) {
+                    this.parentData.push(rowData);
                 }
-            });
+            }
         }
         else {
             if (isCountRequired(this)) {
@@ -4420,6 +4446,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid[`${isJsComponent}`] = true;
         const enableHtmlSanitizer = 'enableHtmlSanitizer';
         this.grid[`${enableHtmlSanitizer}`] = this.enableHtmlSanitizer;
+        this.grid.enableStickyHeader = this.enableStickyHeader;
+        const isTreeGrid = 'isTreeGrid';
+        this.grid[`${isTreeGrid}`] = true;
     }
     triggerEvents(args) {
         this.trigger(getObject('name', args), args);
@@ -4555,6 +4584,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     }
     extendedGridDataBoundEvent() {
         this.grid.dataBound = (args) => {
+            this.lastRowBorderEventListener();
             this.updateRowTemplate();
             this.updateColumnModel();
             this.updateAltRow(this.getRows());
@@ -4647,6 +4677,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
         };
     }
+    lastRowBorderEventListener() {
+        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
+    }
     bindCallBackEvents() {
         this.grid.toolbarClick = (args) => {
             if ((args.item.id === this.grid.element.id + '_excelexport' && this.allowExcelExport === false) ||
@@ -4810,6 +4843,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             if (args.requestType === 'sorting' && args.target && args.target.parentElement &&
                 args.target.parentElement.classList.contains('e-hierarchycheckbox')) {
                 args.cancel = true;
+                return;
             }
             const requestType = getObject('requestType', args);
             if (requestType === 'reorder') {
@@ -4870,12 +4904,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 this.grid.refresh();
             }
             if (args.action === 'filter') {
-                if (this.filterModule['currentFilterObject'] !== '' && this.enableVirtualization && !this.initialRender && !(isRemoteData(this) && this.enableVirtualization)) {
+                if (!args.isCollapseMaintain && this.filterModule['currentFilterObject'] !== '' && this.enableVirtualization && !this.initialRender && !(isRemoteData(this) && this.enableVirtualization)) {
                     this.expandAll();
                 }
             }
             if (args.requestType === 'searching') {
-                if (this.searchSettings.key !== '' && this.enableVirtualization && !this.initialRender && !(isRemoteData(this) && this.enableVirtualization)) {
+                if (!args.isCollapseMaintain && this.searchSettings.key !== '' && this.enableVirtualization && !this.initialRender && !(isRemoteData(this) && this.enableVirtualization)) {
                     this.expandAll();
                 }
             }
@@ -5006,11 +5040,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             const record = this.dataSource[0];
             // }
             const keys = Object.keys(record);
-            for (let 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((key) => { return [this.childMapping, this.parentIdMapping].indexOf(key) === -1; });
         }
     }
     getGridEditSettings() {
@@ -5162,7 +5192,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 gridColumn.field = treeGridColumn.field = this.columns[parseInt(i.toString(), 10)];
             }
             else {
-                for (const prop of Object.keys(column[parseInt(i.toString(), 10)])) {
+                const columnProps = Object.keys(column[parseInt(i.toString(), 10)]);
+                for (let j = 0; j < columnProps.length; j++) {
+                    const prop = columnProps[parseInt(j.toString(), 10)];
                     if (index === this.treeColumnIndex && prop === 'template') {
                         treeGridColumn[`${prop}`] = column[parseInt(i.toString(), 10)][`${prop}`];
                     }
@@ -5332,6 +5364,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     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) {
@@ -5407,6 +5440,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 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')) {
@@ -6291,13 +6327,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      * @returns {Column[]} - Returns an array of visible column objects.
      */
     getVisibleColumns() {
-        const cols = [];
-        for (const col of this.columnModel) {
-            if (col.visible) {
-                cols.push(col);
-            }
-        }
-        return cols;
+        return this.columnModel.filter((col) => col.visible);
     }
     /**
      * Displays a loading spinner overlay across the TreeGrid for any data action or long-running process.
@@ -6425,17 +6455,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     getTreeColumn() {
         const columnModel = 'columnModel';
         const treeColumn = this[`${columnModel}`][this.treeColumnIndex];
-        let treeIndex;
         const updatedCols = this.getColumns();
-        for (let f = 0; f < updatedCols.length; f++) {
-            const treeColumnfield = getObject('field', treeColumn);
-            const parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
-            if (treeColumnfield === parentColumnfield) {
-                treeIndex = f;
-                break;
-            }
+        const treeColumnField = getObject('field', treeColumn);
+        const treeIndex = updatedCols.findIndex((col) => 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.
@@ -6883,8 +6908,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (this.editSettings.mode === 'Batch') {
             const obj = 'dialogObj';
             const showDialog = 'showDialog';
-            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
-                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+            const changes = this.getBatchChanges ? this.getBatchChanges() : {};
+            const changed = Array.isArray(changes.changedRecords) ? changes.changedRecords : [];
+            const deleted = Array.isArray(changes.deletedRecords) ? changes.deletedRecords : [];
+            const added = Array.isArray(changes.addedRecords) ? changes.addedRecords : [];
+            const hasChanges = changed.length > 0 || deleted.length > 0 || added.length > 0;
+            if (hasChanges && this.editSettings.showConfirmDialog) {
                 const dialogObj = this.grid.editModule[`${obj}`];
                 this.grid.editModule[`${showDialog}`]('CancelEdit', dialogObj);
                 return;
@@ -6910,8 +6939,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (this.editSettings.mode === 'Batch') {
             const obj = 'dialogObj';
             const showDialog = 'showDialog';
-            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
-                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+            const changes = this.getBatchChanges ? this.getBatchChanges() : {};
+            const changed = Array.isArray(changes.changedRecords) ? changes.changedRecords : [];
+            const deleted = Array.isArray(changes.deletedRecords) ? changes.deletedRecords : [];
+            const added = Array.isArray(changes.addedRecords) ? changes.addedRecords : [];
+            const hasChanges = changed.length > 0 || deleted.length > 0 || added.length > 0;
+            if (hasChanges && this.editSettings.showConfirmDialog) {
                 const dialogObj = this.grid.editModule[`${obj}`];
                 this.grid.editModule[`${showDialog}`]('CancelEdit', dialogObj);
                 return;
@@ -7197,6 +7230,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     remoteExpand(action, row, record) {
         let gridRows = this.getRows();
         const fetchRemoteChildData = 'fetchRemoteChildData';
+        const requestType = getValue('isCollapseAll', this) ? 'collapseAll' : 'refresh';
+        this.grid.contentModule.requestType = requestType;
         if (this.rowTemplate) {
             const rows = this.getContentTable().rows;
             gridRows = [].slice.call(rows);
@@ -7263,6 +7298,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             gridRowsObject[parseInt(currentIndex.toString(), 10)].visible !== false) {
             gridRowsObject[parseInt(currentIndex.toString(), 10)].visible = true;
         }
+        if (this.detailTemplate) {
+            gridRows.forEach((row) => {
+                if (row.classList.contains('e-detailrow') && row.style.display === 'none') {
+                    row.style.display = '';
+                }
+            });
+        }
         const detailrows = gridRows.filter((r) => r.classList.contains('e-griddetailrowindex' + record.index + 'level' + (record.level + 1)));
         for (let i = 0; i < rows.length; i++) {
             if (!isNullOrUndefined(rows[parseInt(i.toString(), 10)])) {
@@ -7421,7 +7463,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     addListener() {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
-        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
     }
     updateResultModel(returnResult) {
         this.dataResults = returnResult;
@@ -8014,6 +8055,9 @@ __decorate$b([
 __decorate$b([
     Property(false)
 ], TreeGrid.prototype, "enableImmutableMode", void 0);
+__decorate$b([
+    Property(false)
+], TreeGrid.prototype, "enableStickyHeader", void 0);
 __decorate$b([
     Property('auto')
 ], TreeGrid.prototype, "height", void 0);
@@ -10012,20 +10056,13 @@ class RowDD {
                 if (deletedRow.hasChildRecords && deletedRow.childRecords.length > 0) {
                     this.removeChildItem(deletedRow);
                 }
-                let idx;
-                let idz;
                 const treeGridData = dataSource;
-                for (let i = 0; i < treeGridData.length; i++) {
-                    if (treeGridData[parseInt(i.toString(), 10)][this.parent.idMapping] === deletedRow.taskData[this.parent.idMapping]) {
-                        idx = i;
-                    }
-                }
-                for (let i = 0; i < this.treeGridData.length; i++) {
-                    if (this.treeGridData[parseInt(i.toString(), 10)][this.parent.idMapping]
-                        === deletedRow.taskData[this.parent.idMapping]) {
-                        idz = i;
-                    }
-                }
+                const idx = treeGridData.findIndex((data) => {
+                    return data[this.parent.idMapping] === deletedRow.taskData[this.parent.idMapping];
+                });
+                const idz = this.treeGridData.findIndex((data) => {
+                    return data[this.parent.idMapping] === deletedRow.taskData[this.parent.idMapping];
+                });
                 if (idx !== -1 && !isNullOrUndefined(idx)) {
                     dataSource.splice(idx, 1);
                 }
@@ -10259,19 +10296,13 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
         return super.getData();
     }
     generateRows(data, notifyArgs) {
-        if (!isNullOrUndefined(notifyArgs.virtualInfo) && notifyArgs.virtualInfo.loadNext &&
-            notifyArgs.virtualInfo.nextInfo.page !== this.parent.pageSettings.currentPage) {
-            this.parent.setProperties({ pageSettings: { currentPage: notifyArgs.virtualInfo.nextInfo.page } }, true);
-        }
-        else if (!isNullOrUndefined(notifyArgs.virtualInfo) && !notifyArgs.virtualInfo.loadNext &&
-            notifyArgs.virtualInfo.page !== this.parent.pageSettings.currentPage) {
-            this.parent.setProperties({ pageSettings: { currentPage: notifyArgs.virtualInfo.page } }, true);
-        }
         const info = this.getDataInfo();
-        if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
+        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 (!((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
-                    && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent))
+                if ((!isRemoteData(this.parent.root) || isCountRequired(this.parent))
                     || notifyArgs.virtualInfo.blockIndexes.length === 1) {
                     notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
                 }
@@ -10315,7 +10346,10 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
             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 {
@@ -10402,11 +10436,11 @@ class Filter {
         this.filteredParentRecs = [];
         this.filteredResult = [];
         this.isHierarchyFilter = false;
+        const hierarchyMode = this.parent.grid.searchSettings.key === '' ? this.parent.filterSettings.hierarchyMode
+            : this.parent.searchSettings.hierarchyMode;
         for (let f = 0; f < this.flatFilteredData.length; f++) {
             const rec = this.flatFilteredData[parseInt(f.toString(), 10)];
             this.addParentRecord(rec);
-            const hierarchyMode = this.parent.grid.searchSettings.key === '' ? this.parent.filterSettings.hierarchyMode
-                : this.parent.searchSettings.hierarchyMode;
             if (((hierarchyMode === 'Child' || hierarchyMode === 'None') &&
                 (this.parent.grid.filterSettings.columns.length !== 0 || this.parent.grid.searchSettings.key !== ''))) {
                 this.isHierarchyFilter = true;
@@ -10418,8 +10452,6 @@ class Filter {
             const parent = getObject('parentItem', rec);
             if (!isNullOrUndefined(parent)) {
                 const parRecord = getParentData(this.parent, rec.parentItem.uniqueID, true);
-                //let parRecord: Object = this.flatFilteredData.filter((e: ITreeData) => {
-                //          return e.uniqueID === rec.parentItem.uniqueID; })[0];
                 setValue('hasFilteredChildRecords', true, parRecord);
                 if (parRecord && parRecord.parentItem) {
                     this.updateParentFilteredRecord(parRecord);
@@ -10443,7 +10475,6 @@ class Filter {
     }
     addParentRecord(record) {
         const parent = getParentData(this.parent, record.parentUniqueID);
-        //let parent: Object = this.parent.flatData.filter((e: ITreeData) => {return e.uniqueID === record.parentUniqueID; })[0];
         const hierarchyMode = this.parent.grid.searchSettings.key === '' ? this.parent.filterSettings.hierarchyMode
             : this.parent.searchSettings.hierarchyMode;
         if (hierarchyMode === 'None' && (this.parent.grid.filterSettings.columns.length !== 0
@@ -11199,8 +11230,8 @@ class Toolbar {
             }
             row = (!isNullOrUndefined(selectedrow) && selectedrow.rowIndex !== row.rowIndex) ? selectedrow : row;
             if (indentEle !== null && outdentEle !== null) {
-                indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
-                outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
+                indentElement = indentEle.parentElement;
+                outdentElement = outdentEle.parentElement;
                 if (row.rowIndex === 0 || tObj.getSelectedRowIndexes().length > 1) {
                     indentElement.classList.add('e-hidden');
                     outdentElement.classList.add('e-hidden');
@@ -11333,14 +11364,7 @@ class Aggregate {
     calculateSummaryValue(summaryQuery, filteredData, isSort) {
         this.summaryQuery = summaryQuery;
         let parentRecord;
-        const parentDataLength = Object.keys(filteredData).length;
-        const parentData = [];
-        for (let p = 0, len = parentDataLength; p < len; p++) {
-            const summaryRow = getObject('isSummaryRow', filteredData[parseInt(p.toString(), 10)]);
-            if (!summaryRow) {
-                parentData.push(filteredData[parseInt(p.toString(), 10)]);
-            }
-        }
+        const parentData = filteredData.filter((data) => !getObject('isSummaryRow', data));
         const parentRecords = findParentRecords(parentData);
         const flatRecords = parentData.slice();
         const summaryLength = Object.keys(this.parent.aggregates).length;
@@ -11493,14 +11517,7 @@ class Aggregate {
             appendChildren(cellElement, tempObj.fn(single[summaryColumn.columnName], this.parent, tempObj.property));
         }
         const value = single[`${summaryColumn.columnName}`][`${summaryKey}`];
-        let summaryValue;
-        if (cellElement.innerHTML.indexOf(value) === -1) {
-            summaryValue = cellElement.innerHTML + value;
-            return summaryValue;
-        }
-        else {
-            return cellElement.innerHTML;
-        }
+        return cellElement.innerHTML.indexOf(value) === -1 ? cellElement.innerHTML + value : cellElement.innerHTML;
     }
     getFormatFromType(summaryformat, type) {
         if (isNullOrUndefined(type) || typeof summaryformat !== 'string') {
@@ -11582,8 +11599,13 @@ class Sort {
         this.flatSortedData = [];
     }
     iterateSort(data, srtQry) {
+        const gridQuery = this.parent.query;
+        let filterQuery = [];
+        if (!isNullOrUndefined(gridQuery)) {
+            filterQuery = gridQuery.queries.filter((q) => q.fn === 'onWhere');
+        }
         for (let d = 0; d < data.length; d++) {
-            if (this.parent.grid.filterSettings.columns.length > 0 || this.parent.grid.searchSettings.key !== '') {
+            if (filterQuery.length > 0 || this.parent.grid.filterSettings.columns.length > 0 || this.parent.grid.searchSettings.key !== '') {
                 if (!isNullOrUndefined(getParentData(this.parent, data[parseInt(d.toString(), 10)].uniqueID, true))) {
                     this.storedIndex++;
                     this.flatSortedData[this.storedIndex] = data[parseInt(d.toString(), 10)];
@@ -11861,6 +11883,7 @@ class BatchEdit {
         this.parent.on('batchCancelAction', this.batchCancelAction, this);
         this.parent.grid.on('immutable-batch-cancel', this.immutableBatchAction, this);
         this.parent.grid.on('next-cell-index', this.nextCellIndex, this);
+        this.parent.grid.on('cellfocused', this.onCellFocused, this);
     }
     /**
      * @hidden
@@ -11880,6 +11903,7 @@ class BatchEdit {
         this.parent.off('batchCancelAction', this.batchCancelAction);
         this.parent.grid.off('immutable-batch-cancel', this.immutableBatchAction);
         this.parent.grid.off('next-cell-index', this.nextCellIndex);
+        this.parent.grid.off('cellfocused', this.onCellFocused);
     }
     /**
      * To destroy the editModule
@@ -11921,11 +11945,11 @@ class BatchEdit {
     batchPageAction() {
         const data = (this.parent.grid.dataSource instanceof DataManager ?
             this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource);
-        const primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
+        const primaryKeyField = this.parent.grid.getPrimaryKeyFieldNames()[0];
         let index;
         if (!isNullOrUndefined(this.batchAddedRecords) && this.batchAddedRecords.length) {
             for (let i = 0; i < this.batchAddedRecords.length; i++) {
-                index = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(this.batchAddedRecords[parseInt(i.toString(), 10)][`${primaryKey}`]);
+                index = data.findIndex((e) => { return e[`${primaryKeyField}`] === this.batchAddedRecords[parseInt(i.toString(), 10)][`${primaryKeyField}`]; });
                 data.splice(index, 1);
             }
         }
@@ -12152,7 +12176,7 @@ class BatchEdit {
         childs.push(data);
         records = childs;
         for (let i = 0; i < records.length; i++) {
-            const indexvalue = this.batchRecords.map((e) => { return e[`${primarykey}`]; }).indexOf(records[parseInt(i.toString(), 10)][`${primarykey}`]);
+            const indexvalue = this.batchRecords.findIndex((e) => { return e[`${primarykey}`] === records[parseInt(i.toString(), 10)][`${primarykey}`]; });
             if (indexvalue !== -1) {
                 this.batchRecords.splice(indexvalue, 1);
             }
@@ -12171,11 +12195,11 @@ class BatchEdit {
     }
     updateChildCount(records) {
         const primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
-        const addedRecords = 'addedRecords';
+        const addedRecords = this.parent.getBatchChanges().addedRecords || [];
         const parentItem = this.parent.editSettings.newRowPosition === 'Child' ? 'primaryParent' : 'parentItem';
-        for (let i = 0; i < this.parent.getBatchChanges()[`${addedRecords}`].length; i++) {
-            if (!isNullOrUndefined(this.parent.getBatchChanges()[`${addedRecords}`][parseInt(i.toString(), 10)][`${parentItem}`])) {
-                if (this.parent.getBatchChanges()[`${addedRecords}`][parseInt(i.toString(), 10)][`${parentItem}`][`${primaryKey}`] === records[parseInt(this.addRowIndex.toString(), 10)][`${primaryKey}`]) {
+        for (let i = 0; i < addedRecords.length; i++) {
+            if (!isNullOrUndefined(addedRecords[parseInt(i.toString(), 10)][`${parentItem}`])) {
+                if (addedRecords[parseInt(i.toString(), 10)][`${parentItem}`][`${primaryKey}`] === records[parseInt(this.addRowIndex.toString(), 10)][`${primaryKey}`]) {
                     this.batchChildCount = this.batchChildCount + 1;
                 }
             }
@@ -12223,7 +12247,7 @@ class BatchEdit {
         const primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
         if (!isNullOrUndefined(this.batchAddedRecords)) {
             for (let i = 0; i < this.batchAddedRecords.length; i++) {
-                index = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(this.batchAddedRecords[parseInt(i.toString(), 10)][`${primaryKey}`]);
+                index = data.findIndex((e) => { return e[`${primaryKey}`] === this.batchAddedRecords[parseInt(i.toString(), 10)][`${primaryKey}`]; });
                 if (index !== -1) {
                     data.splice(index, 1);
                 }
@@ -12235,7 +12259,7 @@ class BatchEdit {
                         const children = currentViewRecords[parseInt(index.toString(), 10)][`${childRecords}`];
                         for (let j = 0; children && j < children.length; j++) {
                             if (children[parseInt(j.toString(), 10)][`${primaryKey}`] === this.batchAddedRecords[parseInt(i.toString(), 10)][`${primaryKey}`]) {
-                                currentViewRecords[parseInt(index.toString(), 10)][`${childRecords}`].splice(j, 1);
+                                children.splice(j, 1);
                             }
                         }
                     }
@@ -12366,9 +12390,11 @@ class BatchEdit {
                     const indexValue = currentViewRecords.map((e) => { return e[`${primarykey}`]; })
                         .indexOf(addRecords[parseInt(i.toString(), 10)][`${parentItem}`][`${primarykey}`]);
                     const children = currentViewRecords[parseInt(indexValue.toString(), 10)][`${childRecords}`];
-                    for (let j = 0; j < children.length; j++) {
-                        if (children[parseInt(j.toString(), 10)][`${primarykey}`] === addRecords[parseInt(i.toString(), 10)][`${primarykey}`]) {
-                            currentViewRecords[parseInt(indexValue.toString(), 10)][`${childRecords}`].splice(j, 1);
+                    if (!isNullOrUndefined(addRowIndex) && children.some((records) => records.uniqueID === addRowRecord.uniqueID)) {
+                        for (let j = 0; j < children.length; j++) {
+                            if (children[parseInt(j.toString(), 10)][`${primarykey}`] === addRecords[parseInt(i.toString(), 10)][`${primarykey}`]) {
+                                currentViewRecords[parseInt(indexValue.toString(), 10)][`${childRecords}`].splice(j, 1);
+                            }
                         }
                     }
                 }
@@ -12449,6 +12475,15 @@ class BatchEdit {
             args[`${index}`] = this.batchIndex;
         }
     }
+    onCellFocused(e) {
+        if (this.parent.editSettings.mode === 'Cell' && this.parent.grid.isEdit && e.keyArgs) {
+            if (e.keyArgs.action === 'shiftEnter') {
+                e.keyArgs.preventDefault();
+                this.parent.endEdit();
+                return;
+            }
+        }
+    }
 }
 
 /**
@@ -12467,6 +12502,7 @@ class Edit {
         this.prevAriaRowIndex = '-1';
         this.isAddedRowByMethod = false;
         this.isAddedRowByContextMenu = false;
+        this.isIndexUndefined = false;
         Grid.Inject(Edit$1);
         this.parent = parent;
         this.isSelfReference = !isNullOrUndefined(parent.parentIdMapping);
@@ -12718,7 +12754,7 @@ class Edit {
         }
     }
     keyPressed(args) {
-        if (this.isOnBatch) {
+        if (this.isOnBatch || args.action === 'tab' || args.action === 'shiftTab') {
             this.keyPress = args.action;
         }
         if (args.action === 'f2') {
@@ -13254,9 +13290,10 @@ class Edit {
             this.addRowRecord = this.parent.flatData[args.index];
             this.addRowIndex = args.index;
         }
-        if (this.parent.editSettings.newRowPosition === 'Child' &&
+        if (this.parent.editSettings.newRowPosition === 'Child' && this.isIndexUndefined &&
             !isNullOrUndefined(this.parent.getSelectedRecords()[0])) {
             this.addRowRecord = this.parent.getSelectedRecords()[0];
+            this.isIndexUndefined = false;
         }
         if (isNullOrUndefined(this.addRowRecord) && this.parent.getCurrentViewRecords().length > this.addRowIndex &&
             args.requestType === 'save' && this.parent.getSelectedRecords().length !== 0) {
@@ -13312,7 +13349,7 @@ class Edit {
             const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
             const withinRange = this.parent.enableVirtualization && args.index !== 0 ? true :
                 this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
-            if (currentData.length) {
+            if (currentData.length && !isNullOrUndefined(index)) {
                 idMapping = currentData[this.addRowIndex][this.parent.idMapping];
                 parentIdMapping = currentData[this.addRowIndex][this.parent.parentIdMapping];
                 if (currentData[this.addRowIndex].parentItem) {
@@ -13320,7 +13357,7 @@ class Edit {
                 }
                 parentItem = currentData[this.addRowIndex].parentItem;
             }
-            if (this.parent.editSettings.newRowPosition !== 'Top' && currentData.length) {
+            if (this.parent.editSettings.newRowPosition !== 'Top' && currentData.length && !isNullOrUndefined(index)) {
                 level = currentData[this.addRowIndex].level;
                 if (this.parent.editSettings.newRowPosition === 'Above') {
                     position = 'before';
@@ -13397,12 +13434,16 @@ class Edit {
         }
         if (args.requestType === 'delete') {
             const deletedValues = args.data;
-            for (let i = 0; i < deletedValues.length; i++) {
-                if (deletedValues[parseInt(i.toString(), 10)].parentItem) {
-                    const parentItem = getParentData(this.parent, deletedValues[parseInt(i.toString(), 10)].parentItem.uniqueID);
-                    if (!isNullOrUndefined(parentItem) && parentItem.hasChildRecords) {
-                        const childIndex = parentItem.childRecords.indexOf(deletedValues[parseInt(i.toString(), 10)]);
-                        parentItem.childRecords.splice(childIndex, 1);
+            const primaryKeyField = this.parent.getPrimaryKeyFieldNames();
+            if (!isNullOrUndefined(primaryKeyField) && primaryKeyField.length > 0) {
+                for (let i = 0; i < deletedValues.length; i++) {
+                    const deletevalue = deletedValues[parseInt(i.toString(), 10)].parentItem;
+                    if (deletevalue) {
+                        const parentItem = getParentData(this.parent, deletevalue.uniqueID);
+                        if (!isNullOrUndefined(parentItem) && parentItem.hasChildRecords) {
+                            const childIndex = parentItem.childRecords.findIndex((child) => deletedValues[parseInt(i.toString(), 10)][primaryKeyField[0]] === child[primaryKeyField[0]]);
+                            parentItem.childRecords.splice(childIndex, 1);
+                        }
                     }
                 }
             }
@@ -13418,6 +13459,9 @@ class Edit {
         if (this.parent.editSettings.newRowPosition === this.previousNewRowPosition || this.previousNewRowPosition === null) {
             this.previousNewRowPosition = this.parent.editSettings.newRowPosition;
         }
+        if (isNullOrUndefined(index)) {
+            this.isIndexUndefined = true;
+        }
         if (!this.isSelfReference && !isNullOrUndefined(data) && Object.hasOwnProperty.call(data, this.parent.childMapping)) {
             const addRecords = [];
             const previousEditMode = this.parent.editSettings.mode;
@@ -13590,12 +13634,12 @@ class DetailRow {
         args[`${visible}`] = false;
     }
     dataBoundArg() {
-        const detailele = this.parent.getRows().filter((e) => {
+        const detailRows = this.parent.getRows().filter((e) => {
             return !e.classList.contains('e-detailrow');
         });
-        for (let i = 0; i < detailele.length; i++) {
-            const elements = detailele[parseInt(i.toString(), 10)].getElementsByClassName('e-detailrowcollapse');
-            const detailData = this.parent.grid.getRowObjectFromUID(detailele[parseInt(i.toString(), 10)].getAttribute('data-Uid'));
+        for (let i = 0; i < detailRows.length; i++) {
+            const elements = detailRows[parseInt(i.toString(), 10)].getElementsByClassName('e-detailrowcollapse');
+            const detailData = this.parent.grid.getRowObjectFromUID(detailRows[parseInt(i.toString(), 10)].getAttribute('data-Uid'));
             const parentItem = getObject('parentItem', this.parent.grid.getCurrentViewRecords()[parseInt(i.toString(), 10)]);
             if (isNullOrUndefined(parentItem) || !isNullOrUndefined(parentItem) &&
                 getExpandStatus(this.parent, detailData.data, this.parent.grid.getCurrentViewRecords())) {
@@ -13631,10 +13675,9 @@ class DetailRow {
     }
     actioncomplete(args) {
         if (args.requestType === 'beginEdit' || args.requestType === 'add') {
-            const spann = (args.row.querySelectorAll('.e-editcell')[0].getAttribute('colSpan'));
-            const colum = parseInt(spann, 10) - 1;
-            const updtdcolum = colum.toString();
-            args.row.querySelectorAll('.e-editcell')[0].setAttribute('colSpan', updtdcolum);
+            const colSpan = (args.row.querySelectorAll('.e-editcell')[0].getAttribute('colSpan'));
+            const colum = parseInt(colSpan, 10) - 1;
+            args.row.querySelectorAll('.e-editcell')[0].setAttribute('colSpan', colum.toString());
         }
         const focusElement = this.parent.grid.contentModule.getRows();
         for (let i = 0; i < focusElement.length; i++) {
@@ -13851,6 +13894,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             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.eventListener('on');
@@ -14103,6 +14147,18 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         const restoreEdit = 'restoreEdit';
         super[`${restoreEdit}`]();
     }
+    SetVirtualPageQury(args) {
+        let 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.
      *
@@ -14242,6 +14298,19 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 const xAxis = current.axis === 'X';
                 let 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) {
+                    const cBlock = this.currentInfo.columnIndexes[0] - 1;
+                    let frzLeftWidth = 0;
+                    this.parent.getColumns().filter((col) => {
+                        if (col.visible && col.freeze === 'Left') {
+                            frzLeftWidth += parseInt(col.width.toString(), 10);
+                        }
+                    });
+                    if (cBlock > this.parent.getVisibleFrozenLeftCount()) {
+                        x = x - frzLeftWidth;
+                    }
+                }
                 if (xAxis) {
                     const idx = Object.keys(this.vgenerator.cOffsets).length - this.prevInfo.columnIndexes.length;
                     const maxLeft = this.vgenerator.cOffsets[idx - 1];
@@ -14259,6 +14328,9 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                     }
                     if (this.parent.enableColumnVirtualization) {
                         this.header.virtualEle.adjustTable(x, 0);
+                        if (this.parent.isFrozenGrid()) {
+                            this.parent.contentModule['resetStickyLeftPos'](x);
+                        }
                     }
                 }
             }
@@ -14403,14 +14475,15 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         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 !== ''))) {
             const 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()))))) {
                 this.parent.removeMaskRow();
+                this.parent.notify('removeGanttShimmer', { requestType: 'hideShimmer' });
                 if (Browser.isIE) {
                     this.parent.hideSpinner();
                 }
@@ -14427,7 +14500,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 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) {
@@ -14484,7 +14557,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 getValue('currentInfo', this).page && getValue('currentInfo', this).page !== e.virtualInfo.page ?
                 getValue('currentInfo', this) : e.virtualInfo;
             const cBlock = (info.columnIndexes[0]) - 1;
-            const cOffset = this.getColumnOffset(cBlock);
+            let cOffset = this.getColumnOffset(cBlock);
             let width;
             if (this.parent.enableColumnVirtualization) {
                 this.header.virtualEle.adjustTable(cOffset, 0);
@@ -14500,9 +14573,33 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             if (e.requestType === 'virtualscroll' && e.virtualInfo.sentinelInfo.axis === 'Y') {
                 this.isExpandCollapse = false;
             }
+            let reduceWidth = 0;
+            if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid()) {
+                let frzLeftWidth = 0;
+                this.parent.getColumns().filter((col) => {
+                    if (col.visible) {
+                        reduceWidth += parseInt(col.width.toString(), 10);
+                        if (col.freeze === 'Left') {
+                            frzLeftWidth += parseInt(col.width.toString(), 10);
+                        }
+                    }
+                });
+                const cIndex = info.columnIndexes;
+                width = this.getColumnOffset(cIndex[cIndex.length - 1]) - this.getColumnOffset(cIndex[0] - 1) + '';
+                if (cBlock > this.parent.getVisibleFrozenLeftCount()) {
+                    cOffset = cOffset - frzLeftWidth;
+                }
+                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;
@@ -14616,7 +14713,12 @@ class TreeInterSectionObserver extends InterSectionObserver {
         this[`${options}`].prevTop = this[`${options}`].prevLeft = 0;
         const isScrollByFocus = 'isScrollByFocus';
         return (e) => {
-            if (instance.isEdit && instance.root.editModule[`${isScrollByFocus}`]) {
+            const keyPress = 'keyPress';
+            let 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;
             }