@syncfusion/ej2-treegrid 31.2.15 → 32.1.21

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

@@ -1,4 +1,4 @@
-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 { Property, merge, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, Component, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
 import { 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';
@@ -83,6 +83,18 @@ var Column = /** @__PURE__ @class */ (function () {
          * @default null
          */
         this.filter = {};
+        /**
+         * Allows treegrid to perform row spanning on the specified column.
+         *
+         * @default true
+         */
+        this.enableRowSpan = true;
+        /**
+         * Allows treegrid to perform column spanning on the specified column.
+         *
+         * @default true
+         */
+        this.enableColumnSpan = true;
         merge(this, options);
     }
     /**
@@ -991,27 +1003,56 @@ function isHidden(el) {
  */
 var Selection = /** @__PURE__ @class */ (function () {
     /**
-     * Constructor for Selection module
+     * Creates an instance of Selection.
      *
-     * @param {TreeGrid} parent - Tree Grid instance
+     * @param {TreeGrid} parent - The TreeGrid instance this selection module is associated with.
      */
     function Selection(parent) {
+        this.headerCheckboxFrameEl = null;
+        this.checkboxColIndexCache = -2;
+        this.parentSelectionCounters = {};
+        this.selectedUidMap = new Map(); // Quick lookup for whether an item is selected
+        this.totalSelectableCount = 0;
+        this.headerSelectionState = 'uncheck';
+        this.checkedItemCount = 0;
+        this.visibleUidIndex = {};
         this.parent = parent;
         this.selectedItems = [];
-        this.selectedIndexes = [];
+        this.selectedIndexes = []; // Initialize here
         this.filteredList = [];
         this.searchingRecords = [];
         this.addEventListener();
     }
     /**
-     * For internal use only - Get the module name.
+     * Gets the module name.
      *
-     * @private
-     * @returns {string} Returns Selection module name
+     * @returns {string} The name of the module ('selection').
      */
-    Selection.prototype.getModuleName = function () {
-        return 'selection';
+    Selection.prototype.getModuleName = function () { return 'selection'; };
+    /**
+     * Builds a map from visible record uniqueID to its visible index.
+     * This map is crucial for finding the *current visible index* of a record.
+     *
+     * @returns {void}
+     */
+    Selection.prototype.buildVisibleUidMap = function () {
+        this.visibleUidIndex = {};
+        var view = this.parent.grid.currentViewData;
+        if (!view) {
+            return;
+        }
+        for (var i = 0, len = view.length; i < len; i++) {
+            var rec = view[parseInt(i.toString(), 10)];
+            if (rec && rec.uniqueID) {
+                this.visibleUidIndex[rec.uniqueID] = i; // Map uid -> visible row index
+            }
+        }
     };
+    /**
+     * Adds required event listeners for selection handling.
+     *
+     * @returns {void}
+     */
     Selection.prototype.addEventListener = function () {
         this.parent.on('dataBoundArg', this.headerCheckbox, this);
         this.parent.on('columnCheckbox', this.columnCheckbox, this);
@@ -1019,6 +1060,11 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.parent.grid.on('colgroup-refresh', this.headerCheckbox, this);
         this.parent.on('checkboxSelection', this.checkboxSelection, this);
     };
+    /**
+     * Removes previously added event listeners.
+     *
+     * @returns {void}
+     */
     Selection.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
             return;
@@ -1030,14 +1076,20 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.parent.off('updateGridActions', this.updateGridActions);
     };
     /**
-     * To destroy the Selection
+     * Destroys the selection module and clears internal caches.
      *
      * @returns {void}
-     * @hidden
      */
     Selection.prototype.destroy = function () {
+        this.resetSelectionCaches();
         this.removeEventListener();
     };
+    /**
+     * Handles checkbox click events from the DOM and dispatches selection logic.
+     *
+     * @param {Object} args - Event args containing the click target.
+     * @returns {void}
+     */
     Selection.prototype.checkboxSelection = function (args) {
         var _a;
         var target = getObject('target', args);
@@ -1046,16 +1098,23 @@ var Selection = /** @__PURE__ @class */ (function () {
         if (checkWrap && checkWrap.querySelectorAll('.e-treecheckselect').length > 0) {
             checkBox = checkWrap.querySelector('input[type="checkbox"]');
             var rowIndex = [];
-            rowIndex.push(target.closest('tr').rowIndex);
+            if (this.parent.frozenRows) {
+                rowIndex.push(parseInt(target.closest('tr').getAttribute('aria-rowindex'), 10) - 1);
+            }
+            else {
+                rowIndex.push(target.closest('tr').rowIndex);
+            }
             this.selectCheckboxes(rowIndex);
-            this.triggerChkChangeEvent(checkBox, checkBox.nextElementSibling.classList.contains('e-check'), target.closest('tr'));
+            var newCheckState = checkBox.nextElementSibling.classList.contains('e-check');
+            this.triggerChkChangeEvent(checkBox, newCheckState, target.closest('tr'));
         }
         else if (checkWrap && checkWrap.querySelectorAll('.e-treeselectall').length > 0 && this.parent.autoCheckHierarchy) {
-            var checkBoxvalue = !checkWrap.querySelector('.e-frame').classList.contains('e-check')
-                && !checkWrap.querySelector('.e-frame').classList.contains('e-stop');
-            this.headerSelection(checkBoxvalue);
+            var frame = checkWrap.querySelector('.e-frame');
+            var currentStateIsUncheck = !frame.classList.contains('e-check') && !frame.classList.contains('e-stop');
+            var targetState = currentStateIsUncheck; // If currently uncheck, target state is to check all.
+            this.headerSelection(targetState);
             checkBox = checkWrap.querySelector('input[type="checkbox"]');
-            this.triggerChkChangeEvent(checkBox, checkBoxvalue, target.closest('tr'));
+            this.triggerChkChangeEvent(checkBox, targetState, target.closest('tr'));
         }
         if (!isNullOrUndefined(this.parent['parentQuery']) && this.parent.selectionSettings.persistSelection
             && this.parent['columnModel'].filter(function (col) { return col.type === 'checkbox'; }).length > 0
@@ -1066,63 +1125,99 @@ var Selection = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Triggers the checkboxChange event with the appropriate arguments.
+     *
+     * @param {HTMLInputElement} checkBox - The checkbox input element that changed.
+     * @param {boolean} checkState - The new checked state.
+     * @param {HTMLTableRowElement} rowElement - The row element where the change occurred.
+     * @returns {void}
+     */
     Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState, rowElement) {
         var data = this.parent.getCurrentViewRecords()[rowElement.rowIndex];
-        var args = { checked: checkState, target: checkBox, rowElement: rowElement,
+        var args = {
+            checked: checkState, target: checkBox, rowElement: rowElement,
             rowData: checkBox.classList.contains('e-treeselectall')
-                ? this.parent.getCheckedRecords() : data };
+                ? this.parent.getCheckedRecords() : data
+        };
         this.parent.trigger(checkboxChange, args);
     };
+    /**
+     * Determines the index of the checkbox column in the header.
+     *
+     * @returns {number} The index of the checkbox column, or -1 if not found.
+     */
     Selection.prototype.getCheckboxcolumnIndex = function () {
+        if (this.checkboxColIndexCache !== -2) {
+            return this.checkboxColIndexCache;
+        }
         var mappingUid;
-        var columnIndex;
+        var columnIndex = -1;
         var stackedHeader = 'stackedHeader';
         var columnModel = 'columnModel';
         var columns = this.parent["" + stackedHeader] ? this.parent["" + columnModel] : (this.parent.columns);
         for (var col = 0; col < columns.length; col++) {
             if (columns[parseInt(col.toString(), 10)].showCheckbox) {
                 mappingUid = columns[parseInt(col.toString(), 10)].uid;
+                break;
             }
         }
-        var headerCelllength = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv').length;
-        for (var j = 0; j < headerCelllength; j++) {
-            var headercell = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv')[parseInt(j.toString(), 10)];
+        var headerDivs = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv');
+        for (var j = 0; j < headerDivs.length; j++) {
+            var headercell = headerDivs[parseInt(j.toString(), 10)];
             if (headercell.getAttribute('data-mappinguid') === mappingUid) {
                 columnIndex = j;
+                break;
             }
         }
-        return columnIndex;
+        this.checkboxColIndexCache = isNullOrUndefined(columnIndex) ? -1 : columnIndex;
+        return this.checkboxColIndexCache;
     };
+    /**
+     * Renders and initializes the header checkbox element.
+     *
+     * @returns {void}
+     */
     Selection.prototype.headerCheckbox = function () {
+        this.buildVisibleUidMap();
+        this.totalSelectableCount = this.countSelectableRecords(this.resolveHeaderSelectionList(true)); // Use all flatData for initial count
         this.columnIndex = this.getCheckboxcolumnIndex();
-        if (this.columnIndex > -1 && this.parent.getHeaderContent().querySelectorAll('.e-treeselectall').length === 0) {
+        if (this.columnIndex > -1) {
             var headerElement = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv')[this.columnIndex];
-            var value = false;
-            var rowChkBox = this.parent.createElement('input', { className: 'e-treeselectall', attrs: { 'type': 'checkbox' } });
-            var checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
-            checkWrap.classList.add('e-hierarchycheckbox');
-            checkWrap.insertBefore(rowChkBox.cloneNode(), checkWrap.firstChild);
-            if (!isNullOrUndefined(headerElement)) {
-                headerElement.insertBefore(checkWrap, headerElement.firstChild);
-            }
-            if (this.parent.autoCheckHierarchy) {
-                this.headerSelection();
+            if (headerElement && headerElement.querySelectorAll('.e-treeselectall').length === 0) {
+                var value = false; // Initial state can be false.
+                var rowChkBox = this.parent.createElement('input', { className: 'e-treeselectall', attrs: { 'type': 'checkbox' } });
+                var checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
+                checkWrap.classList.add('e-hierarchycheckbox');
+                checkWrap.insertBefore(rowChkBox.cloneNode(), checkWrap.firstChild);
+                if (!isNullOrUndefined(headerElement)) {
+                    headerElement.insertBefore(checkWrap, headerElement.firstChild);
+                }
+                this.headerCheckboxFrameEl = checkWrap.querySelector('.e-frame'); // Assign the frame element
+                if (this.parent.autoCheckHierarchy) {
+                    this.headerSelection();
+                } // Update header state based on data
             }
-        }
-        else if (this.columnIndex > -1 && this.parent.getHeaderContent().querySelectorAll('.e-treeselectall').length > 0) {
-            var checkWrap = this.parent.getHeaderContent().querySelectorAll('.e-checkbox-wrapper')[0];
-            var checkBoxvalue = checkWrap.querySelector('.e-frame').classList.contains('e-check');
-            if (this.parent.autoCheckHierarchy && checkBoxvalue) {
-                this.headerSelection(checkBoxvalue);
+            else if (headerElement && headerElement.querySelectorAll('.e-treeselectall').length > 0) {
+                this.headerCheckboxFrameEl = headerElement.querySelector('.e-frame');
+                if (this.parent.autoCheckHierarchy) {
+                    this.headerSelection();
+                } // Update status based on current selections
             }
         }
     };
+    /**
+     * Renders a checkbox element for a column cell.
+     *
+     * @param {QueryCellInfoEventArgs} args - The QueryCellInfoEventArgs for the cell.
+     * @returns {Element} The rendered checkbox wrapper element.
+     */
     Selection.prototype.renderColumnCheckbox = function (args) {
         var rowChkBox = this.parent.createElement('input', { className: 'e-treecheckselect', attrs: { 'type': 'checkbox', 'aria-label': 'checkbox' } });
         var data = args.data;
         args.cell.classList.add('e-treegridcheckbox');
         args.cell.setAttribute('aria-label', 'checkbox');
-        var value = (isNullOrUndefined(data.checkboxState) || data.checkboxState === 'uncheck') ? false : true;
+        var value = (data.checkboxState === 'check');
         var checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
         checkWrap.classList.add('e-hierarchycheckbox');
         if (this.parent.allowTextWrap) {
@@ -1133,9 +1228,25 @@ var Selection = /** @__PURE__ @class */ (function () {
             removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
             checkWrap.querySelector('.e-frame').classList.add('e-stop');
         }
+        else if (data.checkboxState === 'uncheck') {
+            var checkbox = checkWrap.querySelectorAll('.e-frame')[0];
+            removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
+            checkWrap.querySelector('.e-frame').classList.add('e-uncheck');
+        }
+        else if (data.checkboxState === 'check') {
+            var checkbox = checkWrap.querySelectorAll('.e-frame')[0];
+            removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
+            checkWrap.querySelector('.e-frame').classList.add('e-check');
+        }
         checkWrap.insertBefore(rowChkBox.cloneNode(), checkWrap.firstChild);
         return checkWrap;
     };
+    /**
+     * Injects the checkbox into a column cell during QueryCellInfo.
+     *
+     * @param {QueryCellInfoEventArgs} container - The cell event args.
+     * @returns {void}
+     */
     Selection.prototype.columnCheckbox = function (container) {
         var checkWrap = this.renderColumnCheckbox(container);
         var containerELe = container.cell.querySelector('.e-treecolumn-container');
@@ -1155,54 +1266,105 @@ var Selection = /** @__PURE__ @class */ (function () {
             container.cell.appendChild(divEle);
         }
     };
+    /**
+     * Selects or toggles checkboxes for the provided row indexes.
+     *
+     * @param {number[]} rowIndexes - Array of row indexes to toggle selection for.
+     * @returns {void}
+     */
     Selection.prototype.selectCheckboxes = function (rowIndexes) {
-        if (isNullOrUndefined(rowIndexes)) {
-            var error = 'The provided value for the rowIndexes is undefined. Please ensure the rowIndexes contains number.';
-            this.parent.trigger(actionFailure, { error: error });
-        }
         for (var i = 0; i < rowIndexes.length; i++) {
-            var record = this.parent.getCurrentViewRecords()[rowIndexes[parseInt(i.toString(), 10)]];
-            var flatRecord = getParentData(this.parent, record.uniqueID);
-            record = flatRecord;
-            var checkboxState = (record.checkboxState === 'uncheck') ? 'check' : 'uncheck';
-            record.checkboxState = checkboxState;
-            var keys = Object.keys(record);
-            for (var j = 0; j < keys.length; j++) {
-                if (Object.prototype.hasOwnProperty.call(flatRecord, keys[parseInt(j.toString(), 10)])) {
-                    flatRecord[keys[parseInt(j.toString(), 10)]] = record[keys[parseInt(j.toString(), 10)]];
-                }
-            }
-            this.traverSelection(record, checkboxState, false);
-            if (this.parent.autoCheckHierarchy) {
-                this.headerSelection();
-            }
+            var viewRec = this.parent.getCurrentViewRecords()[rowIndexes[parseInt(i.toString(), 10)]];
+            var flatRec = getParentData(this.parent, viewRec.uniqueID);
+            var nextState = (flatRec.checkboxState === 'check') ? 'uncheck' : 'check';
+            flatRec.checkboxState = nextState;
+            this.traverSelection(flatRec, nextState, false);
         }
     };
-    Selection.prototype.traverSelection = function (record, checkboxState, ischildItem) {
-        var length = 0;
-        this.updateSelectedItems(record, checkboxState);
-        if (!ischildItem && record.parentItem && this.parent.autoCheckHierarchy) {
-            this.updateParentSelection(record.parentItem);
-        }
-        if (record.childRecords && this.parent.autoCheckHierarchy) {
-            var childRecords = record.childRecords;
-            if (!isNullOrUndefined(this.parent.filterModule) &&
-                this.parent.filterModule.filteredResult.length > 0 && this.parent.autoCheckHierarchy) {
-                childRecords = this.getFilteredChildRecords(childRecords);
-            }
-            length = childRecords.length;
-            for (var count = 0; count < length; count++) {
-                if (!childRecords[parseInt(count.toString(), 10)].isSummaryRow) {
-                    if (childRecords[parseInt(count.toString(), 10)].hasChildRecords) {
-                        this.traverSelection(childRecords[parseInt(count.toString(), 10)], checkboxState, true);
-                    }
-                    else {
-                        this.updateSelectedItems(childRecords[parseInt(count.toString(), 10)], checkboxState);
-                    }
+    /**
+     * Traverses selection for a record and cascades selections to children/parents as necessary.
+     *
+     * @param {ITreeData} record - The record to process.
+     * @param {string} checkboxState - The desired checkbox state ('check'|'uncheck'|'indeterminate').
+     * @param {boolean} isChildItem - True if this invocation is for a child during recursion.
+     * @returns {void}
+     */
+    Selection.prototype.traverSelection = function (record, checkboxState, isChildItem) {
+        var previousState = record.checkboxState;
+        if (!isChildItem) {
+            this.buildVisibleUidMap();
+        }
+        var effectiveChildren = Array.isArray(record.childRecords) ? record.childRecords : [];
+        if ((!effectiveChildren || effectiveChildren.length === 0) && this.parent.autoCheckHierarchy) {
+            effectiveChildren = this.getChildrenFromFlat(record);
+        }
+        if (this.parent.filterModule && this.parent.filterModule.filteredResult.length > 0
+            && effectiveChildren && effectiveChildren.length) {
+            effectiveChildren = this.getFilteredChildRecords(effectiveChildren);
+        }
+        if (!this.parent.autoCheckHierarchy || !effectiveChildren || effectiveChildren.length === 0) {
+            this.updateSelectedItems(record, checkboxState);
+            if (!isChildItem) {
+                if (record.parentItem && this.parent.autoCheckHierarchy) {
+                    this.updateParentSelection(record.parentItem);
+                }
+                this.updateSelectedCollectionsAfterBulk(this.resolveHeaderSelectionList(), '');
+                this.refreshVisibleCheckboxes();
+                if (this.parent.autoCheckHierarchy) {
+                    this.updateHeaderCheckboxState();
                 }
             }
+            return;
+        }
+        var childCount = 0;
+        var checkedCount = 0;
+        var indeterminateCount = 0;
+        for (var i = 0; i < effectiveChildren.length; i++) {
+            var child = effectiveChildren[parseInt(i.toString(), 10)];
+            if (!child || child.isSummaryRow) {
+                continue;
+            }
+            childCount++;
+            this.updateSelectedItems(child, checkboxState, true);
+            if (child.hasChildRecords) {
+                this.traverSelection(child, checkboxState, true);
+            }
+            if (child.checkboxState === 'check') {
+                checkedCount++;
+            }
+            else if (child.checkboxState === 'indeterminate') {
+                indeterminateCount++;
+            }
+        }
+        if (record.uniqueID) {
+            this.parentSelectionCounters[record.uniqueID] = {
+                total: childCount,
+                checked: checkedCount,
+                indeterminate: indeterminateCount
+            };
+        }
+        var summary = this.parentSelectionCounters[record.uniqueID];
+        var finalState = this.deriveParentState(record, summary);
+        if (checkboxState === 'check' && summary.total > 0 && summary.checked === summary.total && summary.indeterminate === 0) {
+            finalState = 'check';
+        }
+        this.updateSelectedItems(record, finalState);
+        if (!isChildItem && record.parentItem && this.parent.autoCheckHierarchy) {
+            this.updateParentSelection(record.parentItem, previousState, finalState);
+        }
+        if (!isChildItem) {
+            var bulkList = this.resolveHeaderSelectionList();
+            this.updateSelectedCollectionsAfterBulk(bulkList, ''); // This will rebuild selectedItems & selectedIndexes based on total state
+            this.refreshVisibleCheckboxes();
+            this.updateHeaderCheckboxState();
         }
     };
+    /**
+     * Filters provided child records against the current filter result.
+     *
+     * @param {ITreeData[]} childRecords - The array of child records to filter.
+     * @returns {ITreeData[]} The filtered child records array.
+     */
     Selection.prototype.getFilteredChildRecords = function (childRecords) {
         var _this = this;
         var filteredChildRecords = childRecords.filter(function (e) {
@@ -1210,59 +1372,142 @@ var Selection = /** @__PURE__ @class */ (function () {
         });
         return filteredChildRecords;
     };
-    Selection.prototype.updateParentSelection = function (parentRecord) {
-        var length = 0;
-        var childRecords = [];
-        var record = getParentData(this.parent, parentRecord.uniqueID);
-        if (record && record.childRecords) {
-            childRecords = record.childRecords;
-        }
-        if (!isNullOrUndefined(this.parent.filterModule) &&
-            this.parent.filterModule.filteredResult.length > 0 && this.parent.autoCheckHierarchy) {
-            childRecords = this.getFilteredChildRecords(childRecords);
-        }
-        length = childRecords && childRecords.length;
-        var indeter = 0;
-        var checkChildRecords = 0;
-        if (!isNullOrUndefined(record)) {
-            for (var i = 0; i < childRecords.length; i++) {
-                var currentRecord = getParentData(this.parent, childRecords[parseInt(i.toString(), 10)].uniqueID);
-                var checkBoxRecord = currentRecord;
-                if (!isNullOrUndefined(checkBoxRecord)) {
-                    if (checkBoxRecord.checkboxState === 'indeterminate') {
-                        indeter++;
-                    }
-                    else if (checkBoxRecord.checkboxState === 'check') {
-                        checkChildRecords++;
-                    }
-                }
-            }
-            if (indeter > 0 || (checkChildRecords > 0 && checkChildRecords !== length)) {
-                record.checkboxState = 'indeterminate';
+    /**
+     * Derives children for a record from flatData using the parentItem link.
+     * Used when childRecords is missing or empty.
+     *
+     * @param {ITreeData} record - The record for which to find child elements.
+     * @returns {ITreeData[]} An array of child records derived from flatData.
+     */
+    Selection.prototype.getChildrenFromFlat = function (record) {
+        var all = (this.parent.flatData);
+        if (!all || !record) {
+            return [];
+        }
+        var pid = record.uniqueID;
+        var out = [];
+        for (var i = 0; i < all.length; i++) {
+            var r = all[parseInt(i.toString(), 10)];
+            if (!r || r.isSummaryRow) {
+                continue;
             }
-            else if (checkChildRecords === 0 && (!record.hasFilteredChildRecords || isNullOrUndefined(record.hasFilteredChildRecords)) && !isNullOrUndefined(this.parent['dataResults']['actionArgs']) &&
-                (this.parent['dataResults']['actionArgs'].requestType === 'searching' || this.parent['dataResults']['actionArgs'].requestType === 'filtering') && record.checkboxState === 'check') {
-                record.checkboxState = 'check';
+            var p = r.parentItem;
+            if (p && p.uniqueID === pid) {
+                out.push(r);
             }
-            else if ((checkChildRecords === 0 && indeter === 0) || (checkChildRecords === 0 && record.hasFilteredChildRecords && !isNullOrUndefined(this.parent['dataResults']['actionArgs']) &&
-                (this.parent['dataResults']['actionArgs'].requestType === 'searching' || this.parent['dataResults']['actionArgs'].requestType === 'filtering') && record.checkboxState === 'check')) {
-                record.checkboxState = 'uncheck';
+        }
+        return out;
+    };
+    /**
+     * Updates parent selection by rebuilding summary and applying deltas, then bubbling up if required.
+     *
+     * @param {ITreeData} parentRecord - The parent record reference.
+     * @param {string} [previousChildState] - Previous state of the child that changed.
+     * @param {string} [nextChildState] - Next state of the child that changed.
+     * @returns {void}
+     */
+    Selection.prototype.updateParentSelection = function (parentRecord, previousChildState, nextChildState) {
+        var parent = getParentData(this.parent, parentRecord.uniqueID);
+        if (!parent) {
+            return;
+        }
+        var summary = this.buildSelectionSummary(parent);
+        if (previousChildState) {
+            this.applySummaryDelta(summary, previousChildState, -1);
+        }
+        if (nextChildState) {
+            this.applySummaryDelta(summary, nextChildState, 1);
+        }
+        if (parent.uniqueID) {
+            this.parentSelectionCounters[parent.uniqueID] = summary;
+        }
+        var desiredState = this.deriveParentState(parent, summary);
+        if (parent.checkboxState === desiredState) {
+            return;
+        }
+        var parentPrev = parent.checkboxState;
+        parent.checkboxState = desiredState;
+        this.updateSelectedItems(parent, desiredState);
+        if (parent.parentItem) {
+            this.updateParentSelection(parent.parentItem, parentPrev, desiredState);
+        }
+    };
+    /**
+     * Builds a selection summary for a record's children.
+     *
+     * @param {Object} record - The record whose children should be summarized.
+     * @param {boolean} [ignoreFilter] - If true, ignore current filter when computing summary.
+     * @returns {{ total: number, checked: number, indeterminate: number }} The computed summary.
+     */
+    Selection.prototype.buildSelectionSummary = function (record, ignoreFilter) {
+        var summary = { total: 0, checked: 0, indeterminate: 0 };
+        var children = [];
+        if (record && Array.isArray(record.childRecords) && record.childRecords.length) {
+            children = record.childRecords;
+        }
+        else {
+            children = this.getChildrenFromFlat(record);
+        }
+        if (!ignoreFilter && this.parent.filterModule && this.parent.filterModule.filteredResult.length > 0) {
+            children = this.getFilteredChildRecords(children);
+        }
+        for (var i = 0; i < children.length; i++) {
+            var child = children[parseInt(i.toString(), 10)];
+            if (!child || child.isSummaryRow) {
+                continue;
             }
-            else {
-                record.checkboxState = 'check';
+            summary.total++;
+            if (child.checkboxState === 'check') {
+                summary.checked++;
             }
-            this.updateSelectedItems(record, record.checkboxState);
-            if (record.parentItem) {
-                this.updateParentSelection(record.parentItem);
+            else if (child.checkboxState === 'indeterminate') {
+                summary.indeterminate++;
             }
         }
+        return summary;
+    };
+    /**
+     * Applies a delta to a selection summary based on a state change.
+     *
+     * @param {Object} summary - The summary to modify. Object with numeric properties: total, checked, indeterminate.
+     * @param {string} state - The state that changed ('check' | 'indeterminate').
+     * @param {number} delta - The delta to apply (e.g. +1 or -1).
+     * @returns {void}
+     */
+    Selection.prototype.applySummaryDelta = function (summary, state, delta) {
+        if (state === 'check') {
+            summary.checked = Math.max(0, summary.checked + delta);
+        }
+        else if (state === 'indeterminate') {
+            summary.indeterminate = Math.max(0, summary.indeterminate + delta);
+        }
     };
+    /**
+     * Derives the parent's checkbox state based on children summary counts.
+     *
+     * @param {ITreeData} record The parent record.
+     * @param {{ total: number, checked: number, indeterminate: number }} summary The children summary.
+     * @returns {'check'|'indeterminate'|'uncheck'} The derived checkbox state.
+     */
+    Selection.prototype.deriveParentState = function (record, summary) {
+        var total = summary.total;
+        var checked = summary.checked;
+        var indeterminate = summary.indeterminate;
+        if (indeterminate > 0 || (checked > 0 && checked !== total)) {
+            return 'indeterminate';
+        }
+        if (checked === total && total > 0) {
+            return 'check';
+        }
+        return 'uncheck';
+    };
+    /**
+     * Handles header checkbox (select all / clear all) behavior.
+     *
+     * @param {boolean} [checkAll] - Optional explicit flag to check or uncheck all.
+     * @returns {void}
+     */
     Selection.prototype.headerSelection = function (checkAll) {
-        var _this = this;
-        var index = -1;
-        var length = 0;
-        //This property used to maintain the check state of the currentview data after clear filtering
-        var multiFilterCheckState = false;
         if (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) {
             var filterResult = this.parent.filterModule.filteredResult;
             if (this.filteredList.length === 0) {
@@ -1272,161 +1517,401 @@ var Selection = /** @__PURE__ @class */ (function () {
                 this.searchingRecords = filterResult;
             }
             else {
-                if (this.filteredList !== filterResult) {
+                if (this.filteredList !== filterResult && !this.parent.grid.searchSettings.key.length) {
                     this.filteredList = filterResult;
-                    multiFilterCheckState = true;
-                }
-                else {
-                    multiFilterCheckState = false;
+                    this.searchingRecords = [];
                 }
             }
         }
-        if (this.filteredList.length > 0) {
-            if (!this.parent.filterSettings.columns.length && this.filteredList.length && !this.parent.grid.searchSettings.key.length) {
-                this.filteredList = [];
+        if (this.searchingRecords.length > 0 && !isNullOrUndefined(checkAll)) {
+            this.filteredList = this.searchingRecords;
+        }
+        else if (this.filteredList.length > 0 && !this.parent.filterSettings.columns.length
+            && !this.parent.grid.searchSettings.key.length) {
+            this.filteredList = [];
+        }
+        var records = this.resolveHeaderSelectionList(true);
+        if (!isNullOrUndefined(checkAll)) {
+            this.resetSelectionCaches();
+            var targetState = checkAll ? 'check' : 'uncheck';
+            this.headerSelectionState = targetState;
+            this.processHeaderSelection(records, targetState);
+            this.finalizeParentsAfterBulk(records);
+            this.updateSelectedCollectionsAfterBulk(records, '');
+            this.refreshVisibleCheckboxes();
+            this.updateHeaderCheckboxState();
+            return;
+        }
+        this.totalSelectableCount = this.countSelectableRecords(records);
+        this.updateHeaderCheckboxState();
+    };
+    /**
+     * Finalizes parent states after a bulk header operation (e.g., Select All).
+     * This ensures parent states (checked/indeterminate) are correct after cascades.
+     *
+     * @param {ITreeData[]} records - The records that were processed in the bulk operation.
+     * @returns {void}
+     */
+    Selection.prototype.finalizeParentsAfterBulk = function (records) {
+        var all = records;
+        for (var i = 0; i < all.length; i++) {
+            var rec = all[parseInt(i.toString(), 10)];
+            if (!rec || !rec.hasChildRecords) {
+                continue;
             }
-            if (this.searchingRecords.length && !isNullOrUndefined(checkAll)) {
-                this.filteredList = this.searchingRecords;
+            var summary = this.buildSelectionSummary(rec, true);
+            this.parentSelectionCounters[rec.uniqueID] = summary;
+            var finalState = this.deriveParentState(rec, summary);
+            if (this.headerSelectionState === 'check' &&
+                summary.total > 0 && summary.checked === summary.total && summary.indeterminate === 0) {
+                finalState = 'check';
+            }
+            else if (this.headerSelectionState === 'uncheck') {
+                finalState = 'uncheck';
+            }
+            if (rec.checkboxState !== finalState) {
+                this.updateSelectedItems(rec, finalState);
             }
         }
-        var data;
-        if (!(isNullOrUndefined(this.parent.filterModule)) &&
-            this.parent.filterModule.filteredResult.length === 0 && this.parent.getCurrentViewRecords().length === 0 &&
-            this.parent.filterSettings.columns.length > 0) {
-            data = this.filteredList;
-        }
-        else {
-            data = (!isNullOrUndefined(this.parent.filterModule) &&
-                (this.filteredList.length > 0)) ? this.filteredList : this.parent.flatData;
+    };
+    /**
+     * Processes header selection for each record, setting their state silently in the data model.
+     * Called during bulk operations like "select all".
+     *
+     * @param {ITreeData[]} records - The records to process.
+     * @param {string} targetState - The target state to set on each record.
+     * @returns {void}
+     */
+    Selection.prototype.processHeaderSelection = function (records, targetState) {
+        for (var i = 0; i < records.length; i++) {
+            var record = records[parseInt(i.toString(), 10)];
+            if (!record) {
+                continue;
+            }
+            var previousState = record.checkboxState;
+            if (previousState === targetState) {
+                continue;
+            }
+            record.checkboxState = targetState;
+            this.updateSelectedItems(record, targetState, true);
         }
-        data = isRemoteData(this.parent) ? this.parent.getCurrentViewRecords() : data;
-        if (!isNullOrUndefined(checkAll)) {
-            for (var i = 0; i < data.length; i++) {
-                if (checkAll) {
-                    if (data[parseInt(i.toString(), 10)].checkboxState === 'check') {
+    };
+    /**
+     * Rebuilds `selectedItems`, `selectedUidMap`, and `selectedIndexes` based on the current data states in the model.
+     * This method is called after bulk operations (like headerSelection, grid actions, etc.) to synchronize internal collections.
+     * It ensures `selectedItems` retains original selection order *as much as possible* for currently checked items
+     * and `selectedIndexes` reflects their *current visible order*.
+     *
+     * @param {ITreeData[]} records - The records that were processed (or the full data set if re-evaluating everything).
+     * @param {string} requestType - The data action type such as filtering, searching, refresh,etc.
+     * @returns {void}
+     */
+    Selection.prototype.updateSelectedCollectionsAfterBulk = function (records, requestType) {
+        var hasFilter = !!(this.parent.filterModule && this.parent.filterModule.filteredResult &&
+            this.parent.filterModule.filteredResult.length);
+        var hasSearch = !!(this.parent.grid && this.parent.grid.searchSettings &&
+            this.parent.grid.searchSettings.key && this.parent.grid.searchSettings.key.length);
+        var isFilterOrSearch = hasFilter || hasSearch || requestType === 'refresh' || requestType === 'searching';
+        var currentlySelectedItemsInOrder = isFilterOrSearch ? records : this.selectedItems.slice();
+        var newSelectedItems = [];
+        var newSelectedUidMap = new Map();
+        var newSelectedIndexes = [];
+        for (var _i = 0, currentlySelectedItemsInOrder_1 = currentlySelectedItemsInOrder; _i < currentlySelectedItemsInOrder_1.length; _i++) {
+            var item = currentlySelectedItemsInOrder_1[_i];
+            if (item.hasChildRecords && isFilterOrSearch && item.level === 0) {
+                this.updateParentSelection(item);
+            }
+            if (item.uniqueID && item.checkboxState === 'check') {
+                newSelectedItems.push(item);
+                newSelectedUidMap.set(item.uniqueID, true);
+            }
+        }
+        if (!isFilterOrSearch) {
+            var allFlatData = this.parent.flatData;
+            if (allFlatData) {
+                for (var _a = 0, allFlatData_1 = allFlatData; _a < allFlatData_1.length; _a++) {
+                    var record = allFlatData_1[_a];
+                    if (!record || record.isSummaryRow) {
                         continue;
                     }
-                    if (multiFilterCheckState) {
-                        continue;
+                    if (record.uniqueID && record.checkboxState === 'check' && !newSelectedUidMap.has(record.uniqueID)) {
+                        newSelectedItems.push(record);
+                        newSelectedUidMap.set(record.uniqueID, true);
                     }
-                    data[parseInt(i.toString(), 10)].checkboxState = 'check';
-                    this.updateSelectedItems(data[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)].checkboxState);
                 }
-                else {
-                    index = this.selectedItems.indexOf(data[parseInt(i.toString(), 10)]);
-                    if (index > -1) {
-                        data[parseInt(i.toString(), 10)].checkboxState = 'uncheck';
-                        this.updateSelectedItems(data[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)].checkboxState);
-                        if (this.parent.autoCheckHierarchy) {
-                            this.updateParentSelection(data[parseInt(i.toString(), 10)]);
-                        }
+            }
+        }
+        this.selectedItems = newSelectedItems;
+        this.selectedUidMap = newSelectedUidMap;
+        this.buildVisibleUidMap();
+        for (var _b = 0, _c = this.selectedItems; _b < _c.length; _b++) {
+            var item = _c[_b];
+            var visibleIdx = this.visibleUidIndex[item.uniqueID];
+            if (visibleIdx !== undefined) {
+                newSelectedIndexes.push(visibleIdx);
+            }
+        }
+        this.selectedIndexes = newSelectedIndexes;
+        this.checkedItemCount = this.selectedItems.length;
+        this.totalSelectableCount =
+            this.countSelectableRecords(records);
+    };
+    /**
+     * Refreshes visible checkbox DOM elements to reflect the current data state.
+     * This method exclusively updates the UI representation of checkboxes.
+     *
+     * @returns {void}
+     */
+    Selection.prototype.refreshVisibleCheckboxes = function () {
+        this.buildVisibleUidMap();
+        var data = this.parent.getCurrentViewRecords();
+        var uidMap = this.parent.uniqueIDCollection;
+        for (var i = 0; data && i < data.length; i++) {
+            var viewRec = data[parseInt(i.toString(), 10)];
+            if (!viewRec) {
+                continue;
+            }
+            var uid = viewRec.uniqueID;
+            var srcRec = (uidMap && uid != null) ? uidMap[String(uid)] : viewRec;
+            var state = (srcRec && srcRec.checkboxState) ? srcRec.checkboxState : 'uncheck';
+            var rowEl = null;
+            var rowUid = viewRec.uid;
+            if (rowUid) {
+                rowEl = this.parent.grid.getRowElementByUID(rowUid);
+            }
+            if (!rowEl) {
+                var rows = this.parent.getRows();
+                rowEl = rows && rows[parseInt(i.toString(), 10)];
+                if ((this.parent.frozenRows || this.parent.getFrozenColumns()) && !rowEl) {
+                    var movableRows = this.parent.getDataRows();
+                    rowEl = movableRows && movableRows[parseInt(i.toString(), 10)];
+                }
+            }
+            if (rowEl) {
+                var frame = rowEl.querySelector('.e-hierarchycheckbox .e-frame');
+                if (frame) {
+                    removeClass([frame], ['e-check', 'e-stop', 'e-uncheck']);
+                    frame.classList.add(state === 'indeterminate' ? 'e-stop' : ('e-' + state));
+                    var input = rowEl.querySelector('.e-treecheckselect');
+                    if (input) {
+                        input.setAttribute('aria-checked', state === 'check' ? 'true' :
+                            (state === 'uncheck' ? 'false' : 'mixed'));
                     }
                 }
             }
         }
-        if (checkAll === false && this.parent.enableVirtualization) {
-            this.selectedItems = [];
-            this.selectedIndexes = [];
-            data.filter(function (rec) {
-                rec.checkboxState = 'uncheck';
-                _this.updateSelectedItems(rec, rec.checkboxState);
-            });
+    };
+    /**
+     * Resets internal selection caches to their initial state.
+     * This is usually called before a bulk selection operation (like "select all").
+     *
+     * @returns {void}
+     */
+    Selection.prototype.resetSelectionCaches = function () {
+        this.parentSelectionCounters = {};
+        this.selectedUidMap = new Map();
+        this.selectedItems = [];
+        this.selectedIndexes = [];
+        this.totalSelectableCount = 0;
+        this.headerSelectionState = 'uncheck';
+        this.checkedItemCount = 0;
+    };
+    /**
+     * Counts selectable (non-summary) records in the provided array.
+     *
+     * @param {ITreeData[]} records - The records to count.
+     * @returns {number} The number of selectable records.
+     */
+    Selection.prototype.countSelectableRecords = function (records) {
+        var count = 0;
+        if (!records) {
+            return count;
         }
-        length = this.selectedItems.length;
-        var checkbox = this.parent.getHeaderContent().querySelectorAll('.e-frame')[0];
-        if (length > 0 && data.length > 0) {
-            if (length !== data.length && !checkAll) {
-                removeClass([checkbox], ['e-check']);
-                checkbox.classList.add('e-stop');
+        for (var i = 0; i < records.length; i++) {
+            var rec = records[parseInt(i.toString(), 10)];
+            if (rec && !rec.isSummaryRow) {
+                count++;
+            }
+        }
+        return count;
+    };
+    /**
+     * Resolves the list of records used for header selection operations (e.g., for `select all`).
+     *
+     * @param {boolean} [includeAll] - If true and data is local, returns flatData (all records for full dataset actions).
+     * @returns {ITreeData[]} The array of records to consider for header operations.
+     */
+    Selection.prototype.resolveHeaderSelectionList = function (includeAll) {
+        var dataToProcess = [];
+        if (!isRemoteData(this.parent)) {
+            var hasFilter = !!(this.parent.filterModule &&
+                this.parent.filterModule.filteredResult &&
+                this.parent.filterModule.filteredResult.length);
+            var hasSearch = !!(this.parent.grid &&
+                this.parent.grid.searchSettings &&
+                this.parent.grid.searchSettings.key &&
+                this.parent.grid.searchSettings.key.length);
+            if (includeAll) {
+                if (hasFilter) {
+                    dataToProcess = this.filteredList && this.filteredList.length
+                        ? this.filteredList
+                        : this.parent.filterModule.filteredResult;
+                }
+                else if (hasSearch && this.searchingRecords && this.searchingRecords.length) {
+                    dataToProcess = this.searchingRecords;
+                }
+                else {
+                    dataToProcess = this.parent.flatData;
+                }
             }
             else {
-                removeClass([checkbox], ['e-stop']);
-                checkbox.classList.add('e-check');
+                if (hasFilter) {
+                    dataToProcess = this.filteredList && this.filteredList.length
+                        ? this.filteredList
+                        : this.parent.filterModule.filteredResult;
+                }
+                else if (hasSearch && this.searchingRecords && this.searchingRecords.length) {
+                    dataToProcess = this.searchingRecords;
+                }
+                else {
+                    dataToProcess = this.parent.flatData;
+                }
             }
         }
         else {
-            removeClass([checkbox], ['e-check', 'e-stop']);
+            dataToProcess = this.parent.getCurrentViewRecords();
         }
+        return dataToProcess;
     };
-    Selection.prototype.updateSelectedItems = function (currentRecord, checkState) {
-        var record = this.parent.grid.currentViewData.filter(function (e) {
-            return e.uniqueID === currentRecord.uniqueID;
-        });
-        var checkedRecord;
-        var recordIndex = this.parent.grid.currentViewData.indexOf(record[0]);
-        var checkboxRecord = getParentData(this.parent, currentRecord.uniqueID);
-        var tr = this.parent.getRows()[parseInt(recordIndex.toString(), 10)];
-        var checkbox;
-        if (recordIndex > -1) {
-            var movableTr = void 0;
-            if (this.parent.frozenRows || this.parent.getFrozenColumns()) {
-                movableTr = this.parent.getDataRows()[parseInt(recordIndex.toString(), 10)];
-            }
-            checkbox = tr.querySelectorAll('.e-hierarchycheckbox .e-frame')[0] ? tr.querySelectorAll('.e-hierarchycheckbox .e-frame')[0]
-                : movableTr.querySelectorAll('.e-hierarchycheckbox .e-frame')[0];
-            if (!isNullOrUndefined(checkbox)) {
-                removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
+    /**
+     * Updates the header checkbox state (checked/indeterminate/unchecked) based on current selections.
+     *
+     * @returns {void}
+     */
+    Selection.prototype.updateHeaderCheckboxState = function () {
+        var frame = this.headerCheckboxFrameEl;
+        if (!frame) {
+            return;
+        }
+        var recordsForHeaderLogic = this.resolveHeaderSelectionList(true);
+        this.totalSelectableCount = this.countSelectableRecords(recordsForHeaderLogic);
+        var checkedCountForHeaderLogic = 0;
+        for (var _i = 0, recordsForHeaderLogic_1 = recordsForHeaderLogic; _i < recordsForHeaderLogic_1.length; _i++) {
+            var record = recordsForHeaderLogic_1[_i];
+            if (record && !record.isSummaryRow && record.checkboxState === 'check') {
+                checkedCountForHeaderLogic++;
             }
         }
-        checkedRecord = checkboxRecord;
-        if (isNullOrUndefined(checkedRecord)) {
-            checkedRecord = currentRecord;
+        removeClass([frame], ['e-check', 'e-stop', 'e-uncheck']);
+        if (this.totalSelectableCount === 0) {
+            frame.classList.add('e-uncheck');
         }
-        checkedRecord.checkboxState = checkState;
-        if (checkState === 'check' && isNullOrUndefined(currentRecord.isSummaryRow)) {
-            if (recordIndex !== -1 && this.selectedIndexes.indexOf(recordIndex) === -1) {
-                this.selectedIndexes.push(recordIndex);
-            }
-            if (this.selectedItems.indexOf(checkedRecord) === -1 && (recordIndex !== -1 &&
-                (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0))) {
-                this.selectedItems.push(checkedRecord);
-            }
-            if (this.selectedItems.indexOf(checkedRecord) === -1 && (this.parent.enableVirtualization || this.parent.allowPaging) && ((!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0))) {
-                this.selectedItems.push(checkedRecord);
-            }
-            if (this.selectedItems.indexOf(checkedRecord) === -1 && (!isNullOrUndefined(this.parent.filterModule) &&
-                this.parent.filterModule.filteredResult.length === 0)) {
-                this.selectedItems.push(checkedRecord);
+        else if (checkedCountForHeaderLogic === 0) {
+            frame.classList.add('e-uncheck');
+        }
+        else if (checkedCountForHeaderLogic === this.totalSelectableCount) {
+            frame.classList.add('e-check');
+        }
+        else {
+            frame.classList.add('e-stop');
+        }
+    };
+    /**
+     * Updates selection arrays (selectedItems, selectedUidMap, selectedIndexes) and visible DOM for a single record.
+     * This is the core method for managing the state of a single checkbox.
+     *
+     * @param {ITreeData} currentRecord - The record to update.
+     * @param {string} checkState - The new checkbox state ('check' | 'uncheck' | 'indeterminate').
+     * @param {boolean} [silent] - If true, update is silent (only updates data model, no collection management or DOM update).
+     * @returns {void}
+     */
+    Selection.prototype.updateSelectedItems = function (currentRecord, checkState, silent) {
+        this.buildVisibleUidMap();
+        var uid = currentRecord.uniqueID;
+        var uidMap = this.parent.uniqueIDCollection;
+        var checkboxRecord = (uidMap && uid != null) ? (uidMap[String(uid)] ?
+            uidMap[String(uid)] : currentRecord) : currentRecord;
+        var isSummary = currentRecord.isSummaryRow === true;
+        var previousState = checkboxRecord.checkboxState;
+        var currentVisibleIndex = this.visibleUidIndex[String(uid)];
+        checkboxRecord.checkboxState = checkState;
+        if (silent) {
+            return;
+        }
+        if (!isSummary && previousState !== checkState) {
+            if (checkState === 'check') {
+                this.checkedItemCount++;
+                if (!this.selectedUidMap.has(String(uid))) {
+                    if (checkboxRecord.uniqueID) {
+                        this.selectedUidMap.set(String(checkboxRecord.uniqueID), true);
+                    }
+                    this.selectedItems.push(checkboxRecord);
+                    if (currentVisibleIndex !== undefined && this.selectedIndexes.indexOf(currentVisibleIndex) === -1) {
+                        this.selectedIndexes.push(currentVisibleIndex);
+                    }
+                }
             }
-            if (this.selectedItems.indexOf(checkedRecord) === -1 && isNullOrUndefined(this.parent.filterModule)) {
-                this.selectedItems.push(checkedRecord);
+            else if (previousState === 'check' || previousState === 'indeterminate') {
+                if (this.checkedItemCount > 0) {
+                    this.checkedItemCount--;
+                }
+                if (checkboxRecord && checkboxRecord.uniqueID && this.selectedUidMap.has(String(checkboxRecord.uniqueID))) {
+                    this.selectedUidMap.delete(String(checkboxRecord.uniqueID));
+                    var itemIdx = this.selectedItems.indexOf(checkboxRecord);
+                    if (itemIdx !== -1) {
+                        this.selectedItems.splice(itemIdx, 1);
+                    }
+                    if (currentVisibleIndex !== undefined) {
+                        var indexInSelectedIndexes = this.selectedIndexes.indexOf(currentVisibleIndex);
+                        if (indexInSelectedIndexes > -1) {
+                            this.selectedIndexes.splice(indexInSelectedIndexes, 1);
+                        }
+                    }
+                }
             }
         }
-        else if ((checkState === 'uncheck' || checkState === 'indeterminate') && isNullOrUndefined(currentRecord.isSummaryRow)) {
-            var index = this.selectedItems.indexOf(checkedRecord);
-            if (index !== -1) {
-                this.selectedItems.splice(index, 1);
-            }
-            if (this.selectedIndexes.indexOf(recordIndex) !== -1) {
-                var checkedIndex = this.selectedIndexes.indexOf(recordIndex);
-                this.selectedIndexes.splice(checkedIndex, 1);
+        var rowEl = null;
+        var rowUid = currentRecord.uid;
+        if (rowUid) {
+            rowEl = this.parent.grid.getRowElementByUID(rowUid);
+        }
+        if (!rowEl) {
+            var recordVisibleIndex = currentVisibleIndex !== undefined ? currentVisibleIndex : (typeof this.visibleUidIndex[String(uid)] === 'number' ? this.visibleUidIndex[String(uid)] : -1);
+            if (recordVisibleIndex > -1) {
+                rowEl = this.parent.getRows()[parseInt(recordVisibleIndex.toString(), 10)];
+                if (!rowEl && (this.parent.frozenRows || this.parent.getFrozenColumns())) {
+                    rowEl = this.parent.getDataRows()[parseInt(recordVisibleIndex.toString(), 10)];
+                }
             }
         }
-        var checkBoxclass = checkState === 'indeterminate' ? 'e-stop' : 'e-' + checkState;
-        if (recordIndex > -1) {
-            if (!isNullOrUndefined(checkbox)) {
-                checkbox.classList.add(checkBoxclass);
-                tr.querySelector('.e-treecheckselect').setAttribute('aria-checked', checkState === 'check' ? 'true' : checkState === 'uncheck' ? 'false' : 'mixed');
+        if (rowEl) {
+            var frame = rowEl.querySelector('.e-hierarchycheckbox .e-frame');
+            if (frame) {
+                removeClass([frame], ['e-check', 'e-stop', 'e-uncheck']);
+                frame.classList.add(checkState === 'indeterminate' ? 'e-stop' : ('e-' + checkState));
+            }
+            var input = rowEl.querySelector('.e-treecheckselect');
+            if (input) {
+                input.setAttribute('aria-checked', checkState === 'check' ? 'true' :
+                    (checkState === 'uncheck' ? 'false' : 'mixed'));
             }
         }
     };
+    /**
+     * Handles various grid actions and updates selection state accordingly.
+     * This method ensures that selection state is maintained and UI is refreshed after grid operations.
+     *
+     * @param {CellSaveEventArgs} args - Action arguments containing requestType and data.
+     * @returns {void}
+     */
     Selection.prototype.updateGridActions = function (args) {
-        var _this = this;
         var requestType = args.requestType;
-        var childData;
-        var childLength;
         if (isCheckboxcolumn(this.parent)) {
             if (this.parent.autoCheckHierarchy) {
                 if ((requestType === 'sorting' || requestType === 'paging')) {
-                    var rows = this.parent.grid.getRows();
-                    childData = this.parent.getCurrentViewRecords();
-                    childLength = childData.length;
-                    this.selectedIndexes = [];
-                    for (var i = 0; i < childLength; i++) {
-                        if (!rows[parseInt(i.toString(), 10)].classList.contains('e-summaryrow')) {
-                            this.updateSelectedItems(childData[parseInt(i.toString(), 10)], childData[parseInt(i.toString(), 10)].checkboxState);
-                        }
-                    }
+                    this.updateSelectedCollectionsAfterBulk(this.resolveHeaderSelectionList(), '');
+                    this.refreshVisibleCheckboxes();
+                    this.updateHeaderCheckboxState();
                 }
                 else if (requestType === 'delete' || args.action === 'add') {
                     var updatedData = [];
@@ -1438,71 +1923,69 @@ var Selection = /** @__PURE__ @class */ (function () {
                     }
                     for (var i = 0; i < updatedData.length; i++) {
                         if (requestType === 'delete') {
-                            var index = this.parent.flatData.indexOf(updatedData[parseInt(i.toString(), 10)]);
-                            var checkedIndex = this.selectedIndexes.indexOf(index);
-                            this.selectedIndexes.splice(checkedIndex, 1);
-                            this.updateSelectedItems(updatedData[parseInt(i.toString(), 10)], 'uncheck');
+                            this.updateSelectedItems(updatedData[parseInt(i.toString(), 10)], 'uncheck', false);
                         }
                         if (!isNullOrUndefined(updatedData[parseInt(i.toString(), 10)].parentItem)) {
                             this.updateParentSelection(updatedData[parseInt(i.toString(), 10)].parentItem);
                         }
                     }
+                    this.updateSelectedCollectionsAfterBulk(this.resolveHeaderSelectionList(true), '');
+                    this.refreshVisibleCheckboxes();
+                    if (this.parent.autoCheckHierarchy) {
+                        this.updateHeaderCheckboxState();
+                    }
                 }
                 else if (args.requestType === 'add' && this.parent.autoCheckHierarchy) {
                     args.data.checkboxState = 'uncheck';
                 }
-                else if (requestType === 'filtering' || requestType === 'searching' || requestType === 'refresh'
-                    && !isRemoteData(this.parent)) {
-                    this.selectedItems = [];
-                    this.selectedIndexes = [];
-                    childData = (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) ?
-                        this.parent.filterModule.filteredResult : this.parent.flatData;
-                    childData.forEach(function (record) {
-                        if (_this.parent.enableVirtualization) {
-                            if (record.hasChildRecords && record.childRecords.length > 0) {
-                                _this.updateParentSelection(record);
-                            }
-                            else {
-                                _this.updateSelectedItems(record, record.checkboxState);
-                            }
-                            var child = findChildrenRecords(record);
-                            child = _this.getFilteredChildRecords(child);
-                            for (var i = 0; i < child.length; i++) {
-                                if (child[parseInt(i.toString(), 10)].hasChildRecords) {
-                                    _this.updateParentSelection(child[parseInt(i.toString(), 10)]);
-                                }
-                                else if (!(child[parseInt(i.toString(), 10)].hasChildRecords) &&
-                                    !isNullOrUndefined(child[parseInt(i.toString(), 10)])) {
-                                    _this.updateSelectedItems(child[parseInt(i.toString(), 10)], child[parseInt(i.toString(), 10)].checkboxState);
-                                }
-                            }
-                        }
-                        else {
-                            if (record.hasChildRecords) {
-                                _this.updateParentSelection(record);
-                            }
-                            else {
-                                _this.updateSelectedItems(record, record.checkboxState);
-                            }
-                        }
-                    });
-                    this.headerSelection();
+                else if (requestType === 'filtering' || requestType === 'searching' || requestType === 'refresh') {
+                    this.updateSelectedCollectionsAfterBulk(this.resolveHeaderSelectionList(), requestType);
+                    this.refreshVisibleCheckboxes();
+                    if (this.parent.autoCheckHierarchy) {
+                        this.updateHeaderCheckboxState();
+                    }
                 }
             }
             else {
-                if ((requestType === 'filtering' || requestType === 'searching' || requestType === 'refresh')
-                    && !isRemoteData(this.parent)) {
+                if ((requestType === 'filtering' || requestType === 'searching' || requestType === 'refresh' ||
+                    requestType === 'sorting' || requestType === 'paging' || requestType === 'expanding' ||
+                    requestType === 'expand' || requestType === 'collapsing' || requestType === 'collapse') && !isRemoteData(this.parent)) {
                     this.selectedItems = [];
+                    this.selectedUidMap = new Map();
                     this.selectedIndexes = [];
+                    this.refreshVisibleCheckboxes();
+                    if (this.parent.autoCheckHierarchy) {
+                        this.updateHeaderCheckboxState();
+                    }
                 }
             }
         }
     };
-    Selection.prototype.getCheckedrecords = function () {
-        return this.selectedItems;
-    };
+    /**
+     * Retrieves checked record objects.
+     * This array maintains the `ITreeData` objects in the order they were selected.
+     *
+     * @returns {ITreeData[]} Array of checked records.
+     */
+    Selection.prototype.getCheckedrecords = function () { return this.selectedItems; };
+    /**
+     * Retrieves visible indexes of checked rows in the current view, in the order they were selected.
+     * This method dynamically generates the list of visible indexes by iterating through `selectedItems`
+     * (which preserves selection order) and finding their *current* visible index.
+     *
+     * @returns {number[]} Array of checked row indexes in selection order.
+     */
     Selection.prototype.getCheckedRowIndexes = function () {
-        return this.selectedIndexes;
+        this.buildVisibleUidMap();
+        var orderedVisibleIndexes = [];
+        for (var _i = 0, _a = this.selectedItems; _i < _a.length; _i++) {
+            var selectedItem = _a[_i];
+            var uid = selectedItem.uniqueID;
+            if (uid !== undefined && this.visibleUidIndex[uid] !== undefined) {
+                orderedVisibleIndexes.push(this.visibleUidIndex[uid]);
+            }
+        }
+        return orderedVisibleIndexes;
     };
     return Selection;
 }());
@@ -2104,6 +2587,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
      */
     DataManipulation.prototype.destroy = function () {
         this.removeEventListener();
+        this.hierarchyData = null;
     };
     /**
      * @hidden
@@ -2716,7 +3200,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                 this.parent.parentData.push(currentData);
             }
             currentData.uniqueID = getUid(this.parent.element.id + '_data_');
-            setValue('uniqueIDCollection.' + currentData.uniqueID, currentData, this.parent);
+            this.parent.uniqueIDCollection[currentData.uniqueID] = currentData;
             if (!isNullOrUndefined(parentRecords)) {
                 var parentData = extend$1({}, parentRecords);
                 delete parentData.childRecords;
@@ -3844,7 +4328,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     function TreeGrid(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.dataResults = {};
+        /** @hidden */
         _this.uniqueIDCollection = {};
+        /** @hidden */
         _this.uniqueIDFilterCollection = {};
         _this.changedRecords = 'changedRecords';
         _this.deletedRecords = 'deletedRecords';
@@ -3854,6 +4340,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         _this.modifiedRecords = [];
         _this.stackedHeader = false;
         _this.freezeColumnRefresh = true;
+        _this.componentRefresh = Component.prototype.refresh;
+        _this.isComponentRefresh = false;
         _this.objectEqualityChecker = function (old, current) {
             if (old) {
                 var keys = Object.keys(old);
@@ -3904,7 +4392,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     /* eslint-disable */
     TreeGrid.prototype.excelExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
         /* eslint-enable */
-        return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, false);
+        return this.allowExcelExport ? this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, false) : null;
     };
     /**
      * Exports the TreeGrid data to a CSV file.
@@ -3918,7 +4406,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     /* eslint-disable */
     TreeGrid.prototype.csvExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
         /* eslint-enable */
-        return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, true);
+        return this.allowExcelExport ? this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, true) : null;
     };
     /**
      * Exports the TreeGrid data to a PDF document.
@@ -3930,7 +4418,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
      * @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
      */
     TreeGrid.prototype.pdfExport = function (pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
-        return this.pdfExportModule.Map(pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
+        return this.allowPdfExport ? this.pdfExportModule.Map(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) : null;
     };
     /**
      * Sends a POST request to export the TreeGrid to an Excel file on the server side.
@@ -4050,6 +4538,26 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     TreeGrid.prototype.getModuleName = function () {
         return 'treegrid';
     };
+    /**
+     * Initiates a complete refresh of the TreeGrid's column and layout.
+     *
+     * This method forces a full re-render of the TreeGrid, ensuring that any dynamic
+     * changes to columns or layout are immediately reflected.
+     *
+     * @returns {void}
+     */
+    TreeGrid.prototype.refreshLayout = function () {
+        this.componentRefresh();
+    };
+    /**
+     * @param {Object} prop - Defines the property
+     * @param {boolean} muteOnChange - Defines the mute on change
+     * @returns {void}
+     * @private
+     */
+    TreeGrid.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -4057,6 +4565,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.preRender = function () {
+        if (this.isComponentRefresh) {
+            this.grid = new Grid();
+        }
         this.TreeGridLocale();
         this.initProperties();
         this.defaultLocale = {
@@ -4226,7 +4737,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                                     }
                                 }
                                 else {
-                                    this.clearSelection();
+                                    var contentTableBody = this.grid.getContent().querySelector('.e-table tbody');
+                                    if (parentTarget && contentTableBody && parentTarget !== contentTableBody.lastElementChild) {
+                                        this.clearSelection();
+                                    }
                                 }
                             }
                         }
@@ -4297,6 +4811,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.isExpandAll = false;
         this.isCollapseAll = false;
         this.freezeColumnRefresh = true;
+        this.componentRefresh = Component.prototype.refresh;
+        this.isComponentRefresh = false;
         this.keyConfigs = {
             ctrlDownArrow: 'ctrl+downarrow',
             ctrlUpArrow: 'ctrl+uparrow',
@@ -4652,7 +5168,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         if (RecordsCount === 0 && this.columns.length === 0) {
             failureCases.push('Either of the Data source or columns should be given.');
         }
-        if (this.frozenColumns > 0 && this.columnModel.filter(function (col) { return col.isFrozen; })) {
+        if (this.frozenColumns > 0 && this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0) {
             failureCases.push('Use only one attribute for Frozen either IsFrozen or FrozenColumns.');
         }
         if (this.enableVirtualization && !isNullOrUndefined(this.detailTemplate)) {
@@ -4662,12 +5178,21 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             && (!isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.rowTemplate))) {
             failureCases.push('Frozen rows and columns are not supported with the Detail template and row template.');
         }
-        if ((this.frozenColumns > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0 || this.frozenRows > 0) && this.editSettings.mode === 'Cell') {
+        if ((this.frozenColumns > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0 || this.frozenRows > 0) && this.editSettings.allowEditing && this.editSettings.mode === 'Cell') {
             failureCases.push('Frozen rows and columns are not supported with cell editing.');
         }
         if (this.allowSelection && !isNullOrUndefined(this.rowTemplate)) {
             failureCases.push('Selection is not supported in RowTemplate');
         }
+        if (!this.allowExcelExport && this.action === 'csvExport') {
+            failureCases.push('CSV export is not allowed when allowExcelExport is disabled.');
+        }
+        if (!this.allowPdfExport && this.action === 'pdfExport') {
+            failureCases.push('PDF export is not allowed when allowPdfExport is disabled');
+        }
+        if (!this.allowExcelExport && this.action === 'excelExport') {
+            failureCases.push('Excel export is not allowed when allowExcelExport is disabled.');
+        }
         if (this.treeColumnIndex >= this.columns.length) {
             failureCases.push('TreeColumnIndex value should not exceed the total column count.');
         }
@@ -4828,6 +5353,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid.frozenRows = this.frozenRows;
         this.grid.frozenColumns = this.frozenColumns;
         this.grid.clipMode = getActualProperties(this.clipMode);
+        this.grid.enableColumnSpan = this.enableColumnSpan;
+        this.grid.enableRowSpan = this.enableRowSpan;
         var templateInstance = 'templateDotnetInstance';
         this.grid["" + templateInstance] = this["" + templateInstance];
         var isJsComponent = 'isJsComponent';
@@ -5308,12 +5835,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 _this.grid.refresh();
             }
             if (args.action === 'filter') {
-                if (!args.isCollapseMaintain && _this.filterModule['currentFilterObject'] !== '' && _this.enableVirtualization && !_this.initialRender && !(isRemoteData(_this) && _this.enableVirtualization)) {
+                if (!args.isCollapseMaintain && _this.filterModule['currentFilterObject'] !== '' && _this.enableVirtualization && !_this.initialRender && !_this.expandStateMapping && !(isRemoteData(_this) && _this.enableVirtualization)) {
                     _this.expandAll();
                 }
             }
             if (args.requestType === 'searching') {
-                if (!args.isCollapseMaintain && _this.searchSettings.key !== '' && _this.enableVirtualization && !_this.initialRender && !(isRemoteData(_this) && _this.enableVirtualization)) {
+                if (!args.isCollapseMaintain && _this.searchSettings.key !== '' && _this.enableVirtualization && !_this.initialRender && !_this.expandStateMapping && !(isRemoteData(_this) && _this.enableVirtualization)) {
                     _this.expandAll();
                 }
             }
@@ -5653,12 +6180,15 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     TreeGrid.prototype.onPropertyChanged = function (newProp) {
         var properties = Object.keys(newProp);
         var requireRefresh = false;
-        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns)) {
-            this.refreshColumns();
-        }
         for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
             var prop = properties_1[_i];
             switch (prop) {
+                case 'columns':
+                    if (!isNullOrUndefined(newProp.columns)) {
+                        this.refreshColumns();
+                    }
+                    requireRefresh = true;
+                    break;
                 case 'treeColumnIndex':
                     this.grid.refreshColumns();
                     break;
@@ -5869,8 +6399,19 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                     }
                     this.grid.editSettings = this.getGridEditSettings();
                     break;
+                case 'enableRowSpan':
+                case 'enableColumnSpan':
+                    this.grid.enableRowSpan = this.enableRowSpan;
+                    this.grid.enableColumnSpan = this.enableColumnSpan;
+                    this.refreshColumns();
+                    break;
+            }
+        }
+        if (requireRefresh) {
+            if (this.isFrozenGrid()) {
+                this.refreshLayout();
             }
-            if (requireRefresh) {
+            else {
                 this.grid.refresh();
             }
         }
@@ -5891,6 +6432,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.destroy = function () {
+        this.isComponentRefresh = true;
         var treeGridElement = this.element;
         if (!treeGridElement) {
             return;
@@ -5901,15 +6443,20 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             this.unwireEvents();
         }
         this.removeListener();
-        if (hasTreeGridChild) {
-            _super.prototype.destroy.call(this);
+        if (this.dataModule) {
+            this.dataModule.destroy();
         }
         if (this.grid) {
+            this.grid.dataSource = null;
             this.grid.destroy();
         }
-        if (this.dataModule) {
-            this.dataModule.destroy();
+        if (hasTreeGridChild) {
+            _super.prototype.destroy.call(this);
         }
+        this.infiniteScrollData = null;
+        this.remoteCollapsedData = null;
+        this.remoteExpandedData = null;
+        this.parentData = null;
         var modules = ['dataModule', 'sortModule', 'renderModule', 'filterModule', 'printModule', 'clipboardModule',
             'excelExportModule', 'pdfExportModule', 'toolbarModule', 'summaryModule', 'reorderModule', 'resizeModule',
             'pagerModule', 'keyboardModule', 'columnMenuModule', 'contextMenuModule', 'editModule', 'virtualScrollModule',
@@ -5919,6 +6466,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 this[modules[parseInt(i.toString(), 10)]] = null;
             }
         }
+        this.dataResults = null;
+        this.uniqueIDCollection = {};
+        this.uniqueIDFilterCollection = {};
         this.element.innerHTML = '';
         this.grid = null;
     };
@@ -6060,7 +6610,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     /**
      * Adds a new record to the TreeGrid at the specified position or default location.
      *
-     * @param {Object} data - Object containing the data for the new record. If omitted, an empty row is added.
+     * @param {Object | Object[]} data - Object containing data for a single record, or an array of objects for creating multiple records. If omitted, an empty row is added.
      * @param {number} index - The index at which the new row should be added.
      * @param {RowPosition} position - Specifies the position of the new row (e.g., before, after or child).
      *
@@ -6871,7 +7421,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(refreshUI) || refreshUI) {
             this.grid.columns = this.getGridColumns(this.columns);
             this.getTreeColumn();
-            this.grid.refreshColumns();
+            if (!this.isFrozenGrid()) {
+                this.grid.refreshColumns();
+            }
         }
         else {
             this.grid.setProperties({ columns: this.getGridColumns(this.columns) }, true);
@@ -7413,7 +7965,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             if (rows.length) {
                 for (var i = 0; i < rows.length; i++) {
                     if (action === 'collapse') {
-                        if (!isNullOrUndefined(this.getCurrentViewRecords()[rows[parseInt(i.toString(), 10)].rowIndex])) {
+                        var currentRecordIndx = this.frozenRows ? this.getCurrentViewRecords()[parseInt(rows[parseInt(i.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1] : this.getCurrentViewRecords()[rows[parseInt(i.toString(), 10)].rowIndex];
+                        if (!isNullOrUndefined(currentRecordIndx)) {
                             this.collapseRow(rows[parseInt(i.toString(), 10)]);
                         }
                     }
@@ -7540,8 +8093,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 }
                 var lastrowIdx = this.getVisibleRecords()[this.getVisibleRecords().length - 1]['index'];
                 var lastRow = this.getRowByIndex(lastrowIdx);
-                if (this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(lastRow) && !lastRow.cells[0].classList.contains('e-lastrowcell')) {
-                    this.lastRowBorder(lastRow, true);
+                var borderElement = lastRow ? lastRow.nextElementSibling ? lastRow.nextElementSibling.classList.contains('e-detailrow') ? lastRow.nextElementSibling : lastRow : lastRow : null;
+                if (this.grid.getContentTable().clientHeight <= this.grid.getContent().clientHeight && !isNullOrUndefined(borderElement) && !borderElement.cells[0].classList.contains('e-lastrowcell')) {
+                    this.lastRowBorder(borderElement, true);
                 }
             }
             if (isCountRequired(this) && action === 'expand') {
@@ -7705,12 +8259,16 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     };
     TreeGrid.prototype.localExpand = function (action, row, record) {
         var rows;
+        var detailRow = row.nextElementSibling ? row.nextElementSibling.classList.contains('e-detailrow') ? row.nextElementSibling : null : null;
         var childRecords = this.grid.currentViewData.filter(function (e) {
             return e.parentUniqueID === record.uniqueID;
         });
         if (this.isPixelHeight() && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
         }
+        else if (this.isPixelHeight() && detailRow && detailRow.cells[0].classList.contains('e-lastrowcell')) {
+            this.lastRowBorder(row.nextElementSibling, false);
+        }
         var movableRows;
         var freezeRightRows;
         var gridRows = this.getRows();
@@ -7925,6 +8483,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
         this.grid.on('partial-filter-update', this.partialFilterUpdate, this);
+        this.grid.on('get-row-cells', this.getCellsByTableName, this);
     };
     TreeGrid.prototype.updateResultModel = function (returnResult) {
         this.dataResults = returnResult;
@@ -7941,6 +8500,16 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid.off('initial-end', this.afterGridRender);
         this.grid.off('last-rowcell-border-updated', this.lastRowCellBorderUpdated);
         this.grid.off('partial-filter-update', this.partialFilterUpdate);
+        this.grid.off('get-row-cells', this.getCellsByTableName);
+    };
+    TreeGrid.prototype.getCellsByTableName = function (args) {
+        if (!Array.isArray(args.elements)) {
+            args.elements = [];
+        }
+        if (args.rowIndex < this.grid.getDataRows().length) {
+            var cells = [].slice.call(this.grid.getDataRows()[parseInt(args.rowIndex.toString(), 10)].getElementsByClassName('e-rowcell'));
+            Array.prototype.push.apply(args.elements, cells);
+        }
     };
     TreeGrid.prototype.partialFilterUpdate = function (args) {
         var gridFiltered = args.gridFiltered;
@@ -8365,6 +8934,53 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             this.rowDragAndDropModule[this.indentOutdentAction](record, 'outdent');
         }
     };
+    /**
+     * Calculates and returns the optimal page size that fits the current height of the TreeGrid's container.
+     *
+     * @param {number | string } containerHeight - (Optional) The height of the container - i.e. the complete TreeGrid height, which can be a number (in pixels) or a string.
+     * @returns {number} returns the page size
+     */
+    TreeGrid.prototype.getPageSizeByHeight = function (containerHeight) {
+        if (isNullOrUndefined(containerHeight)) {
+            var treegridControlElement = document.getElementById(this.element.id);
+            if (treegridControlElement) {
+                containerHeight = treegridControlElement.clientHeight;
+            }
+            else {
+                var root = this.element;
+                containerHeight = root ? (root.offsetHeight || root.clientHeight || 0) : 0;
+            }
+        }
+        if ((this.allowTextWrap && this.textWrapSettings.wrapMode === 'Header') || (!this.allowTextWrap)) {
+            var pagesize = 0;
+            if (typeof containerHeight === 'string' && containerHeight.indexOf('%') !== -1) {
+                containerHeight = parseInt(containerHeight, 10) / 100 * this.element.clientHeight;
+            }
+            var nonContentHeight = this.grid['getNoncontentHeight']() + this.grid.getRowHeight();
+            if (containerHeight > nonContentHeight) {
+                var contentHeight = 0;
+                var calcNonContentHeight = this.grid['getNoncontentHeight']();
+                var pagerMsg = document.getElementsByClassName('e-pagerexternalmsg')[0];
+                if (pagerMsg) {
+                    calcNonContentHeight += pagerMsg.clientHeight;
+                }
+                contentHeight = containerHeight - calcNonContentHeight;
+                pagesize = (contentHeight / this.grid.getRowHeight());
+            }
+            if (this.frozenRows > 0) {
+                pagesize = pagesize + this.frozenRows;
+            }
+            if (pagesize > 0) {
+                return Math.floor(pagesize);
+            }
+            else {
+                return 0;
+            }
+        }
+        else {
+            return 0;
+        }
+    };
     var TreeGrid_1;
     __decorate$c([
         Property(0)
@@ -8579,6 +9195,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     __decorate$c([
         Property(false)
     ], TreeGrid.prototype, "allowPdfExport", void 0);
+    __decorate$c([
+        Property(false)
+    ], TreeGrid.prototype, "enableColumnSpan", void 0);
+    __decorate$c([
+        Property(false)
+    ], TreeGrid.prototype, "enableRowSpan", void 0);
     __decorate$c([
         Event()
     ], TreeGrid.prototype, "created", void 0);
@@ -9084,6 +9706,9 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.selectedItem = isNullOrUndefined(record) ?
                 tObj.getCurrentViewRecords()[parseInt(selectedItemIndex.toString(), 10)] : record;
             var primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
+            if (!primaryKeyField) {
+                return;
+            }
             var rowIndex = this.parent.grid.getRowIndexByPrimaryKey(this.selectedItem["" + primaryKeyField]);
             this.selectedRow = this.parent[this.selectedRows] = selectedItemIndex !== -1 ?
                 this.parent.getSelectedRows()[0]
@@ -12085,7 +12710,7 @@ var Aggregate = /** @__PURE__ @class */ (function () {
             var value_1 = types[parseInt(i.toString(), 10)] !== 'Custom' ? val["" + key] : val;
             single["" + disp] = single["" + disp] || {};
             single["" + disp]["" + key] = value_1;
-            single["" + disp][types[parseInt(i.toString(), 10)]] = !isNullOrUndefined(val) ? formatFn(value_1) : ' ';
+            single["" + disp][types[parseInt(i.toString(), 10)]] = (!isNullOrUndefined(val) && !isNullOrUndefined(value_1)) ? formatFn(value_1) : ' ';
         }
         helper.format = summaryColumn.getFormatter();
         var cellElement = createElement('td', {
@@ -12312,6 +12937,7 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
     ContextMenu.prototype.addEventListener = function () {
         this.parent.on('contextMenuOpen', this.contextMenuOpen, this);
         this.parent.on('contextMenuClick', this.contextMenuClick, this);
+        this.parent.on('contextMenuItemClick', this.contextMenuItemClick, this);
     };
     /**
      * @hidden
@@ -12323,6 +12949,21 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
         }
         this.parent.off('contextMenuOpen', this.contextMenuOpen);
         this.parent.off('contextMenuClick', this.contextMenuClick);
+        this.parent.off('contextMenuItemClick', this.contextMenuItemClick);
+    };
+    ContextMenu.prototype.contextMenuItemClick = function (args) {
+        var id = args.item && args.item.id ? args.item.id : '';
+        var delId = this.parent.element.id + '_gridcontrol_cmenu_Delete';
+        if (id !== delId) {
+            return;
+        }
+        if (this.parent.getSelectedRecords()[0].hasChildRecords || this.parent.getSelectedRecords().length > 1) {
+            this.parent.deleteRecord();
+        }
+        else {
+            this.parent.deleteRow(this.parent.getSelectedRows()[0]);
+        }
+        args.cancel = true;
     };
     ContextMenu.prototype.contextMenuOpen = function (args) {
         var addRow = select('#' + this.parent.element.id + '_gridcontrol_cmenu_AddRow', args.element);
@@ -12711,13 +13352,22 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                 focusModule.getContent().matrix.matrix = this.matrix;
             }
             else {
-                actualIndex = table.getElementsByClassName('e-batchrow')[0].rowIndex;
+                if (this.parent.frozenRows) {
+                    actualIndex = this.batchIndex;
+                }
+                else if (this.parent.editModule.isAddedMultipleRowsByMethod) {
+                    actualIndex = e.index;
+                }
+                else {
+                    actualIndex = table.getElementsByClassName('e-batchrow')[0].rowIndex;
+                }
                 // if (this.parent.frozenRows || this.parent.frozenColumns) {
                 //   actualIndex = this.batchIndex;
                 // }
             }
             focusModule.getContent().matrix.current = [actualIndex, focusModule.getContent().matrix.current[1]];
-            if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex']) && !this.parent.editModule['isAddedRowByContextMenu']) {
+            if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex']) &&
+                !this.parent.editModule['isAddedRowByContextMenu'] && !this.parent.editModule.isAddedMultipleRowsByMethod) {
                 var newlyAddedRecords = this.parent.getBatchChanges()['addedRecords'];
                 var index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[newlyAddedRecords.length - 1].getAttribute('aria-rowindex'), 10) - 1;
                 this.batchRecords.splice(index, 0, newlyAddedRecords[newlyAddedRecords.length - 1]);
@@ -12966,7 +13616,12 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                     this.parent.editModule['previousNewRowPosition'] = rowPosition;
                 }
                 addRecords[parseInt(i.toString(), 10)].taskData = taskData;
-                addRowRecord_1 = this.batchAddRowRecord[parseInt(i.toString(), 10)];
+                if (this.batchAddRowRecord.length > 1) {
+                    addRowRecord_1 = this.batchAddRowRecord[parseInt(i.toString(), 10)];
+                }
+                else {
+                    addRowRecord_1 = this.batchAddRowRecord[0];
+                }
                 if (isNullOrUndefined(addRowRecord_1)) {
                     addRowRecord_1 = this.batchAddRowRecord[i - 1];
                 }
@@ -12981,6 +13636,10 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                 if (isNullOrUndefined(addRecords[parseInt(i.toString(), 10)].index)) {
                     addRowIndex = 0;
                 }
+                if (this.parent.editModule.isAddedMultipleRowsByMethod && this.isSelfReference && (this.parent.editSettings.newRowPosition === 'Above' || this.parent.editSettings.newRowPosition === 'Below')) {
+                    addRowIndex = args.index;
+                    addRowRecord_1 = this.parent.flatData[args.index];
+                }
                 if (this.parent.editSettings.newRowPosition !== 'Top' && this.parent.editSettings.newRowPosition !== 'Bottom') {
                     if (isNullOrUndefined(addRecords[parseInt(i.toString(), 10)].parentItem) && this.selectedIndex === -1) {
                         selectedIndex = -1;
@@ -13110,6 +13769,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         this.isAddedRowByMethod = false;
         this.isAddedRowByContextMenu = false;
         this.isIndexUndefined = false;
+        this.isAddedMultipleRowsByMethod = false;
         Grid.Inject(Edit$1);
         this.parent = parent;
         this.isSelfReference = !isNullOrUndefined(parent.parentIdMapping);
@@ -13769,7 +14429,8 @@ var Edit = /** @__PURE__ @class */ (function () {
                 }
             }
         }
-        if (this.parent.editSettings.mode === 'Batch' && !isNullOrUndefined(this.addRowIndex) && this.addRowIndex !== -1 && this['isAddedRowByMethod'] && !this.isAddedRowByContextMenu) {
+        if (this.parent.editSettings.mode === 'Batch' && !isNullOrUndefined(this.addRowIndex) && this.addRowIndex !== -1 &&
+            !this.isAddedMultipleRowsByMethod && this['isAddedRowByMethod'] && !this.isAddedRowByContextMenu) {
             index = this.batchEditModule.getAddRowIndex();
             this.selectedIndex = this.batchEditModule.getSelectedIndex();
             var batchAddedRecords = this.parent.getBatchChanges()['addedRecords'];
@@ -13791,6 +14452,28 @@ var Edit = /** @__PURE__ @class */ (function () {
             this.batchEditModule['batchAddRowRecord'].push(this.batchEditModule['addRowRecord']);
             this.batchEditModule['batchAddedRecords'].push(args['data']);
         }
+        else if (this.parent.editSettings.mode === 'Batch' && this.isAddedMultipleRowsByMethod && (this.parent.editSettings.newRowPosition === 'Above' || this.parent.editSettings.newRowPosition === 'Below')) {
+            index = this.multipleRowIndex;
+            this.selectedIndex = this.multipleRowIndex;
+            var batchAddedRecords = this.updatedRecords.addedRecords;
+            var newlyAddedRecord = void 0;
+            if (batchAddedRecords.length) {
+                for (var i = 0; i < batchAddedRecords.length; i++) {
+                    if (isNullOrUndefined(batchAddedRecords[parseInt(i.toString(), 10)].uniqueID)) {
+                        newlyAddedRecord = batchAddedRecords[parseInt(i.toString(), 10)];
+                    }
+                    var args = {
+                        action: 'add',
+                        data: newlyAddedRecord,
+                        index: index,
+                        seletedRow: 0
+                    };
+                    this.beginAddEdit(args);
+                    this.batchEditModule['batchAddRowRecord'].push(this.batchEditModule['addRowRecord']);
+                    this.batchEditModule['batchAddedRecords'].push(args['data']);
+                }
+            }
+        }
     };
     // private beforeDataBound(args: BeforeDataBoundArgs): void {
     //   if (this.parent.grid.isEdit && this.parent.dataSource instanceof DataManager &&
@@ -14085,7 +14768,35 @@ var Edit = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(index)) {
             this.isIndexUndefined = true;
         }
-        if (!this.isSelfReference && !isNullOrUndefined(data) && Object.hasOwnProperty.call(data, this.parent.childMapping)) {
+        if (!isNullOrUndefined(data) && Array.isArray(data)) {
+            var addRecords = [];
+            var previousEditMode = this.parent.editSettings.mode;
+            var previousGridEditMode = this.parent.grid.editSettings.mode;
+            if (!this.isSelfReference && !isNullOrUndefined(data) && Object.hasOwnProperty.call(data, this.parent.childMapping)) {
+                addRecords.push(data);
+            }
+            else if (Array.isArray(data)) {
+                addRecords = data;
+            }
+            this.parent.setProperties({ editSettings: { mode: 'Batch' } }, true);
+            this.parent.grid.setProperties({ editSettings: { mode: 'Batch' } }, true);
+            if (!isNullOrUndefined(position)) {
+                this.parent.setProperties({ editSettings: { newRowPosition: position } }, true);
+            }
+            this.updatedRecords = { addedRecords: addRecords, changedRecords: [], deletedRecords: [] };
+            if ((position === 'Above' || position === 'Below') && this.isSelfReference) {
+                this.isAddedMultipleRowsByMethod = true;
+                this.multipleRowIndex = index;
+                this.addRowIndex = index;
+                this.parent.notify(batchAdd, { updatedRecords: this.updatedRecords, index: index });
+            }
+            var updatedRecords = this.updatedRecords;
+            this.parent.notify(batchSave, { updatedRecords: updatedRecords, index: index });
+            this.parent.setProperties({ editSettings: { mode: previousEditMode } }, true);
+            this.parent.grid.setProperties({ editSettings: { mode: previousGridEditMode } }, true);
+            this.parent.refresh();
+        }
+        else if (!this.isSelfReference && !isNullOrUndefined(data) && Object.hasOwnProperty.call(data, this.parent.childMapping)) {
             var addRecords = [];
             var previousEditMode = this.parent.editSettings.mode;
             var previousGridEditMode = this.parent.grid.editSettings.mode;
@@ -14095,7 +14806,8 @@ var Edit = /** @__PURE__ @class */ (function () {
             if (!isNullOrUndefined(position)) {
                 this.parent.setProperties({ editSettings: { newRowPosition: position } }, true);
             }
-            var updatedRecords = { addedRecords: addRecords, changedRecords: [], deletedRecords: [] };
+            this.updatedRecords = { addedRecords: addRecords, changedRecords: [], deletedRecords: [] };
+            var updatedRecords = this.updatedRecords;
             this.parent.notify(batchSave, { updatedRecords: updatedRecords, index: index });
             this.parent.setProperties({ editSettings: { mode: previousEditMode } }, true);
             this.parent.grid.setProperties({ editSettings: { mode: previousGridEditMode } }, true);
@@ -14401,7 +15113,8 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     VirtualTreeContentRenderer.prototype.getRowCollection = function (index, isMovable, isRowObject, isFrozenRight) {
-        var startIdx = parseInt(this.parent.getRows()[0].getAttribute(ariaRowIndex), 10) - 1;
+        var rows = this.parent.getRows();
+        var startIdx = rows.length > 0 ? parseInt(rows[0].getAttribute(ariaRowIndex), 10) - 1 : 0;
         var rowCollection = this.parent.getDataRows();
         var collection = isRowObject ? this.parent.getCurrentViewRecords() : rowCollection;
         var selectedRow = collection[index - startIdx];
@@ -14594,6 +15307,9 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.renderTable.call(this);
         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 (this.observers) {
+                this.observers.disconnect();
+            }
             getValue('observer', this).options.debounceEvent = false;
             this.observers = new TreeInterSectionObserver(getValue('observer', this).element, getValue('observer', this).options);
             this.contents = this.getPanel().firstChild;
@@ -15309,6 +16025,9 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         this.parent.off('refresh-virtual-editform-cells', this.refreshCell);
         this.parent.off('virtaul-cell-focus', this.cellFocus);
         this.parent.off('virtual-scroll-edit', this.restoreEditState);
+        if (this.observers) {
+            this.observers.disconnect();
+        }
     };
     return VirtualTreeContentRenderer;
 }(VirtualContentRenderer));
@@ -15334,12 +16053,28 @@ var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
     TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback, instance) {
         var containerRect = 'containerRect';
         _super.prototype["" + containerRect] = getValue('options', this).container.getBoundingClientRect();
-        EventHandler.add(getValue('options', this).container, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
+        this.containerEl = getValue('options', this).container;
+        this.containerScrollHandler = this.virtualScrollHandlers(callback, onEnterCallback, instance);
+        EventHandler.add(this.containerEl, 'scroll', this.containerScrollHandler, this);
         if (getValue('options', this).movableContainer) {
             var movableContainerRect = 'movableContainerRect';
             _super.prototype["" + movableContainerRect] = getValue('options', this).movableContainer.getBoundingClientRect();
-            EventHandler.add(getValue('options', this).movableContainer, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
+            this.movableContainerEl = getValue('options', this).movableContainer;
+            this.movableScrollHandler = this.virtualScrollHandlers(callback, onEnterCallback, instance);
+            EventHandler.add(this.movableContainerEl, 'scroll', this.movableScrollHandler, this);
+        }
+    };
+    TreeInterSectionObserver.prototype.disconnect = function () {
+        if (this.containerEl && this.containerScrollHandler) {
+            EventHandler.remove(this.containerEl, 'scroll', this.containerScrollHandler);
+            this.containerScrollHandler = null;
+        }
+        if (this.movableContainerEl && this.movableScrollHandler) {
+            EventHandler.remove(this.movableContainerEl, 'scroll', this.movableScrollHandler);
+            this.movableScrollHandler = null;
         }
+        this.containerEl = null;
+        this.movableContainerEl = null;
     };
     /**
      * Clears the last known position.
@@ -15563,9 +16298,12 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         var dm = new DataManager(pageingDetails.result);
         var expanded = new Predicate$1('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
         var parents = dm.executeLocal(new Query().where(expanded));
-        var visualData = parents.filter(function (e) {
-            return getExpandStatus(_this.parent, e);
-        });
+        var isFiltering = pageingDetails.actionArgs.requestType === 'filtering';
+        var isFlatHierarchy = this.parent.filterSettings.hierarchyMode === 'Child' ||
+            this.parent.filterSettings.hierarchyMode === 'None';
+        var visualData = isFiltering && isFlatHierarchy
+            ? parents
+            : parents.filter(function (e) { return getExpandStatus(_this.parent, e); });
         this.visualData = visualData;
         pageingDetails.count = visualData.length;
         this.parent.grid.notify(dataListener, { data: visualData });
@@ -15804,7 +16542,7 @@ var Freeze = /** @__PURE__ @class */ (function () {
             }
             var queryselector = args.action === 'e-childrow-hidden' ? '.e-treecolumn-container .e-treegridcollapse'
                 : '.e-treecolumn-container .e-treegridexpand';
-            if (frozenrows[row.rowIndex].querySelector(queryselector)) {
+            if (frozenrows[parseInt(row.getAttribute('aria-rowindex'), 10) - 1].querySelector(queryselector)) {
                 var cRow = [];
                 for (var i_1 = 0; i_1 < movableRows.length; i_1++) {
                     if (movableRows[parseInt(i_1.toString(), 10)].querySelector('.e-gridrowindex' + rData.index + 'level' + (rData.level + 1))) {