@syncfusion/ej2-treegrid 29.2.4 → 30.1.37

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

@@ -1,5 +1,5 @@
 import { Property, merge, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, Component, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
-import { Grid, Logger as Logger$1, 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, Scroll, RowDD as RowDD$1, VirtualRowModelGenerator, Filter as Filter$1, Data, ExportHelper, ExcelExport as ExcelExport$1, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, calculateAggregate, Aggregate as Aggregate$1, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, resetRowIndex, Edit as Edit$1, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, Cell, VirtualContentRenderer, InterSectionObserver, getTransformValues, RenderType, VirtualHeaderRenderer, VirtualScroll as VirtualScroll$1, ColumnChooser as ColumnChooser$1, RowRenderer, InfiniteScroll as InfiniteScroll$1 } from '@syncfusion/ej2-grids';
+import { Grid, Logger as Logger$1, 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, Scroll, RowDD as RowDD$1, VirtualRowModelGenerator, Filter as Filter$1, Data, ExportHelper, ExcelExport as ExcelExport$1, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, calculateAggregate, Aggregate as Aggregate$1, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, resetRowIndex, Edit as Edit$1, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, Cell, getVisiblePage, VirtualContentRenderer, InterSectionObserver, getTransformValues, RenderType, VirtualHeaderRenderer, VirtualScroll as VirtualScroll$1, ColumnChooser as ColumnChooser$1, RowRenderer, InfiniteScroll as InfiniteScroll$1 } 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';
@@ -634,12 +634,13 @@ var TreeClipboard = /** @__PURE__ @class */ (function (_super) {
                     if (i > 0) {
                         this.treeCopyContent += '\n';
                     }
-                    if (!rows[selectedIndexes[parseInt(i.toString(), 10)]].classList.contains('e-summaryrow')) {
-                        var cells = [].slice.call(rows[selectedIndexes[parseInt(i.toString(), 10)]].querySelectorAll('.e-rowcell'));
+                    var selectedRowIndex = selectedIndexes[parseInt(i.toString(), 10)];
+                    if (!rows[selectedRowIndex].classList.contains('e-summaryrow')) {
+                        var cells = [].slice.call(rows[selectedRowIndex].querySelectorAll('.e-rowcell'));
                         var 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];
@@ -652,11 +653,7 @@ var TreeClipboard = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 if (withHeader) {
-                    var headerTextArray = [];
-                    for (var i = 0; i < this.treeGridParent.getVisibleColumns().length; i++) {
-                        headerTextArray[parseInt(i.toString(), 10)] =
-                            this.treeGridParent.getVisibleColumns()[parseInt(i.toString(), 10)].headerText;
-                    }
+                    var headerTextArray = this.treeGridParent.getVisibleColumns().map(function (col) { return col.headerText; });
                     this["" + getCopyData](headerTextArray, false, '\t', withHeader);
                     this.treeCopyContent = this["" + copyContent] + '\n' + this.treeCopyContent;
                 }
@@ -2275,6 +2272,15 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                             if (parentRec) {
                                 records[parseInt(rec.toString(), 10)].level = parentRec.level + 1;
                             }
+                            else {
+                                var parentRec_1 = args.actual.flatData.find(function (record) { return record["" + _this.parent.idMapping] === parentID_1; });
+                                if (isNullOrUndefined(parentRec_1["" + this_1.parent.parentIdMapping])) {
+                                    records[parseInt(rec.toString(), 10)].level = 1;
+                                }
+                                else {
+                                    records[parseInt(rec.toString(), 10)].level = parentRec_1.level + 1;
+                                }
+                            }
                         }
                         else {
                             records[parseInt(rec.toString(), 10)].level = 0;
@@ -2376,33 +2382,33 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
         var _this = this;
         var args = { row: rowDetails.parentRow, data: rowDetails.record };
         var dm = this.parent.dataSource;
-        var qry = this.parent.grid.getDataModule().generateQuery();
-        var clonequries = qry.queries.filter(function (e) { return e.fn !== 'onPage' && e.fn !== 'onWhere'; });
-        qry.queries = clonequries;
-        qry.isCountRequired = true;
+        var query = this.parent.grid.getDataModule().generateQuery();
+        var clonequries = query.queries.filter(function (e) { return e.fn !== 'onPage' && e.fn !== 'onWhere'; });
+        query.queries = clonequries;
+        query.isCountRequired = true;
         var 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);
             var 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);
             var 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) {
             var filterqry = this.parent.grid.getDataModule().generateQuery().queries.filter(function (e) { return 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(function (e) {
+        dm.executeQuery(query).then(function (e) {
             var remoteExpandedData = 'remoteExpandedData';
             var remoteCollapsedData = 'remoteCollapsedData';
             var level = 'level';
@@ -2465,7 +2471,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
             else {
                 rowDetails.record.childRecords = result;
             }
-            for (var r = 0; r < result.length; r++) {
+            var _loop_2 = function (r) {
                 var record = result[parseInt(r.toString(), 10)];
                 if (_this.parent.enableVirtualization && record["" + _this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping] && rowDetails.action === 'remoteExpand') {
                     _this.parent["" + remoteExpandedData].push(rowDetails.record);
@@ -2575,8 +2581,18 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                         record.expanded = false;
                     }
                 }
-                datas.splice(inx + r + 1, 0, record);
+                var exists = datas.some(function (data) { return data["" + _this.parent.idMapping] === record[_this.parent.idMapping]; });
+                if (!exists) {
+                    datas.splice(inx + r + 1, 0, record);
+                }
+            };
+            for (var r = 0; r < result.length; r++) {
+                _loop_2(r);
             }
+            var 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);
@@ -2619,7 +2635,8 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
         var contentModule = getValue('grid.contentModule', this.parent);
         var currentInfo = getValue('currentInfo', contentModule);
         var 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;
         }
     };
@@ -3610,7 +3627,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(function (records) { return records.uniqueID === child.uniqueID; })) {
+                            record.childRecords.push(child);
+                        }
                     }
                 }
                 if (record.childRecords.indexOf(childRecords) === -1 && record["" + key] !== child["" + key]) {
@@ -4108,7 +4127,7 @@ var TreeGrid = /** @__PURE__ @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);
@@ -4116,8 +4135,11 @@ var TreeGrid = /** @__PURE__ @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 {
@@ -4137,7 +4159,7 @@ var TreeGrid = /** @__PURE__ @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);
@@ -4146,8 +4168,11 @@ var TreeGrid = /** @__PURE__ @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']);
                                         }
                                     }
                                 }
@@ -4514,11 +4539,14 @@ var TreeGrid = /** @__PURE__ @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();
             }
         };
     };
@@ -4614,18 +4642,24 @@ var TreeGrid = /** @__PURE__ @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)) {
@@ -4715,6 +4749,9 @@ var TreeGrid = /** @__PURE__ @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);
@@ -4852,6 +4889,7 @@ var TreeGrid = /** @__PURE__ @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());
@@ -4944,6 +4982,9 @@ var TreeGrid = /** @__PURE__ @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) {
@@ -5111,6 +5152,7 @@ var TreeGrid = /** @__PURE__ @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') {
@@ -5171,12 +5213,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 _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();
                 }
             }
@@ -5301,6 +5343,7 @@ var TreeGrid = /** @__PURE__ @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) {
@@ -5309,11 +5352,7 @@ var TreeGrid = /** @__PURE__ @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 () {
@@ -5467,8 +5506,9 @@ var TreeGrid = /** @__PURE__ @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];
                     }
@@ -5639,6 +5679,7 @@ var TreeGrid = /** @__PURE__ @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) {
@@ -5714,6 +5755,9 @@ var TreeGrid = /** @__PURE__ @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')) {
@@ -6601,14 +6645,7 @@ var TreeGrid = /** @__PURE__ @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.
@@ -6736,17 +6773,14 @@ var TreeGrid = /** @__PURE__ @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.
@@ -7069,14 +7103,14 @@ var TreeGrid = /** @__PURE__ @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;
                     });
                 }
@@ -7085,7 +7119,7 @@ var TreeGrid = /** @__PURE__ @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]);
                         }
@@ -7093,12 +7127,12 @@ var TreeGrid = /** @__PURE__ @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);
@@ -7202,8 +7236,12 @@ var TreeGrid = /** @__PURE__ @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;
@@ -7229,8 +7267,12 @@ var TreeGrid = /** @__PURE__ @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;
@@ -7520,6 +7562,8 @@ var TreeGrid = /** @__PURE__ @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);
@@ -7594,6 +7638,13 @@ var TreeGrid = /** @__PURE__ @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));
         });
@@ -7758,7 +7809,6 @@ var TreeGrid = /** @__PURE__ @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;
@@ -8351,6 +8401,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -10335,6 +10388,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
      * @returns {void} - This method does not return a value.
      */
     RowDD.prototype.removeRecords = function (record) {
+        var _this = this;
         var tObj = this.parent;
         var dataSource;
         if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
@@ -10362,20 +10416,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 if (deletedRow.hasChildRecords && deletedRow.childRecords.length > 0) {
                     this.removeChildItem(deletedRow);
                 }
-                var idx = void 0;
-                var idz = void 0;
                 var treeGridData = dataSource;
-                for (var i = 0; i < treeGridData.length; i++) {
-                    if (treeGridData[parseInt(i.toString(), 10)][this.parent.idMapping] === deletedRow.taskData[this.parent.idMapping]) {
-                        idx = i;
-                    }
-                }
-                for (var i = 0; i < this.treeGridData.length; i++) {
-                    if (this.treeGridData[parseInt(i.toString(), 10)][this.parent.idMapping]
-                        === deletedRow.taskData[this.parent.idMapping]) {
-                        idz = i;
-                    }
-                }
+                var idx = treeGridData.findIndex(function (data) {
+                    return data[_this.parent.idMapping] === deletedRow.taskData[_this.parent.idMapping];
+                });
+                var idz = this.treeGridData.findIndex(function (data) {
+                    return data[_this.parent.idMapping] === deletedRow.taskData[_this.parent.idMapping];
+                });
                 if (idx !== -1 && !isNullOrUndefined(idx)) {
                     dataSource.splice(idx, 1);
                 }
@@ -10645,19 +10692,13 @@ var TreeVirtualRowModelGenerator = /** @__PURE__ @class */ (function (_super) {
         return _super.prototype.getData.call(this);
     };
     TreeVirtualRowModelGenerator.prototype.generateRows = function (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);
-        }
         var 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;
                 }
@@ -10701,7 +10742,10 @@ var TreeVirtualRowModelGenerator = /** @__PURE__ @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 {
@@ -10789,11 +10833,11 @@ var Filter = /** @__PURE__ @class */ (function () {
         this.filteredParentRecs = [];
         this.filteredResult = [];
         this.isHierarchyFilter = false;
+        var hierarchyMode = this.parent.grid.searchSettings.key === '' ? this.parent.filterSettings.hierarchyMode
+            : this.parent.searchSettings.hierarchyMode;
         for (var f = 0; f < this.flatFilteredData.length; f++) {
             var rec = this.flatFilteredData[parseInt(f.toString(), 10)];
             this.addParentRecord(rec);
-            var 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;
@@ -10805,8 +10849,6 @@ var Filter = /** @__PURE__ @class */ (function () {
             var parent_1 = getObject('parentItem', rec);
             if (!isNullOrUndefined(parent_1)) {
                 var 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);
@@ -10830,7 +10872,6 @@ var Filter = /** @__PURE__ @class */ (function () {
     };
     Filter.prototype.addParentRecord = function (record) {
         var parent = getParentData(this.parent, record.parentUniqueID);
-        //let parent: Object = this.parent.flatData.filter((e: ITreeData) => {return e.uniqueID === record.parentUniqueID; })[0];
         var hierarchyMode = this.parent.grid.searchSettings.key === '' ? this.parent.filterSettings.hierarchyMode
             : this.parent.searchSettings.hierarchyMode;
         if (hierarchyMode === 'None' && (this.parent.grid.filterSettings.columns.length !== 0
@@ -11597,8 +11638,8 @@ var Toolbar = /** @__PURE__ @class */ (function () {
             }
             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');
@@ -11732,14 +11773,7 @@ var Aggregate = /** @__PURE__ @class */ (function () {
     Aggregate.prototype.calculateSummaryValue = function (summaryQuery, filteredData, isSort) {
         this.summaryQuery = summaryQuery;
         var parentRecord;
-        var parentDataLength = Object.keys(filteredData).length;
-        var parentData = [];
-        for (var p = 0, len = parentDataLength; p < len; p++) {
-            var summaryRow = getObject('isSummaryRow', filteredData[parseInt(p.toString(), 10)]);
-            if (!summaryRow) {
-                parentData.push(filteredData[parseInt(p.toString(), 10)]);
-            }
-        }
+        var parentData = filteredData.filter(function (data) { return !getObject('isSummaryRow', data); });
         var parentRecords = findParentRecords(parentData);
         var flatRecords = parentData.slice();
         var summaryLength = Object.keys(this.parent.aggregates).length;
@@ -11897,14 +11931,7 @@ var Aggregate = /** @__PURE__ @class */ (function () {
             appendChildren(cellElement, tempObj.fn(single[summaryColumn.columnName], this.parent, tempObj.property));
         }
         var value = single["" + summaryColumn.columnName]["" + summaryKey];
-        var 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;
     };
     Aggregate.prototype.getFormatFromType = function (summaryformat, type) {
         if (isNullOrUndefined(type) || typeof summaryformat !== 'string') {
@@ -11987,8 +12014,13 @@ var Sort = /** @__PURE__ @class */ (function () {
         this.flatSortedData = [];
     };
     Sort.prototype.iterateSort = function (data, srtQry) {
+        var gridQuery = this.parent.query;
+        var filterQuery = [];
+        if (!isNullOrUndefined(gridQuery)) {
+            filterQuery = gridQuery.queries.filter(function (q) { return q.fn === 'onWhere'; });
+        }
         for (var 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)];
@@ -12271,6 +12303,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
         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
@@ -12290,6 +12323,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
         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
@@ -12329,14 +12363,18 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
         return this.batchChildCount;
     };
     BatchEdit.prototype.batchPageAction = function () {
+        var _this = this;
         var data = (this.parent.grid.dataSource instanceof DataManager ?
             this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource);
-        var primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
+        var primaryKeyField = this.parent.grid.getPrimaryKeyFieldNames()[0];
         var index;
         if (!isNullOrUndefined(this.batchAddedRecords) && this.batchAddedRecords.length) {
-            for (var i = 0; i < this.batchAddedRecords.length; i++) {
-                index = data.map(function (e) { return e["" + primaryKey]; }).indexOf(this.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKey]);
+            var _loop_1 = function (i) {
+                index = data.findIndex(function (e) { return e["" + primaryKeyField] === _this.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKeyField]; });
                 data.splice(index, 1);
+            };
+            for (var i = 0; i < this.batchAddedRecords.length; i++) {
+                _loop_1(i);
             }
         }
         this.batchAddedRecords = this.batchRecords = this.batchAddRowRecord = this.batchDeletedRecords = this.currentViewRecords = [];
@@ -12561,11 +12599,15 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
         }
         childs.push(data);
         records = childs;
-        for (var i = 0; i < records.length; i++) {
-            var indexvalue = this.batchRecords.map(function (e) { return e["" + primarykey]; }).indexOf(records[parseInt(i.toString(), 10)]["" + primarykey]);
+        var _loop_2 = function (i) {
+            var indexvalue = this_1.batchRecords.findIndex(function (e) { return e["" + primarykey] === records[parseInt(i.toString(), 10)]["" + primarykey]; });
             if (indexvalue !== -1) {
-                this.batchRecords.splice(indexvalue, 1);
+                this_1.batchRecords.splice(indexvalue, 1);
             }
+        };
+        var this_1 = this;
+        for (var i = 0; i < records.length; i++) {
+            _loop_2(i);
         }
         for (var i = 0; i < row.length; i++) {
             if (!isNullOrUndefined(row[parseInt(i.toString(), 10)])) {
@@ -12581,11 +12623,11 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
     };
     BatchEdit.prototype.updateChildCount = function (records) {
         var primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
-        var addedRecords = 'addedRecords';
+        var addedRecords = this.parent.getBatchChanges().addedRecords || [];
         var parentItem = this.parent.editSettings.newRowPosition === 'Child' ? 'primaryParent' : 'parentItem';
-        for (var 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 (var 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;
                 }
             }
@@ -12622,6 +12664,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
         delete this.parent["" + id]["" + value];
     };
     BatchEdit.prototype.batchCancelAction = function () {
+        var _this = this;
         var targetElement = 'targetElement';
         var index;
         var parentItem = 'parentItem';
@@ -12632,24 +12675,28 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
             this.parent.grid.dataSource.dataSource.json : this.parent.grid.dataSource);
         var primaryKey = this.parent.grid.getPrimaryKeyFieldNames()[0];
         if (!isNullOrUndefined(this.batchAddedRecords)) {
-            for (var i = 0; i < this.batchAddedRecords.length; i++) {
-                index = data.map(function (e) { return e["" + primaryKey]; }).indexOf(this.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKey]);
+            var _loop_3 = function (i) {
+                index = data.findIndex(function (e) { return e["" + primaryKey] === _this.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKey]; });
                 if (index !== -1) {
                     data.splice(index, 1);
                 }
-                if (this.parent.editSettings.newRowPosition === 'Child') {
+                if (this_2.parent.editSettings.newRowPosition === 'Child') {
                     index = currentViewRecords.map(function (e) { return e["" + primaryKey]; })
-                        .indexOf(this.batchAddedRecords[parseInt(i.toString(), 10)]["" + parentItem] ? this.batchAddedRecords[parseInt(i.toString(), 10)]["" + parentItem]["" + primaryKey]
-                        : this.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKey]);
+                        .indexOf(this_2.batchAddedRecords[parseInt(i.toString(), 10)]["" + parentItem] ? this_2.batchAddedRecords[parseInt(i.toString(), 10)]["" + parentItem]["" + primaryKey]
+                        : this_2.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKey]);
                     if (!isNullOrUndefined(currentViewRecords[parseInt(index.toString(), 10)])) {
                         var children = currentViewRecords[parseInt(index.toString(), 10)]["" + childRecords];
                         for (var 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);
+                            if (children[parseInt(j.toString(), 10)]["" + primaryKey] === this_2.batchAddedRecords[parseInt(i.toString(), 10)]["" + primaryKey]) {
+                                children.splice(j, 1);
                             }
                         }
                     }
                 }
+            };
+            var this_2 = this;
+            for (var i = 0; i < this.batchAddedRecords.length; i++) {
+                _loop_3(i);
             }
         }
         if (!isNullOrUndefined(this.parent["" + targetElement])) {
@@ -12695,7 +12742,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
             var selectedIndex = void 0;
             var addRowIndex = void 0;
             var columnName = void 0;
-            var addRowRecord = void 0;
+            var addRowRecord_1;
             var childRecords = 'childRecords';
             if (addRecords.length > 1 && this.parent.editSettings.newRowPosition !== 'Bottom') {
                 addRecords.reverse();
@@ -12748,17 +12795,17 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                     this.parent.editModule['previousNewRowPosition'] = rowPosition;
                 }
                 addRecords[parseInt(i.toString(), 10)].taskData = taskData;
-                addRowRecord = this.batchAddRowRecord[parseInt(i.toString(), 10)];
-                if (isNullOrUndefined(addRowRecord)) {
-                    addRowRecord = this.batchAddRowRecord[i - 1];
+                addRowRecord_1 = this.batchAddRowRecord[parseInt(i.toString(), 10)];
+                if (isNullOrUndefined(addRowRecord_1)) {
+                    addRowRecord_1 = this.batchAddRowRecord[i - 1];
                 }
                 if (this.isSelfReference) {
                     if (!isNullOrUndefined(addRecords[parseInt(i.toString(), 10)].parentItem)) {
                         updateParentRow(primarykey_1, addRecords[parseInt(i.toString(), 10)].parentItem, 'add', this.parent, this.isSelfReference, addRecords[parseInt(i.toString(), 10)]);
                     }
                 }
-                if (!isNullOrUndefined(addRowRecord)) {
-                    addRowIndex = addRowRecord.index;
+                if (!isNullOrUndefined(addRowRecord_1)) {
+                    addRowIndex = addRowRecord_1.index;
                 }
                 if (isNullOrUndefined(addRecords[parseInt(i.toString(), 10)].index)) {
                     addRowIndex = 0;
@@ -12766,26 +12813,30 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                 if (this.parent.editSettings.newRowPosition !== 'Top' && this.parent.editSettings.newRowPosition !== 'Bottom') {
                     if (isNullOrUndefined(addRecords[parseInt(i.toString(), 10)].parentItem) && this.selectedIndex === -1) {
                         selectedIndex = -1;
-                        addRowRecord = null;
+                        addRowRecord_1 = null;
                     }
                 }
-                editAction({ value: addRecords[parseInt(i.toString(), 10)], action: 'add' }, this.parent, this.isSelfReference, addRowIndex, selectedIndex, columnName, addRowRecord);
+                editAction({ value: addRecords[parseInt(i.toString(), 10)], action: 'add' }, this.parent, this.isSelfReference, addRowIndex, selectedIndex, columnName, addRowRecord_1);
                 selectedIndex = null;
                 if (this.parent.editSettings.newRowPosition === 'Child' && !isNullOrUndefined(addRecords[parseInt(i.toString(), 10)]["" + parentItem]) &&
                     (isNullOrUndefined(this.parent.editModule['addRowIndex']) || this.isSelfReference)) {
                     var indexValue = currentViewRecords.map(function (e) { return e["" + primarykey_1]; })
                         .indexOf(addRecords[parseInt(i.toString(), 10)]["" + parentItem]["" + primarykey_1]);
                     var children = currentViewRecords[parseInt(indexValue.toString(), 10)]["" + childRecords];
-                    for (var j = 0; j < children.length; j++) {
-                        if (children[parseInt(j.toString(), 10)]["" + primarykey_1] === addRecords[parseInt(i.toString(), 10)]["" + primarykey_1]) {
-                            currentViewRecords[parseInt(indexValue.toString(), 10)]["" + childRecords].splice(j, 1);
+                    if (!isNullOrUndefined(addRowIndex) && children.some(function (records) {
+                        return records.uniqueID === addRowRecord_1.uniqueID;
+                    })) {
+                        for (var j = 0; j < children.length; j++) {
+                            if (children[parseInt(j.toString(), 10)]["" + primarykey_1] === addRecords[parseInt(i.toString(), 10)]["" + primarykey_1]) {
+                                currentViewRecords[parseInt(indexValue.toString(), 10)]["" + childRecords].splice(j, 1);
+                            }
                         }
                     }
                 }
             }
             if (batchChanges["" + deletedRecords].length) {
                 for (i = 0; i < batchChanges["" + deletedRecords].length; i++) {
-                    editAction({ value: batchChanges["" + deletedRecords][parseInt(i.toString(), 10)], action: 'delete' }, this.parent, this.isSelfReference, addRowIndex, selectedIndex, columnName, addRowRecord);
+                    editAction({ value: batchChanges["" + deletedRecords][parseInt(i.toString(), 10)], action: 'delete' }, this.parent, this.isSelfReference, addRowIndex, selectedIndex, columnName, addRowRecord_1);
                 }
             }
             this.parent.parentData = [];
@@ -12859,6 +12910,15 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
             args["" + index] = this.batchIndex;
         }
     };
+    BatchEdit.prototype.onCellFocused = function (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;
+            }
+        }
+    };
     return BatchEdit;
 }());
 
@@ -12878,6 +12938,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         this.prevAriaRowIndex = '-1';
         this.isAddedRowByMethod = false;
         this.isAddedRowByContextMenu = false;
+        this.isIndexUndefined = false;
         Grid.Inject(Edit$1);
         this.parent = parent;
         this.isSelfReference = !isNullOrUndefined(parent.parentIdMapping);
@@ -13130,7 +13191,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         }
     };
     Edit.prototype.keyPressed = function (args) {
-        if (this.isOnBatch) {
+        if (this.isOnBatch || args.action === 'tab' || args.action === 'shiftTab') {
             this.keyPress = args.action;
         }
         if (args.action === 'f2') {
@@ -13672,9 +13733,10 @@ var Edit = /** @__PURE__ @class */ (function () {
             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) {
@@ -13730,7 +13792,7 @@ var Edit = /** @__PURE__ @class */ (function () {
             var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
             var 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) {
@@ -13738,7 +13800,7 @@ var Edit = /** @__PURE__ @class */ (function () {
                 }
                 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';
@@ -13814,14 +13876,24 @@ var Edit = /** @__PURE__ @class */ (function () {
                 childRecords: value.childRecords };
         }
         if (args.requestType === 'delete') {
-            var deletedValues = args.data;
-            for (var i = 0; i < deletedValues.length; i++) {
-                if (deletedValues[parseInt(i.toString(), 10)].parentItem) {
-                    var parentItem = getParentData(this.parent, deletedValues[parseInt(i.toString(), 10)].parentItem.uniqueID);
-                    if (!isNullOrUndefined(parentItem) && parentItem.hasChildRecords) {
-                        var childIndex = parentItem.childRecords.indexOf(deletedValues[parseInt(i.toString(), 10)]);
-                        parentItem.childRecords.splice(childIndex, 1);
+            var deletedValues_1 = args.data;
+            var primaryKeyField_1 = this.parent.getPrimaryKeyFieldNames();
+            if (!isNullOrUndefined(primaryKeyField_1) && primaryKeyField_1.length > 0) {
+                var _loop_2 = function (i) {
+                    var deletevalue = deletedValues_1[parseInt(i.toString(), 10)].parentItem;
+                    if (deletevalue) {
+                        var parentItem = getParentData(this_2.parent, deletevalue.uniqueID);
+                        if (!isNullOrUndefined(parentItem) && parentItem.hasChildRecords) {
+                            var childIndex = parentItem.childRecords.findIndex(function (child) {
+                                return deletedValues_1[parseInt(i.toString(), 10)][primaryKeyField_1[0]] === child[primaryKeyField_1[0]];
+                            });
+                            parentItem.childRecords.splice(childIndex, 1);
+                        }
                     }
+                };
+                var this_2 = this;
+                for (var i = 0; i < deletedValues_1.length; i++) {
+                    _loop_2(i);
                 }
             }
         }
@@ -13836,6 +13908,9 @@ var Edit = /** @__PURE__ @class */ (function () {
         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)) {
             var addRecords = [];
             var previousEditMode = this.parent.editSettings.mode;
@@ -14010,12 +14085,12 @@ var DetailRow = /** @__PURE__ @class */ (function () {
         args["" + visible] = false;
     };
     DetailRow.prototype.dataBoundArg = function () {
-        var detailele = this.parent.getRows().filter(function (e) {
+        var detailRows = this.parent.getRows().filter(function (e) {
             return !e.classList.contains('e-detailrow');
         });
-        for (var i = 0; i < detailele.length; i++) {
-            var elements = detailele[parseInt(i.toString(), 10)].getElementsByClassName('e-detailrowcollapse');
-            var detailData = this.parent.grid.getRowObjectFromUID(detailele[parseInt(i.toString(), 10)].getAttribute('data-Uid'));
+        for (var i = 0; i < detailRows.length; i++) {
+            var elements = detailRows[parseInt(i.toString(), 10)].getElementsByClassName('e-detailrowcollapse');
+            var detailData = this.parent.grid.getRowObjectFromUID(detailRows[parseInt(i.toString(), 10)].getAttribute('data-Uid'));
             var 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())) {
@@ -14051,10 +14126,9 @@ var DetailRow = /** @__PURE__ @class */ (function () {
     };
     DetailRow.prototype.actioncomplete = function (args) {
         if (args.requestType === 'beginEdit' || args.requestType === 'add') {
-            var spann = (args.row.querySelectorAll('.e-editcell')[0].getAttribute('colSpan'));
-            var colum = parseInt(spann, 10) - 1;
-            var updtdcolum = colum.toString();
-            args.row.querySelectorAll('.e-editcell')[0].setAttribute('colSpan', updtdcolum);
+            var colSpan = (args.row.querySelectorAll('.e-editcell')[0].getAttribute('colSpan'));
+            var colum = parseInt(colSpan, 10) - 1;
+            args.row.querySelectorAll('.e-editcell')[0].setAttribute('colSpan', colum.toString());
         }
         var focusElement = this.parent.grid.contentModule.getRows();
         for (var i = 0; i < focusElement.length; i++) {
@@ -14288,6 +14362,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @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');
@@ -14540,6 +14615,18 @@ var VirtualTreeContentRenderer = /** @__PURE__ @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.
      *
@@ -14680,6 +14767,19 @@ var VirtualTreeContentRenderer = /** @__PURE__ @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];
@@ -14697,6 +14797,9 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                     }
                     if (_this.parent.enableColumnVirtualization) {
                         _this.header.virtualEle.adjustTable(x, 0);
+                        if (_this.parent.isFrozenGrid()) {
+                            _this.parent.contentModule['resetStickyLeftPos'](x);
+                        }
                     }
                 }
             }
@@ -14841,14 +14944,15 @@ var VirtualTreeContentRenderer = /** @__PURE__ @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()))))) {
                 this.parent.removeMaskRow();
+                this.parent.notify('removeGanttShimmer', { requestType: 'hideShimmer' });
                 if (Browser.isIE) {
                     this.parent.hideSpinner();
                 }
@@ -14865,7 +14969,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @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) {
@@ -14938,9 +15042,33 @@ var VirtualTreeContentRenderer = /** @__PURE__ @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;
@@ -15058,7 +15186,12 @@ var TreeInterSectionObserver = /** @__PURE__ @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;
             }