@syncfusion/ej2-treegrid 29.2.4 → 30.1.37

package/src/treegrid/base/data.js

@@ -247,6 +247,15 @@ var DataManipulation = /** @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;
@@ -348,33 +357,33 @@ var DataManipulation = /** @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';
@@ -437,7 +446,7 @@ var DataManipulation = /** @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);
@@ -547,8 +556,18 @@ var DataManipulation = /** @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(events.actionComplete, e);
@@ -591,7 +610,8 @@ var DataManipulation = /** @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;
         }
     };

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

@@ -1,5 +1,5 @@
 import { Column } from '../models/column';
-import { SaveEventArgs, DataStateChangeEventArgs as GridDataStateChangeEventArgs, ExcelExportProperties, RowDragEventArgs as GridRowDragEventArgs } from '@syncfusion/ej2-grids';
+import { SaveEventArgs, DataStateChangeEventArgs as GridDataStateChangeEventArgs, ExcelExportProperties, RowDragEventArgs as GridRowDragEventArgs, ActionEventArgs as GridActionEventArgs } from '@syncfusion/ej2-grids';
 import { PdfExportProperties } from '@syncfusion/ej2-grids';
 /**
  * Specifies FlatData interfaces.
@@ -180,3 +180,7 @@ export interface DataStateChangeEventArgs extends GridDataStateChangeEventArgs {
 export interface RowDragEventArgs extends GridRowDragEventArgs {
     dropPosition: string;
 }
+export interface ActionEventArgs extends GridActionEventArgs {
+    /** Maintains Treegrid's Collapse state in virtualization */
+    isCollapseMaintain?: boolean;
+}

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

@@ -1,4 +1,4 @@
-import { Component, addClass, createElement, EventHandler, isNullOrUndefined, ModuleDeclaration, extend, merge, SanitizeHtmlHelper} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row, getNumberFormat } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel, Freeze as FreezeColumn } from '@syncfusion/ej2-grids';import { RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid, parentsUntil } from '@syncfusion/ej2-grids';import { LoadingIndicator } from '../models/loading-indicator';import { LoadingIndicatorModel } from '../models/loading-indicator-model';import { ActionEventArgs, TextAlign } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectingEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties } from './interface';import { DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';import { TreeActionEventArgs } from '..';import * as literals from '../base/constant';
+import { Component, addClass, createElement, EventHandler, isNullOrUndefined, ModuleDeclaration, extend, merge, SanitizeHtmlHelper} from '@syncfusion/ej2-base';import { removeClass, EmitType, Complex, Collection, KeyboardEventArgs, getValue, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';import {Event, Property, NotifyPropertyChanges, INotifyPropertyChanged, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { Column, ColumnModel } from '../models/column';import { BeforeBatchSaveArgs, BeforeBatchAddArgs, BatchDeleteArgs, BeforeBatchDeleteArgs, Row, getNumberFormat } from '@syncfusion/ej2-grids';import { GridModel, ColumnQueryModeType, HeaderCellInfoEventArgs, EditSettingsModel as GridEditModel, Freeze as FreezeColumn } from '@syncfusion/ej2-grids';import { RowDragEventArgs, RowDropEventArgs, RowDropSettingsModel, RowDropSettings, getUid, parentsUntil } from '@syncfusion/ej2-grids';import { LoadingIndicator } from '../models/loading-indicator';import { LoadingIndicatorModel } from '../models/loading-indicator-model';import { TextAlign } from'@syncfusion/ej2-grids';import { DetailDataBoundEventArgs, ClipMode, ColumnChooser}  from '@syncfusion/ej2-grids';import { SearchEventArgs, AddEventArgs, EditEventArgs, DeleteEventArgs}  from '@syncfusion/ej2-grids';import { SaveEventArgs, CellSaveArgs, BatchAddArgs, BatchCancelArgs,  BeginEditArgs, CellEditArgs}  from '@syncfusion/ej2-grids';import { FilterSettings } from '../models/filter-settings';import { TextWrapSettings } from '../models/textwrap-settings';import { TextWrapSettingsModel } from '../models/textwrap-settings-model';import {Filter} from '../actions/filter';import { Logger as TreeLogger } from '../actions/logger';import { BeforeCopyEventArgs, BeforePasteEventArgs } from '@syncfusion/ej2-grids';import { TreeClipboard } from '../actions/clipboard';import {Aggregate} from '../actions/summary';import { Reorder } from '../actions/reorder';import { Resize } from '../actions/resize';import { Selection as TreeGridSelection } from '../actions/selection';import { ColumnMenu } from '../actions/column-menu';import { DetailRow } from '../actions/detail-row';import { Freeze } from '../actions/freeze-column';import { Print } from '../actions/print';import * as events from '../base/constant';import { FilterSettingsModel } from '../models/filter-settings-model';import { SearchSettings} from '../models/search-settings';import { SearchSettingsModel } from '../models/search-settings-model';import {RowInfo, RowDataBoundEventArgs, PageEventArgs, FilterEventArgs, FailureEventArgs, SortEventArgs } from '@syncfusion/ej2-grids';import { RowSelectingEventArgs, RowSelectEventArgs, RowDeselectingEventArgs, RowDeselectEventArgs, IIndex, ISelectedCell } from '@syncfusion/ej2-grids';import {ColumnModel as GridColumnModel, Column as GridColumn, CellSelectEventArgs, CellDeselectEventArgs } from '@syncfusion/ej2-grids';import { SelectionSettings } from '../models/selection-settings';import { SelectionSettingsModel } from '../models/selection-settings-model';import {getActualProperties, SortDirection, getObject, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { PrintMode, Data, IGrid, ContextMenuItemModel } from '@syncfusion/ej2-grids';import { ColumnMenuItem, ColumnMenuItemModel, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportCompleteArgs, ExcelHeaderQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { PdfExportCompleteArgs, PdfHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExportProperties, PdfExportProperties, CellSelectingEventArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ColumnMenuOpenEventArgs } from '@syncfusion/ej2-grids';import {BeforeDataBoundArgs} from '@syncfusion/ej2-grids';import { DataManager, ReturnOption, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner, Dialog } from '@syncfusion/ej2-popups';import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';import { Grid, QueryCellInfoEventArgs, Logger } from '@syncfusion/ej2-grids';import { Render } from '../renderer/render';import { VirtualTreeContentRenderer } from '../renderer/virtual-tree-content-render';import { DataManipulation } from './data';import { RowDD } from '../actions/rowdragdrop';import { Sort } from '../actions/sort';import { ITreeData, RowExpandedEventArgs, RowCollapsedEventArgs, RowCollapsingEventArgs, TreeGridExcelExportProperties, ActionEventArgs } from './interface';import { DataStateChangeEventArgs, RowExpandingEventArgs, TreeGridPdfExportProperties } from './interface';import { iterateArrayOrObject, GridLine } from '@syncfusion/ej2-grids';import { DataSourceChangedEventArgs, RecordDoubleClickEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { ToolbarItems, ToolbarItem, ContextMenuItem, ContextMenuItems, RowPosition, CopyHierarchyType } from '../enum';import { ItemModel, ClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { PageSettings } from '../models/page-settings';import { PageSettingsModel } from '../models/page-settings-model';import { AggregateRow } from '../models/summary';import { AggregateRowModel } from '../models/summary-model';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Toolbar } from '../actions/toolbar';import { Page } from '../actions/page';import { ContextMenu } from '../actions/context-menu';import { EditSettings } from '../models/edit-settings';import { EditSettingsModel } from '../models/edit-settings-model';import { Edit} from '../actions/edit';import { SortSettings } from '../models/sort-settings';import { SortSettingsModel } from '../models/sort-settings-model';import { isHidden, getExpandStatus } from '../utils';import { editAction } from '../actions/crud-actions';import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';import { InfiniteScrollSettingsModel } from '../models/infinite-scroll-settings-model';import { TreeActionEventArgs } from '..';import * as literals from '../base/constant';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -481,6 +481,13 @@ export interface TreeGridModel extends ComponentModel{
      */
     enableImmutableMode?: boolean;
 
+    /**
+     *  Enables the sticky header feature, which keeps the column headers visible while scrolling the Tree Grid content or the entire document.
+     *
+     * @default false
+     */
+    enableStickyHeader?: boolean;
+
     /**
      * Defines the scrollable height of the TreeGrid content.
      *

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

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

package/src/treegrid/base/treegrid.js

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

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

@@ -15,7 +15,7 @@ import { VirtualRowModelGenerator } from '@syncfusion/ej2-grids';
 import * as events from '../base/constant';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
-import { isCountRequired } from '../utils';
+import { isCountRequired, isRemoteData } from '../utils';
 /**
  * RowModelGenerator is used to generate grid data rows.
  *
@@ -38,19 +38,13 @@ var TreeVirtualRowModelGenerator = /** @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;
                 }
@@ -94,7 +88,10 @@ var TreeVirtualRowModelGenerator = /** @class */ (function (_super) {
             else if (action === 'virtualscroll' && this.cache[parseInt(currentPage.toString(), 10)] &&
                 this.cache[parseInt(currentPage.toString(), 10)].length >
                     (this.parent.contentModule).getBlockSize()) {
-                delete this.cache[parseInt(currentPage.toString(), 10)];
+                if (this.cache[parseInt(currentPage.toString(), 10)].length > (this.parent.contentModule).getBlockSize()) {
+                    this.cache[parseInt(currentPage.toString(), 10)] =
+                        this.cache[parseInt(currentPage.toString(), 10)].slice(0, (this.parent.contentModule).getBlockSize());
+                }
             }
         }
         else {

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

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