@syncfusion/ej2-treegrid 28.2.6 → 29.1.37

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

@@ -11,90 +11,78 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Represents TreeGrid `Column` model class.
+ * Represents the "Column" model class for TreeGrid, defining essential properties and functionalities of a column.
  */
 class Column {
     constructor(options) {
         /**
-         * If `allowEditing` set to false, then it disables editing of a particular column.
-         * By default all columns are editable.
+         * Allows or disallows editing of the column. Set to `false` to make a column non-editable.
+         * By default, all columns are editable.
          *
          * @default true
          */
         this.allowEditing = true;
         /**
-         * Defines the `IEditCell` object to customize default edit cell.
+         * Customization options for the edit cell.
          *
          * @default {}
          */
         this.edit = {};
         /**
-         * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.
+         * When set to `true`, encodes HTML content in headers and cells to prevent HTML injection.
          *
          * @default true
          */
         this.disableHtmlEncode = true;
         /**
-         * If `allowReordering` set to false, then it disables reorder of a particular column.
-         * By default all columns can be reorder.
+         * Disables column reordering if set to `false`. By default, columns can be reordered.
          *
          * @default true
          */
         this.allowReordering = true;
         /**
-         * If `showColumnMenu` set to false, then it disable the column menu of a particular column.
-         * By default column menu will show for all columns
+         * Disables column menu for the column if set to `false`. By default, column menus are enabled for all columns.
          *
          * @default true
          */
         this.showColumnMenu = true;
         /**
-         * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.
-         * By default all columns are filterable.
+         * Disables filtering for the column if set to `false`. By default, columns are filterable.
          *
          * @default true
          */
         this.allowFiltering = true;
         /**
-         * If `allowSorting` set to false, then it disables sorting option of a particular column.
-         * By default all columns are sortable.
+         * Disables sorting for the column if set to `false`. By default, columns are sortable.
          *
          * @default true
          */
         this.allowSorting = true;
         /**
-         * If `allowResizing` is set to false, it disables resize option of a particular column.
-         * By default all the columns can be resized.
+         * Disables resizing for the column if set to `false`. By default, columns can be resized.
          *
          * @default true
          */
         this.allowResizing = true;
         /**
-         *  It is used to customize the default filter options for a specific columns.
-         * * type -  Specifies the filter type as menu.
-         * * ui - to render custom component for specific column it has following functions.
-         * * ui.create – It is used for creating custom components.
-         * * ui.read -  It is used for read the value from the component.
-         * * ui.write - It is used to apply component model as dynamically.
+         * Customize default filter options for a specific column, providing types and UI definitions for custom components.
          *
-         *  @default null
+         * @default null
          */
         this.filter = {};
         merge(this, options);
     }
     /**
-     * Update the State changes reflected for TreeGrid columndirective in react platform.
+     * Reflects state changes for TreeGrid column directives, particularly in React.
      *
-     * @param {Column} column - specifies the column
+     * @param {Column} column - The column to update.
      * @returns {void}
      * @hidden
      */
     setProperties(column) {
-        //Angular two way binding
         const keys = Object.keys(column);
         for (let i = 0; i < keys.length; i++) {
             this[keys[parseInt(i.toString(), 10)]] = column[keys[parseInt(i.toString(), 10)]];
-            //Refresh the react columnTemplates on state change
             if (this.parent && this.parent['isReact'] && keys[parseInt(i.toString(), 10)] === 'template') {
                 const refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
                 this.parent.clipboardModule['treeGridParent'].renderModule[`${refreshReactColumnTemplateByUid}`](this.uid);
@@ -123,7 +111,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the Loading Indicator of the Tree Grid.
+ * Configures the loading indicator for the Tree Grid, allowing you to display a visual indicator during data loading operations to enhance user experience.
  */
 class LoadingIndicator extends ChildProperty {
 }
@@ -138,7 +126,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Represents the Tree Grid predicate for the filter column.
+ * Represents the filter configuration for a column in the TreeGrid.
  */
 class Predicate extends ChildProperty {
 }
@@ -179,7 +167,7 @@ __decorate$2([
     Property()
 ], Predicate.prototype, "isForeignKey", void 0);
 /**
- * Configures the filtering behavior of the TreeGrid.
+ * Configures the filtering behavior of the TreeGrid, enabling complex data filtering capabilities.
  */
 class FilterSettings extends ChildProperty {
 }
@@ -215,7 +203,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the textwrap behavior of the TreeGrid.
+ * Configures the text wrapping behavior of the TreeGrid.
  */
 class TextWrapSettings extends ChildProperty {
 }
@@ -495,12 +483,8 @@ const frozenRight = 'frozen-right';
 /** @hidden */
 const frozenLeft = 'frozen-left';
 /** @hidden */
-const dataColIndex = 'data-colindex';
-/** @hidden */
 const ariaColIndex = 'aria-colindex';
 /** @hidden */
-const dataRowIndex = 'data-rowindex';
-/** @hidden */
 const ariaRowIndex = 'aria-rowindex';
 /** @hidden */
 const actionFailure = 'actionFailure';
@@ -1446,7 +1430,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the filtering behavior of the TreeGrid.
+ * Configures the searching behavior of the TreeGrid.
  */
 class SearchSettings extends ChildProperty {
 }
@@ -1630,10 +1614,9 @@ class Render {
         if (columnIndex === this.parent.treeColumnIndex && (args.requestType === 'add' || args.requestType
             === 'rowDragAndDrop' || args.requestType === 'delete' || isNullOrUndefined(args.cell.querySelector('.e-treecell')))) {
             const container = createElement('div', { className: 'e-treecolumn-container' });
-            const emptyExpandIcon = createElement('span', {
-                className: 'e-icons e-none',
-                styles: 'width: 10px; display: inline-block'
-            });
+            const emptyExpandIcon = createElement('span', { className: 'e-icons e-none' });
+            emptyExpandIcon.style.width = '10px';
+            emptyExpandIcon.style.display = 'inline-block';
             for (let n = 0; n < pad; n++) {
                 totalIconsWidth += 10;
                 container.appendChild(emptyExpandIcon.cloneNode());
@@ -1660,6 +1643,13 @@ class Render {
                 }
                 else {
                     expand = !(!data.expanded || !getExpandStatus(this.parent, data, this.parent.grid.getCurrentViewRecords()));
+                    // TicketsID 43483: While Modify Data Expand and Collapse Icon Behavior Changed
+                    if (this.parent.editSettings.mode === 'Cell' && !isRemoteData(this.parent)) {
+                        const selectedRow = this.parent.flatData.find((item) => item.uniqueID === data.uniqueID);
+                        if (!isNullOrUndefined(selectedRow)) {
+                            expand = data.expanded !== selectedRow.expanded ? selectedRow.expanded : data.expanded;
+                        }
+                    }
                 }
                 addClass([expandIcon], (expand) ? 'e-treegridexpand' : 'e-treegridcollapse');
                 totalIconsWidth += 18;
@@ -1777,7 +1767,7 @@ class Render {
         const templateFn = 'templateFn';
         const colindex = args.column.index;
         if (isNullOrUndefined(treeColumn.field)) {
-            args.cell.setAttribute('data-colindex', colindex + '');
+            args.cell.setAttribute('aria-colindex', (colindex + 1) + '');
         }
         if (treeColumn.field === args.column.field && !isNullOrUndefined(treeColumn.template)) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -2307,115 +2297,116 @@ class DataManipulation {
                 rowDetails.record.childRecords = result;
             }
             for (let r = 0; r < result.length; r++) {
-                if (this.parent.enableVirtualization && result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`] && rowDetails.action === 'remoteExpand') {
+                const record = result[parseInt(r.toString(), 10)];
+                if (this.parent.enableVirtualization && record[`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`] && rowDetails.action === 'remoteExpand') {
                     this.parent[`${remoteExpandedData}`].push(rowDetails.record);
                 }
-                else if (this.parent.enableVirtualization && result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`] && rowDetails.action === 'collapse') {
+                else if (this.parent.enableVirtualization && record[`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`] && rowDetails.action === 'collapse') {
                     for (let i = 0; i < this.parent[`${remoteExpandedData}`].length; i++) {
                         if (rowDetails.record[`${this.parent.idMapping}`] === this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)][`${this.parent.idMapping}`]) {
                             this.parent[`${remoteExpandedData}`].splice(i, 1);
                         }
                     }
                 }
-                result[parseInt(r.toString(), 10)].taskData = extend$1({}, result[parseInt(r.toString(), 10)]);
-                if (result[parseInt(r.toString(), 10)][`${this.parent.parentIdMapping}`] && this.parent.enableVirtualization && this.parent[`${remoteExpandedData}`].length) {
+                record.taskData = extend$1({}, record);
+                if (record[`${this.parent.parentIdMapping}`] && this.parent.enableVirtualization && this.parent[`${remoteExpandedData}`].length) {
                     for (let i = 0; i < this.parent[`${remoteExpandedData}`].length; i++) {
-                        if (result[parseInt(r.toString(), 10)][`${this.parent.parentIdMapping}`] === this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)][`${this.parent.idMapping}`]) {
-                            result[parseInt(r.toString(), 10)].level = this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)][`${level}`] + 1;
+                        if (record[`${this.parent.parentIdMapping}`] === this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)][`${this.parent.idMapping}`]) {
+                            record.level = this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)][`${level}`] + 1;
                             const parentData = this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)];
                             delete parentData.childRecords;
-                            result[parseInt(r.toString(), 10)].parentItem = parentData;
-                            result[parseInt(r.toString(), 10)].parentUniqueID = parentData.uniqueID;
+                            record.parentItem = parentData;
+                            record.parentUniqueID = parentData.uniqueID;
                         }
                     }
                 }
                 else if (this.parent.enableVirtualization) {
-                    if ((result[parseInt(r.toString(), 10)][`${this.parent.hasChildMapping}`] ||
-                        this.parentItems.indexOf(result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`]) !== -1)
+                    if ((record[`${this.parent.hasChildMapping}`] ||
+                        this.parentItems.indexOf(record[`${this.parent.idMapping}`]) !== -1)
                         && !(haveChild && !haveChild[parseInt(r.toString(), 10)])) {
-                        if (isNullOrUndefined(result[parseInt(r.toString(), 10)][`${this.parent.parentIdMapping}`])) {
-                            result[parseInt(r.toString(), 10)].level = 0;
+                        if (isNullOrUndefined(record[`${this.parent.parentIdMapping}`])) {
+                            record.level = 0;
                             if (rowDetails.action === 'remoteExpand') {
-                                result[parseInt(r.toString(), 10)].childRecords = [];
-                                result[parseInt(r.toString(), 10)].childRecords = rowDetails.record.childRecords;
+                                record.childRecords = [];
+                                record.childRecords = rowDetails.record.childRecords;
                             }
                         }
                         else {
-                            result[parseInt(r.toString(), 10)].level = rowDetails.record.level;
+                            record.level = rowDetails.record.level;
                         }
                     }
                     else {
                         const parentData = extend$1({}, rowDetails.record);
                         delete parentData.childRecords;
-                        result[parseInt(r.toString(), 10)].parentItem = parentData;
-                        result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                        record.parentItem = parentData;
+                        record.parentUniqueID = rowDetails.record.uniqueID;
                     }
                 }
                 else {
-                    result[parseInt(r.toString(), 10)].level = rowDetails.record.level + 1;
+                    record.level = rowDetails.record.level + 1;
                     const parentData = extend$1({}, rowDetails.record);
                     delete parentData.childRecords;
-                    result[parseInt(r.toString(), 10)].parentItem = parentData;
-                    result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                    record.parentItem = parentData;
+                    record.parentUniqueID = rowDetails.record.uniqueID;
                 }
-                result[parseInt(r.toString(), 10)].index = Math.ceil(Math.random() * 1000);
-                result[parseInt(r.toString(), 10)].uniqueID = getUid(this.parent.element.id + '_data_');
-                if (rowDetails.record[`${this.parent.idMapping}`] === result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`]) {
-                    rowDetails.record.uniqueID = result[parseInt(r.toString(), 10)].uniqueID;
+                record.index = Math.ceil(Math.random() * 1000);
+                record.uniqueID = getUid(this.parent.element.id + '_data_');
+                if (rowDetails.record[`${this.parent.idMapping}`] === record[`${this.parent.idMapping}`]) {
+                    rowDetails.record.uniqueID = record.uniqueID;
                 }
-                result[parseInt(r.toString(), 10)].checkboxState = 'uncheck';
-                if (this.parent.enableVirtualization && isNullOrUndefined(result[parseInt(r.toString(), 10)].level)) {
+                record.checkboxState = 'uncheck';
+                if (this.parent.enableVirtualization && isNullOrUndefined(record.level)) {
                     for (let p = 0; p < this.parent.grid.currentViewData.length; p++) {
-                        if (this.parent.grid.currentViewData[parseInt(p.toString(), 10)][`${this.parent.idMapping}`] === result[parseInt(r.toString(), 10)][`${this.parent.parentIdMapping}`]) {
-                            result[parseInt(r.toString(), 10)].level = this.parent.grid.currentViewData[parseInt(p.toString(), 10)]['level'] + 1;
+                        if (this.parent.grid.currentViewData[parseInt(p.toString(), 10)][`${this.parent.idMapping}`] === record[`${this.parent.parentIdMapping}`]) {
+                            record.level = this.parent.grid.currentViewData[parseInt(p.toString(), 10)]['level'] + 1;
                         }
                     }
                 }
-                setValue('uniqueIDCollection.' + result[parseInt(r.toString(), 10)].uniqueID, result[parseInt(r.toString(), 10)], this.parent);
+                setValue('uniqueIDCollection.' + record.uniqueID, record, this.parent);
                 // delete result[r].parentItem.childRecords;
-                if ((result[parseInt(r.toString(), 10)][`${this.parent.hasChildMapping}`] ||
-                    this.parentItems.indexOf(result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`]) !== -1)
+                if ((record[`${this.parent.hasChildMapping}`] ||
+                    this.parentItems.indexOf(record[`${this.parent.idMapping}`]) !== -1)
                     && !(haveChild && !haveChild[parseInt(r.toString(), 10)])) {
-                    result[parseInt(r.toString(), 10)].hasChildRecords = true;
+                    record.hasChildRecords = true;
                     if (this.parent.enableVirtualization && !this.parent.loadChildOnDemand) {
                         for (let i = 0; i < this.parent[`${remoteCollapsedData}`].length; i++) {
-                            if (result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`] === this.parent[`${remoteCollapsedData}`][parseInt(i.toString(), 10)][`${this.parent.idMapping}`]) {
-                                result[parseInt(r.toString(), 10)].expanded = this.parent[`${remoteCollapsedData}`][parseInt(i.toString(), 10)]['expanded'];
+                            if (record[`${this.parent.idMapping}`] === this.parent[`${remoteCollapsedData}`][parseInt(i.toString(), 10)][`${this.parent.idMapping}`]) {
+                                record.expanded = this.parent[`${remoteCollapsedData}`][parseInt(i.toString(), 10)]['expanded'];
                             }
                         }
-                        if (rowDetails.action === 'collapse' && result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`] !== rowDetails.record[`${this.parent.idMapping}`] && result[parseInt(r.toString(), 10)].expanded !== false) {
-                            result[parseInt(r.toString(), 10)].expanded = true;
+                        if (rowDetails.action === 'collapse' && record[`${this.parent.idMapping}`] !== rowDetails.record[`${this.parent.idMapping}`] && record.expanded !== false) {
+                            record.expanded = true;
                         }
-                        else if (rowDetails.action === 'collapse' && result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`]) {
-                            result[parseInt(r.toString(), 10)].expanded = false;
+                        else if (rowDetails.action === 'collapse' && record[`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`]) {
+                            record.expanded = false;
                             this.parent[`${remoteCollapsedData}`].push(rowDetails.record);
                         }
                         else if (rowDetails.action === 'remoteExpand') {
                             for (let i = 0; i < this.parent.grid.currentViewData.length; i++) {
-                                if (this.parent.grid.currentViewData[parseInt(i.toString(), 10)][`${this.parent.idMapping}`] === result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`]) {
+                                if (this.parent.grid.currentViewData[parseInt(i.toString(), 10)][`${this.parent.idMapping}`] === record[`${this.parent.idMapping}`]) {
                                     result.splice(r, 1, this.parent.grid.currentViewData[parseInt(i.toString(), 10)]);
                                 }
                             }
-                            if (result[parseInt(r.toString(), 10)][this.parent.idMapping] === rowDetails.record[`${this.parent.idMapping}`]) {
+                            if (record[this.parent.idMapping] === rowDetails.record[`${this.parent.idMapping}`]) {
                                 for (let i = 0; i < this.parent[`${remoteCollapsedData}`].length; i++) {
                                     if (rowDetails.record[`${this.parent.idMapping}`] === this.parent[`${remoteCollapsedData}`][parseInt(i.toString(), 10)][`${this.parent.idMapping}`]) {
                                         this.parent[`${remoteCollapsedData}`].splice(i, 1);
                                     }
                                 }
                             }
-                            if (result[parseInt(r.toString(), 10)].expanded !== false) {
-                                result[parseInt(r.toString(), 10)].expanded = true;
+                            if (record.expanded !== false) {
+                                record.expanded = true;
                             }
                         }
                     }
-                    else if (this.parent.enableVirtualization && result[parseInt(r.toString(), 10)][`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`] && rowDetails.action !== 'collapse') {
-                        result[parseInt(r.toString(), 10)].expanded = true;
+                    else if (this.parent.enableVirtualization && record[`${this.parent.idMapping}`] === rowDetails.record[`${this.parent.idMapping}`] && rowDetails.action !== 'collapse') {
+                        record.expanded = true;
                     }
                     else if (!(this.parent.enableVirtualization && !this.parent.loadChildOnDemand)) {
-                        result[parseInt(r.toString(), 10)].expanded = false;
+                        record.expanded = false;
                     }
                 }
-                datas.splice(inx + r + 1, 0, result[parseInt(r.toString(), 10)]);
+                datas.splice(inx + r + 1, 0, record);
             }
             setValue('result', datas, e);
             setValue('action', 'beforecontentrender', e);
@@ -2756,7 +2747,7 @@ class DataManipulation {
 }
 
 /**
- * Defines Predefined toolbar items.
+ * Defines enumerable toolbar items for programmatic access.
  *
  * @hidden
  */
@@ -2778,7 +2769,7 @@ var ToolbarItem;
     ToolbarItem[ToolbarItem["RowOutdent"] = 13] = "RowOutdent";
 })(ToolbarItem || (ToolbarItem = {}));
 /**
- * Defines predefined contextmenu items.
+ * Enumerates detailed context menu items used for menu configurations.
  *
  * @hidden
  */
@@ -2811,7 +2802,7 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the paging behavior of the TreeGrid.
+ * Configures the paging behavior of the TreeGrid, enabling you to manage and display data efficiently across multiple pages.
  */
 class PageSettings extends ChildProperty {
 }
@@ -2847,7 +2838,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the TreeGrid's aggregate column.
+ * Configures the aggregate column for the TreeGrid.
  */
 class AggregateColumn extends ChildProperty {
     constructor() {
@@ -2934,6 +2925,9 @@ __decorate$7([
 __decorate$7([
     Property()
 ], AggregateColumn.prototype, "customAggregate", void 0);
+/**
+ * Configures the aggregate rows in the TreeGrid.
+ */
 class AggregateRow extends ChildProperty {
 }
 __decorate$7([
@@ -2950,7 +2944,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the edit behavior of the TreeGrid.
+ * Configures the edit behavior of the TreeGrid, defining how records can be added, modified, or deleted.
  */
 class EditSettings extends ChildProperty {
 }
@@ -2995,7 +2989,7 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Represents the field name and direction of sort column.
+ * Represents the field name and direction of a sort column in the TreeGrid.
  */
 class SortDescriptor extends ChildProperty {
 }
@@ -3006,7 +3000,7 @@ __decorate$9([
     Property()
 ], SortDescriptor.prototype, "direction", void 0);
 /**
- * Configures the sorting behavior of TreeGrid.
+ * Configures the sorting behavior of the TreeGrid.
  */
 class SortSettings extends ChildProperty {
 }
@@ -3424,7 +3418,7 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the infinite scroll behavior of Tree Grid.
+ * Configures the infinite scroll behavior of the Tree Grid.
  */
 class InfiniteScrollSettings extends ChildProperty {
 }
@@ -3505,13 +3499,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid = new Grid();
     }
     /**
-     * Export TreeGrid data to Excel file(.xlsx).
+     * Exports the TreeGrid data to an Excel file (.xlsx).
      *
-     * @param  {ExcelExportProperties | TreeGridExcelExportProperties} excelExportProperties - Defines the export properties of the Tree Grid.
-     * @param  {boolean} isMultipleExport - Define to enable multiple export.
-     * @param  {workbook} workbook - Defines the Workbook if multiple export is enabled.
-     * @param  {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.
-     * @returns {Promise<any>} - Returns promise object of export action
+     * @param {ExcelExportProperties | TreeGridExcelExportProperties} excelExportProperties - The properties used to configure the Excel export.
+     * @param {boolean} isMultipleExport - Indicates whether multiple exporting is enabled.
+     * @param {workbook} workbook - The workbook instance used for multiple exports.
+     * @param {boolean} isBlob - If set to true, the result will be returned as blob data.
+     * @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
      */
     /* eslint-disable */
     excelExport(excelExportProperties, isMultipleExport, workbook, isBlob) {
@@ -3519,13 +3513,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, false);
     }
     /**
-     * Export TreeGrid data to CSV file.
+     * Exports the TreeGrid data to a CSV file.
      *
-     * @param  {ExcelExportProperties} excelExportProperties - Defines the export properties of the TreeGrid.
-     * @param  {boolean} isMultipleExport - Define to enable multiple export.
-     * @param  {workbook} workbook - Defines the Workbook if multiple export is enabled.
-     * @param  {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.
-     * @returns {Promise<any>} - Returns promise object of export action
+     * @param {ExcelExportProperties} excelExportProperties - The properties used to configure the CSV export.
+     * @param {boolean} isMultipleExport - Indicates whether multiple exporting is enabled.
+     * @param {workbook} workbook - The workbook instance used for multiple exports.
+     * @param {boolean} isBlob - If set to true, the result will be returned as blob data.
+     * @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
      */
     /* eslint-disable */
     csvExport(excelExportProperties, isMultipleExport, workbook, isBlob) {
@@ -3533,21 +3527,21 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, true);
     }
     /**
-     * Export TreeGrid data to PDF document.
+     * Exports the TreeGrid data to a PDF document.
      *
-     * @param {PdfExportProperties | TreeGridPdfExportProperties} pdfExportProperties - Defines the export properties of the Tree Grid.
-     * @param {boolean} isMultipleExport - Define to enable multiple export.
-     * @param {Object} pdfDoc - Defined the Pdf Document if multiple export is enabled.
-     * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.
-     * @returns {Promise<any>} - Returns promise object of export action
+     * @param {PdfExportProperties | TreeGridPdfExportProperties} pdfExportProperties - The properties used to configure the PDF export.
+     * @param {boolean} isMultipleExport - Indicates whether multiple exporting is enabled.
+     * @param {Object} pdfDoc - The PDF document instance used for multiple exports.
+     * @param {boolean} isBlob - If set to true, the result will be returned as blob data.
+     * @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);
     }
     /**
-     * Sends a post request to export tree grid to excel file in server side.
+     * Sends a POST request to export the TreeGrid to an Excel file on the server side.
      *
-     * @param  {string} url - Pass URL for server side excel export action.
+     * @param {string} url - The URL for the server-side Excel export action.
      * @returns {void}
      */
     serverExcelExport(url) {
@@ -3555,9 +3549,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.exportTreeGrid(url);
     }
     /**
-     * Sends a post request to export tree grid to pdf file in server side.
+     * Sends a POST request to export the TreeGrid to a PDF document on the server side.
      *
-     * @param  {string} url - Pass URL for server-side pdf export action.
+     * @param {string} url - The URL for the server-side PDF export action.
      * @returns {void}
      */
     serverPdfExport(url) {
@@ -3565,9 +3559,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.exportTreeGrid(url);
     }
     /**
-     * Sends a Post request to export Tree Grid to CSV file in server side.
+     * Sends a POST request to export the TreeGrid to a CSV file on the server side.
      *
-     * @param  {string} url - Pass URL for server-side csv export action.
+     * @param {string} url - The URL for the server-side CSV export action.
      * @returns {void}
      */
     serverCsvExport(url) {
@@ -3595,7 +3589,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         treeGridModel.searchSettings.fields = queries.search && queries.search[0]['fields'] || [];
         treeGridModel.sortSettings.columns = queries.sorted;
         treeGridModel.columns = this.setHeaderText(treeGridModel.columns, include);
-        const form = this.createElement('form', { id: 'ExportForm', styles: 'display:none;' });
+        const form = this.createElement('form', { id: 'ExportForm' });
+        form.style.display = 'none';
         const treeGridInput = this.createElement('input', { id: 'treeGridInput', attrs: { name: 'treeGridModel' } });
         treeGridInput.value = JSON.stringify(treeGridModel);
         form.method = 'POST';
@@ -3686,11 +3681,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Sorts a column with the given options.
+     * Sorts a column with the specified options.
      *
-     * @param {string} columnName - Defines the column name to be sorted.
-     * @param {SortDirection} direction - Defines the direction of sorting field.
-     * @param {boolean} isMultiSort - Specifies whether the previous sorted columns are to be maintained.
+     * @param {string} columnName - The name of the column to be sorted.
+     * @param {SortDirection} direction - The direction of the sorting operation.
+     * @param {boolean} isMultiSort - Specifies whether previous sorted columns should be maintained during sorting.
      * @returns {void}
      */
     sortByColumn(columnName, direction, isMultiSort) {
@@ -3699,7 +3694,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Clears all the sorted columns of the TreeGrid.
+     * Clears all the sorted columns in the TreeGrid.
      *
      * @returns {void}
      */
@@ -3709,9 +3704,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Remove sorted column by field name.
+     * Removes the sorted state from a column specified by the field name.
      *
-     * @param {string} field - Defines the column field name to remove sort.
+     * @param {string} field - The field name of the column from which the sort state should be removed.
      * @returns {void}
      * @hidden
      */
@@ -3721,36 +3716,32 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Searches TreeGrid records using the given key.
-     * You can customize the default search option by using the
-     * [`searchSettings`](./#searchsettings/).
+     * Searches for TreeGrid records using a specified search string.
+     * Customize the search behavior through the [searchSettings](./#searchsettings/).
      *
-     * @param  {string} searchString - Defines the key.
+     * @param {string} searchString - The string used as the search key.
      * @returns {void}
      */
     search(searchString) {
         this.grid.search(searchString);
     }
     /**
-     * Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.
-     * > * This method ignores the hidden columns.
-     * > * Uses the `autoFitColumns` method in the `dataBound` event to resize at initial rendering.
+     * Adjusts column widths to fit their content, ensuring content is displayed without wrapping or truncation.
+     * - Hidden columns are ignored by this method.
+     * - Use the `autoFitColumns` method during the `dataBound` event for initial rendering.
      *
-     * @param  {string |string[]} fieldNames - Defines the column names.
+     * @param {string | string[]} fieldNames - The name(s) of the column(s) to be auto-fitted.
      * @returns {void}
-     *
-     *
-     *
      */
     autoFitColumns(fieldNames) {
         this.resizeModule.autoFitColumns(fieldNames);
         this.updateColumnModel();
     }
     /**
-     * Changes the TreeGrid column positions by field names.
+     * Reorders TreeGrid columns by specifying their field names.
      *
-     * @param  {string} fromFName - Defines the origin field name.
-     * @param  {string} toFName - Defines the destination field name.
+     * @param {string | string[]} fromFName - The field name(s) of the column(s) to be moved.
+     * @param {string} toFName - The destination field name to place the moved columns.
      * @returns {void}
      */
     reorderColumns(fromFName, toFName) {
@@ -3773,9 +3764,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * By default, prints all the pages of the TreeGrid and hides the pager.
-     * > You can customize print options using the
-     * [`printMode`](./#printmode).
+     * Prints all the pages of the TreeGrid and hides the pager by default.
+     * Customize print options using the [printMode](./#printmode).
      *
      * @returns {void}
      */
@@ -3919,7 +3909,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.isSelfReference = !isNullOrUndefined(this.parentIdMapping);
     }
     /**
-     * Binding events to the element while component creation.
+     * Attaches event handlers to the necessary elements during the component's initialization.
      *
      * @hidden
      * @returns {void}
@@ -3937,9 +3927,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * To provide the array of modules needed for component rendering
+     * Provides a list of the modules that are required for rendering the TreeGrid component.
      *
-     * @returns {ModuleDeclaration[]} - Returns TreeGrid modules collection
+     * This method is essential for ensuring that all dependent modules are loaded and available
+     * during the component's lifecycle, enabling full functionality.
+     *
+     * @returns {ModuleDeclaration[]} - Returns an array of the required TreeGrid module declarations.
      * @hidden
      */
     requiredModules() {
@@ -4253,7 +4246,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (this.enableVirtualization && !isNullOrUndefined(this.detailTemplate)) {
             failureCases.push('Virtual scrolling is not compatible with the detail template');
         }
-        if ((this.frozenColumns > 0 || this.columnModel.filter((col) => col.isFrozen) || this.frozenRows > 0)
+        if ((this.frozenColumns > 0 || this.frozenRows > 0 || this.columnModel.filter((col) => col.isFrozen))
             && (!isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.rowTemplate))) {
             failureCases.push('Frozen rows and columns are not supported with the Detail template and row template.');
         }
@@ -4263,9 +4256,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (this.allowSelection && !isNullOrUndefined(this.rowTemplate)) {
             failureCases.push('Selection is not supported in RowTemplate');
         }
-        if (this.treeColumnIndex < 0) {
-            failureCases.push('For showing tree structure it is must to set the TreeColumnIndex value.');
-        }
         if (this.treeColumnIndex >= this.columns.length) {
             failureCases.push('TreeColumnIndex value should not exceed the total column count.');
         }
@@ -4291,9 +4281,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 failureCases.push('Only one column can have the ShowCheckbox option enabled.');
             }
         }
-        const alignColumn = this.columnModel.filter((col) => col.textAlign === 'Right' && col.field === this.columnModel[this.treeColumnIndex].field);
-        if (alignColumn.length !== 0) {
-            failureCases.push('TextAlign right for the tree column is not applicable.');
+        let alignColumn;
+        if (this.treeColumnIndex !== null && this.treeColumnIndex !== -1) {
+            alignColumn = this.columnModel.filter((col) => col.textAlign === 'Right' && col.field === this.columnModel[this.treeColumnIndex].field);
+            if (alignColumn.length !== 0) {
+                failureCases.push('TextAlign right for the tree column is not applicable.');
+            }
         }
         if (failureCases.length > 0) {
             const failureEventArgs = {
@@ -4328,7 +4321,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             this.flatData = data;
             this.flatData.filter((e) => {
                 setValue('uniqueIDCollection.' + e.uniqueID, e, this);
-                if (e.level === 0) {
+                if (e.level === 0 && !this.parentData.some((record) => record.uniqueID === e.uniqueID)) {
                     this.parentData.push(e);
                 }
             });
@@ -4461,14 +4454,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             this.trigger(rowDeselecting, args);
         };
         this.grid.rowSelected = (args) => {
-            if (this.enableVirtualization && args.isHeaderCheckboxClicked &&
-                this.grid.currentViewData.length !== this.grid.selectionModule.selectedRowIndexes.length) {
-                const updateRowSelection = 'updateRowSelection';
-                for (let i = 0; i < this.getRows().length; i++) {
-                    if (this.getRows()[parseInt(i.toString(), 10)].getElementsByClassName('e-frame e-icons e-uncheck').length) {
-                        this.grid.selectionModule[`${updateRowSelection}`](this.getRows()[parseInt(i.toString(), 10)], this.getCurrentViewRecords()[parseInt(i.toString(), 10)].index);
-                    }
-                }
+            if (this.enableVirtualization) {
+                this.virtualScrollModule.updateSelection(args);
             }
             this.selectedRowIndex = this.grid.selectedRowIndex;
             this.notify(rowSelected, args);
@@ -5200,6 +5187,14 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         return gridColumnCollection;
     }
+    lastRowCellBorderUpdated() {
+        const rows = this.getContentTable().querySelectorAll('tr.e-row');
+        const visibleRows = Array.from(rows).filter((row) => !row.classList.contains('e-childrow-hidden'));
+        if (visibleRows.length > 0) {
+            const lastVisibleRow = visibleRows[visibleRows.length - 1];
+            this.lastRowBorder(lastVisibleRow, true);
+        }
+    }
     /**
      * Called internally if any of the property value changed.
      *
@@ -5424,7 +5419,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.refreshColumns();
     }
     /**
-     * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
+     * Destroys the TreeGrid component by detaching event handlers,
+     * removing attributes and classes, and clearing the component's DOM elements.
+     *
+     * This method ensures that all resources used by the TreeGrid are properly released
+     * and the component is cleaned up from the DOM to prevent memory leaks.
      *
      * @method destroy
      * @returns {void}
@@ -5462,7 +5461,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid = null;
     }
     /**
-     * Update the TreeGrid model
+     * Updates the TreeGrid model and ensures that the underlying Grid's data model is in sync with TreeGrid.
+     * This method binds current data and settings to the TreeGrid.
      *
      * @method dataBind
      * @returns {void}
@@ -5481,7 +5481,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.dataBind();
     }
     /**
-     * Get the properties to be maintained in the persisted state.
+     * Retrieves the properties of the TreeGrid that should be retained and persisted between sessions.
+     *
+     * The method ensures that user preferences and important settings like paging, sorting, filtering,
+     * column configurations, etc., are preserved and can be restored when the component is re-initialized.
      *
      * @returns {string} - Returns persist properties details
      * @hidden
@@ -5572,7 +5575,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Returns TreeGrid rows
+     * Retrieves all the TreeGrid row elements.
+     *
+     * This method is useful for accessing the HTML representation of the rows for further manipulation or inspection.
      *
      * @returns {HTMLTableRowElement[]} - Returns row elements collection
      */
@@ -5580,7 +5585,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return this.grid.getRows();
     }
     /**
-     * Gets the pager of the TreeGrid.
+     * Obtains the pager element of the TreeGrid.
+     *
+     * The pager enables navigation between pages when the TreeGrid displays paginated data.
      *
      * @returns {Element} - Returns pager element
      */
@@ -5588,12 +5595,14 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return this.grid.getPager(); //get element from pager
     }
     /**
-     * Adds a new record to the TreeGrid. Without passing parameters, it adds empty rows.
-     * > `editSettings.allowEditing` should be true.
+     * 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 {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).
+     *
+     * > Requires `editSettings.allowAdding` to be true.
      *
-     * @param {Object} data - Defines the new add record data.
-     * @param {number} index - Defines the row index to be added.
-     * @param {RowPosition} position - Defines the new row position to be added.
      * @returns {void}
      */
     addRecord(data, index, position) {
@@ -5604,7 +5613,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Cancels edited state.
+     * Cancels the current edit operation on the TreeGrid.
+     *
+     * This method discards changes made to the row and exits the edit mode without saving.
      *
      * @returns {void}
      */
@@ -5614,7 +5625,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Saves the cell that is currently edited. It does not save the value to the DataSource.
+     * Saves the current cell value changes without committing to the data source.
+     *
+     * This operation persists the changes in the UI but not in the underlying data model.
      *
      * @returns {void}
      */
@@ -5624,7 +5637,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * To update the specified cell by given value without changing into edited state.
+     * Updates the value of a specific cell directly, bypassing the edit mode.
+     *
+     * This method provides a quick way to update the UI and data without user interaction.
      *
      * @param {number} rowIndex Defines the row index.
      * @param {string} field Defines the column field.
@@ -5637,10 +5652,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * To update the specified row by given values without changing into edited state.
+     * Updates a specific row with given values directly, skipping the edit state.
      *
-     * @param {number} index Defines the row index.
-     * @param {Object} data Defines the data object to be updated.
+     * This method allows for bulk updates of row data programmatically.
+     *
+     * @param {number} index - The index of the row to update.
+     * @param {Object} data - The data object containing updated field values.
      * @returns {void}
      */
     updateRow(index, data) {
@@ -5656,12 +5673,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Delete a record with Given options. If fieldName and data is not given then TreeGrid will delete the selected record.
-     * > `editSettings.allowDeleting` should be true.
+     * Deletes a record based on specified criteria or the selected record if none specified.
      *
-     * @param {string} fieldName - Defines the primary key field, 'Name of the column'.
-     * @param {Object} data - Defines the JSON data of the record to be deleted.
+     * @param {string} fieldName - The name of the primary key field.
+     * @param {Object} data - The data object representing the record to delete.
      * @returns {void}
+     *
+     * > Requires `editSettings.allowDeleting` to be true.
      */
     deleteRecord(fieldName, data) {
         if ((isNullOrUndefined(fieldName) && (isNullOrUndefined(data)) || (this.getSelectedRecords().length <= 0))) {
@@ -5673,9 +5691,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * To edit any particular row by TR element.
+     * Initiates editing for a specific row using its HTML element.
      *
-     * @param {HTMLTableRowElement} row - Defines the table row to be edited.
+     * This allows for manual control of which row enters edit mode through the UI.
+     *
+     * @param {HTMLTableRowElement} row - The table row element to enter into edit mode.
      * @returns {void}
      */
     startEdit(row) {
@@ -5684,10 +5704,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * To edit any particular cell using row index and cell index.
+     * Begins editing of a specific cell using row and field indices.
+     *
+     * Customers can programmatically specify which cell to edit without user input.
      *
-     * @param {number} rowIndex - Defines row index to edit a particular cell.
-     * @param {string} field - Defines the field name of the column to perform cell edit.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {string} field - The field name of the cell to edit.
      * @returns {void}
      */
     editCell(rowIndex, field) {
@@ -5696,10 +5718,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Enables or disables ToolBar items.
+     * Enables or disables specified ToolBar items within the TreeGrid.
      *
-     * @param {string[]} items - Defines the collection of itemID of ToolBar items.
-     * @param {boolean} isEnable - Defines the items to be enabled or disabled.
+     * This facilitates dynamic control of toolbar actions based on application logic.
+     *
+     * @param {string[]} items - Array of ToolBar item IDs to enable or disable.
+     * @param {boolean} isEnable - Boolean flag to determine whether to enable (true) or disable (false) items.
      * @returns {void}
      */
     enableToolbarItems(items, isEnable) {
@@ -5708,7 +5732,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * If TreeGrid is in editable state, you can save a record by invoking endEdit.
+     * Commits the edits made to a record in edit mode, updating the data source.
+     *
+     * Use this method to finalize changes for rows in edit mode, ensuring persistence.
      *
      * @returns {void}
      */
@@ -5718,10 +5744,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Column chooser can be displayed on screen by given position(X and Y axis).
+     * Displays the column chooser at a specified screen position.
      *
-     * @param {number} x - Defines the X axis.
-     * @param {number} y - Defines the Y axis.
+     * Useful for customizing the visibility of columns interactively via the UI.
+     *
+     * @param {number} x - The X-axis position of the column chooser.
+     * @param {number} y - The Y-axis position of the column chooser.
      * @returns {void}
      */
     openColumnChooser(x, y) {
@@ -5730,9 +5758,11 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Delete any visible row by TR element.
+     * Deletes a visible row from the TreeGrid using its HTML element.
+     *
+     * Apply this method when handling row deletions through DOM manipulations.
      *
-     * @param {HTMLTableRowElement} tr - Defines the table row element.
+     * @param {HTMLTableRowElement} tr - The table row element to remove.
      * @returns {void}
      */
     deleteRow(tr) {
@@ -5741,20 +5771,23 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Get the names of the primary key columns of the TreeGrid.
+     * Retrieves the primary key field names used in the TreeGrid.
+     *
+     * This information is crucial for identifying and manipulating unique rows.
      *
-     * @returns {string[]} - Returns primary key collection
+     * @returns {string[]} - Returns an array of primary key field names.
      */
     getPrimaryKeyFieldNames() {
         return this.grid.getPrimaryKeyFieldNames();
     }
     /**
-     * Updates particular cell value based on the given primary key value.
-     * > Primary key column must be specified using `columns.isPrimaryKey` property.
+     * Updates the value of a specific cell using its primary key for identification.
      *
-     * @param {string| number} key - Specifies the PrimaryKey value of dataSource.
-     * @param {string } field - Specifies the field name which you want to update.
-     * @param {string | number | boolean | Date} value - To update new value for the particular cell.
+     * Useful for targeted updates that leverage unique identifiers to ensure accuracy.
+     *
+     * @param {string| number} key - The primary key value of the row containing the cell.
+     * @param {string} field - The field name of the cell to update.
+     * @param {string | number | boolean | Date} value - The new value to assign to the specified cell.
      * @returns {void}
      */
     setCellValue(key, field, value) {
@@ -5764,11 +5797,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         editAction({ value: record, action: 'edit' }, this, this.isSelfReference, record.index, this.grid.selectedRowIndex, field);
     }
     /**
-     * Updates and refresh the particular row values based on the given primary key value.
-     * > Primary key column must be specified using `columns.isPrimaryKey` property.
+     * Updates the data for a specific row identified by its primary key and refreshes the display.
+     *
+     * Important for keeping the displayed data consistent with the source database or dataset.
      *
-     *  @param {string| number} key - Specifies the PrimaryKey value of dataSource.
-     *  @param {Object} rowData - To update new data for the particular row.
+     * @param {string| number} key - The primary key value of the row to update.
+     * @param {Object} rowData - The new data to apply to the row.
      * @returns {void}
      */
     setRowData(key, rowData) {
@@ -5806,9 +5840,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Navigates to the specified target page.
+     * Navigates to a specified page number within the TreeGrid pagination.
      *
-     * @param  {number} pageNo - Defines the page number to navigate.
+     * This can be used to programmatically change the page being viewed,
+     * allowing for scripted navigation through data.
+     *
+     * @param {number} pageNo - The page number to navigate to. Must be within valid page range.
      * @returns {void}
      */
     goToPage(pageNo) {
@@ -5817,9 +5854,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Defines the text of external message.
+     * Updates the external message displayed within the pager component.
      *
-     * @param  {string} message - Defines the message to update.
+     * This is useful for showing custom messages or additional information
+     * related to the data set or pagination status.
+     *
+     * @param {string} message - The custom message to display in the pager.
      * @returns {void}
      */
     updateExternalMessage(message) {
@@ -5828,20 +5868,26 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Gets a cell by row and column index.
+     * Retrieves a cell element based on its row and column indices in the TreeGrid.
      *
-     * @param  {number} rowIndex - Specifies the row index.
-     * @param  {number} columnIndex - Specifies the column index.
-     * @returns {Element} - Returns cell element in grid content
+     * This method is helpful for accessing cell-level elements for custom
+     * operations or styling.
+     *
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     * @returns {Element} - Returns the HTML element of the specified cell.
      */
     getCellFromIndex(rowIndex, columnIndex) {
         return this.grid.getCellFromIndex(rowIndex, columnIndex);
     }
     /**
-     * Gets a Column by column name.
+     * Retrieves a column object by the column's field name.
+     *
+     * This is typically used for obtaining the details of a column for
+     * configuration or data manipulation purposes.
      *
-     * @param  {string} field - Specifies the column name.
-     * @returns {Column} - Returns tree grid column
+     * @param {string} field - The field name of the column.
+     * @returns {Column} - Returns the column object corresponding to the field.
      */
     getColumnByField(field) {
         return iterateArrayOrObject(this.columnModel, (item) => {
@@ -5852,10 +5898,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         })[0];
     }
     /**
-     * Gets a column by UID.
+     * Fetches a column object using the column's unique identifier (UID).
      *
-     * @param  {string} uid - Specifies the column UID.
-     * @returns {Column} - Returns tree grid column
+     * Useful in scenarios where columns do not have unique field names but
+     * are uniquely identifiable via UID.
+     *
+     * @param {string} uid - The unique identifier for the column.
+     * @returns {Column} - Returns the column object for the given UID.
      */
     getColumnByUid(uid) {
         let Columns = this.initialRender ? this.grid.columns : this.columns;
@@ -5871,34 +5920,45 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         })[0];
     }
     /**
-     * Gets the collection of column fields.
+     * Retrieves the names of all column fields in the TreeGrid.
+     *
+     * This method provides a list of field names useful for dynamic operations
+     * or configuration where fields need to be enumerated or manipulated.
      *
-     * @returns {string[]} - Returns column field name as collection
+     * @returns {string[]} - Returns an array of column field names.
      */
     getColumnFieldNames() {
         return this.grid.getColumnFieldNames();
     }
     /**
-     * Gets the footer div of the TreeGrid.
+     * Retrieves the footer content element of the TreeGrid, usually for styling or custom manipulation.
      *
-     * @returns {Element} - Returns footer content div element
+     * This can be used to access the footer for adding custom functionality
+     * or styling purposes to enhance user interaction at the bottom of the grid.
+     *
+     * @returns {Element} - Returns the footer content HTML element.
      */
     getFooterContent() {
         return this.grid.getFooterContent();
     }
     /**
-     * Gets the footer table element of the TreeGrid.
+     * Acquires the footer table element of the TreeGrid for layout management.
+     *
+     * Useful for manipulating the table's structure or style beneath the grid content.
      *
-     * @returns {Element} - Returns footer content table element
+     * @returns {Element} - Returns the footer table HTML element.
      */
     getFooterContentTable() {
         return this.grid.getFooterContentTable();
     }
     /**
-     * Shows a column by its column name.
+     * Shows one or more columns based on the specified column names.
+     *
+     * This is useful for dynamically adjusting the visibility of columns
+     * based on user actions or application logic.
      *
-     * @param  {string|string[]} keys - Defines a single or collection of column names.
-     * @param  {string} showBy - Defines the column key either as field name or header text.
+     * @param {string|string[]} keys - A single column name or an array of column names to show.
+     * @param {string} showBy - Key to determine visibility either as field name or header text.
      * @returns {void}
      */
     showColumns(keys, showBy) {
@@ -5906,10 +5966,13 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.updateColumnModel();
     }
     /**
-     * Hides a column by column name.
+     * Hides one or more columns based on the specified column names.
      *
-     * @param  {string|string[]} keys - Defines a single or collection of column names.
-     * @param  {string} hideBy - Defines the column key either as field name or header text.
+     * Utilized to dynamically reduce the visibility of columns based on
+     * user roles or preferences.
+     *
+     * @param {string|string[]} keys - A single column name or an array of column names to hide.
+     * @param {string} hideBy - Key to evaluate columns either as field name or header text.
      * @returns {void}
      */
     hideColumns(keys, hideBy) {
@@ -5917,37 +5980,48 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.updateColumnModel();
     }
     /**
-     * Gets a column header by column name.
+     * Retrieves a column header element based on the field name of the column.
+     *
+     * This method helps to directly manipulate headers, such as applying custom styles.
      *
-     * @param  {string} field - Specifies the column name.
-     * @returns {Element} - Returns column header element
+     * @param {string} field - The field name of the desired column.
+     * @returns {Element} - Returns the HTML element of the column header.
      */
     getColumnHeaderByField(field) {
         return this.grid.getColumnHeaderByField(field);
     }
     /**
-     * Gets a column header by column index.
+     * Acquires the column header element using the column's index.
      *
-     * @param  {number} index - Specifies the column index.
-     * @returns {Element} - Returns column header element
+     * Suitable for situations where direct column index is available
+     * and header access is needed for operations.
+     *
+     * @param {number} index - The index of the column.
+     * @returns {Element} - Returns the HTML element of the specified column header.
      */
     getColumnHeaderByIndex(index) {
         return this.grid.getColumnHeaderByIndex(index);
     }
     /**
-     * Gets a column header by UID.
+     * Retrieves a column header element utilizing the column's UID.
      *
-     * @param {string} uid - Specifies the column uid.
-     * @returns {Element} - Returns column header element
+     * Useful for precision access to header elements when UIDs are used
+     * uniquely to manage column identities.
+     *
+     * @param {string} uid - The UID of the column.
+     * @returns {Element} - Returns the HTML element of the column header.
      */
     getColumnHeaderByUid(uid) {
         return this.grid.getColumnHeaderByUid(uid);
     }
     /**
-     * Gets a column index by column name.
+     * Determines the column index by the specified field name.
+     *
+     * Helpful in converting field names to indices for operations that require
+     * numeric input for array or collection indexing.
      *
-     * @param  {string} field - Specifies the column name.
-     * @returns {number} - Returns column index
+     * @param {string} field - The field name of the column.
+     * @returns {number} - Returns the index of the column.
      */
     getColumnIndexByField(field) {
         return this.grid.getColumnIndexByField(field);
@@ -5963,19 +6037,25 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return !isNullOrUndefined(index) ? index : -1;
     }
     /**
-     * Gets a column index by UID.
+     * Determines the column index based on the unique identifier (UID).
      *
-     * @param  {string} uid - Specifies the column UID.
-     * @returns {number} - Returns column index
+     * This can be crucial in scenarios that involve dynamic column management
+     * where UID provides an accurate reference.
+     *
+     * @param {string} uid - The UID of the column.
+     * @returns {number} - Returns the column index.
      */
     getColumnIndexByUid(uid) {
         return this.grid.getColumnIndexByUid(uid);
     }
     /**
-     * Gets the columns from the TreeGrid.
+     * Fetches a collection of columns from the TreeGrid optionally refreshing the column model.
+     *
+     * Use this method to retrieve and optionally refresh the list of columns
+     * to ensure up-to-date configurations and settings.
      *
-     * @param {boolean} isRefresh - Defined whether to update DOM
-     * @returns {Column[]} - Returns treegrid columns collection
+     * @param {boolean} isRefresh - Determines whether to refresh the grid's column model.
+     * @returns {Column[]} - Returns an array of TreeGrid column objects.
      */
     getColumns(isRefresh) {
         this.updateColumnModel(this.grid.getColumns(isRefresh));
@@ -6036,9 +6116,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         });
     }
     /**
-     * Gets the content div of the TreeGrid.
+     * Retrieves the main content area of the TreeGrid.
      *
-     * @returns {Element} - Return tree grid content element
+     * This method allows access to the main content DIV, which can
+     * be used for layout adjustments or adding custom elements.
+     *
+     * @returns {Element} - Returns the TreeGrid content HTML element.
      */
     getContent() {
         return this.grid.getContent();
@@ -6049,7 +6132,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     }
     mergeColumns(storedColumn, columns) {
         const persist2 = 'mergeColumns';
+        const mergedColumns = 'mergedColumns';
         this.grid[`${persist2}`].apply(this, [storedColumn, columns]);
+        this.grid[`${mergedColumns}`] = true;
     }
     setFrozenCount() {
         const persist3 = 'setFrozenCount';
@@ -6060,7 +6145,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid[`${persist4}`].apply(this.grid, [columns]);
     }
     isFrozenGrid() {
-        return this.grid.isFrozenGrid();
+        return this.grid.isFrozenGrid.apply(this);
     }
     updateTreeGridModel() {
         this.setProperties({ filterSettings: getObject('properties', this.grid.filterSettings) }, true);
@@ -6069,17 +6154,23 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.setProperties({ sortSettings: getObject('properties', this.grid.sortSettings) }, true);
     }
     /**
-     * Gets the content table of the TreeGrid.
+     * Retrieves the content table element of the TreeGrid.
+     *
+     * This table contains the main data display area, allowing for
+     * interaction and data manipulation directly within the TreeGrid.
      *
-     * @returns {Element} - Returns content table element
+     * @returns {Element} - Returns the HTML element representing the content table.
      */
     getContentTable() {
         return this.grid.getContentTable();
     }
     /**
-     * Gets all the TreeGrid's data rows.
+     * Obtains all data row elements from the TreeGrid, excluding summary rows.
      *
-     * @returns {Element[]} - Returns row elements
+     * Provides a way to access the visual representation of data for purposes
+     * like custom formatting or event binding.
+     *
+     * @returns {Element[]} - Returns an array of data row elements.
      */
     getDataRows() {
         const dRows = [];
@@ -6092,9 +6183,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return dRows;
     }
     /**
-     * Get current visible data of TreeGrid.
+     * Retrieves the current set of records that are visible in the TreeGrid view.
+     *
+     * This method excludes any summary rows to focus on the main data set
+     * currently being viewed by the user.
      *
-     * @returns {Object[]} - Returns current view records
+     * @returns {Object[]} - Returns an array of the current view records.
      * @isGenericType true
      */
     getCurrentViewRecords() {
@@ -6102,60 +6196,78 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return this.grid.currentViewData.filter((e) => isNullOrUndefined(e[`${isSummaryRow}`]));
     }
     /**
-     * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.
+     * Collects data changes (added, edited, and deleted) that have not been saved in batch mode.
      *
-     * @returns {Object} - Returns batch changes
+     * This allows you to view pending changes awaiting a commit to the data source.
+     *
+     * @returns {Object} - Returns an object detailing batch changes.
      */
     getBatchChanges() {
         return this.grid.editModule.getBatchChanges();
     }
     /**
-     * Gets the header div of the TreeGrid.
+     * Retrieves the header content element of the TreeGrid.
+     *
+     * Mainly used for interacting with the header section, which includes
+     * column headers and any applied header styling or events.
      *
-     * @returns {Element} - Returns Header content element
+     * @returns {Element} - Returns the HTML element for header content.
      */
     getHeaderContent() {
         return this.grid.getHeaderContent();
     }
     /**
-     * Gets the header table element of the TreeGrid.
+     * Retrieves the header table element of the TreeGrid.
+     *
+     * This method is useful for direct access to the table structure
+     * where column headers are defined.
      *
-     * @returns {Element} - Return header table element
+     * @returns {Element} - Returns the HTML element for the header table.
      */
     getHeaderTable() {
         return this.grid.getHeaderTable();
     }
     /**
-     * Gets a row by index.
+     * Fetches a specific row element based on its index in the TreeGrid.
      *
-     * @param  {number} index - Specifies the row index.
-     * @returns {Element} - Returns row element
+     * This provides a way to directly access and manipulate a row using its index.
+     *
+     * @param {number} index - The index of the desired row.
+     * @returns {Element} - Returns the HTML element of the specified row.
      */
     getRowByIndex(index) {
         return this.grid.getRowByIndex(index);
     }
     /**
-     * Get a row information based on cell
+     * Provides detailed information about a row based on a specified target element.
      *
-     * @param {Element | EventTarget} target - Target row element
-     * @returns {RowInfo} - Returns row information in a JSON object
+     * Integral for retrieving metadata such as row index or data object
+     * when working with events or complex tree structures.
+     *
+     * @param {Element | EventTarget} target - The target element or event triggering the request.
+     * @returns {RowInfo} - Returns an object containing row information.
      */
     getRowInfo(target) {
         return this.grid.getRowInfo(target);
     }
     /**
-     * Gets UID by column name.
+     * Finds the unique identifier (UID) for a column based on its field name.
+     *
+     * UIDs are essential for precise identification and manipulation within complex grids.
      *
-     * @param  {string} field - Specifies the column name.
-     * @returns {string} - Returns unique id based on column field name given
+     * @param {string} field - The field name of the column.
+     * @returns {string} - Returns the unique identifier for the specified column.
      */
     getUidByColumnField(field) {
         return this.grid.getUidByColumnField(field);
     }
     /**
-     * Gets the visible columns from the TreeGrid.
+     * Retrieves all the columns that are currently set to be visible within the TreeGrid.
      *
-     * @returns {Column[]} - Returns visible columns collection
+     * Helps in understanding the user's current view and can be used to dynamically
+     * adjust the visible columns.
+     *
+     * @returns {Column[]} - Returns an array of visible column objects.
      */
     getVisibleColumns() {
         const cols = [];
@@ -6167,7 +6279,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return cols;
     }
     /**
-     * By default, TreeGrid shows the spinner for all its actions. You can use this method to show spinner at your needed time.
+     * Displays a loading spinner overlay across the TreeGrid for any data action or long-running process.
+     *
+     * This can be manually invoked to indicate processing, enhancing user experience by providing feedback.
      *
      * @returns {void}
      */
@@ -6175,7 +6289,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         showSpinner(this.element);
     }
     /**
-     * Manually shown spinner needs to hide by `hideSpinnner`.
+     * Hides a manually shown loading spinner overlay from the TreeGrid.
+     *
+     * Ensures that any long-running process indication is removed after completion
+     * to manage user interface aesthetics.
      *
      * @returns {void}
      */
@@ -6183,7 +6300,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         hideSpinner(this.element);
     }
     /**
-     * Refreshes the TreeGrid header and content.
+     * Refreshes the visual appearance and data of the TreeGrid, updating header and content.
+     *
+     * This is crucial for synchronizing the displayed data with the underlying data source,
+     * ensuring the view reflects current data.
      *
      * @returns {void}
      */
@@ -6203,18 +6323,24 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.refresh();
     }
     /**
-     * Get the records of checked rows.
+     * Retrieves the records associated with rows that have their checkboxes checked.
      *
-     * @returns {Object[]} - Returns records that has been checked
+     * Facilitates operations that require information about specifically selected or
+     * interacted rows within the grid.
+     *
+     * @returns {Object[]} - Returns an array of checked row data objects.
      * @isGenericType true
      */
     getCheckedRecords() {
         return this.selectionModule.getCheckedrecords();
     }
     /**
-     * Get the visible records corresponding to rows visually displayed.
+     * Retrieves currently visible records according to the TreeGrid's visual state.
+     *
+     * It considers row expansion and collapse states to return only those records
+     * that a user can currently interact with.
      *
-     * @returns {Object[]} - Returns visible records based on collapse state of rows
+     * @returns {Object[]} - Returns visible records reflecting the TreeGrid's current view.
      * @isGenericType true
      */
     getVisibleRecords() {
@@ -6234,26 +6360,35 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return visibleRecords;
     }
     /**
-     * Get the indexes of checked rows.
+     * Retrieves the indices of rows that have their checkboxes checked.
      *
-     * @returns {number[]} - Returns checked row indexes
+     * This can assist in programatically assessing which rows have been selected
+     * by checkbox interaction for further processing.
+     *
+     * @returns {number[]} - Returns an array of indices corresponding to checked rows.
      */
     getCheckedRowIndexes() {
         return this.selectionModule.getCheckedRowIndexes();
     }
     /**
-     * Checked the checkboxes using rowIndexes.
+     * Selects rows in the TreeGrid using row indices, checking their associated checkboxes.
+     *
+     * This method provides automation for selecting or highlighting specific rows,
+     * useful in scenarios needing pre-selection or default selections.
      *
-     * @param {number[]} indexes - row indexes
+     * @param {number[]} indexes - An array of row indices to be marked as selected.
      * @returns {void}
      */
     selectCheckboxes(indexes) {
         this.selectionModule.selectCheckboxes(indexes);
     }
     /**
-     * Refreshes the TreeGrid column changes.
+     * Updates and refreshes the TreeGrid's column definitions and layout.
      *
-     * @param {boolean} refreshUI - Defined whether to refresh the DOM
+     * Ensures that the latest column settings are displayed, either refreshing the UI
+     * or adjusting internal configurations to match current data or configuration updates.
+     *
+     * @param {boolean} refreshUI - A flag indicating whether the DOM should be updated.
      * @returns {void}
      */
     refreshColumns(refreshUI) {
@@ -6282,7 +6417,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.setProperties({ treeColumnIndex: treeIndex }, true);
     }
     /**
-     * Refreshes the TreeGrid header.
+     * Refreshes the header section of the TreeGrid to reflect any structural or data changes.
+     *
+     * This method is useful when there are dynamic updates or layout adjustments
+     * needed in the header portion to ensure it aligns with current grid data or settings.
      *
      * @returns {void}
      */
@@ -6337,12 +6475,15 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Expands child rows
+     * Expands the specified parent row within the TreeGrid to reveal its nested data.
+     *
+     * This method is useful for programmatically expanding rows to display their
+     * hierarchical children, providing detailed views for nested data structures.
      *
-     * @param {HTMLTableRowElement} row - Expands the given row
-     * @param {Object} record - Expands the given record
-     * @param {Object} key - Primary key value
-     * @param {number} level - Specifies the hierarchical level of the record
+     * @param {HTMLTableRowElement} row - The table row element that should be expanded.
+     * @param {Object} record - Optional. Represents the data record associated with the row to be expanded.
+     * @param {Object} key - Optional. The primary key value that uniquely identifies the record.
+     * @param {number} level - Optional. Indicates the hierarchical level of the record within the TreeGrid.
      * @returns {void}
      */
     expandRow(row, record, key, level) {
@@ -6357,7 +6498,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         if (isNullOrUndefined(row) && isNullOrUndefined(record)) {
             return;
         }
-        if (!isNullOrUndefined(row) && row.cells[0].classList.contains('e-lastrowcell')) {
+        if (!isNullOrUndefined(row) && row.cells && row.cells[0].classList.contains('e-lastrowcell')) {
             this.lastRowBorder(row, false);
         }
         if (this.isExpandAll && !isRemoteData(this)) {
@@ -6397,7 +6538,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     }
     // Internal method to handle the rows expand
     expandRows(row, record, parentRec) {
-        const initialTotalRecordsCount = this.grid.totalDataRecordsCount;
         this.expandCollapse('expand', row, record);
         const children = 'Children';
         if (!(isRemoteData(this) && !isOffline(this)) && (!isCountRequired(this) || !isNullOrUndefined(record[`${children}`]))) {
@@ -6441,12 +6581,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         else if (isNullOrUndefined(record) && !isNullOrUndefined(row)) {
             if (this.detailTemplate) {
-                record = this.grid.getCurrentViewRecords()[row.getAttribute('data-rowindex')];
+                record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('aria-rowindex'), 10) - 1];
             }
             else {
                 if (this.enableVirtualization && (this.isCollapseAll || this.isExpandAll)) {
                     if (row.rowIndex === -1) {
-                        record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('data-rowindex'), 10)];
+                        record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('aria-rowindex'), 10) - 1];
                     }
                     else {
                         record = this.grid.getCurrentViewRecords()[row.rowIndex];
@@ -6456,18 +6596,27 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                     record = this.grid.getCurrentViewRecords()[row.rowIndex];
                 }
                 else {
-                    record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('data-rowindex'), 10)];
+                    record = this.grid.getCurrentViewRecords()[parseInt(row.getAttribute('aria-rowindex'), 10) - 1];
                 }
             }
         }
         return record;
     }
     /**
-     * Collapses child rows
+     * Collapses the specified parent row in the TreeGrid.
      *
-     * @param {HTMLTableRowElement} row - Collapse the given row
-     * @param {Object} record - Collapse the given record
-     * @param {Object} key - Primary key value
+     * This method collapses the row associated with the provided HTMLTableRowElement,
+     * hiding any of its displayed child rows. It is typically used to manage the
+     * visibility of hierarchical data within a tree structure.
+     *
+     * @param {HTMLTableRowElement} row - The HTMLTableRowElement representing the parent row
+     *                                    whose child rows are to be collapsed.
+     * @param {Object} record - (Optional) The data record associated with the row being collapsed.
+     *                            This can be used to access or manipulate the underlying data
+     *                            when collapsing the row.
+     * @param {Object} key - (Optional) The primary key value of the record. It can be used to identify
+     *                         the target record uniquely when collapsing the row, especially in cases
+     *                         where the row or record data needs to be referenced or logged.
      * @returns {void}
      */
     collapseRow(row, record, key) {
@@ -6548,9 +6697,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Expands the records at specific hierarchical level
+     * Expands all the records at the specified hierarchical level within the TreeGrid.
+     *
+     * This method is useful for visually expanding data at a certain depth, making
+     * all parent rows visible at the given level and their child rows accessible.
      *
-     * @param {number} level - Expands the parent rows at given level
+     * @param {number} level - The hierarchical level at which parent rows should be expanded.
      * @returns {void}
      */
     expandAtLevel(level) {
@@ -6570,9 +6722,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Expands the records by given primary key value
+     * Expands a specific record identified by the provided primary key value.
      *
-     * @param {Object} key - Expands the parent rows with given primary key value
+     * This method is useful for expanding particular node in the TreeGrid when
+     * the parent rows need to be targeted individually by their unique key.
+     *
+     * @param {Object} key - The primary key value of the record to be expanded.
      * @returns {void}
      */
     expandByKey(key) {
@@ -6622,9 +6777,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return obj;
     }
     /**
-     * Collapses the records at specific hierarchical level
+     * Collapses all the records at the specified hierarchical level within the TreeGrid.
+     *
+     * This function helps in hiding child rows for all parent nodes at a given level,
+     * effectively reducing the visible depth of the hierarchical structure.
      *
-     * @param {number} level - Define the parent row level which needs to be collapsed
+     * @param {number} level - The hierarchical level at which parent rows should be collapsed.
      * @returns {void}
      */
     collapseAtLevel(level) {
@@ -6644,9 +6802,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Collapses the records by given primary key value
+     * Collapses a specific record identified by the provided primary key value.
      *
-     * @param {Object} key - Collapses the parent rows with given primary key value
+     * This method is useful for collapsing particular node in the TreeGrid when
+     * the parent rows need to be targeted individually by their unique key.
+     *
+     * @param {Object} key - The primary key value of the record to be collapsed.
      * @returns {void}
      */
     collapseByKey(key) {
@@ -6684,7 +6845,10 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Expands All the rows
+     * Expands all rows in the TreeGrid, making the full hierarchy visible.
+     *
+     * This method should be used with caution on large datasets, as it makes
+     * all nodes and their child rows visible, which might affect performance.
      *
      * @returns {void}
      */
@@ -6695,10 +6859,23 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         this.isExpandedEventTriggered = false;
         this.isExpandingEventTriggered = false;
+        if (this.editSettings.mode === 'Batch') {
+            const obj = 'dialogObj';
+            const showDialog = 'showDialog';
+            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
+                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+                const dialogObj = this.grid.editModule[`${obj}`];
+                this.grid.editModule[`${showDialog}`]('CancelEdit', dialogObj);
+                return;
+            }
+        }
         this.expandCollapseAll('expand');
     }
     /**
-     * Collapses All the rows
+     * Collapses all rows in the TreeGrid, hiding all child rows and leaving only parent nodes visible.
+     *
+     * This method can be used to quickly minimize the view to only top-level data,
+     * which is helpful for summarizing or performing broad overviews of the dataset.
      *
      * @returns {void}
      */
@@ -6709,6 +6886,16 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         this.isCollapsedEventTriggered = false;
         this.isCollapsingEventTriggered = false;
+        if (this.editSettings.mode === 'Batch') {
+            const obj = 'dialogObj';
+            const showDialog = 'showDialog';
+            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
+                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+                const dialogObj = this.grid.editModule[`${obj}`];
+                this.grid.editModule[`${showDialog}`]('CancelEdit', dialogObj);
+                return;
+            }
+        }
         this.expandCollapseAll('collapse');
     }
     expandCollapseAll(action) {
@@ -6728,7 +6915,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         this.isExpandAll = true;
         this.isCollapseAll = true;
-        if (((this.allowPaging && this.pageSettings.pageSizeMode === 'All') || this.enableVirtualization || this.enableInfiniteScrolling) && !isRemoteData(this)) {
+        if (((this.allowPaging && (this.pageSettings.pageSizeMode === 'All' || this.pageSettings.pageSizeMode === 'Root')) || this.enableVirtualization || this.enableInfiniteScrolling) && !isRemoteData(this)) {
             this.flatData.filter((e) => {
                 if (e.hasChildRecords) {
                     e.expanded = action === 'collapse' ? false : true;
@@ -6791,12 +6978,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             row = gridRows[parseInt(rowIndex.toString(), 10)];
         }
         else {
-            rowIndex = +row.getAttribute('data-rowindex');
+            rowIndex = +row.getAttribute('aria-rowindex') - 1;
         }
         if (!isNullOrUndefined(row)) {
             row.setAttribute('aria-expanded', action === 'expand' ? 'true' : 'false');
         }
-        if (((this.allowPaging && this.pageSettings.pageSizeMode === 'All') || this.enableVirtualization) && !isRemoteData(this)
+        if (((this.allowPaging && (this.pageSettings.pageSizeMode === 'All' || this.pageSettings.pageSizeMode === 'Root')) || this.enableVirtualization) && !isRemoteData(this)
             && !isCountRequired(this)) {
             this.notify(localPagedExpandCollapse, { action: action, row: row, record: record });
         }
@@ -6806,6 +6993,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 displayAction = 'e-childrow-visible';
                 if (!isChild) {
                     record.expanded = true;
+                    this.flatData.forEach(function (e) {
+                        e.expanded = e.uniqueID === record.uniqueID && e.expanded !== record.expanded ? record.expanded : e.expanded;
+                    });
                     this.uniqueIDCollection[record.uniqueID].expanded = record.expanded;
                 }
                 if (!isNullOrUndefined(row)) {
@@ -6827,6 +7017,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 displayAction = 'e-childrow-hidden';
                 if (!isChild || isCountRequired(this)) {
                     record.expanded = false;
+                    this.flatData.forEach(function (e) {
+                        e.expanded = e.uniqueID === record.uniqueID && e.expanded !== record.expanded ? record.expanded : e.expanded;
+                    });
                     this.uniqueIDCollection[record.uniqueID].expanded = record.expanded;
                 }
                 if (!isNullOrUndefined(row)) {
@@ -7056,7 +7249,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             }
             if (!isNullOrUndefined(rows[parseInt(i.toString(), 10)]) && !this.allowPaging && !(this.enableVirtualization
                 || this.enableInfiniteScrolling || isRemoteData(this) || isCountRequired(this))) {
-                gridRowsObject[rows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'e-childrow-hidden' ? true : false;
+                if (!isNullOrUndefined(gridRowsObject[rows[parseInt(i.toString(), 10)].rowIndex])) {
+                    gridRowsObject[rows[parseInt(i.toString(), 10)].rowIndex].visible = displayAction !== 'e-childrow-hidden' ? true : false;
+                }
                 const parentRecord = currentViewData.filter((e) => {
                     return e.uniqueID === currentRecord[0].parentUniqueID;
                 });
@@ -7198,28 +7393,6 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         return value;
     }
-    /**
-     * Updates the rows and cells
-     *
-     * @param {Object[]} records - Updates the given records
-     * @param {HTMLTableRowElement[]} rows - Updates the given rows
-     * @param {number} index -  Updates the given cell index
-     * @returns {void}
-     */
-    updateRowAndCellElements(records, rows, index) {
-        for (let i = 0; i < records.length; i++) {
-            this.renderModule.cellRender({
-                data: records[parseInt(i.toString(), 10)], cell: rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)],
-                column: this.grid.getColumns()[this.treeColumnIndex],
-                requestType: 'rowDragAndDrop'
-            });
-            if (this['action'] === 'indenting' || this['action'] === 'outdenting') {
-                this.renderModule.RowModifier({
-                    data: records[parseInt(i.toString(), 10)], row: rows[parseInt(i.toString(), 10)]
-                });
-            }
-        }
-    }
     /**
      * @hidden
      * @returns {void}
@@ -7227,6 +7400,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     addListener() {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
+        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
     }
     updateResultModel(returnResult) {
         this.dataResults = returnResult;
@@ -7241,27 +7415,31 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
         this.off('updateResults', this.updateResultModel);
         this.grid.off('initial-end', this.afterGridRender);
+        this.grid.off('last-rowcell-border-updated', this.lastRowCellBorderUpdated);
     }
     /**
-     * Filters TreeGrid row by column name with the given options.
+     * Filters the TreeGrid rows based on a specified column and filter criteria.
+     *
+     * This method allows for dynamic filtering against column data using various
+     * operators and values, supporting case-sensitive filtering and accent sensitivity.
      *
-     * @param  {string} fieldName - Defines the field name of the column.
-     * @param  {string} filterOperator - Defines the operator to filter records.
-     * @param  {string | number | Date | boolean} filterValue - Defines the value used to filter records.
-     * @param  {string} predicate - Defines the relationship between one filter query and another by using AND or OR predicate.
-     * @param  {boolean} matchCase - If match case is set to true, the TreeGrid filters the records with exact match. if false, it filters
-     * case insensitive records (uppercase and lowercase letters are treated the same).
-     * @param  {boolean} ignoreAccent - If ignoreAccent is set to true,
-     * then filter ignores diacritic characters or accents while filtering.
-     * @param  {string} actualFilterValue - Defines the actual filter value for filter column.
-     * @param  {string} actualOperator - Defines the actual filter operator for filter column.
+     * @param {string} fieldName - The name of the column to apply the filter on.
+     * @param {string} filterOperator - The operator used to perform the filter (e.g., 'equals', 'startswith').
+     * @param {string | number | Date | boolean } filterValue - The value to filter against.
+     * @param {string} predicate - The logical operator ('AND'/'OR') to combine this filter with others.
+     * @param {boolean} matchCase - If true, the filter performs a case-sensitive match.
+     * @param {boolean} ignoreAccent - If true, the filter ignores diacritical marks.
+     * @param {string} actualFilterValue - The original value used for filtering, useful for distinguishing displayed and actual values.
+     * @param {string} actualOperator - The actual operator that is applied when different from the displayed operator.
      * @returns {void}
      */
     filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {
         this.grid.filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator);
     }
     /**
-     * Clears all the filtered rows of the TreeGrid.
+     * Clears all filters applied to the TreeGrid, restoring the view to show all records.
+     *
+     * This method is useful for resetting the grid to its unfiltered state.
      *
      * @returns {void}
      */
@@ -7280,26 +7458,32 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.removeFilteredColsByField(field, isClearFilterBar);
     }
     /**
-     * Selects a row by given index.
+     * Selects a row in the TreeGrid by its index.
+     *
+     * Use this method to highlight a specific row; useful for programmatically navigating data.
      *
-     * @param  {number} index - Defines the row index.
-     * @param  {boolean} isToggle - If set to true, then it toggles the selection.
+     * @param {number} index - Index of the row to select.
+     * @param {boolean} isToggle - If true, toggles the selection state of the row.
      * @returns {void}
      */
     selectRow(index, isToggle) {
         this.grid.selectRow(index, isToggle);
     }
     /**
-     * Selects a collection of rows by indexes.
+     * Selects multiple rows in the TreeGrid given an array of row indexes.
      *
-     * @param  {number[]} rowIndexes - Specifies the row indexes.
+     * Useful for batch operations where multiple row selections are necessary.
+     *
+     * @param {number[]} rowIndexes - Array of row index numbers to select.
      * @returns {void}
      */
     selectRows(rowIndexes) {
         this.grid.selectRows(rowIndexes);
     }
     /**
-     * Deselects the current selected rows and cells.
+     * Deselects all selected rows and cells within the TreeGrid.
+     *
+     * Resets the selection state of the grid, which is useful after bulk operations.
      *
      * @returns {void}
      */
@@ -7310,39 +7494,47 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         this.grid.clearSelection();
     }
     /**
-     * Copy the selected rows or cells data into clipboard.
+     * Copies the data of selected rows or cells to the clipboard.
      *
-     * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.
+     * This method supports including headers for better context when pasting elsewhere.
+     *
+     * @param {boolean} withHeader - (Optional) If true, includes column headers in the copied data.
      * @returns {void}
      */
     copy(withHeader) {
         this.clipboardModule.copy(withHeader);
     }
     /**
-     * Paste data from clipboard to selected cells.
+     * Pastes data into the selected cells from the clipboard.
+     *
+     * Automatically places the pasted data starting from the specified indices.
      *
-     * @param {boolean} data - Specifies the date for paste.
-     * @param {boolean} rowIndex - Specifies the row index.
-     * @param {boolean} colIndex - Specifies the column index.
+     * @param {string} data - The clipboard data to paste.
+     * @param {number} rowIndex - The starting row index for pasting.
+     * @param {number} colIndex - The starting column index for pasting.
      * @returns {void}
      */
     paste(data, rowIndex, colIndex) {
         this.clipboardModule.paste(data, rowIndex, colIndex);
     }
     /**
-     * Selects a cell by the given index.
+     * Selects a cell by its index position in the TreeGrid.
      *
-     * @param  {IIndex} cellIndex - Defines the row and column indexes.
-     * @param  {boolean} isToggle - If set to true, then it toggles the selection.
+     * Useful for navigating or highlighting specific data cells within the grid.
+     *
+     * @param {IIndex} cellIndex - An object specifying the row and column indexes.
+     * @param {boolean} isToggle - (Optional) If true, toggles the selection state of the cell.
      * @returns {void}
      */
     selectCell(cellIndex, isToggle) {
         this.grid.selectCell(cellIndex, isToggle);
     }
     /**
-     * Gets the collection of selected rows.
+     * Retrieves the currently selected rows.
+     *
+     * Useful for obtaining the selected data elements for downstream processing.
      *
-     * @returns {Element[]} - Returns selected row elements collection
+     * @returns {Element[]} - An array of Element objects representing the selected rows.
      */
     getSelectedRows() {
         return this.grid.getSelectedRows();
@@ -7554,44 +7746,59 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         return cnt;
     }
     /**
-     * Gets the collection of selected row indexes.
+     * Retrieves the indexes of the currently selected rows in the TreeGrid.
      *
-     * @returns {number[]} - Returns selected rows index collection
+     * This method is useful when you need to perform actions based on the selected rows,
+     * such as retrieving data or changing the selection.
+     *
+     * @returns {number[]} - An array of numbers representing the indexes of selected rows.
      */
     getSelectedRowIndexes() {
         return this.grid.getSelectedRowIndexes();
     }
     /**
-     * Gets the collection of selected row and cell indexes.
+     * Retrieves the indexes of the selected cells within the selected rows.
+     *
+     * This can be useful for handling cell-specific operations, such as
+     * applying styles or editing values programmatically.
      *
-     * @returns {ISelectedCell[]} - Returns selected cell's index details
+     * @returns {ISelectedCell[]} - An array of objects representing the selected cells' indexes.
      */
     getSelectedRowCellIndexes() {
         return this.grid.getSelectedRowCellIndexes();
     }
     /**
-     * Gets the collection of selected records.
+     * Retrieves the data records corresponding to the currently selected rows.
+     *
+     * This method provides the full record data for the selected rows,
+     * which is useful for data manipulation or extraction operations.
      *
      * @isGenericType true
-     * @returns {Object[]} - Returns selected records collection
+     * @returns {Object[]} - An array of data objects representing the selected records.
      */
     getSelectedRecords() {
         return this.grid.getSelectedRecords();
     }
     /**
-     * Gets the data module.
+     * Obtains the data handling modules used by the TreeGrid.
      *
-     * @returns {{baseModule: Data, treeModule: DataManipulation}}: Returns grid and treegrid data module
+     * This includes both the base data module for standard grid operations and the tree module
+     * for handling hierarchical data, giving complete access to data management capabilities.
+     *
+     * @returns {{baseModule: Data, treeModule: DataManipulation}} - An object containing both grid and tree data modules.
      */
     getDataModule() {
         return { baseModule: this.grid.getDataModule(), treeModule: this.dataModule };
     }
     /**
-     * Reorder the rows based on given indexes and position
+     * Reorders rows in the TreeGrid based on specified source indexes and a target position.
      *
-     * @param {number[]} fromIndexes - Source indexes of rows
-     * @param {number} toIndex - Destination index of row
-     * @param {string} position - Defines drop position as above or below or child
+     * This functionality allows for dynamic rearrangement of rows, such as moving selected
+     * rows to a new position as siblings or children.
+     *
+     * @param {number[]} fromIndexes - An array indicating the source indexes of the rows to be moved.
+     * @param {number} toIndex - The target index where the rows should be moved.
+     * @param {string} position - The position relative to the target index ('above', 'below', 'child').
      * @returns {void}
      */
     reorderRows(fromIndexes, toIndex, position) {
@@ -7600,9 +7807,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
+     * Indents a specified record, promoting it to one level deeper in the hierarchy.
+     *
+     * This function moves the selected row to become the last child of its preceding row,
+     * altering the visual and hierarchical data structure.
      *
-     * @param {Object} record – specifies the record to do indented
+     * @param {Object} record - (Optional) The record to be indented. If omitted, the currently selected row is used.
      * @returns {void}
      */
     indent(record) {
@@ -7612,9 +7822,12 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
         }
     }
     /**
-     * Outdent the record to one level of hierarchy. Moves the selected row as sibling to its parent row.
+     * Outdents a specified record, moving it one level up in the hierarchy.
      *
-     * @param {Object} record – specifies the record to do outdented
+     * This method repositions the selected row to be a sibling of its parent, impacting
+     * its display and the hierarchical relationships within the TreeGrid.
+     *
+     * @param {Object} record - (Optional) The record to be outdented. If omitted, the currently selected row is used.
      * @returns {void}
      */
     outdent(record) {
@@ -7810,6 +8023,21 @@ __decorate$b([
 __decorate$b([
     Property('All')
 ], TreeGrid.prototype, "columnQueryMode", void 0);
+__decorate$b([
+    Property(true)
+], TreeGrid.prototype, "allowSelection", void 0);
+__decorate$b([
+    Property(-1)
+], TreeGrid.prototype, "selectedRowIndex", void 0);
+__decorate$b([
+    Complex({}, SelectionSettings)
+], TreeGrid.prototype, "selectionSettings", void 0);
+__decorate$b([
+    Property(false)
+], TreeGrid.prototype, "allowExcelExport", void 0);
+__decorate$b([
+    Property(false)
+], TreeGrid.prototype, "allowPdfExport", void 0);
 __decorate$b([
     Event()
 ], TreeGrid.prototype, "created", void 0);
@@ -7888,9 +8116,6 @@ __decorate$b([
 __decorate$b([
     Event()
 ], TreeGrid.prototype, "queryCellInfo", void 0);
-__decorate$b([
-    Property(true)
-], TreeGrid.prototype, "allowSelection", void 0);
 __decorate$b([
     Event()
 ], TreeGrid.prototype, "rowSelecting", void 0);
@@ -7981,18 +8206,6 @@ __decorate$b([
 __decorate$b([
     Event()
 ], TreeGrid.prototype, "rowDrop", void 0);
-__decorate$b([
-    Property(-1)
-], TreeGrid.prototype, "selectedRowIndex", void 0);
-__decorate$b([
-    Complex({}, SelectionSettings)
-], TreeGrid.prototype, "selectionSettings", void 0);
-__decorate$b([
-    Property(false)
-], TreeGrid.prototype, "allowExcelExport", void 0);
-__decorate$b([
-    Property(false)
-], TreeGrid.prototype, "allowPdfExport", void 0);
 __decorate$b([
     Event()
 ], TreeGrid.prototype, "pdfQueryCellInfo", void 0);
@@ -8208,7 +8421,6 @@ class RowDD {
         }
         const action = 'action';
         const dropPosition = 'dropPosition';
-        const updateRowAndCellElements = 'updateRowAndCellElements';
         if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
             if (position === 'above') {
                 this.dropPosition = 'topSegment';
@@ -8258,7 +8470,7 @@ class RowDD {
                 const parentrow = this.parent.getRows()[parseInt(toIndex.toString(), 10)];
                 totalRecord.push(parentData);
                 rows.push(parentrow);
-                this.parent[`${updateRowAndCellElements}`](totalRecord, rows, index);
+                this.updateRowAndCellElements(totalRecord, rows, index);
             }
             if (this.parent.enableImmutableMode && this.parent[`${action}`] === 'outdenting') {
                 const index = this.parent.allowRowDragAndDrop
@@ -8270,7 +8482,29 @@ class RowDD {
                 const rows = [];
                 totalRecord.push(record);
                 rows.push(row);
-                this.parent[`${updateRowAndCellElements}`](totalRecord, rows, index);
+                this.updateRowAndCellElements(totalRecord, rows, index);
+            }
+        }
+    }
+    /**
+     * Updates the rows and cells
+     *
+     * @param {Object[]} records - Updates the given records
+     * @param {HTMLTableRowElement[]} rows - Updates the given rows
+     * @param {number} index -  Updates the given cell index
+     * @returns {void}
+     */
+    updateRowAndCellElements(records, rows, index) {
+        for (let i = 0; i < records.length; i++) {
+            this.parent.renderModule.cellRender({
+                data: records[parseInt(i.toString(), 10)], cell: rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)],
+                column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
+                requestType: 'rowDragAndDrop'
+            });
+            if (this.parent['action'] === 'indenting' || this.parent['action'] === 'outdenting') {
+                this.parent.renderModule.RowModifier({
+                    data: records[parseInt(i.toString(), 10)], row: rows[parseInt(i.toString(), 10)]
+                });
             }
         }
     }
@@ -8319,7 +8553,7 @@ class RowDD {
                             record.parentItem.taskData) {
                             dropIndex = i;
                             if (tObj.enableVirtualization) {
-                                dropIndex = parseInt(tObj.getRows()[parseInt(i.toString(), 10)].getAttribute('data-rowindex'), 10);
+                                dropIndex = parseInt(tObj.getRows()[parseInt(i.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1;
                             }
                         }
                     }
@@ -8328,26 +8562,27 @@ class RowDD {
                     dropIndex = this.selectedRow.rowIndex - 1;
                 }
                 if (this.parent.enableVirtualization && this.selectedRecord && !(record.level > this.selectedRecord.level)) {
-                    dropIndex = parseInt(this.selectedRow.getAttribute('data-rowindex'), 10) - 1;
+                    dropIndex = parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 2;
                 }
                 tObj[`${action}`] = 'indenting';
                 tObj[`${droppedIndex}`] = dropIndex;
                 this.eventTrigger('indenting', dropIndex);
             }
             else if (request === 'outdent') {
-                if (this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0 ||
-                    tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level === 0) {
+                const isInvalidSelection = this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0;
+                const isRootLevel = tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level === 0;
+                if (isInvalidSelection || isRootLevel) {
                     return;
                 }
-                let dropIndex;
                 const parentItem = this.selectedRecord.parentItem;
-                for (let i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                    if (tObj.getCurrentViewRecords()[parseInt(i.toString(), 10)].uniqueID === parentItem.uniqueID) {
-                        dropIndex = i;
-                    }
+                const records = tObj.getCurrentViewRecords();
+                let dropIndex = records.findIndex((record) => record.uniqueID === parentItem.uniqueID);
+                if (dropIndex === -1) {
+                    return;
                 }
                 if (this.parent.enableVirtualization && this.selectedRecord) {
-                    dropIndex = parseInt(this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('data-rowindex'), 10);
+                    const ariaRowIndex = this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('aria-rowindex');
+                    dropIndex = parseInt(ariaRowIndex, 10) - 1;
                 }
                 tObj[`${action}`] = 'outdenting';
                 tObj[`${droppedIndex}`] = dropIndex;
@@ -8373,7 +8608,7 @@ class RowDD {
             if (!actionArgs.cancel) {
                 if (actionArgs.action === 'indenting') {
                     if (this.parent.enableVirtualization) {
-                        this.reorderRows([parseInt(this.selectedRow.getAttribute('data-rowindex'), 10)], dropIndex, 'child');
+                        this.reorderRows([parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 1], dropIndex, 'child');
                     }
                     else {
                         this.reorderRows([this.selectedRow.rowIndex], dropIndex, 'child');
@@ -8381,7 +8616,7 @@ class RowDD {
                 }
                 else if (actionArgs.action === 'outdenting') {
                     if (this.parent.enableVirtualization) {
-                        this.reorderRows([parseInt(this.selectedRow.getAttribute('data-rowindex'), 10)], dropIndex, 'below');
+                        this.reorderRows([parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 1], dropIndex, 'below');
                     }
                     else {
                         this.reorderRows([this.selectedRow.rowIndex], dropIndex, 'below');
@@ -8684,7 +8919,8 @@ class RowDD {
         else {
             rowTop = rowPositionHeight + contentHeight + roundOff;
         }
-        const rowBottom = rowTop + row[0].offsetHeight;
+        const rowBottom = row[0].offsetHeight !== 0 && isNullOrUndefined(rowEle) ?
+            rowTop + row[0].offsetHeight : rowTop + rowEle.offsetHeight;
         const difference = rowBottom - rowTop;
         const divide = difference / 3;
         const topRowSegment = rowTop + divide;
@@ -8701,6 +8937,7 @@ class RowDD {
         const isTopSegment = posy <= topRowSegment;
         const isMiddleRowSegment = (posy > topRowSegment && posy <= middleRowSegment);
         const isBottomRowSegment = (posy > middleRowSegment && posy <= bottomRowSegment);
+        let isBorderNeed = true;
         if (isTopSegment || isMiddleRowSegment || isBottomRowSegment) {
             if (isTopSegment && this.dropPosition !== 'Invalid') {
                 this.removeChildBorder();
@@ -8709,19 +8946,12 @@ class RowDD {
                 this.addFirstrowBorder(rowEle);
                 this.removeErrorElem();
                 this.removeLastrowBorder(rowEle);
-                this.topOrBottomBorder(args.target);
             }
             if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
                 this.removetopOrBottomBorder();
-                let rowElement = [];
-                const element = closest(args.target, 'tr');
-                rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));
-                if (rowElement.length > 0) {
-                    this.addRemoveClasses(rowElement, true, 'e-childborder');
-                }
+                this.dropPosition = 'middleSegment';
                 this.addLastRowborder(rowEle);
                 this.addFirstrowBorder(rowEle);
-                this.dropPosition = 'middleSegment';
             }
             if (isBottomRowSegment && this.dropPosition !== 'Invalid') {
                 this.removeErrorElem();
@@ -8730,11 +8960,164 @@ class RowDD {
                 this.dropPosition = 'bottomSegment';
                 this.addLastRowborder(rowEle);
                 this.removeFirstrowBorder(rowEle);
-                this.topOrBottomBorder(args.target);
+            }
+            if ((isTopSegment || isBottomRowSegment) && this.dropPosition !== 'Invalid') {
+                isBorderNeed = this.updateBorderStatus(row, index);
+                this.topOrBottomBorder(args.target, isBorderNeed);
+            }
+            else if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
+                let rowElement = [];
+                const element = closest(args.target, 'tr');
+                rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));
+                isBorderNeed = this.updateBorderStatus(row, index);
+                if (rowElement.length > 0 && isBorderNeed) {
+                    this.addRemoveClasses(rowElement, true, 'e-childborder');
+                }
             }
         }
         return this.dropPosition;
     }
+    /**
+     * Updates the border status for a specified row and index.
+     *
+     * @private
+     * @param {Element[]} row - The array of row elements to be updated.
+     * @param {number} index - The index of the row element for which the border status is to be updated.
+     * @returns {boolean} - Returns true if the border status was successfully updated, otherwise false.
+     */
+    updateBorderStatus(row, index) {
+        let isBorderNeed = true;
+        let rows = this.parent.grid.getRows();
+        const childRows = [];
+        let hasDetailTemplate = false;
+        if (!isNullOrUndefined(this.parent.detailTemplate)) {
+            rows = this.parent.getDataRows();
+            hasDetailTemplate = true;
+        }
+        const treegridColumnIndex = this.parent.treeColumnIndex;
+        let treeColIndex = this.parent.allowRowDragAndDrop ?
+            (hasDetailTemplate ? treegridColumnIndex + 2 : treegridColumnIndex + 1) :
+            (hasDetailTemplate ? treegridColumnIndex + 1 : treegridColumnIndex);
+        if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+            treeColIndex = treegridColumnIndex;
+        }
+        const dragRows = row;
+        const targetRow = [rows[`${index}`]];
+        if (this.dropPosition === 'topSegment') {
+            row.filter((e) => {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(targetRow[0]) ||
+                    isNullOrUndefined(targetRow[0].cells)) {
+                    return true;
+                }
+                const regex = /index(\d+)|level(\d+)/g;
+                const parentIndexLevel = e === null || e === undefined ? undefined : e.cells[`${treeColIndex}`].className.match(regex);
+                const dropIndexLevel = targetRow[0].cells[`${treeColIndex}`].className.match(regex);
+                if (isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
+                    return true;
+                }
+                const parentLevel = +parentIndexLevel[1].match(/\d+/)[0];
+                const dropParentLevel = +dropIndexLevel[1].match(/\d+/)[0];
+                let InDraggedRowIndex = false;
+                if (parentLevel !== 0 && parentLevel !== dropParentLevel) {
+                    return true;
+                }
+                for (let i = 0; i < rows.length; i++) {
+                    if (rows[parseInt(i.toString(), 10)] === dragRows[0]) {
+                        InDraggedRowIndex = true;
+                    }
+                    if (InDraggedRowIndex && rows[parseInt(i.toString(), 10)] !== dragRows[0]) {
+                        const parentIndexLevelInRow = rows[parseInt(i.toString(), 10)].cells[`${treeColIndex}`].className.match(regex);
+                        const parentLevelInRow = +parentIndexLevelInRow[1].match(/\d+/)[0];
+                        if (parentLevelInRow !== parentLevel && parentLevelInRow > parentLevel) {
+                            childRows.push(rows[parseInt(i.toString(), 10)]);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                if (parentLevel === dropParentLevel && ((childRows.length > 0 && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - (childRows.length + 1)) || (childRows.length === 0 && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - 1))) {
+                    isBorderNeed = false;
+                }
+                return true;
+            });
+            isBorderNeed = (!isNullOrUndefined(row) && childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - 1) && isNullOrUndefined(row[0]) ? false : isBorderNeed;
+        }
+        if (this.dropPosition === 'bottomSegment') {
+            targetRow.filter((e) => {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
+                    isNullOrUndefined(dragRows[0].cells)) {
+                    return true;
+                }
+                const regex = /index(\d+)|level(\d+)/g;
+                const parentIndexLevel = e === null || e === undefined ? undefined : e.cells[`${treeColIndex}`].className.match(regex);
+                const dragIndexLevel = dragRows[0].cells[`${treeColIndex}`].className.match(regex);
+                if (isNullOrUndefined(dragIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
+                    return true;
+                }
+                const parentLevel = +parentIndexLevel[1].match(/\d+/)[0];
+                const dragParentLevel = +dragIndexLevel[1].match(/\d+/)[0];
+                let InDraggedRowIndex = false;
+                if (parentLevel !== 0 && parentLevel !== dragParentLevel) {
+                    return true;
+                }
+                for (let i = 0; i < rows.length; i++) {
+                    if (rows[parseInt(i.toString(), 10)] === targetRow[0]) {
+                        InDraggedRowIndex = true;
+                    }
+                    if (InDraggedRowIndex && rows[parseInt(i.toString(), 10)] !== targetRow[0]) {
+                        const parentIndexLevelInRow = rows[parseInt(i.toString(), 10)].cells[`${treeColIndex}`].className.match(regex);
+                        const parentLevelInRow = +parentIndexLevelInRow[1].match(/\d+/)[0];
+                        if (parentLevelInRow !== parentLevel && parentLevelInRow > parentLevel) {
+                            childRows.push(rows[parseInt(i.toString(), 10)]);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                if (!isNullOrUndefined(row) && parentLevel === dragParentLevel && ((childRows.length > 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + (childRows.length + 1)) || (childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + 1))) {
+                    isBorderNeed = false;
+                }
+                return true;
+            });
+            isBorderNeed = (!isNullOrUndefined(row) && childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + 1) && isNullOrUndefined(row[0]) ? false : isBorderNeed;
+        }
+        if (this.dropPosition === 'middleSegment') {
+            targetRow.filter((e) => {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
+                    isNullOrUndefined(dragRows[0].cells)) {
+                    return true;
+                }
+                for (let i = 0; i < dragRows.length; i++) {
+                    const regex = /index(\d+)|level(\d+)/g;
+                    let dropActualIndex = targetRow[0].rowIndex;
+                    const dragIndexLevel = dragRows[parseInt(i.toString(), 10)].cells[`${treeColIndex}`].className.match(regex);
+                    if (!dragIndexLevel) {
+                        return true;
+                    }
+                    const dragIndex = parseInt(dragIndexLevel.find((item) => item.includes('index')).match(/\d+/)[0] || '0', 10);
+                    if (hasDetailTemplate) {
+                        dropActualIndex = dropActualIndex / 2;
+                    }
+                    if (dragIndex === dropActualIndex && !this.parent.rowDropSettings.targetID) {
+                        isBorderNeed = false;
+                    }
+                    else {
+                        isBorderNeed = true;
+                        break;
+                    }
+                }
+                if (!isBorderNeed) {
+                    this.dropPosition = 'Invalid';
+                    this.addErrorElem();
+                }
+                return isBorderNeed;
+            });
+        }
+        this.canDrop = isBorderNeed;
+        return isBorderNeed;
+    }
     /**
      * Removes the visual border from all child rows within the TreeGrid.
      *
@@ -8875,23 +9258,27 @@ class RowDD {
      * Applies drop border styles to row elements based on the current drop position ('topSegment' or 'bottomSegment').
      *
      * @param {Element} target - The target element where the drop action is taking place.
+     * @param {boolean} [isBorderNeed=true] - Indicates whether a border is needed during the drop action. Defaults to `true`.
      * @returns {void} No return value.
      */
-    topOrBottomBorder(target) {
-        let rowElement = [];
+    topOrBottomBorder(target, isBorderNeed = true) {
         const element = closest(target, 'tr');
-        rowElement = element ? [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse')) : [];
-        if (rowElement.length) {
-            if (this.dropPosition === 'topSegment') {
-                this.addRemoveClasses(rowElement, true, 'e-droptop');
-                if (this.parent.element.getElementsByClassName('e-lastrow-dragborder').length > 0) {
-                    this.parent.element.getElementsByClassName('e-lastrow-dragborder')[0].remove();
-                }
-            }
-            if (this.dropPosition === 'bottomSegment') {
-                this.addRemoveClasses(rowElement, true, 'e-dropbottom');
+        const rowElements = element ?
+            Array.from(element.querySelectorAll('.e-rowcell, .e-rowdragdrop, .e-detailrowcollapse')) : [];
+        if (!rowElements.length) {
+            return;
+        }
+        const classAction = isBorderNeed ? this.addRemoveClasses.bind(this, rowElements, true) : this.addRemoveClasses.bind(this, rowElements, false, 'e-dragborder');
+        if (this.dropPosition === 'topSegment') {
+            classAction('e-droptop');
+            const lastRowDragBorder = this.parent.element.querySelector('.e-lastrow-dragborder');
+            if (lastRowDragBorder) {
+                lastRowDragBorder.remove();
             }
         }
+        if (this.dropPosition === 'bottomSegment') {
+            classAction('e-dropbottom');
+        }
     }
     /**
      * Removes the drop border classes ('e-dropbottom' and 'e-droptop') from the parent element if present.
@@ -8901,6 +9288,9 @@ class RowDD {
     removetopOrBottomBorder() {
         let border = [];
         border = [].slice.call(this.parent.element.querySelectorAll('.e-dropbottom, .e-droptop'));
+        if (this.parent.rowDropSettings.targetID) {
+            border = [].slice.call(document.querySelectorAll('.e-dropbottom, .e-droptop'));
+        }
         if (border.length) {
             this.addRemoveClasses(border, false, 'e-dropbottom');
             this.addRemoveClasses(border, false, 'e-droptop');
@@ -8956,18 +9346,29 @@ class RowDD {
         }
         cloneElement.style.cursor = '';
         const rowEle = args.target ? closest(args.target, 'tr') : null;
-        const rowIdx = rowEle ? rowEle.rowIndex : -1;
+        let rowIdx = -1;
+        if (!isNullOrUndefined(this.parent.detailTemplate)) {
+            rowIdx = rowEle ? this.parent.getDataRows().indexOf(rowEle) : -1;
+        }
+        else {
+            rowIdx = rowEle ? rowEle.rowIndex : -1;
+        }
         if (rowIdx === -1) {
             this.canDrop = false;
             this.addErrorElem();
-            if (isNullOrUndefined(tObj.rowDropSettings.targetID)) {
-                this.removetopOrBottomBorder();
-                this.removeChildBorder();
-            }
+            this.removetopOrBottomBorder();
+            this.removeChildBorder();
             return;
         }
         const dragRecords = Array.isArray(args.data) ? args.data : [args.data];
-        const droppedRecord = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+        let droppedRecord = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+        if (tObj.rowDropSettings.targetID) {
+            const dropElement = parentsUntil(args.target, 'e-treegrid');
+            if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
+                const srcControl = dropElement.ej2_instances[0];
+                droppedRecord = srcControl.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+            }
+        }
         this.removeErrorElem();
         this.canDrop = true;
         this.ensuredropPosition(dragRecords, droppedRecord);
@@ -8979,6 +9380,7 @@ class RowDD {
             if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
                 const srcControl = dropElement.ej2_instances[0];
                 srcControl.rowDragAndDropModule.updateIcon(args.rows, rowIdx, args);
+                this.dropPosition = srcControl.rowDragAndDropModule.dropPosition;
             }
         }
         if (args.target && closest(args.target, '#' + tObj.rowDropSettings.targetID)) {
@@ -8999,13 +9401,13 @@ class RowDD {
         const parentItem = 'parentItem';
         if (!tObj.rowDropSettings.targetID) {
             if (parentsUntil(args.target, 'e-content') || (this.dropPosition === 'Invalid' || !this.canDrop)) {
-                if (this.parent.element.querySelector('.e-errorelem')) {
+                if (this.parent.element.querySelector('.e-errorelem') || !this.canDrop) {
                     this.dropPosition = 'Invalid';
                 }
                 setValue('dropPosition', this.dropPosition, args);
                 tObj.trigger(rowDrop, args);
                 if (!args.cancel) {
-                    if (!isCountRequired(this.parent) && this.dropPosition === 'Invalid') {
+                    if (!isCountRequired(this.parent) && (this.dropPosition === 'Invalid' && !this.canDrop)) {
                         return;
                     }
                     if (!isCountRequired(this.parent)) {
@@ -9022,9 +9424,15 @@ class RowDD {
         else {
             if (args.target && closest(args.target, '#' + tObj.rowDropSettings.targetID) || parentsUntil(args.target, 'e-treegrid') &&
                 parentsUntil(args.target, 'e-treegrid').id === tObj.rowDropSettings.targetID || args.target && document.getElementById(tObj.rowDropSettings.targetID)) {
+                if (this.parent.element.querySelector('.e-errorelem') || !this.canDrop) {
+                    this.dropPosition = 'Invalid';
+                }
                 setValue('dropPosition', this.dropPosition, args);
                 tObj.trigger(rowDrop, args);
                 if (!args.cancel && tObj.rowDropSettings.targetID) {
+                    if (this.dropPosition === 'Invalid' && !this.canDrop) {
+                        return;
+                    }
                     this.dragDropGrid(args);
                     if (tObj.isLocalData) {
                         tObj.flatData = this.orderToIndex(tObj.flatData);
@@ -9156,13 +9564,13 @@ class RowDD {
         }
     }
     /**
-     * Retrieves the index of the target row based on its 'data-rowindex' attribute.
+     * Retrieves the index of the target row based on its 'aria-rowindex' attribute.
      *
      * @param {Element} targetRow - The target row element from which to retrieve the index.
      * @returns {number} - The index of the target row, or 0 if the targetRow is null or undefined.
      */
     getTargetIdx(targetRow) {
-        return targetRow ? parseInt(targetRow.getAttribute('data-rowindex'), 10) : 0;
+        return targetRow ? parseInt(targetRow.getAttribute('aria-rowindex'), 10) - 1 : 0;
     }
     /**
      * Retrieves the parent data of a given record during a row drag-and-drop operation.
@@ -9225,7 +9633,13 @@ class RowDD {
                     this.droppedRecord = tObj.getCurrentViewRecords()[parseInt(index.toString(), 10)];
                 }
                 else {
-                    this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
+                    if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+                        const rowsObject = this.parent.grid.getRowsObject();
+                        this.droppedRecord = rowsObject.length > 0 ? rowsObject[args.dropIndex].data : undefined;
+                    }
+                    else {
+                        this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
+                    }
                 }
             }
             let dragRecords = [];
@@ -9756,6 +10170,7 @@ class RowDD {
     }
     /**
      * Cleans up resources, event listeners, and DOM elements when the TreeGrid component is destroyed.
+     *
      * @returns {void}
      */
     destroy() {
@@ -9795,7 +10210,7 @@ var __decorate$c = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Configures the row drop settings of the TreeGrid.
+ * Configures the settings for row dragging and dropping within the TreeGrid, allowing for enhanced user interaction and data manipulation capabilities.
  */
 class RowDropSettings extends ChildProperty {
 }
@@ -9835,7 +10250,8 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
         if (!isNullOrUndefined(notifyArgs.virtualInfo)) {
             if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
                 if (!((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
-                    && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent) || isRemoteData(this.parent))) {
+                    && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent))
+                    || notifyArgs.virtualInfo.blockIndexes.length === 1) {
                     notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
                 }
             }
@@ -9844,7 +10260,7 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
             }
         }
         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) || isRemoteData(this.parent)) {
+            && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent)) {
             return super.generateRows(data, notifyArgs);
         }
         else {
@@ -9865,7 +10281,7 @@ class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
         const clear = ['paging', 'refresh', 'sorting', 'filtering', 'searching', 'reorder',
             'save', 'delete'].some((value) => action === value);
         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) || isRemoteData(this.parent)) {
+            && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent)) {
             const model = 'model';
             const currentPage = this[`${model}`].currentPage;
             if (clear) {
@@ -10644,7 +11060,7 @@ class Page {
         return newResults;
     }
     updatePageSize(pageingDetails) {
-        const updateSize = pageingDetails.result.length;
+        const updateSize = pageingDetails.count;
         const gridPagerModule = this.parent.grid.pagerModule;
         if (this.parent.pageSettings.pageSizes === true) {
             if (gridPagerModule.pagerObj.pagerdropdownModule['dropDownListObject'].value === gridPagerModule.pagerObj.getLocalizedLabel('All')) {
@@ -11047,7 +11463,7 @@ class Aggregate {
         const cellElement = createElement('td', {
             className: 'e-summary'
         });
-        if (this.parent.isReact) {
+        if (this.parent.isReact && typeof (summaryColumn.footerTemplate) !== 'string') {
             const renderReactTemplates = 'renderReactTemplates';
             tempObj.fn(single[summaryColumn.columnName], this.parent, tempObj.property, '', null, null, cellElement);
             this.parent[`${renderReactTemplates}`]();
@@ -11663,7 +12079,7 @@ class BatchEdit {
             focusModule.getContent().matrix.current = [actualIndex, focusModule.getContent().matrix.current[1]];
             if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex']) && !this.parent.editModule['isAddedRowByContextMenu']) {
                 const newlyAddedRecords = this.parent.getBatchChanges()['addedRecords'];
-                const index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[newlyAddedRecords.length - 1].getAttribute('data-rowindex'), 10);
+                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]);
             }
         }
@@ -11692,7 +12108,7 @@ class BatchEdit {
             childs = findChildrenRecords(data);
             uid = this.parent.getSelectedRows()[0].getAttribute('data-uid');
         }
-        const parentRowIndex = parseInt(this.parent.grid.getRowElementByUID(uid).getAttribute('data-rowindex'), 10);
+        const parentRowIndex = parseInt(this.parent.grid.getRowElementByUID(uid).getAttribute('aria-rowindex'), 10) - 1;
         if (childs.length) {
             const totalCount = parentRowIndex + childs.length;
             const firstChildIndex = parentRowIndex + 1;
@@ -11729,7 +12145,7 @@ class BatchEdit {
     updateRowIndex() {
         const rows = this.parent.grid.getDataRows();
         for (let i = 0; i < rows.length; i++) {
-            rows[parseInt(i.toString(), 10)].setAttribute('data-rowindex', i.toString());
+            rows[parseInt(i.toString(), 10)].setAttribute('aria-rowindex', (i + 1).toString());
         }
     }
     updateChildCount(records) {
@@ -11858,7 +12274,7 @@ class BatchEdit {
                 if (this.parent.editModule['isAddedRowByMethod'] && addRecords.length && !isNullOrUndefined(this.parent.editModule['addRowIndex']) && !this.parent.editModule['isAddedRowByContextMenu']) {
                     addRecords.reverse();
                     for (let i = 0; i < addRecords.length; i++) {
-                        const index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[parseInt(i.toString(), 10)].getAttribute('data-rowindex'), 10);
+                        const index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[parseInt(i.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1;
                         data.splice(index, 0, addRecords[parseInt(i.toString(), 10)]);
                     }
                 }
@@ -11998,8 +12414,15 @@ class BatchEdit {
     nextCellIndex(args) {
         const index = 'index';
         const rowIndex = 'rowIndex';
+        const batchChanges = this.parent.getBatchChanges();
+        const deletedRecords = batchChanges.deletedRecords;
         if (this.parent.getSelectedRows().length) {
-            args[`${index}`] = this.parent.getSelectedRows()[0][`${rowIndex}`];
+            if (this.isAdd && deletedRecords.length > 0) {
+                args[`${index}`] = this.parent.getSelectedRecords()[0][`${index}`];
+            }
+            else {
+                args[`${index}`] = this.parent.getSelectedRows()[0][`${rowIndex}`];
+            }
         }
         else {
             args[`${index}`] = this.batchIndex;
@@ -12074,7 +12497,7 @@ class Edit {
         }
         if (e.target.classList.contains('e-treegridcollapse') || e.target.classList.contains('e-treegridexpand')) {
             const tr = parentsUntil(e.target, 'e-row');
-            const rowIndex = tr && parseInt(tr.getAttribute('data-rowindex'), 10);
+            const rowIndex = tr && parseInt(tr.getAttribute('aria-rowindex'), 10) - 1;
             if (!isNullOrUndefined(rowIndex) && rowIndex >= 0 && this.parent.allowPaging) {
                 /* eslint-disable-next-line */
                 this.parent.grid.getDataRows()[rowIndex].dataset.uid = this.parent.grid.contentModule.getRows()[rowIndex].uid;
@@ -12243,7 +12666,7 @@ class Edit {
         if (!(this.parent.grid.editSettings.allowEditing) || this.parent.grid.isEdit) {
             return;
         }
-        const column = this.parent.grid.getColumnByIndex(+target.closest('td.e-rowcell').getAttribute('data-colindex'));
+        const column = this.parent.grid.getColumnByIndex(+target.closest('td.e-rowcell').getAttribute('aria-colindex') - 1);
         if (this.parent.editSettings.mode === 'Cell' && !this.isOnBatch && column && !column.isPrimaryKey &&
             this.parent.editSettings.allowEditing && column.allowEditing && !(target.classList.contains('e-treegridexpand') ||
             target.classList.contains('e-treegridcollapse')) && this.parent.editSettings.allowEditOnDblClick) {
@@ -12251,8 +12674,8 @@ class Edit {
             this.parent.grid.setProperties({ selectedRowIndex: args.rowIndex }, true);
             if (this.parent.enableVirtualization) {
                 const tr = parentsUntil(args.target, 'e-row');
-                this.prevAriaRowIndex = tr.getAttribute('data-rowindex');
-                tr.setAttribute('data-rowindex', tr.rowIndex + '');
+                this.prevAriaRowIndex = tr.getAttribute('aria-rowindex');
+                tr.setAttribute('aria-rowindex', (tr.rowIndex + 1) + '');
             }
             this.updateGridEditMode('Batch');
         }
@@ -12295,7 +12718,7 @@ class Edit {
         const prom = args[`${promise}`];
         delete args[`${promise}`];
         if (this.parent.enableVirtualization && !isNullOrUndefined(this.prevAriaRowIndex) && this.prevAriaRowIndex !== '-1') {
-            args.row.setAttribute('data-rowindex', this.prevAriaRowIndex);
+            args.row.setAttribute('aria-rowindex', this.prevAriaRowIndex);
             this.prevAriaRowIndex = undefined;
         }
         if (this.keyPress !== 'enter') {
@@ -12618,8 +13041,8 @@ class Edit {
             }
         }
         const rows = this.parent.grid.getDataRows();
-        const firstAriaIndex = rows.length ? +rows[0].getAttribute('data-rowindex') : 0;
-        const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
+        const firstAriaIndex = rows.length ? +rows[0].getAttribute('aria-rowindex') - 1 : 0;
+        const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
         const withinRange = this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
         const isVirtualization = this.parent.enableVirtualization && this.addRowIndex > -1 && this.prevAriaRowIndex !== '-1';
         if (this.parent.editSettings.mode !== 'Dialog') {
@@ -12670,7 +13093,7 @@ class Edit {
                 if (isVirtualization) {
                     this.prevAriaRowIndex = '-1';
                 }
-                if (!this.parent.enableVirtualization || this.parent.enableVirtualization && !Object.keys(this.parent.grid.contentModule['emptyRowData']).length) {
+                if (!this.parent.enableVirtualization || this.parent.enableVirtualization) {
                     this.isScrollByFocus = true;
                     focussedElement.focus();
                 }
@@ -12762,7 +13185,7 @@ class Edit {
                 this.selectedIndex = this.parent.grid.selectedRowIndex;
             }
             if (this.parent.enableVirtualization) {
-                let selector = '.e-row[data-rowindex="' + this.selectedIndex + '"]';
+                let selector = '.e-row[aria-rowindex="' + (this.selectedIndex + 1) + '"]';
                 let row;
                 if (this.selectedIndex > -1 && this.parent.editSettings.newRowPosition !== 'Top' &&
                     this.parent.editSettings.newRowPosition !== 'Bottom') {
@@ -12772,7 +13195,7 @@ class Edit {
                 }
                 else {
                     if (this.prevAriaRowIndex && this.prevAriaRowIndex !== '-1') {
-                        selector = '.e-row[data-rowindex="' + this.prevAriaRowIndex + '"]';
+                        selector = '.e-row[aria-rowindex="' + (this.prevAriaRowIndex + 1) + '"]';
                         row = this.parent.getContent().querySelector(selector);
                         this.addRowIndex = row ? row.rowIndex : 0;
                     }
@@ -12865,7 +13288,7 @@ class Edit {
             const isVirtualization = this.parent.enableVirtualization && this.addRowIndex > -1 && this.prevAriaRowIndex !== '-1';
             const rows = this.parent.getRows();
             const firstAriaIndex = rows.length ? currentData.indexOf(currentData[0]) : 0;
-            const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
+            const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
             const withinRange = this.parent.enableVirtualization && args.index !== 0 ? true :
                 this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
             if (currentData.length) {
@@ -13059,7 +13482,7 @@ class Edit {
     closeEdit() {
         if (this.parent.enableVirtualization && this.parent.grid.editSettings.mode === 'Batch' && this.parent.grid.pageSettings.currentPage > 1) {
             this.editedRowIndex = this.parent.grid.editModule.editModule['cellDetails'].rowIndex;
-            this.parent.grid.editModule.editModule['cellDetails'].rowIndex = parseInt(this.parent.getRows()[this.parent.grid.editModule.editModule['cellDetails'].rowIndex].getAttribute('data-rowIndex'), 10);
+            this.parent.grid.editModule.editModule['cellDetails'].rowIndex = parseInt(this.parent.getRows()[this.parent.grid.editModule.editModule['cellDetails'].rowIndex].getAttribute('aria-rowIndex'), 10) - 1;
         }
         this.parent.grid.editModule.closeEdit();
     }
@@ -13211,6 +13634,11 @@ class DetailRow {
     }
 }
 
+/**
+ * VirtualTreeContentRenderer
+ *
+ * @hidden
+ */
 class VirtualTreeContentRenderer extends VirtualContentRenderer {
     constructor(parent, locator) {
         super(parent, locator);
@@ -13230,23 +13658,45 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
     getModelGenerator() {
         return new TreeVirtualRowModelGenerator(this.parent);
     }
+    /**
+     * Retrieves the row element for a given row index.
+     *
+     * @param {number} index - The index of the row to retrieve.
+     * @returns {Element} The row element at the specified index.
+     */
     getRowByIndex(index) {
         if (this.parent.enableVirtualization && this.parent.isFrozenGrid()) {
             return this.getRowCollection(index, true);
         }
         const dataRows = this.parent.getDataRows();
-        const targetRow = dataRows.find((e) => parseInt(e.getAttribute('data-rowindex'), 10) === index);
+        const targetRow = dataRows.find((e) => parseInt(e.getAttribute('aria-rowindex'), 10) - 1 === index);
         if (!targetRow && this.parent.isEdit && this.parent.editSettings.mode === 'Batch') {
             return index != null ? this.parent.getRows()[parseInt(index.toString(), 10)] : undefined;
         }
         return targetRow;
     }
+    /**
+     * Retrieves the frozen right virtual row element by its index.
+     *
+     * @param {number} index - The index of the row to be retrieved.
+     * @returns {Element} The DOM element representing the frozen right virtual row.
+     */
     getFrozenRightVirtualRowByIndex(index) {
         return this.getRowCollection(index, false, false, true);
     }
+    /**
+     * Retrieves the row or record from the virtual tree grid based on the provided index.
+     * Considers conditions such as frozen rows and pagination for accurate retrieval.
+     *
+     * @param {number} index - The index of the desired row or record.
+     * @param {boolean} isMovable - Specifies if the content is movable.
+     * @param {boolean} [isRowObject] - Optional. Determines if the return value should be a row object.
+     * @param {boolean} [isFrozenRight] - Optional. Used for determining frozen right rows.
+     * @returns {Element | Object} - The HTML element or row object.
+     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getRowCollection(index, isMovable, isRowObject, isFrozenRight) {
-        const startIdx = parseInt(this.parent.getRows()[0].getAttribute(dataRowIndex), 10);
+        const startIdx = parseInt(this.parent.getRows()[0].getAttribute(ariaRowIndex), 10) - 1;
         const rowCollection = this.parent.getDataRows();
         const collection = isRowObject ? this.parent.getCurrentViewRecords() : rowCollection;
         let selectedRow = collection[index - startIdx];
@@ -13260,12 +13710,27 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                     this.parent.getRowsObject()[parseInt(index.toString(), 10)].data : selectedRow;
             }
         }
+        if (selectedRow == null && index != null && this.parent.editSettings.mode === 'Batch' && this.parent.isEdit && isMovable) {
+            selectedRow = rowCollection[parseInt(index.toString(), 10)];
+        }
         return selectedRow;
     }
+    /**
+     * @hidden
+     * @returns {void}
+     */
     addEventListener() {
         this.parent.on(virtualActionArgs, this.virtualOtherAction, this);
         this.parent.on(indexModifier, this.indexModifier, this);
     }
+    /**
+     * Handles virtual scrolling actions based on the provided arguments.
+     *
+     * @param {Object} args - The argument object.
+     * @param {boolean} args.setTop - Determines if the virtual scroll position should reset to top.
+     * @param {boolean} args.isExpandCollapse - Determines if the action is part of an expand/collapse operation.
+     * @returns {void}
+     */
     virtualOtherAction(args) {
         if (args.setTop) {
             this.translateY = 0;
@@ -13276,10 +13741,22 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.isExpandCollapse = true;
         }
     }
+    /**
+     * Modifies the index based on various conditions such as record addition, deletion, or data source changes.
+     *
+     * @private
+     * @param {Object} args - Contains parameters for the current operation.
+     * @param {number} args.startIndex - The starting index for the modification.
+     * @param {number} args.endIndex - The ending index for the modification.
+     * @param {number} args.count - The number of items affected in the operation.
+     * @param {string} args.requestType - The type of request, such as 'insert', 'delete', or 'update'.
+     * @returns {void}
+     */
     indexModifier(args) {
         const content = this.parent.getContent().querySelector('.e-content');
+        const pageSize = this.parent.pageSettings.pageSize;
         if ((this.recordAdded || args.requestType === 'delete' && this.endIndex > args.count - this.parent.pageSettings.pageSize) && this.startIndex > -1 && this.endIndex > -1) {
-            if (this.endIndex > args.count - this.parent.pageSettings.pageSize) {
+            if (this.endIndex > args.count - pageSize) {
                 const nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
                 let lastIndex = nextSetResIndex + this.parent.getRows().length;
                 if (lastIndex > args.count) {
@@ -13297,12 +13774,12 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
         if (this.isDataSourceChanged) {
             this.startIndex = 0;
-            this.endIndex = this.parent.pageSettings.pageSize - 1;
+            this.endIndex = pageSize - 1;
         }
-        if ((this.endIndex - this.startIndex !== this.parent.pageSettings.pageSize) &&
-            (this.totalRecords > this.parent.pageSettings.pageSize)
+        if ((this.endIndex - this.startIndex !== pageSize) &&
+            (this.totalRecords > pageSize)
             && (this.endIndex === this.totalRecords)) {
-            args.startIndex = this.endIndex - this.parent.pageSettings.pageSize;
+            args.startIndex = this.endIndex - pageSize;
             args.endIndex = this.endIndex;
         }
         else {
@@ -13310,6 +13787,12 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             args.endIndex = this.endIndex;
         }
     }
+    /**
+     * Handles the addition or removal of event listeners for virtual scrolling in a TreeGrid.
+     *
+     * @param {string} action - The action to perform, either 'on' or 'off'.
+     * @returns {void}
+     */
     eventListener(action) {
         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)) {
@@ -13335,6 +13818,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.parent.addEventListener('rowSelected', this.rowSelectedEvent.bind(this));
             this.parent[`${action}`]('select-virtual-Row', this.toSelectVirtualRow, this);
             this.parent.on('content-ready', this.fn, this);
+            this.parent.addEventListener(actionBegin, this.handleActionBegin.bind(this));
             this.parent.addEventListener(actionComplete, this.onActionComplete.bind(this));
             this.parent[`${action}`]('virtual-scroll-edit-action-begin', this.beginEdit, this);
             this.parent[`${action}`]('virtual-scroll-add-action-begin', this.beginAdd, this);
@@ -13345,15 +13829,30 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.parent[`${action}`]('select-row-on-context-open', this.toSelectRowOnContextOpen, this);
             this.parent[`${action}`]('refresh-virtual-editform-cells', this.refreshCell, this);
             this.parent[`${action}`]('virtaul-cell-focus', this.cellFocus, this);
+            this.parent[`${action}`]('virtual-scroll-edit', this.restoreEditState, this);
         }
         else {
             super.eventListener('on');
         }
     }
+    /**
+     * Handles cell focus transitions in a virtualized tree grid component
+     * when a keyboard event is triggered.
+     *
+     * @param {KeyboardEventArgs} e - The keyboard event arguments that contain
+     *                                information about the key action.
+     * @returns {void}
+     */
     cellFocus(e) {
         const virtualCellFocus = 'virtualCellFocus';
         super[`${virtualCellFocus}`](e);
     }
+    /**
+     * Handles the data ready event for the virtual tree grid content renderer.
+     *
+     * @param {NotifyArgs} [e] - The notification arguments that contain information about the data.
+     * @returns {void}
+     */
     onDataReady(e) {
         super.onDataReady(e);
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
@@ -13378,6 +13877,12 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             }
         }
     }
+    /**
+     * Renders the table for the virtual tree content. It sets up a new `TreeInterSectionObserver`
+     * based on certain conditions regarding the data source and counting requirements.
+     *
+     * @returns {void}
+     */
     renderTable() {
         super.renderTable();
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
@@ -13387,6 +13892,17 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.contents = this.getPanel().firstChild;
         }
     }
+    /**
+     * Calculates the translateY value for a virtual tree grid based on the scroll top, container height,
+     * and additional virtual scrolling information. This method specifically handles logic for remote
+     * data sources and ensures smooth scrolling with respect to expansion states.
+     *
+     * @param {number} sTop - The scroll top position.
+     * @param {number} cHeight - The height of the container.
+     * @param {VirtualInfo} [info] - Optional virtual scrolling information.
+     * @param {boolean} [isOnenter] - Flag indicating if the scroll event is on enter.
+     * @returns {number} The calculated translateY value.
+     */
     getTranslateY(sTop, cHeight, info, isOnenter) {
         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)) {
@@ -13394,15 +13910,15 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 this.isRemoteExpand = false;
                 return this.preTranslate;
             }
-            else {
-                this.preTranslate = super.getTranslateY(sTop, cHeight, info, isOnenter);
-                return super.getTranslateY(sTop, cHeight, info, isOnenter);
-            }
-        }
-        else {
-            return super.getTranslateY(sTop, cHeight, info, isOnenter);
+            this.preTranslate = super.getTranslateY(sTop, cHeight, info, isOnenter);
         }
+        return super.getTranslateY(sTop, cHeight, info, isOnenter);
     }
+    /**
+     * Handles the dataBound event to calculate and set the initial row top position for the grid.
+     *
+     * @returns {void}
+     */
     dataBoundEvent() {
         const dataBoundEve = 'dataBound';
         const initialRowTop = 'initialRowTop';
@@ -13419,11 +13935,27 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
         super[`${dataBoundEve}`]();
     }
+    /**
+     * Handles the row selection event for virtual tree grid rows.
+     * It invokes the base class's rowSelected method and notifies
+     * the parent component about a virtual transformation change.
+     *
+     * @param {RowSelectEventArgs} args - The arguments related to the row selection event.
+     * @returns {void} This method does not return a value.
+     */
     rowSelectedEvent(args) {
         const rowSelected = 'rowSelected';
         super[`${rowSelected}`](args);
         this.parent.notify('virtualTransform', { requestType: 'transformChange' });
     }
+    /**
+     * Handles virtual row selection in TreeGrid.
+     *
+     * @param {Object} args - The argument object containing the selected index.
+     * @param {number} args.selectedIndex - The index of the row to be selected.
+     *
+     * @returns {void}
+     */
     toSelectVirtualRow(args) {
         if (this.parent.isEdit) {
             return;
@@ -13446,9 +13978,20 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             super[`${selectVirtualRow}`](args);
         }
     }
+    /**
+     * Refreshes the cells for the given row object by regenerating them.
+     *
+     * @param {Row<Column>} rowObj - The row object for which the cells need to be refreshed.
+     * @returns {void} This method does not return any value.
+     */
     refreshCell(rowObj) {
         rowObj.cells = this.generateCells();
     }
+    /**
+     * Generates an array of cells for each column in the parent.
+     *
+     * @returns {Cell<Column>[]} An array of cells for the corresponding columns.
+     */
     generateCells() {
         const cells = [];
         for (let i = 0; i < this.parent.columns.length; i++) {
@@ -13456,6 +13999,18 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
         return cells;
     }
+    /**
+     * Generates a cell object with provided column and row configurations.
+     *
+     * @param {Column} col - The Column object which holds the column configuration.
+     * @param {string} [rowId] - An optional string that represents the row ID.
+     * @param {CellType} [cellType] - An optional CellType enum to specify the type of the cell.
+     * @param {number} [colSpan] - An optional number to specify the column span of the cell.
+     * @param {number} [oIndex] - An optional number for the order index of the cell.
+     * @param {Object} [foreignKeyData] - An optional object for foreign key data associated with the column.
+     *
+     * @returns {Cell<Column>} Returns a newly created Cell object of type Column.
+     */
     generateCell(col, rowId, cellType, colSpan, oIndex, foreignKeyData) {
         const opt = {
             'visible': col.visible,
@@ -13474,13 +14029,29 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         }
         return new Cell(opt);
     }
+    /**
+     * Begins the edit operation for a specified row in the grid.
+     * Updates the `editedRowIndex` and assigns row data to the event data.
+     *
+     * @param {{ data: Object, index: number }} e - An object containing the row data and index.
+     * @param {Object} e.data - The data of the row to be edited.
+     * @param {number} e.index - The index of the row to be edited.
+     * @returns {void}
+     */
     beginEdit(e) {
         this['editedRowIndex'] = e.index;
-        const selector = '.e-row[data-rowindex="' + e.index + '"]';
+        const selector = '.e-row[aria-rowindex="' + (e.index + 1) + '"]';
         const index = this.parent.getContent().querySelector(selector).rowIndex;
         const rowData = this.parent.getCurrentViewRecords()[parseInt(index.toString(), 10)];
         e.data = rowData;
     }
+    /**
+     * Begins the process of adding a new row in the tree grid.
+     *
+     * @param {Object} args - The arguments for adding a new row.
+     * @param {boolean} args.startEdit - A flag indicating whether to start editing.
+     * @returns {void}
+     */
     beginAdd(args) {
         const addAction = 'addActionBegin';
         const isAdd = 'isAdd';
@@ -13490,8 +14061,8 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         this.addRowIndex = addArgs.addRowIndex;
         this.dataRowIndex = addArgs.dataRowIndex;
         const rows = this.parent.getRows();
-        const firstAriaIndex = rows.length ? +rows[0].getAttribute('data-rowindex') : 0;
-        const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
+        const firstAriaIndex = rows.length ? +rows[0].getAttribute('aria-rowindex') - 1 : 0;
+        const lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
         const withInRange = this.parent.selectedRowIndex >= firstAriaIndex && this.parent.selectedRowIndex <= lastAriaIndex;
         if (!(this.rowPosition === 'Top' || this.rowPosition === 'Bottom')) {
             this[`${isAdd}`] = true;
@@ -13501,10 +14072,21 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             super[`${addAction}`](args);
         }
     }
+    /**
+     * Restores the edit state of the tree grid content. This method calls the
+     * base class method to handle the restoration logic.
+     *
+     * @returns {void} This method does not return any value.
+     */
     restoreEditState() {
         const restoreEdit = 'restoreEdit';
         super[`${restoreEdit}`]();
     }
+    /**
+     * Resets the edit state if certain conditions are met.
+     *
+     * @returns {void}
+     */
     resetIseditValue() {
         const resetIsEdit = 'resetIsedit';
         const isAdd = 'isAdd';
@@ -13513,6 +14095,12 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             super[`${resetIsEdit}`]();
         }
     }
+    /**
+     * Handles the successful editing operation when virtual scrolling is enabled.
+     * Checks if a row has been added to the tree grid and sets the `recordAdded` flag accordingly.
+     *
+     * @returns {void}
+     */
     virtualEditSuccess() {
         const isAdd = 'isAdd';
         const content = this.parent.getContent().querySelector('.e-content');
@@ -13520,14 +14108,33 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.recordAdded = true;
         }
     }
+    /**
+     * Cancels the edit operation for the provided data.
+     *
+     * @param {Object} args - The arguments containing the data to cancel edit for.
+     * @param {Object} args.data - The specific data object for which the edit operation needs to be canceled.
+     * @returns {void}
+     */
     cancelEdit(args) {
         const editCancel = 'editCancel';
         super[`${editCancel}`](args);
     }
+    /**
+     * Handles the action of selecting a row when the context menu is opened.
+     *
+     * @param {Object} args - An object containing related parameters.
+     * @param {boolean} args.isOpen - A flag indicating whether the context menu is open.
+     * @returns {void} This method does not return any value.
+     */
     toSelectRowOnContextOpen(args) {
         const selectRowOnContextOpen = 'selectRowOnContextOpen';
         super[`${selectRowOnContextOpen}`](args);
     }
+    /**
+     * Restores a new row in the grid when necessary by adding it back to the content.
+     *
+     * @returns {void} This method does not return any value.
+     */
     restoreNewRow() {
         const isAdd = 'isAdd';
         const content = this.parent.getContent().querySelector('.e-content');
@@ -13536,10 +14143,41 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             this.parent.editModule.addRecord(null, this.parent.root.editModule.selectedIndex);
         }
     }
+    /**
+     * Retrieves virtual data for operations like adding or canceling rows in the grid.
+     *
+     * @param {Object} data - An object containing properties to determine the virtual data processing.
+     * @param {Object} data.virtualData - The virtual data object to be processed.
+     * @param {boolean} data.isAdd - A boolean indicating if the operation is an addition.
+     * @param {boolean} data.isCancel - A boolean indicating if the operation is a cancellation.
+     * @returns {void} This method does not return any value.
+     */
     getData(data) {
         const getVirtualData = 'getVirtualData';
         super[`${getVirtualData}`](data);
     }
+    /**
+     * Initiates the beginning of an action within the tree grid component.
+     * This method is invoked before any action is performed, allowing for
+     * any necessary modifications or cancellations of the upcoming action.
+     *
+     * @param {NotifyArgs} args - The arguments associated with the action,
+     * providing context and specifics about what is being commenced.
+     * @returns {void}
+     */
+    handleActionBegin(args) {
+        const actionBegin = 'actionBegin';
+        super[`${actionBegin}`](args);
+    }
+    /**
+     * Handles the completion of various actions, such as adding a new row.
+     * Updates row positions and indexes based on the action completed.
+     *
+     * @param {NotifyArgs} args - An object containing the details of the completed action.
+     *               Specifically, it includes the `requestType` which determines the type
+     *               of action that was completed.
+     * @returns {void} This method does not return any value.
+     */
     onActionComplete(args) {
         if (args.requestType === 'add') {
             const addArgs = { newRowPosition: this.rowPosition, addRowIndex: this.addRowIndex, dataRowIndex: this.dataRowIndex };
@@ -13551,6 +14189,19 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         const actionComplete = 'actionComplete';
         super[`${actionComplete}`](args);
     }
+    /**
+     * Creates a callback function to be executed during virtual scrolling actions.
+     * This function handles the adjustment of virtual elements and rendering logic,
+     * particularly optimizing for non-IE browsers, wheel events, and virtual masks.
+     *
+     * @returns {Function} A function that handles scrolling and adjusts table rendering.
+     * @param {HTMLElement} element - The HTML element involved in the action.
+     * @param {SentinelType} current - The type of sentinel indicating the scroll.
+     * @param {string} direction - The scroll direction.
+     * @param {Offsets} e - The offset values indicating the current scroll position.
+     * @param {boolean} isWheel - Indicates if the scrolling was initiated by a mouse wheel.
+     * @param {boolean} check - A boolean flag for additional control logic.
+     */
     onEnteredAction() {
         return (element, current, direction, e, isWheel, check) => {
             const directVirtualRender = 'directVirtualRender';
@@ -13592,8 +14243,17 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             }
         };
     }
+    /**
+     * Handles scroll events to manage virtual scrolling and row rendering.
+     * Adjusts view information, row indexes, and translates viewport positioning
+     * based on the given scroll arguments.
+     *
+     * @param {ScrollArg} scrollArgs - Contains the scroll offsets, sentinel information, direction of scroll, and other related details.
+     * @returns {void} - No return value. It adjusts scrolling state internally.
+     */
     scrollListeners(scrollArgs) {
         this['scrollAfterEdit']();
+        this.shouldPreventScrolling(scrollArgs);
         if (this.parent.root.enablePersistence) {
             this.parent.root.scrollPosition = scrollArgs.offset;
         }
@@ -13613,9 +14273,11 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         if (upScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') && !isNullOrUndefined(content)) {
             const vHeight = +(this.parent.height.toString().indexOf('%') < 0 ? parseInt(this.parent.height.toString(), 10) :
                 this.parent.element.getBoundingClientRect().height);
-            let index = (~~(content.scrollTop / rowHeight)
-                + Math.ceil(vHeight / rowHeight))
-                - this.parent.pageSettings.pageSize;
+            // Calculate the integer number of rows that are scrolled past plus the number of rows that fit within the visible height
+            const scrolledRows = Math.floor(content.scrollTop / rowHeight);
+            const visibleRows = Math.ceil(vHeight / rowHeight);
+            // Calculate the index by subtracting the page size from the total rows taken into account
+            let index = scrolledRows + visibleRows - this.parent.pageSettings.pageSize;
             index = (index > 0) ? index : 0;
             if (!isNullOrUndefined(this[`${selectedRowIndex}`]) && this[`${selectedRowIndex}`] !== -1 && index !== this[`${selectedRowIndex}`] &&
                 ((this.parent.rowHeight * this.parent.pageSettings.pageSize) < content.scrollTop) && !this.parent.allowRowDragAndDrop) {
@@ -13692,20 +14354,19 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 this.parent.selectionModule && this.parent.selectionModule.isRowSelected) {
                 this.startIndex = currentViewData[0][`${indexValue}`] + (this.parent.pageSettings.pageSize / 2);
             }
-            if (this.parent.root.isSelfReference) {
-                const selectedIndex = this.parent.root.selectedRowIndex;
-                this.startIndex = selectedIndex !== -1 && selectedIndex !== this.startIndex ? this.startIndex - 1 : this.startIndex;
-            }
             if (scrollArgs.offset.top > (rowHeight * this.totalRecords)) {
                 this.translateY = this.getTranslateY(scrollArgs.offset.top, content.getBoundingClientRect().height);
             }
             else {
                 if (this.totalRecords === this.endIndex) {
-                    if (isLastBlock) {
-                        this.translateY = (this.totalRecords * rowHeight) - (this.parent.pageSettings.pageSize * rowHeight);
-                    }
-                    else {
-                        this.translateY = (this.totalRecords * rowHeight) - ((this.endIndex - this.startIndex) * rowHeight);
+                    if (this.totalRecords === this.endIndex) {
+                        if (this.parent.isEdit) {
+                            this.translateY = ((this.totalRecords * rowHeight) - (this.parent.pageSettings.pageSize * rowHeight))
+                                + rowHeight;
+                        }
+                        else {
+                            this.translateY = (this.totalRecords * rowHeight) - (this.parent.pageSettings.pageSize * rowHeight);
+                        }
                     }
                 }
                 else {
@@ -13718,24 +14379,23 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 }
             }
         }
-        if (isRemoteData(this.parent) || ((downScroll && (scrollArgs.offset.top < (rowHeight * this.totalRecords)))
+        if (((downScroll && scrollArgs.direction !== 'up' && (scrollArgs.offset.top < (rowHeight * this.totalRecords)))
             || (upScroll)) || (scrollArgs.direction === 'right' || scrollArgs.direction === 'left') ||
             ((this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
                 && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') && (downScroll || upScroll) || isCountRequired(this.parent))) {
             const viewInfo = this.currentInfo = getValue('getInfoFromView', this).apply(this, [scrollArgs.direction, info, scrollArgs.offset]);
             this.previousInfo = viewInfo;
-            if (this.prevInfo && ((info.axis === 'Y' && this.prevInfo.blockIndexes.toString() === viewInfo.blockIndexes.toString())
+            if (this.prevInfo && viewInfo.event !== 'refresh-virtual-block' && ((info.axis === 'Y' && this.prevInfo.blockIndexes.toString() === viewInfo.blockIndexes.toString())
                 || ((info.axis === 'X' && this.prevInfo.columnIndexes.toString() === viewInfo.columnIndexes.toString())
                     || (this.parent.isFrozenGrid() && this.parent.getVisibleFrozenLeftCount() >= viewInfo.columnIndexes[0]
                         && this.prevInfo.columnIndexes.toString().includes(viewInfo.columnIndexes.toString()))))) {
                 this.parent.removeMaskRow();
-                this.parent.notify('removeGanttShimmer', { requestType: 'hideShimmer' });
                 if (Browser.isIE) {
                     this.parent.hideSpinner();
                 }
                 this.requestType = this.requestType === 'virtualscroll' ? this['empty'] : this.requestType;
                 if (info.axis === 'Y') {
-                    this['restoreEdit']();
+                    this.restoreEditState();
                 }
                 return;
             }
@@ -13763,9 +14423,32 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             }
         }
     }
+    /**
+     * Prevents scrolling under specific conditions related to adding a new row.
+     *
+     * @param {ScrollArg} scrollArgs - The scroll event arguments containing offset details.
+     * @returns {void}
+     */
+    shouldPreventScrolling(scrollArgs) {
+        const addedRow = this.parent.element.querySelector('.e-addedrow');
+        if (addedRow && this.rowPosition !== 'Top' && this.rowPosition !== 'Bottom' && scrollArgs.offset.top !== 0) {
+            this.parent.closeEdit();
+            return;
+        }
+    }
+    /**
+     * Appends content to the target element. Handles dynamic adjustments for remote data sources,
+     * frozen columns, and virtual scrolling.
+     *
+     * @param {HTMLElement} target - The target HTML element where content is to be appended.
+     * @param {DocumentFragment} newChild - The new content as a DocumentFragment to append.
+     * @param {NotifyArgs} e - Object containing information about the operation.
+     * @returns {void}
+     */
     appendContent(target, newChild, e) {
         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) || isRemoteData(this.parent)) {
+            && !this.parent.dataSource.dataSource.offline && this.parent.dataSource.dataSource.url !== '') || isCountRequired(this.parent)
+            || (this.parent.isFrozenGrid() && (e.requestType === undefined || !isNullOrUndefined(e.virtualInfo) && (e.virtualInfo.direction === 'right' || e.virtualInfo.direction === 'left')))) {
             if (getValue('isExpandCollapse', e)) {
                 this.isRemoteExpand = true;
             }
@@ -13793,6 +14476,9 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             target.appendChild(newChild);
             const replace = 'replaceWith';
             this.getTable().querySelector('tbody')[`${replace}`](target);
+            if (e.requestType === 'virtualscroll' && e.virtualInfo.sentinelInfo.axis === 'Y') {
+                this.isExpandCollapse = false;
+            }
             if (!this.isExpandCollapse || this.translateY === 0) {
                 this.translateY = this.translateY < 0 ? 0 : this.translateY;
                 getValue('virtualEle', this).adjustTable(cOffset, this.translateY);
@@ -13825,6 +14511,12 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
             super[`${ensureSelectedRowPosition}`]();
         }
     }
+    /**
+     * Unsubscribes all event listeners to prevent memory leaks.
+     * This method is called when the component is being destroyed or when event listeners need to be cleaned up.
+     *
+     * @returns {void}
+     */
     removeEventListener() {
         if (this.parent.isDestroyed) {
             return;
@@ -13845,6 +14537,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
         this.parent.off('select-row-on-context-open', this.toSelectRowOnContextOpen);
         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);
     }
 }
 class TreeInterSectionObserver extends InterSectionObserver {
@@ -13855,6 +14548,15 @@ class TreeInterSectionObserver extends InterSectionObserver {
         this.lastPos = 0;
         this.timer = 0;
     }
+    /**
+     * Sets up observers to monitor scroll events on a given container
+     * and its movable companion within a virtual grid setup.
+     *
+     * @param {Function} callback - Function to call when a scroll event is detected.
+     * @param {Function} onEnterCallback - Function to call when a specific event, like entering a region, is detected.
+     * @param {IGrid} instance - The grid instance that requires observation.
+     * @returns {void}
+     */
     observes(callback, onEnterCallback, instance) {
         const containerRect = 'containerRect';
         super[`${containerRect}`] = getValue('options', this).container.getBoundingClientRect();
@@ -13865,9 +14567,23 @@ class TreeInterSectionObserver extends InterSectionObserver {
             EventHandler.add(getValue('options', this).movableContainer, 'scroll', this.virtualScrollHandlers(callback, onEnterCallback, instance), this);
         }
     }
+    /**
+     * Clears the last known position.
+     *
+     * @returns {void} No value is returned from this function.
+     */
     clear() {
         this.lastPos = null;
     }
+    /**
+     * Handles virtual scrolling events and manages scroll direction and debouncing for rendering updates.
+     *
+     * @private
+     * @param {Function} callback - Function to call on scroll end.
+     * @param {Function} onEnterCallback - Function to call on entering a virtual scrolling area.
+     * @param {IGrid} instance - The grid instance on which virtual scrolling is being implemented.
+     * @returns {Function} - A function that processes scroll events.
+     */
     virtualScrollHandlers(callback, onEnterCallback, instance) {
         const delay = Browser.info.name === 'chrome' ? 200 : 100;
         const options = 'options';
@@ -13963,9 +14679,6 @@ class VirtualScroll {
         Grid.Inject(TreeVirtual);
         this.addEventListener();
     }
-    returnVisualData(args) {
-        args.data = this.visualData;
-    }
     /**
      * For internal use only - Get the module name.
      *
@@ -13999,28 +14712,58 @@ class VirtualScroll {
         this.parent.off(pagingActions, this.virtualPageAction);
         this.parent.off(destroy, this.destroy);
     }
+    /**
+     * Handles the virtual child collapse or expand action in a tree grid.
+     *
+     * @param {object} row - Object containing information about the collapse/expand action.
+     * @param {string} row.action - The type of action, either "collapse" or "expand".
+     * @param {HTMLTableRowElement} row.row - The HTML row element that is affected by the action.
+     * @param {ITreeData} row.record - The tree data record associated with the row.
+     * @param {RowCollapsedEventArgs} row.args - Additional event arguments related to the row collapse or expand.
+     *
+     * @returns {void} No return value as the function executes a procedure.
+     */
     collapseExpandVirtualchilds(row) {
         this.parent.grid.notify(virtualActionArgs, { isExpandCollapse: true });
         this.expandCollapseRec = row.record;
         row.record.expanded = row.action === 'collapse' ? false : true;
-        const ret = {
+        this.parent.flatData.map((e) => e.expanded = e.uniqueID === row.record.uniqueID &&
+            e.expanded !== row.record.expanded ? row.record.expanded : e.expanded);
+        const actionDetails = {
             result: this.parent.flatData,
             row: row.row,
             action: row.action,
             record: row.record,
             count: this.parent.flatData.length
         };
-        if (this.parent.enableVirtualization && this.parent.selectionSettings.mode === 'Cell' ||
-            this.parent.selectionSettings.mode === 'Row' && !this.parent.selectionSettings.persistSelection) {
+        this.handleSelection();
+        const requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
+        getValue('grid.renderModule', this.parent).dataManagerSuccess(actionDetails, { requestType: requestType });
+    }
+    /**
+     * Handles selection logic for the TreeGrid component.
+     *
+     * @returns {void}
+     */
+    handleSelection() {
+        if ((this.parent.selectionSettings.mode === 'Cell' ||
+            (this.parent.selectionSettings.mode === 'Row' && !this.parent.selectionSettings.persistSelection))) {
             this.parent.grid.clearSelection();
         }
         if (getValue('isCollapseAll', this.parent) && this.parent.selectionSettings.persistSelection && this.parent.getSelectedRecords().length > 0) {
             this.prevSelectedRecord = this.parent.getSelectedRecords();
             this.parent.grid.clearSelection();
         }
-        const requestType = getValue('isCollapseAll', this.parent) ? 'collapseAll' : 'refresh';
-        getValue('grid.renderModule', this.parent).dataManagerSuccess(ret, { requestType: requestType });
     }
+    /**
+     * Handles the action related to virtual scrolling with paging details.
+     *
+     * @param {Object} pageingDetails - Contains the result data, count of results, and action arguments.
+     * @param {ITreeData[]} pageingDetails.result - The result data to be handled.
+     * @param {number} pageingDetails.count - The count of results.
+     * @param {ActionEventArgs} pageingDetails.actionArgs - The action arguments related to the virtual page action.
+     * @returns {void}
+     */
     virtualPageAction(pageingDetails) {
         const dm = new DataManager(pageingDetails.result);
         const expanded = new Predicate$1('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
@@ -14050,7 +14793,7 @@ class VirtualScroll {
             if (requestType === 'filtering' || requestType === 'collapseAll' || requestType === 'searching' || (requestType === 'refresh' && getValue('isExpandAll', this.parent)) ||
                 (requestType === 'refresh' && this.parent.enableCollapseAll && endIndex > visualData.length && isNullOrUndefined(this.expandCollapseRec))) {
                 startIndex = 0;
-                endIndex = this.parent.grid.pageSettings.pageSize - 1;
+                endIndex = this.parent.grid.pageSettings.pageSize;
                 this.parent.grid.getContent().firstElementChild.scrollTop = 0;
                 this.parent.grid.notify(virtualActionArgs, { setTop: true });
             }
@@ -14090,10 +14833,9 @@ class VirtualScroll {
                     sIndex = sIndex > 0 ? sIndex : 0;
                     endIndex = visualData.length;
                     if (endIndex - startIndex < resourceCount) {
-                        const newRowsCount = sIndex - startIndex;
                         startIndex = sIndex;
                         if (visualData.indexOf(this.expandCollapseRec) > visualData.length - resourceCount / 2) {
-                            const newTranslateY = translateY + (newRowsCount * this.parent.grid.getRowHeight());
+                            const newTranslateY = startIndex * this.parent.grid.getRowHeight();
                             this.parent.grid.contentModule['translateY'] = newTranslateY;
                             this.parent.grid.contentModule.virtualEle.adjustTable(0, newTranslateY);
                         }
@@ -14116,7 +14858,7 @@ class VirtualScroll {
                 if (pageingDetails.count < this.parent.getRows()[0].getBoundingClientRect().height) {
                     startIndex = 0;
                 }
-                else if (!this.parent['isExpandAll']) {
+                else if (!this.parent['isExpandAll'] && this.parent.grid.contentModule['translateY'] === 0) {
                     startIndex = this.prevstartIndex === -1 ? 0 : this.prevstartIndex;
                 }
             }
@@ -14143,6 +14885,26 @@ class VirtualScroll {
     destroy() {
         this.removeEventListener();
     }
+    /**
+     * Updates the row selection when the header checkbox is clicked and the number of selected rows
+     * does not match the current view data length.
+     *
+     * @param {RowDeselectEventArgs} args - The arguments containing details of the row deselection event.
+     * @returns {void} - This method does not return a value.
+     */
+    updateSelection(args) {
+        if (args.isHeaderCheckboxClicked &&
+            this.parent.grid.currentViewData.length !== this.parent.grid.selectionModule.selectedRowIndexes.length) {
+            const updateRowSelection = 'updateRowSelection';
+            for (let i = 0; i < this.parent.getRows().length; i++) {
+                if (this.parent.getRows()[parseInt(i.toString(), 10)].getElementsByClassName('e-frame e-icons e-uncheck').length) {
+                    this.parent.grid.selectionModule[`${updateRowSelection}`](this.parent.getRows()[parseInt(i.toString(), 10)], 
+                    // eslint-disable-next-line max-len
+                    this.parent.getCurrentViewRecords()[parseInt(i.toString(), 10)].index);
+                }
+            }
+        }
+    }
 }
 class TreeVirtual extends VirtualScroll$1 {
     constructor(parent, locator) {
@@ -14626,5 +15388,5 @@ class InfiniteScroll {
     }
 }
 
-export { Aggregate, AggregateColumn, AggregateRow, Column, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, ContextMenuItems, DataManipulation, DetailRow, Edit, EditSettings, ExcelExport, Filter, FilterSettings, Freeze, InfiniteScroll, InfiniteScrollSettings, LoadingIndicator, Logger, Page, PageSettings, PdfExport, Predicate, Render, Reorder, Resize, RowDD, RowDropSettings, SearchSettings, Selection, SelectionSettings, Sort, SortDescriptor, SortSettings, StackedColumn, Toolbar, ToolbarItem, TreeClipboard, TreeGrid, TreeGridColumn, TreeVirtual, TreeVirtualRowModelGenerator, VirtualScroll, actionBegin, actionComplete, actionFailure, ariaColIndex, ariaRowIndex, autoCol, batchAdd, batchCancel, batchDelete, batchEditFormRendered, batchSave, beforeBatchAdd, beforeBatchCancel, beforeBatchDelete, beforeBatchSave, beforeCopy, beforeDataBound, beforeExcelExport, beforePaste, beforePdfExport, beforeStartEdit, beginAdd, beginEdit, cellEdit, cellSave, cellSaved, checkboxChange, collapsed, collapsing, content, contextMenuClick, contextMenuOpen, crudAction, dataBound, dataColIndex, dataListener, dataRowIndex, dataStateChange, destroy, detailDataBound, doubleTap, expanded, expanding, extendArray, findChildrenRecords, findParentRecords, frozenContent, frozenHeader, frozenLeft, frozenRight, getExpandStatus, getParentData, getPlainData, headerContent, indexModifier, isCheckboxcolumn, isCountRequired, isFilterChildHierarchy, isHidden, isOffline, isRemoteData, keyPressed, leftRight, load, localPagedExpandCollapse, movableContent, movableHeader, pagingActions, printGridInit, queryCellInfo, recordDoubleClick, remoteExpand, resizeStop, rowDataBound, rowDeselected, rowDeselecting, rowDrag, rowDragStart, rowDragStartHelper, rowDrop, rowDropped, rowSelected, rowSelecting, rowdraging, rowsAdd, rowsRemove, savePreviousRowPosition, table, toolbarClick, treeGridDetails, updateData, virtualActionArgs, virtualColumnIndex };
+export { Aggregate, AggregateColumn, AggregateRow, Column, ColumnChooser, ColumnMenu, CommandColumn, ContextMenu, ContextMenuItems, DataManipulation, DetailRow, Edit, EditSettings, ExcelExport, Filter, FilterSettings, Freeze, InfiniteScroll, InfiniteScrollSettings, LoadingIndicator, Logger, Page, PageSettings, PdfExport, Predicate, Render, Reorder, Resize, RowDD, RowDropSettings, SearchSettings, Selection, SelectionSettings, Sort, SortDescriptor, SortSettings, StackedColumn, Toolbar, ToolbarItem, TreeClipboard, TreeGrid, TreeGridColumn, TreeVirtual, TreeVirtualRowModelGenerator, VirtualScroll, actionBegin, actionComplete, actionFailure, ariaColIndex, ariaRowIndex, autoCol, batchAdd, batchCancel, batchDelete, batchEditFormRendered, batchSave, beforeBatchAdd, beforeBatchCancel, beforeBatchDelete, beforeBatchSave, beforeCopy, beforeDataBound, beforeExcelExport, beforePaste, beforePdfExport, beforeStartEdit, beginAdd, beginEdit, cellEdit, cellSave, cellSaved, checkboxChange, collapsed, collapsing, content, contextMenuClick, contextMenuOpen, crudAction, dataBound, dataListener, dataStateChange, destroy, detailDataBound, doubleTap, expanded, expanding, extendArray, findChildrenRecords, findParentRecords, frozenContent, frozenHeader, frozenLeft, frozenRight, getExpandStatus, getParentData, getPlainData, headerContent, indexModifier, isCheckboxcolumn, isCountRequired, isFilterChildHierarchy, isHidden, isOffline, isRemoteData, keyPressed, leftRight, load, localPagedExpandCollapse, movableContent, movableHeader, pagingActions, printGridInit, queryCellInfo, recordDoubleClick, remoteExpand, resizeStop, rowDataBound, rowDeselected, rowDeselecting, rowDrag, rowDragStart, rowDragStartHelper, rowDrop, rowDropped, rowSelected, rowSelecting, rowdraging, rowsAdd, rowsRemove, savePreviousRowPosition, table, toolbarClick, treeGridDetails, updateData, virtualActionArgs, virtualColumnIndex };
 //# sourceMappingURL=ej2-treegrid.es2015.js.map