@syncfusion/ej2-treegrid 31.2.12 → 32.1.19

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

@@ -70,6 +70,18 @@ class Column {
          * @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);
     }
     /**
@@ -875,27 +887,56 @@ function isHidden(el) {
  */
 class Selection {
     /**
-     * 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.
      */
     constructor(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').
      */
-    getModuleName() {
-        return 'selection';
+    getModuleName() { 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}
+     */
+    buildVisibleUidMap() {
+        this.visibleUidIndex = {};
+        const view = this.parent.grid.currentViewData;
+        if (!view) {
+            return;
+        }
+        for (let i = 0, len = view.length; i < len; i++) {
+            const 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}
+     */
     addEventListener() {
         this.parent.on('dataBoundArg', this.headerCheckbox, this);
         this.parent.on('columnCheckbox', this.columnCheckbox, this);
@@ -903,6 +944,11 @@ class Selection {
         this.parent.grid.on('colgroup-refresh', this.headerCheckbox, this);
         this.parent.on('checkboxSelection', this.checkboxSelection, this);
     }
+    /**
+     * Removes previously added event listeners.
+     *
+     * @returns {void}
+     */
     removeEventListener() {
         if (this.parent.isDestroyed) {
             return;
@@ -914,14 +960,20 @@ class Selection {
         this.parent.off('updateGridActions', this.updateGridActions);
     }
     /**
-     * To destroy the Selection
+     * Destroys the selection module and clears internal caches.
      *
      * @returns {void}
-     * @hidden
      */
     destroy() {
+        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}
+     */
     checkboxSelection(args) {
         const target = getObject('target', args);
         const checkWrap = parentsUntil(target, 'e-checkbox-wrapper');
@@ -929,16 +981,23 @@ class Selection {
         if (checkWrap && checkWrap.querySelectorAll('.e-treecheckselect').length > 0) {
             checkBox = checkWrap.querySelector('input[type="checkbox"]');
             const 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'));
+            const 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) {
-            const checkBoxvalue = !checkWrap.querySelector('.e-frame').classList.contains('e-check')
-                && !checkWrap.querySelector('.e-frame').classList.contains('e-stop');
-            this.headerSelection(checkBoxvalue);
+            const frame = checkWrap.querySelector('.e-frame');
+            const currentStateIsUncheck = !frame.classList.contains('e-check') && !frame.classList.contains('e-stop');
+            const 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((col) => { return col.type === 'checkbox'; }).length > 0
@@ -949,63 +1008,99 @@ class Selection {
             }
         }
     }
+    /**
+     * 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}
+     */
     triggerChkChangeEvent(checkBox, checkState, rowElement) {
         const data = this.parent.getCurrentViewRecords()[rowElement.rowIndex];
-        const args = { checked: checkState, target: checkBox, rowElement: rowElement,
+        const 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.
+     */
     getCheckboxcolumnIndex() {
+        if (this.checkboxColIndexCache !== -2) {
+            return this.checkboxColIndexCache;
+        }
         let mappingUid;
-        let columnIndex;
+        let columnIndex = -1;
         const stackedHeader = 'stackedHeader';
         const columnModel = 'columnModel';
         const columns = this.parent[`${stackedHeader}`] ? this.parent[`${columnModel}`] : (this.parent.columns);
         for (let col = 0; col < columns.length; col++) {
             if (columns[parseInt(col.toString(), 10)].showCheckbox) {
                 mappingUid = columns[parseInt(col.toString(), 10)].uid;
+                break;
             }
         }
-        const headerCelllength = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv').length;
-        for (let j = 0; j < headerCelllength; j++) {
-            const headercell = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv')[parseInt(j.toString(), 10)];
+        const headerDivs = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv');
+        for (let j = 0; j < headerDivs.length; j++) {
+            const 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}
+     */
     headerCheckbox() {
+        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) {
             const headerElement = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv')[this.columnIndex];
-            const value = false;
-            const rowChkBox = this.parent.createElement('input', { className: 'e-treeselectall', attrs: { 'type': 'checkbox' } });
-            const 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) {
+                const value = false; // Initial state can be false.
+                const rowChkBox = this.parent.createElement('input', { className: 'e-treeselectall', attrs: { 'type': 'checkbox' } });
+                const 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) {
-            const checkWrap = this.parent.getHeaderContent().querySelectorAll('.e-checkbox-wrapper')[0];
-            const 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.
+     */
     renderColumnCheckbox(args) {
         const rowChkBox = this.parent.createElement('input', { className: 'e-treecheckselect', attrs: { 'type': 'checkbox', 'aria-label': 'checkbox' } });
         const data = args.data;
         args.cell.classList.add('e-treegridcheckbox');
         args.cell.setAttribute('aria-label', 'checkbox');
-        const value = (isNullOrUndefined(data.checkboxState) || data.checkboxState === 'uncheck') ? false : true;
+        const value = (data.checkboxState === 'check');
         const checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
         checkWrap.classList.add('e-hierarchycheckbox');
         if (this.parent.allowTextWrap) {
@@ -1016,9 +1111,25 @@ class Selection {
             removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
             checkWrap.querySelector('.e-frame').classList.add('e-stop');
         }
+        else if (data.checkboxState === 'uncheck') {
+            const 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') {
+            const 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}
+     */
     columnCheckbox(container) {
         const checkWrap = this.renderColumnCheckbox(container);
         const containerELe = container.cell.querySelector('.e-treecolumn-container');
@@ -1038,112 +1149,247 @@ class Selection {
             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}
+     */
     selectCheckboxes(rowIndexes) {
-        if (isNullOrUndefined(rowIndexes)) {
-            const error = 'The provided value for the rowIndexes is undefined. Please ensure the rowIndexes contains number.';
-            this.parent.trigger(actionFailure, { error: error });
-        }
         for (let i = 0; i < rowIndexes.length; i++) {
-            let record = this.parent.getCurrentViewRecords()[rowIndexes[parseInt(i.toString(), 10)]];
-            const flatRecord = getParentData(this.parent, record.uniqueID);
-            record = flatRecord;
-            const checkboxState = (record.checkboxState === 'uncheck') ? 'check' : 'uncheck';
-            record.checkboxState = checkboxState;
-            const keys = Object.keys(record);
-            for (let 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();
-            }
+            const viewRec = this.parent.getCurrentViewRecords()[rowIndexes[parseInt(i.toString(), 10)]];
+            const flatRec = getParentData(this.parent, viewRec.uniqueID);
+            const nextState = (flatRec.checkboxState === 'check') ? 'uncheck' : 'check';
+            flatRec.checkboxState = nextState;
+            this.traverSelection(flatRec, nextState, false);
         }
     }
-    traverSelection(record, checkboxState, ischildItem) {
-        let length = 0;
-        this.updateSelectedItems(record, checkboxState);
-        if (!ischildItem && record.parentItem && this.parent.autoCheckHierarchy) {
-            this.updateParentSelection(record.parentItem);
-        }
-        if (record.childRecords && this.parent.autoCheckHierarchy) {
-            let 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 (let 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}
+     */
+    traverSelection(record, checkboxState, isChildItem) {
+        const previousState = record.checkboxState;
+        if (!isChildItem) {
+            this.buildVisibleUidMap();
+        }
+        let 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;
+        }
+        let childCount = 0;
+        let checkedCount = 0;
+        let indeterminateCount = 0;
+        for (let i = 0; i < effectiveChildren.length; i++) {
+            const 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
+            };
+        }
+        const summary = this.parentSelectionCounters[record.uniqueID];
+        let 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) {
+            const 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.
+     */
     getFilteredChildRecords(childRecords) {
         const filteredChildRecords = childRecords.filter((e) => {
             return this.parent.filterModule.filteredResult.indexOf(e) > -1;
         });
         return filteredChildRecords;
     }
-    updateParentSelection(parentRecord) {
-        let length = 0;
-        let childRecords = [];
-        const 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;
-        let indeter = 0;
-        let checkChildRecords = 0;
-        if (!isNullOrUndefined(record)) {
-            for (let i = 0; i < childRecords.length; i++) {
-                const currentRecord = getParentData(this.parent, childRecords[parseInt(i.toString(), 10)].uniqueID);
-                const 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.
+     */
+    getChildrenFromFlat(record) {
+        const all = (this.parent.flatData);
+        if (!all || !record) {
+            return [];
+        }
+        const pid = record.uniqueID;
+        const out = [];
+        for (let i = 0; i < all.length; i++) {
+            const 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';
+            const 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}
+     */
+    updateParentSelection(parentRecord, previousChildState, nextChildState) {
+        const parent = getParentData(this.parent, parentRecord.uniqueID);
+        if (!parent) {
+            return;
+        }
+        const 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;
+        }
+        const desiredState = this.deriveParentState(parent, summary);
+        if (parent.checkboxState === desiredState) {
+            return;
+        }
+        const 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.
+     */
+    buildSelectionSummary(record, ignoreFilter) {
+        const summary = { total: 0, checked: 0, indeterminate: 0 };
+        let 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 (let i = 0; i < children.length; i++) {
+            const 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}
+     */
+    applySummaryDelta(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.
+     */
+    deriveParentState(record, summary) {
+        const total = summary.total;
+        const checked = summary.checked;
+        const 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}
+     */
     headerSelection(checkAll) {
-        let index = -1;
-        let length = 0;
-        //This property used to maintain the check state of the currentview data after clear filtering
-        let multiFilterCheckState = false;
         if (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) {
             const filterResult = this.parent.filterModule.filteredResult;
             if (this.filteredList.length === 0) {
@@ -1153,160 +1399,397 @@ class Selection {
                 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 = [];
+        }
+        const records = this.resolveHeaderSelectionList(true);
+        if (!isNullOrUndefined(checkAll)) {
+            this.resetSelectionCaches();
+            const 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}
+     */
+    finalizeParentsAfterBulk(records) {
+        const all = records;
+        for (let i = 0; i < all.length; i++) {
+            const rec = all[parseInt(i.toString(), 10)];
+            if (!rec || !rec.hasChildRecords) {
+                continue;
             }
-            if (this.searchingRecords.length && !isNullOrUndefined(checkAll)) {
-                this.filteredList = this.searchingRecords;
+            const summary = this.buildSelectionSummary(rec, true);
+            this.parentSelectionCounters[rec.uniqueID] = summary;
+            let 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);
             }
         }
-        let 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}
+     */
+    processHeaderSelection(records, targetState) {
+        for (let i = 0; i < records.length; i++) {
+            const record = records[parseInt(i.toString(), 10)];
+            if (!record) {
+                continue;
+            }
+            const 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 (let 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}
+     */
+    updateSelectedCollectionsAfterBulk(records, requestType) {
+        const hasFilter = !!(this.parent.filterModule && this.parent.filterModule.filteredResult &&
+            this.parent.filterModule.filteredResult.length);
+        const hasSearch = !!(this.parent.grid && this.parent.grid.searchSettings &&
+            this.parent.grid.searchSettings.key && this.parent.grid.searchSettings.key.length);
+        const isFilterOrSearch = hasFilter || hasSearch || requestType === 'refresh' || requestType === 'searching';
+        const currentlySelectedItemsInOrder = isFilterOrSearch ? records : this.selectedItems.slice();
+        const newSelectedItems = [];
+        const newSelectedUidMap = new Map();
+        const newSelectedIndexes = [];
+        for (const item of currentlySelectedItemsInOrder) {
+            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) {
+            const allFlatData = this.parent.flatData;
+            if (allFlatData) {
+                for (const record of allFlatData) {
+                    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 (const item of this.selectedItems) {
+            const 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}
+     */
+    refreshVisibleCheckboxes() {
+        this.buildVisibleUidMap();
+        const data = this.parent.getCurrentViewRecords();
+        const uidMap = this.parent.uniqueIDCollection;
+        for (let i = 0; data && i < data.length; i++) {
+            const viewRec = data[parseInt(i.toString(), 10)];
+            if (!viewRec) {
+                continue;
+            }
+            const uid = viewRec.uniqueID;
+            const srcRec = (uidMap && uid != null) ? uidMap[String(uid)] : viewRec;
+            const state = (srcRec && srcRec.checkboxState) ? srcRec.checkboxState : 'uncheck';
+            let rowEl = null;
+            const rowUid = viewRec.uid;
+            if (rowUid) {
+                rowEl = this.parent.grid.getRowElementByUID(rowUid);
+            }
+            if (!rowEl) {
+                const rows = this.parent.getRows();
+                rowEl = rows && rows[parseInt(i.toString(), 10)];
+                if ((this.parent.frozenRows || this.parent.getFrozenColumns()) && !rowEl) {
+                    const movableRows = this.parent.getDataRows();
+                    rowEl = movableRows && movableRows[parseInt(i.toString(), 10)];
+                }
+            }
+            if (rowEl) {
+                const 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));
+                    const 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((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}
+     */
+    resetSelectionCaches() {
+        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.
+     */
+    countSelectableRecords(records) {
+        let count = 0;
+        if (!records) {
+            return count;
         }
-        length = this.selectedItems.length;
-        const 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 (let i = 0; i < records.length; i++) {
+            const 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.
+     */
+    resolveHeaderSelectionList(includeAll) {
+        let dataToProcess = [];
+        if (!isRemoteData(this.parent)) {
+            const hasFilter = !!(this.parent.filterModule &&
+                this.parent.filterModule.filteredResult &&
+                this.parent.filterModule.filteredResult.length);
+            const 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;
     }
-    updateSelectedItems(currentRecord, checkState) {
-        const record = this.parent.grid.currentViewData.filter((e) => {
-            return e.uniqueID === currentRecord.uniqueID;
-        });
-        let checkedRecord;
-        const recordIndex = this.parent.grid.currentViewData.indexOf(record[0]);
-        const checkboxRecord = getParentData(this.parent, currentRecord.uniqueID);
-        const tr = this.parent.getRows()[parseInt(recordIndex.toString(), 10)];
-        let checkbox;
-        if (recordIndex > -1) {
-            let movableTr;
-            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}
+     */
+    updateHeaderCheckboxState() {
+        const frame = this.headerCheckboxFrameEl;
+        if (!frame) {
+            return;
+        }
+        const recordsForHeaderLogic = this.resolveHeaderSelectionList(true);
+        this.totalSelectableCount = this.countSelectableRecords(recordsForHeaderLogic);
+        let checkedCountForHeaderLogic = 0;
+        for (const record of recordsForHeaderLogic) {
+            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}
+     */
+    updateSelectedItems(currentRecord, checkState, silent) {
+        this.buildVisibleUidMap();
+        const uid = currentRecord.uniqueID;
+        const uidMap = this.parent.uniqueIDCollection;
+        const checkboxRecord = (uidMap && uid != null) ? (uidMap[String(uid)] ?
+            uidMap[String(uid)] : currentRecord) : currentRecord;
+        const isSummary = currentRecord.isSummaryRow === true;
+        const previousState = checkboxRecord.checkboxState;
+        const 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));
+                    const itemIdx = this.selectedItems.indexOf(checkboxRecord);
+                    if (itemIdx !== -1) {
+                        this.selectedItems.splice(itemIdx, 1);
+                    }
+                    if (currentVisibleIndex !== undefined) {
+                        const indexInSelectedIndexes = this.selectedIndexes.indexOf(currentVisibleIndex);
+                        if (indexInSelectedIndexes > -1) {
+                            this.selectedIndexes.splice(indexInSelectedIndexes, 1);
+                        }
+                    }
+                }
             }
         }
-        else if ((checkState === 'uncheck' || checkState === 'indeterminate') && isNullOrUndefined(currentRecord.isSummaryRow)) {
-            const index = this.selectedItems.indexOf(checkedRecord);
-            if (index !== -1) {
-                this.selectedItems.splice(index, 1);
-            }
-            if (this.selectedIndexes.indexOf(recordIndex) !== -1) {
-                const checkedIndex = this.selectedIndexes.indexOf(recordIndex);
-                this.selectedIndexes.splice(checkedIndex, 1);
+        let rowEl = null;
+        const rowUid = currentRecord.uid;
+        if (rowUid) {
+            rowEl = this.parent.grid.getRowElementByUID(rowUid);
+        }
+        if (!rowEl) {
+            const 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)];
+                }
             }
         }
-        const 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) {
+            const 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));
+            }
+            const 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}
+     */
     updateGridActions(args) {
         const requestType = args.requestType;
-        let childData;
-        let childLength;
         if (isCheckboxcolumn(this.parent)) {
             if (this.parent.autoCheckHierarchy) {
                 if ((requestType === 'sorting' || requestType === 'paging')) {
-                    const rows = this.parent.grid.getRows();
-                    childData = this.parent.getCurrentViewRecords();
-                    childLength = childData.length;
-                    this.selectedIndexes = [];
-                    for (let 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') {
                     let updatedData = [];
@@ -1318,71 +1801,68 @@ class Selection {
                     }
                     for (let i = 0; i < updatedData.length; i++) {
                         if (requestType === 'delete') {
-                            const index = this.parent.flatData.indexOf(updatedData[parseInt(i.toString(), 10)]);
-                            const 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((record) => {
-                        if (this.parent.enableVirtualization) {
-                            if (record.hasChildRecords && record.childRecords.length > 0) {
-                                this.updateParentSelection(record);
-                            }
-                            else {
-                                this.updateSelectedItems(record, record.checkboxState);
-                            }
-                            let child = findChildrenRecords(record);
-                            child = this.getFilteredChildRecords(child);
-                            for (let 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();
+                    }
                 }
             }
         }
     }
-    getCheckedrecords() {
-        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.
+     */
+    getCheckedrecords() { 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.
+     */
     getCheckedRowIndexes() {
-        return this.selectedIndexes;
+        this.buildVisibleUidMap();
+        const orderedVisibleIndexes = [];
+        for (const selectedItem of this.selectedItems) {
+            const uid = selectedItem.uniqueID;
+            if (uid !== undefined && this.visibleUidIndex[uid] !== undefined) {
+                orderedVisibleIndexes.push(this.visibleUidIndex[uid]);
+            }
+        }
+        return orderedVisibleIndexes;
     }
 }
 
@@ -1944,6 +2424,7 @@ class DataManipulation {
      */
     destroy() {
         this.removeEventListener();
+        this.hierarchyData = null;
     }
     /**
      * @hidden
@@ -2544,7 +3025,7 @@ class DataManipulation {
                 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)) {
                 const parentData = extend$1({}, parentRecords);
                 delete parentData.childRecords;
@@ -3075,6 +3556,7 @@ function editAction(details, control, isSelfReference, addRowIndex, selectedInde
     const key = control.grid.getPrimaryKeyFieldNames()[0];
     const treeData = control.dataSource instanceof DataManager ?
         control.dataSource.dataSource.json : control.dataSource;
+    const gridData = control.grid.dataSource;
     let modifiedData = [];
     const originalData = value;
     let isSkip = false;
@@ -3102,9 +3584,9 @@ function editAction(details, control, isSelfReference, addRowIndex, selectedInde
             const keys = modifiedData[parseInt(k.toString(), 10)].taskData ?
                 Object.keys(modifiedData[parseInt(k.toString(), 10)].taskData) :
                 Object.keys(modifiedData[parseInt(k.toString(), 10)]);
-            i = treeData.length;
+            i = treeData.length === 0 && gridData.length === 1 ? gridData.length : treeData.length;
             while (i-- && i >= 0) {
-                if (treeData[parseInt(i.toString(), 10)][`${key}`] === modifiedData[parseInt(k.toString(), 10)][`${key}`]) {
+                if ((treeData.length === 0 && gridData.length === 1 && gridData[parseInt(i.toString(), 10)][`${key}`] === modifiedData[parseInt(k.toString(), 10)][`${key}`]) || treeData[parseInt(i.toString(), 10)][`${key}`] === modifiedData[parseInt(k.toString(), 10)][`${key}`]) {
                     if (action === 'delete') {
                         const currentData = treeData[parseInt(i.toString(), 10)];
                         treeData.splice(i, 1);
@@ -3148,7 +3630,10 @@ function editAction(details, control, isSelfReference, addRowIndex, selectedInde
                         else if (action === 'add' || action === 'batchsave') {
                             let index;
                             if (control.editSettings.newRowPosition === 'Child') {
-                                if (isSelfReference) {
+                                if (treeData.length === 0 && gridData.length === 1) {
+                                    treeData.push(originalData.taskData);
+                                }
+                                else if (isSelfReference) {
                                     originalData.taskData[`${control.parentIdMapping}`] = treeData[parseInt(i.toString(), 10)][`${control.idMapping}`];
                                     treeData.splice(i + 1, 0, originalData.taskData);
                                 }
@@ -3223,6 +3708,9 @@ function addAction(details, treeData, control, isSelfReference, addRowIndex, sel
                 value = extend$1({}, addRowRecord);
                 value = getPlainData(value);
             }
+            else if (currentViewRecords.length === 0) {
+                value = getPlainData(value);
+            }
             else {
                 value = extend$1({}, currentViewRecords[addRowIndex + 1]);
                 value = getPlainData(value);
@@ -3236,8 +3724,8 @@ function addAction(details, treeData, control, isSelfReference, addRowIndex, sel
             }
             else {
                 const primaryKeys = control.grid.getPrimaryKeyFieldNames()[0];
-                const currentdata = currentViewRecords[parseInt(addRowIndex.toString(), 10)];
-                if (!isNullOrUndefined(currentdata) && currentdata[`${primaryKeys}`] === details.value[`${primaryKeys}`] || selectedIndex !== -1) {
+                const currentdata = currentViewRecords.length > 0 ? currentViewRecords[parseInt(addRowIndex.toString(), 10)] : [];
+                if (!isNullOrUndefined(currentdata) && currentdata[`${primaryKeys}`] === details.value[`${primaryKeys}`] || selectedIndex !== -1 && treeData.length !== 0) {
                     value = extend$1({}, currentdata);
                 }
                 else {
@@ -3527,7 +4015,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     constructor(options, element) {
         super(options, element);
         this.dataResults = {};
+        /** @hidden */
         this.uniqueIDCollection = {};
+        /** @hidden */
         this.uniqueIDFilterCollection = {};
         this.changedRecords = 'changedRecords';
         this.deletedRecords = 'deletedRecords';
@@ -3537,6 +4027,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.modifiedRecords = [];
         this.stackedHeader = false;
         this.freezeColumnRefresh = true;
+        this.componentRefresh = Component.prototype.refresh;
+        this.isComponentRefresh = false;
         this.objectEqualityChecker = (old, current) => {
             if (old) {
                 const keys = Object.keys(old);
@@ -3585,7 +4077,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     /* eslint-disable */
     excelExport(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.
@@ -3599,7 +4091,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     /* eslint-disable */
     csvExport(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.
@@ -3611,7 +4103,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      * @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
      */
     pdfExport(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.
@@ -3731,6 +4223,26 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     getModuleName() {
         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}
+     */
+    refreshLayout() {
+        this.componentRefresh();
+    }
+    /**
+     * @param {Object} prop - Defines the property
+     * @param {boolean} muteOnChange - Defines the mute on change
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop, muteOnChange) {
+        super.setProperties(prop, muteOnChange);
+    }
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -3738,6 +4250,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      * @returns {void}
      */
     preRender() {
+        if (this.isComponentRefresh) {
+            this.grid = new Grid();
+        }
         this.TreeGridLocale();
         this.initProperties();
         this.defaultLocale = {
@@ -3907,7 +4422,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                                     }
                                 }
                                 else {
-                                    this.clearSelection();
+                                    const contentTableBody = this.grid.getContent().querySelector('.e-table tbody');
+                                    if (parentTarget && contentTableBody && parentTarget !== contentTableBody.lastElementChild) {
+                                        this.clearSelection();
+                                    }
                                 }
                             }
                         }
@@ -3978,6 +4496,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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',
@@ -4296,6 +4816,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (this.isIndentEnabled) {
             this.refreshToolbarItems();
         }
+        this.updateColumnModel();
         this.wireEvents();
         this.renderComplete();
         const destroyTemplate = 'destroyTemplate';
@@ -4345,6 +4866,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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.');
         }
@@ -4499,6 +5029,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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;
         const templateInstance = 'templateDotnetInstance';
         this.grid[`${templateInstance}`] = this[`${templateInstance}`];
         const isJsComponent = 'isJsComponent';
@@ -4973,12 +5505,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 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();
                 }
             }
@@ -5313,11 +5845,14 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     onPropertyChanged(newProp) {
         const properties = Object.keys(newProp);
         let requireRefresh = false;
-        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns)) {
-            this.refreshColumns();
-        }
         for (const prop of properties) {
             switch (prop) {
+                case 'columns':
+                    if (!isNullOrUndefined(newProp.columns)) {
+                        this.refreshColumns();
+                    }
+                    requireRefresh = true;
+                    break;
                 case 'treeColumnIndex':
                     this.grid.refreshColumns();
                     break;
@@ -5528,8 +6063,19 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     }
                     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 (requireRefresh) {
+            if (this.isFrozenGrid()) {
+                this.refreshLayout();
+            }
+            else {
                 this.grid.refresh();
             }
         }
@@ -5550,6 +6096,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      * @returns {void}
      */
     destroy() {
+        this.isComponentRefresh = true;
         const treeGridElement = this.element;
         if (!treeGridElement) {
             return;
@@ -5560,15 +6107,20 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             this.unwireEvents();
         }
         this.removeListener();
-        if (hasTreeGridChild) {
-            super.destroy();
+        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.destroy();
         }
+        this.infiniteScrollData = null;
+        this.remoteCollapsedData = null;
+        this.remoteExpandedData = null;
+        this.parentData = null;
         const modules = ['dataModule', 'sortModule', 'renderModule', 'filterModule', 'printModule', 'clipboardModule',
             'excelExportModule', 'pdfExportModule', 'toolbarModule', 'summaryModule', 'reorderModule', 'resizeModule',
             'pagerModule', 'keyboardModule', 'columnMenuModule', 'contextMenuModule', 'editModule', 'virtualScrollModule',
@@ -5578,6 +6130,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 this[modules[parseInt(i.toString(), 10)]] = null;
             }
         }
+        this.dataResults = null;
+        this.uniqueIDCollection = {};
+        this.uniqueIDFilterCollection = {};
         this.element.innerHTML = '';
         this.grid = null;
     }
@@ -5718,7 +6273,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     /**
      * 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).
      *
@@ -6527,7 +7082,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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);
@@ -7059,7 +7616,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             if (rows.length) {
                 for (let i = 0; i < rows.length; i++) {
                     if (action === 'collapse') {
-                        if (!isNullOrUndefined(this.getCurrentViewRecords()[rows[parseInt(i.toString(), 10)].rowIndex])) {
+                        const 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)]);
                         }
                     }
@@ -7183,8 +7741,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 }
                 const lastrowIdx = this.getVisibleRecords()[this.getVisibleRecords().length - 1]['index'];
                 const 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);
+                const 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') {
@@ -7345,12 +7904,16 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     }
     localExpand(action, row, record) {
         let rows;
+        const detailRow = row.nextElementSibling ? row.nextElementSibling.classList.contains('e-detailrow') ? row.nextElementSibling : null : null;
         const childRecords = this.grid.currentViewData.filter((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);
+        }
         let movableRows;
         let freezeRightRows;
         let gridRows = this.getRows();
@@ -7553,6 +8116,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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);
     }
     updateResultModel(returnResult) {
         this.dataResults = returnResult;
@@ -7569,6 +8133,16 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         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);
+    }
+    getCellsByTableName(args) {
+        if (!Array.isArray(args.elements)) {
+            args.elements = [];
+        }
+        if (args.rowIndex < this.grid.getDataRows().length) {
+            const cells = [].slice.call(this.grid.getDataRows()[parseInt(args.rowIndex.toString(), 10)].getElementsByClassName('e-rowcell'));
+            Array.prototype.push.apply(args.elements, cells);
+        }
     }
     partialFilterUpdate(args) {
         const gridFiltered = args.gridFiltered;
@@ -7993,6 +8567,53 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             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
+     */
+    getPageSizeByHeight(containerHeight) {
+        if (isNullOrUndefined(containerHeight)) {
+            const treegridControlElement = document.getElementById(this.element.id);
+            if (treegridControlElement) {
+                containerHeight = treegridControlElement.clientHeight;
+            }
+            else {
+                const root = this.element;
+                containerHeight = root ? (root.offsetHeight || root.clientHeight || 0) : 0;
+            }
+        }
+        if ((this.allowTextWrap && this.textWrapSettings.wrapMode === 'Header') || (!this.allowTextWrap)) {
+            let pagesize = 0;
+            if (typeof containerHeight === 'string' && containerHeight.indexOf('%') !== -1) {
+                containerHeight = parseInt(containerHeight, 10) / 100 * this.element.clientHeight;
+            }
+            const nonContentHeight = this.grid['getNoncontentHeight']() + this.grid.getRowHeight();
+            if (containerHeight > nonContentHeight) {
+                let contentHeight = 0;
+                let calcNonContentHeight = this.grid['getNoncontentHeight']();
+                const 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;
+        }
+    }
 };
 __decorate$c([
     Property(0)
@@ -8207,6 +8828,12 @@ __decorate$c([
 __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);
@@ -8708,6 +9335,9 @@ class RowDD {
             this.selectedItem = isNullOrUndefined(record) ?
                 tObj.getCurrentViewRecords()[parseInt(selectedItemIndex.toString(), 10)] : record;
             const primaryKeyField = this.parent.getPrimaryKeyFieldNames()[0];
+            if (!primaryKeyField) {
+                return;
+            }
             const rowIndex = this.parent.grid.getRowIndexByPrimaryKey(this.selectedItem[`${primaryKeyField}`]);
             this.selectedRow = this.parent[this.selectedRows] = selectedItemIndex !== -1 ?
                 this.parent.getSelectedRows()[0]
@@ -11645,7 +12275,7 @@ class Aggregate {
             const value = types[parseInt(i.toString(), 10)] !== 'Custom' ? val[`${key}`] : val;
             single[`${disp}`] = single[`${disp}`] || {};
             single[`${disp}`][`${key}`] = value;
-            single[`${disp}`][types[parseInt(i.toString(), 10)]] = !isNullOrUndefined(val) ? formatFn(value) : ' ';
+            single[`${disp}`][types[parseInt(i.toString(), 10)]] = (!isNullOrUndefined(val) && !isNullOrUndefined(value)) ? formatFn(value) : ' ';
         }
         helper.format = summaryColumn.getFormatter();
         const cellElement = createElement('td', {
@@ -11869,6 +12499,7 @@ class ContextMenu {
     addEventListener() {
         this.parent.on('contextMenuOpen', this.contextMenuOpen, this);
         this.parent.on('contextMenuClick', this.contextMenuClick, this);
+        this.parent.on('contextMenuItemClick', this.contextMenuItemClick, this);
     }
     /**
      * @hidden
@@ -11880,6 +12511,21 @@ class ContextMenu {
         }
         this.parent.off('contextMenuOpen', this.contextMenuOpen);
         this.parent.off('contextMenuClick', this.contextMenuClick);
+        this.parent.off('contextMenuItemClick', this.contextMenuItemClick);
+    }
+    contextMenuItemClick(args) {
+        const id = args.item && args.item.id ? args.item.id : '';
+        const 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;
     }
     contextMenuOpen(args) {
         const addRow = select('#' + this.parent.element.id + '_gridcontrol_cmenu_AddRow', args.element);
@@ -12261,13 +12907,22 @@ class BatchEdit {
                 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) {
                 const newlyAddedRecords = this.parent.getBatchChanges()['addedRecords'];
                 const 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]);
@@ -12475,7 +13130,7 @@ class BatchEdit {
                 }
                 else {
                     const totalRecords = extendArray(data);
-                    if (totalRecords.length) {
+                    if (totalRecords.length && currentViewRecords.length !== 0) {
                         const startIndex = totalRecords.map((e) => { return e[`${primarykey}`]; })
                             .indexOf(currentViewRecords[0][`${primarykey}`]);
                         const endIndex = startIndex + this.parent.grid.pageSettings.pageSize;
@@ -12507,7 +13162,12 @@ class BatchEdit {
                     this.parent.editModule['previousNewRowPosition'] = rowPosition;
                 }
                 addRecords[parseInt(i.toString(), 10)].taskData = taskData;
-                addRowRecord = this.batchAddRowRecord[parseInt(i.toString(), 10)];
+                if (this.batchAddRowRecord.length > 1) {
+                    addRowRecord = this.batchAddRowRecord[parseInt(i.toString(), 10)];
+                }
+                else {
+                    addRowRecord = this.batchAddRowRecord[0];
+                }
                 if (isNullOrUndefined(addRowRecord)) {
                     addRowRecord = this.batchAddRowRecord[i - 1];
                 }
@@ -12522,6 +13182,10 @@ class BatchEdit {
                 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 = 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;
@@ -12648,6 +13312,7 @@ class Edit {
         this.isAddedRowByMethod = false;
         this.isAddedRowByContextMenu = false;
         this.isIndexUndefined = false;
+        this.isAddedMultipleRowsByMethod = false;
         Grid.Inject(Edit$1);
         this.parent = parent;
         this.isSelfReference = !isNullOrUndefined(parent.parentIdMapping);
@@ -13304,7 +13969,8 @@ class Edit {
                 }
             }
         }
-        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();
             const batchAddedRecords = this.parent.getBatchChanges()['addedRecords'];
@@ -13326,6 +13992,28 @@ class Edit {
             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;
+            const batchAddedRecords = this.updatedRecords.addedRecords;
+            let newlyAddedRecord;
+            if (batchAddedRecords.length) {
+                for (let i = 0; i < batchAddedRecords.length; i++) {
+                    if (isNullOrUndefined(batchAddedRecords[parseInt(i.toString(), 10)].uniqueID)) {
+                        newlyAddedRecord = batchAddedRecords[parseInt(i.toString(), 10)];
+                    }
+                    const 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 &&
@@ -13346,6 +14034,9 @@ class Edit {
     //   }
     // }
     beginEdit(args) {
+        if (this.parent.flatData.length === 0 && !isNullOrUndefined(this.addRowRecord)) {
+            this.addRowRecord = undefined;
+        }
         if (args.requestType === 'refresh' && this.isOnBatch) {
             args.cancel = true;
             return;
@@ -13607,7 +14298,35 @@ class Edit {
         if (isNullOrUndefined(index)) {
             this.isIndexUndefined = true;
         }
-        if (!this.isSelfReference && !isNullOrUndefined(data) && Object.hasOwnProperty.call(data, this.parent.childMapping)) {
+        if (!isNullOrUndefined(data) && Array.isArray(data)) {
+            let addRecords = [];
+            const previousEditMode = this.parent.editSettings.mode;
+            const 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 });
+            }
+            const updatedRecords = this.updatedRecords;
+            this.parent.notify(batchSave, { updatedRecords, 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)) {
             const addRecords = [];
             const previousEditMode = this.parent.editSettings.mode;
             const previousGridEditMode = this.parent.grid.editSettings.mode;
@@ -13617,7 +14336,8 @@ class Edit {
             if (!isNullOrUndefined(position)) {
                 this.parent.setProperties({ editSettings: { newRowPosition: position } }, true);
             }
-            const updatedRecords = { addedRecords: addRecords, changedRecords: [], deletedRecords: [] };
+            this.updatedRecords = { addedRecords: addRecords, changedRecords: [], deletedRecords: [] };
+            const updatedRecords = this.updatedRecords;
             this.parent.notify(batchSave, { updatedRecords, index });
             this.parent.setProperties({ editSettings: { mode: previousEditMode } }, true);
             this.parent.grid.setProperties({ editSettings: { mode: previousGridEditMode } }, true);
@@ -14097,6 +14817,9 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         super.renderTable();
         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;
@@ -14811,6 +15534,9 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         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();
+        }
     }
 }
 class TreeInterSectionObserver extends InterSectionObserver {
@@ -14833,12 +15559,28 @@ class TreeInterSectionObserver extends InterSectionObserver {
     observes(callback, onEnterCallback, instance) {
         const containerRect = 'containerRect';
         super[`${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) {
             const movableContainerRect = 'movableContainerRect';
             super[`${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);
+        }
+    }
+    disconnect() {
+        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.
@@ -15046,9 +15788,12 @@ class VirtualScroll {
         const dm = new DataManager(pageingDetails.result);
         const expanded = new Predicate$1('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
         const parents = dm.executeLocal(new Query().where(expanded));
-        const visualData = parents.filter((e) => {
-            return getExpandStatus(this.parent, e);
-        });
+        const isFiltering = pageingDetails.actionArgs.requestType === 'filtering';
+        const isFlatHierarchy = this.parent.filterSettings.hierarchyMode === 'Child' ||
+            this.parent.filterSettings.hierarchyMode === 'None';
+        const visualData = isFiltering && isFlatHierarchy
+            ? parents
+            : parents.filter((e) => getExpandStatus(this.parent, e));
         this.visualData = visualData;
         pageingDetails.count = visualData.length;
         this.parent.grid.notify(dataListener, { data: visualData });
@@ -15279,7 +16024,7 @@ class Freeze {
             }
             const 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)) {
                 const cRow = [];
                 for (let i = 0; i < movableRows.length; i++) {
                     if (movableRows[parseInt(i.toString(), 10)].querySelector('.e-gridrowindex' + rData.index + 'level' + (rData.level + 1))) {