@syncfusion/ej2-treegrid 28.2.6 → 29.1.37

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

@@ -24,90 +24,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.
  */
 var Column = /** @__PURE__ @class */ (function () {
     function Column(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
      */
     Column.prototype.setProperties = function (column) {
-        //Angular two way binding
         var keys = Object.keys(column);
         for (var 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') {
                 var refreshReactColumnTemplateByUid = 'refreshReactColumnTemplateByUid';
                 this.parent.clipboardModule['treeGridParent'].renderModule["" + refreshReactColumnTemplateByUid](this.uid);
@@ -160,7 +148,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.
  */
 var LoadingIndicator = /** @__PURE__ @class */ (function (_super) {
     __extends$1(LoadingIndicator, _super);
@@ -193,7 +181,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.
  */
 var Predicate = /** @__PURE__ @class */ (function (_super) {
     __extends$2(Predicate, _super);
@@ -239,7 +227,7 @@ var Predicate = /** @__PURE__ @class */ (function (_super) {
     return Predicate;
 }(ChildProperty));
 /**
- * Configures the filtering behavior of the TreeGrid.
+ * Configures the filtering behavior of the TreeGrid, enabling complex data filtering capabilities.
  */
 var FilterSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$2(FilterSettings, _super);
@@ -293,7 +281,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.
  */
 var TextWrapSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$3(TextWrapSettings, _super);
@@ -595,12 +583,8 @@ var frozenRight = 'frozen-right';
 /** @hidden */
 var frozenLeft = 'frozen-left';
 /** @hidden */
-var dataColIndex = 'data-colindex';
-/** @hidden */
 var ariaColIndex = 'aria-colindex';
 /** @hidden */
-var dataRowIndex = 'data-rowindex';
-/** @hidden */
 var ariaRowIndex = 'aria-rowindex';
 /** @hidden */
 var actionFailure = 'actionFailure';
@@ -1581,7 +1565,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.
  */
 var SearchSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$6(SearchSettings, _super);
@@ -1788,10 +1772,9 @@ var Render = /** @__PURE__ @class */ (function () {
         if (columnIndex === this.parent.treeColumnIndex && (args.requestType === 'add' || args.requestType
             === 'rowDragAndDrop' || args.requestType === 'delete' || isNullOrUndefined(args.cell.querySelector('.e-treecell')))) {
             var container = createElement('div', { className: 'e-treecolumn-container' });
-            var emptyExpandIcon = createElement('span', {
-                className: 'e-icons e-none',
-                styles: 'width: 10px; display: inline-block'
-            });
+            var emptyExpandIcon = createElement('span', { className: 'e-icons e-none' });
+            emptyExpandIcon.style.width = '10px';
+            emptyExpandIcon.style.display = 'inline-block';
             for (var n = 0; n < pad; n++) {
                 totalIconsWidth += 10;
                 container.appendChild(emptyExpandIcon.cloneNode());
@@ -1818,6 +1801,13 @@ var Render = /** @__PURE__ @class */ (function () {
                 }
                 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)) {
+                        var selectedRow = this.parent.flatData.find(function (item) { return 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;
@@ -1935,7 +1925,7 @@ var Render = /** @__PURE__ @class */ (function () {
         var templateFn = 'templateFn';
         var 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 */
@@ -2476,115 +2466,116 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                 rowDetails.record.childRecords = result;
             }
             for (var 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') {
+                var record = result[parseInt(r.toString(), 10)];
+                if (_this.parent.enableVirtualization && record["" + _this.parent.idMapping] === rowDetails.record["" + _this.parent.idMapping] && rowDetails.action === 'remoteExpand') {
                     _this.parent["" + remoteExpandedData].push(rowDetails.record);
                 }
-                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 (var 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 (var 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;
                             var 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 {
                         var 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;
                     var 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 (var 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 (var 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 (var 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 (var 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);
@@ -2926,7 +2917,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
 }());
 
 /**
- * Defines Predefined toolbar items.
+ * Defines enumerable toolbar items for programmatic access.
  *
  * @hidden
  */
@@ -2948,7 +2939,7 @@ var ToolbarItem;
     ToolbarItem[ToolbarItem["RowOutdent"] = 13] = "RowOutdent";
 })(ToolbarItem || (ToolbarItem = {}));
 /**
- * Defines predefined contextmenu items.
+ * Enumerates detailed context menu items used for menu configurations.
  *
  * @hidden
  */
@@ -2994,7 +2985,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.
  */
 var PageSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$8(PageSettings, _super);
@@ -3048,7 +3039,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.
  */
 var AggregateColumn = /** @__PURE__ @class */ (function (_super) {
     __extends$9(AggregateColumn, _super);
@@ -3139,6 +3130,9 @@ var AggregateColumn = /** @__PURE__ @class */ (function (_super) {
     ], AggregateColumn.prototype, "customAggregate", void 0);
     return AggregateColumn;
 }(ChildProperty));
+/**
+ * Configures the aggregate rows in the TreeGrid.
+ */
 var AggregateRow = /** @__PURE__ @class */ (function (_super) {
     __extends$9(AggregateRow, _super);
     function AggregateRow() {
@@ -3173,7 +3167,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.
  */
 var EditSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$a(EditSettings, _super);
@@ -3236,7 +3230,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.
  */
 var SortDescriptor = /** @__PURE__ @class */ (function (_super) {
     __extends$b(SortDescriptor, _super);
@@ -3252,7 +3246,7 @@ var SortDescriptor = /** @__PURE__ @class */ (function (_super) {
     return SortDescriptor;
 }(ChildProperty));
 /**
- * Configures the sorting behavior of TreeGrid.
+ * Configures the sorting behavior of the TreeGrid.
  */
 var SortSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$b(SortSettings, _super);
@@ -3695,7 +3689,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.
  */
 var InfiniteScrollSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$c(InfiniteScrollSettings, _super);
@@ -3796,13 +3790,13 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     }
     TreeGrid_1 = TreeGrid;
     /**
-     * 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 */
     TreeGrid.prototype.excelExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
@@ -3810,13 +3804,13 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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 */
     TreeGrid.prototype.csvExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
@@ -3824,21 +3818,21 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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.
      */
     TreeGrid.prototype.pdfExport = function (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}
      */
     TreeGrid.prototype.serverExcelExport = function (url) {
@@ -3846,9 +3840,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
     TreeGrid.prototype.serverPdfExport = function (url) {
@@ -3856,9 +3850,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
     TreeGrid.prototype.serverCsvExport = function (url) {
@@ -3886,7 +3880,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         treeGridModel.searchSettings.fields = queries.search && queries.search[0]['fields'] || [];
         treeGridModel.sortSettings.columns = queries.sorted;
         treeGridModel.columns = this.setHeaderText(treeGridModel.columns, include);
-        var form = this.createElement('form', { id: 'ExportForm', styles: 'display:none;' });
+        var form = this.createElement('form', { id: 'ExportForm' });
+        form.style.display = 'none';
         var treeGridInput = this.createElement('input', { id: 'treeGridInput', attrs: { name: 'treeGridModel' } });
         treeGridInput.value = JSON.stringify(treeGridModel);
         form.method = 'POST';
@@ -3977,11 +3972,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.sortByColumn = function (columnName, direction, isMultiSort) {
@@ -3990,7 +3985,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * Clears all the sorted columns of the TreeGrid.
+     * Clears all the sorted columns in the TreeGrid.
      *
      * @returns {void}
      */
@@ -4000,9 +3995,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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
      */
@@ -4012,36 +4007,32 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.search = function (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}
-     *
-     *
-     *
      */
     TreeGrid.prototype.autoFitColumns = function (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}
      */
     TreeGrid.prototype.reorderColumns = function (fromFName, toFName) {
@@ -4064,9 +4055,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
@@ -4210,7 +4200,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
@@ -4228,9 +4218,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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
      */
     TreeGrid.prototype.requiredModules = function () {
@@ -4547,7 +4540,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         if (this.enableVirtualization && !isNullOrUndefined(this.detailTemplate)) {
             failureCases.push('Virtual scrolling is not compatible with the detail template');
         }
-        if ((this.frozenColumns > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }) || this.frozenRows > 0)
+        if ((this.frozenColumns > 0 || this.frozenRows > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }))
             && (!isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.rowTemplate))) {
             failureCases.push('Frozen rows and columns are not supported with the Detail template and row template.');
         }
@@ -4557,9 +4550,6 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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.');
         }
@@ -4585,9 +4575,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 failureCases.push('Only one column can have the ShowCheckbox option enabled.');
             }
         }
-        var alignColumn = this.columnModel.filter(function (col) { return 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.');
+        var alignColumn;
+        if (this.treeColumnIndex !== null && this.treeColumnIndex !== -1) {
+            alignColumn = this.columnModel.filter(function (col) { return 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) {
             var failureEventArgs_1 = {
@@ -4623,7 +4616,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             this.flatData = data;
             this.flatData.filter(function (e) {
                 setValue('uniqueIDCollection.' + e.uniqueID, e, _this);
-                if (e.level === 0) {
+                if (e.level === 0 && !_this.parentData.some(function (record) { return record.uniqueID === e.uniqueID; })) {
                     _this.parentData.push(e);
                 }
             });
@@ -4757,14 +4750,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             _this.trigger(rowDeselecting, args);
         };
         this.grid.rowSelected = function (args) {
-            if (_this.enableVirtualization && args.isHeaderCheckboxClicked &&
-                _this.grid.currentViewData.length !== _this.grid.selectionModule.selectedRowIndexes.length) {
-                var updateRowSelection = 'updateRowSelection';
-                for (var 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);
@@ -5506,6 +5493,14 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         return gridColumnCollection;
     };
+    TreeGrid.prototype.lastRowCellBorderUpdated = function () {
+        var rows = this.getContentTable().querySelectorAll('tr.e-row');
+        var visibleRows = Array.from(rows).filter(function (row) { return !row.classList.contains('e-childrow-hidden'); });
+        if (visibleRows.length > 0) {
+            var lastVisibleRow = visibleRows[visibleRows.length - 1];
+            this.lastRowBorder(lastVisibleRow, true);
+        }
+    };
     /**
      * Called internally if any of the property value changed.
      *
@@ -5731,7 +5726,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
@@ -5769,7 +5768,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
@@ -5788,7 +5788,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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
@@ -5880,7 +5883,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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
      */
@@ -5888,7 +5893,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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
      */
@@ -5896,12 +5903,14 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
     TreeGrid.prototype.addRecord = function (data, index, position) {
@@ -5912,7 +5921,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
@@ -5922,7 +5933,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
@@ -5932,7 +5945,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
@@ -5945,10 +5960,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.updateRow = function (index, data) {
@@ -5964,12 +5981,13 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
      */
     TreeGrid.prototype.deleteRecord = function (fieldName, data) {
         if ((isNullOrUndefined(fieldName) && (isNullOrUndefined(data)) || (this.getSelectedRecords().length <= 0))) {
@@ -5981,9 +5999,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.startEdit = function (row) {
@@ -5992,10 +6012,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.editCell = function (rowIndex, field) {
@@ -6004,10 +6026,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.enableToolbarItems = function (items, isEnable) {
@@ -6016,7 +6040,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
@@ -6026,10 +6052,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.openColumnChooser = function (x, y) {
@@ -6038,9 +6066,11 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.deleteRow = function (tr) {
@@ -6049,20 +6079,23 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
      */
     TreeGrid.prototype.getPrimaryKeyFieldNames = function () {
         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}
      */
     TreeGrid.prototype.setCellValue = function (key, field, value) {
@@ -6072,11 +6105,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
     TreeGrid.prototype.setRowData = function (key, rowData) {
@@ -6114,9 +6148,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.goToPage = function (pageNo) {
@@ -6125,9 +6162,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.updateExternalMessage = function (message) {
@@ -6136,20 +6176,26 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
      */
     TreeGrid.prototype.getCellFromIndex = function (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.
      */
     TreeGrid.prototype.getColumnByField = function (field) {
         return iterateArrayOrObject(this.columnModel, function (item) {
@@ -6160,10 +6206,13 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         })[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.
      */
     TreeGrid.prototype.getColumnByUid = function (uid) {
         var Columns = this.initialRender ? this.grid.columns : this.columns;
@@ -6179,34 +6228,45 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         })[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.
      */
     TreeGrid.prototype.getColumnFieldNames = function () {
         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.
      */
     TreeGrid.prototype.getFooterContent = function () {
         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.
      */
     TreeGrid.prototype.getFooterContentTable = function () {
         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}
      */
     TreeGrid.prototype.showColumns = function (keys, showBy) {
@@ -6214,10 +6274,13 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
     TreeGrid.prototype.hideColumns = function (keys, hideBy) {
@@ -6225,37 +6288,48 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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.
      */
     TreeGrid.prototype.getColumnHeaderByField = function (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.
      */
     TreeGrid.prototype.getColumnHeaderByIndex = function (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.
      */
     TreeGrid.prototype.getColumnHeaderByUid = function (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.
      */
     TreeGrid.prototype.getColumnIndexByField = function (field) {
         return this.grid.getColumnIndexByField(field);
@@ -6271,19 +6345,25 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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.
      */
     TreeGrid.prototype.getColumnIndexByUid = function (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.
      */
     TreeGrid.prototype.getColumns = function (isRefresh) {
         this.updateColumnModel(this.grid.getColumns(isRefresh));
@@ -6346,9 +6426,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         });
     };
     /**
-     * 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.
      */
     TreeGrid.prototype.getContent = function () {
         return this.grid.getContent();
@@ -6359,7 +6442,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     };
     TreeGrid.prototype.mergeColumns = function (storedColumn, columns) {
         var persist2 = 'mergeColumns';
+        var mergedColumns = 'mergedColumns';
         this.grid["" + persist2].apply(this, [storedColumn, columns]);
+        this.grid["" + mergedColumns] = true;
     };
     TreeGrid.prototype.setFrozenCount = function () {
         var persist3 = 'setFrozenCount';
@@ -6370,7 +6455,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid["" + persist4].apply(this.grid, [columns]);
     };
     TreeGrid.prototype.isFrozenGrid = function () {
-        return this.grid.isFrozenGrid();
+        return this.grid.isFrozenGrid.apply(this);
     };
     TreeGrid.prototype.updateTreeGridModel = function () {
         this.setProperties({ filterSettings: getObject('properties', this.grid.filterSettings) }, true);
@@ -6379,17 +6464,23 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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.
      */
     TreeGrid.prototype.getContentTable = function () {
         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.
      */
     TreeGrid.prototype.getDataRows = function () {
         var dRows = [];
@@ -6402,9 +6493,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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
      */
     TreeGrid.prototype.getCurrentViewRecords = function () {
@@ -6412,60 +6506,78 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         return this.grid.currentViewData.filter(function (e) { return 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.
      */
     TreeGrid.prototype.getBatchChanges = function () {
         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.
      */
     TreeGrid.prototype.getHeaderContent = function () {
         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.
      */
     TreeGrid.prototype.getHeaderTable = function () {
         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.
      */
     TreeGrid.prototype.getRowByIndex = function (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.
      */
     TreeGrid.prototype.getRowInfo = function (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.
      */
     TreeGrid.prototype.getUidByColumnField = function (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.
      */
     TreeGrid.prototype.getVisibleColumns = function () {
         var cols = [];
@@ -6478,7 +6590,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
@@ -6486,7 +6600,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
@@ -6494,7 +6611,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
@@ -6514,18 +6634,24 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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
      */
     TreeGrid.prototype.getCheckedRecords = function () {
         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
      */
     TreeGrid.prototype.getVisibleRecords = function () {
@@ -6545,26 +6671,35 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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.
      */
     TreeGrid.prototype.getCheckedRowIndexes = function () {
         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}
      */
     TreeGrid.prototype.selectCheckboxes = function (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}
      */
     TreeGrid.prototype.refreshColumns = function (refreshUI) {
@@ -6593,7 +6728,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
@@ -6648,12 +6786,15 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.expandRow = function (row, record, key, level) {
@@ -6669,7 +6810,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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)) {
@@ -6709,7 +6850,6 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     };
     // Internal method to handle the rows expand
     TreeGrid.prototype.expandRows = function (row, record, parentRec) {
-        var initialTotalRecordsCount = this.grid.totalDataRecordsCount;
         this.expandCollapse('expand', row, record);
         var children = 'Children';
         if (!(isRemoteData(this) && !isOffline(this)) && (!isCountRequired(this) || !isNullOrUndefined(record["" + children]))) {
@@ -6753,12 +6893,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         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];
@@ -6768,18 +6908,27 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                     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}
      */
     TreeGrid.prototype.collapseRow = function (row, record, key) {
@@ -6861,9 +7010,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.expandAtLevel = function (level) {
@@ -6883,9 +7035,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.expandByKey = function (key) {
@@ -6940,9 +7095,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         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}
      */
     TreeGrid.prototype.collapseAtLevel = function (level) {
@@ -6962,9 +7120,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
     TreeGrid.prototype.collapseByKey = function (key) {
@@ -7003,7 +7164,10 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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}
      */
@@ -7014,10 +7178,23 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         this.isExpandedEventTriggered = false;
         this.isExpandingEventTriggered = false;
+        if (this.editSettings.mode === 'Batch') {
+            var obj = 'dialogObj';
+            var showDialog = 'showDialog';
+            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
+                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+                var 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}
      */
@@ -7028,6 +7205,16 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         this.isCollapsedEventTriggered = false;
         this.isCollapsingEventTriggered = false;
+        if (this.editSettings.mode === 'Batch') {
+            var obj = 'dialogObj';
+            var showDialog = 'showDialog';
+            if ((this.getBatchChanges()[this.changedRecords].length || this.getBatchChanges()[this.deletedRecords].length ||
+                this.getBatchChanges()[this.addedRecords].length) && this.editSettings.showConfirmDialog) {
+                var dialogObj = this.grid.editModule["" + obj];
+                this.grid.editModule["" + showDialog]('CancelEdit', dialogObj);
+                return;
+            }
+        }
         this.expandCollapseAll('collapse');
     };
     TreeGrid.prototype.expandCollapseAll = function (action) {
@@ -7047,7 +7234,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         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(function (e) {
                 if (e.hasChildRecords) {
                     e.expanded = action === 'collapse' ? false : true;
@@ -7111,12 +7298,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             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 });
         }
@@ -7126,6 +7313,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 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)) {
@@ -7147,6 +7337,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 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)) {
@@ -7389,7 +7582,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             }
             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;
+                }
                 var parentRecord = currentViewData.filter(function (e) {
                     return e.uniqueID === currentRecord[0].parentUniqueID;
                 });
@@ -7535,28 +7730,6 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         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}
-     */
-    TreeGrid.prototype.updateRowAndCellElements = function (records, rows, index) {
-        for (var 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}
@@ -7564,6 +7737,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     TreeGrid.prototype.addListener = function () {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
+        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
     };
     TreeGrid.prototype.updateResultModel = function (returnResult) {
         this.dataResults = returnResult;
@@ -7578,27 +7752,31 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
         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.
      *
-     * @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.
+     * This method allows for dynamic filtering against column data using various
+     * operators and values, supporting case-sensitive filtering and accent sensitivity.
+     *
+     * @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}
      */
     TreeGrid.prototype.filterByColumn = function (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}
      */
@@ -7617,26 +7795,32 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid.removeFilteredColsByField(field, isClearFilterBar);
     };
     /**
-     * Selects a row by given index.
+     * Selects a row in the TreeGrid by its index.
      *
-     * @param  {number} index - Defines the row index.
-     * @param  {boolean} isToggle - If set to true, then it toggles the selection.
+     * Use this method to highlight a specific row; useful for programmatically navigating data.
+     *
+     * @param {number} index - Index of the row to select.
+     * @param {boolean} isToggle - If true, toggles the selection state of the row.
      * @returns {void}
      */
     TreeGrid.prototype.selectRow = function (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.
+     *
+     * Useful for batch operations where multiple row selections are necessary.
      *
-     * @param  {number[]} rowIndexes - Specifies the row indexes.
+     * @param {number[]} rowIndexes - Array of row index numbers to select.
      * @returns {void}
      */
     TreeGrid.prototype.selectRows = function (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}
      */
@@ -7647,39 +7831,47 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         this.grid.clearSelection();
     };
     /**
-     * Copy the selected rows or cells data into clipboard.
+     * Copies the data of selected rows or cells to the clipboard.
+     *
+     * This method supports including headers for better context when pasting elsewhere.
      *
-     * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.
+     * @param {boolean} withHeader - (Optional) If true, includes column headers in the copied data.
      * @returns {void}
      */
     TreeGrid.prototype.copy = function (withHeader) {
         this.clipboardModule.copy(withHeader);
     };
     /**
-     * Paste data from clipboard to selected cells.
+     * Pastes data into the selected cells from the clipboard.
      *
-     * @param {boolean} data - Specifies the date for paste.
-     * @param {boolean} rowIndex - Specifies the row index.
-     * @param {boolean} colIndex - Specifies the column index.
+     * Automatically places the pasted data starting from the specified indices.
+     *
+     * @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}
      */
     TreeGrid.prototype.paste = function (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.
+     *
+     * Useful for navigating or highlighting specific data cells within the grid.
      *
-     * @param  {IIndex} cellIndex - Defines the row and column indexes.
-     * @param  {boolean} isToggle - If set to true, then it toggles the selection.
+     * @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}
      */
     TreeGrid.prototype.selectCell = function (cellIndex, isToggle) {
         this.grid.selectCell(cellIndex, isToggle);
     };
     /**
-     * Gets the collection of selected rows.
+     * Retrieves the currently selected rows.
      *
-     * @returns {Element[]} - Returns selected row elements collection
+     * Useful for obtaining the selected data elements for downstream processing.
+     *
+     * @returns {Element[]} - An array of Element objects representing the selected rows.
      */
     TreeGrid.prototype.getSelectedRows = function () {
         return this.grid.getSelectedRows();
@@ -7891,44 +8083,59 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         return cnt;
     };
     /**
-     * Gets the collection of selected row indexes.
+     * Retrieves the indexes of the currently selected rows in the TreeGrid.
+     *
+     * 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[]} - Returns selected rows index collection
+     * @returns {number[]} - An array of numbers representing the indexes of selected rows.
      */
     TreeGrid.prototype.getSelectedRowIndexes = function () {
         return this.grid.getSelectedRowIndexes();
     };
     /**
-     * Gets the collection of selected row and cell indexes.
+     * Retrieves the indexes of the selected cells within the selected rows.
      *
-     * @returns {ISelectedCell[]} - Returns selected cell's index details
+     * This can be useful for handling cell-specific operations, such as
+     * applying styles or editing values programmatically.
+     *
+     * @returns {ISelectedCell[]} - An array of objects representing the selected cells' indexes.
      */
     TreeGrid.prototype.getSelectedRowCellIndexes = function () {
         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.
      */
     TreeGrid.prototype.getSelectedRecords = function () {
         return this.grid.getSelectedRecords();
     };
     /**
-     * Gets the data module.
+     * Obtains the data handling modules used by the TreeGrid.
+     *
+     * 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}}: Returns grid and treegrid data module
+     * @returns {{baseModule: Data, treeModule: DataManipulation}} - An object containing both grid and tree data modules.
      */
     TreeGrid.prototype.getDataModule = function () {
         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.
+     *
+     * This functionality allows for dynamic rearrangement of rows, such as moving selected
+     * rows to a new position as siblings or children.
      *
-     * @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
+     * @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}
      */
     TreeGrid.prototype.reorderRows = function (fromIndexes, toIndex, position) {
@@ -7937,9 +8144,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
      *
-     * @param {Object} record – specifies the record to do indented
+     * 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 - (Optional) The record to be indented. If omitted, the currently selected row is used.
      * @returns {void}
      */
     TreeGrid.prototype.indent = function (record) {
@@ -7949,9 +8159,12 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     /**
-     * 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.
+     *
+     * 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 – specifies the record to do outdented
+     * @param {Object} record - (Optional) The record to be outdented. If omitted, the currently selected row is used.
      * @returns {void}
      */
     TreeGrid.prototype.outdent = function (record) {
@@ -8147,6 +8360,21 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -8225,9 +8453,6 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -8318,18 +8543,6 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -8549,7 +8762,6 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         var action = 'action';
         var dropPosition = 'dropPosition';
-        var updateRowAndCellElements = 'updateRowAndCellElements';
         if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
             if (position === 'above') {
                 this.dropPosition = 'topSegment';
@@ -8599,7 +8811,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 var 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') {
                 var index = this.parent.allowRowDragAndDrop
@@ -8611,7 +8823,29 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 var 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}
+     */
+    RowDD.prototype.updateRowAndCellElements = function (records, rows, index) {
+        for (var 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)]
+                });
             }
         }
     };
@@ -8660,7 +8894,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
                             record_1.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;
                             }
                         }
                     }
@@ -8669,26 +8903,27 @@ var RowDD = /** @__PURE__ @class */ (function () {
                     dropIndex = this.selectedRow.rowIndex - 1;
                 }
                 if (this.parent.enableVirtualization && this.selectedRecord && !(record_1.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) {
+                var isInvalidSelection = this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0;
+                var isRootLevel = tObj.getCurrentViewRecords()[this.selectedRow.rowIndex].level === 0;
+                if (isInvalidSelection || isRootLevel) {
                     return;
                 }
-                var dropIndex = void 0;
-                var parentItem = this.selectedRecord.parentItem;
-                for (var i = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                    if (tObj.getCurrentViewRecords()[parseInt(i.toString(), 10)].uniqueID === parentItem.uniqueID) {
-                        dropIndex = i;
-                    }
+                var parentItem_1 = this.selectedRecord.parentItem;
+                var records = tObj.getCurrentViewRecords();
+                var dropIndex = records.findIndex(function (record) { return record.uniqueID === parentItem_1.uniqueID; });
+                if (dropIndex === -1) {
+                    return;
                 }
                 if (this.parent.enableVirtualization && this.selectedRecord) {
-                    dropIndex = parseInt(this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('data-rowindex'), 10);
+                    var ariaRowIndex = this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('aria-rowindex');
+                    dropIndex = parseInt(ariaRowIndex, 10) - 1;
                 }
                 tObj["" + action] = 'outdenting';
                 tObj["" + droppedIndex] = dropIndex;
@@ -8715,7 +8950,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
             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');
@@ -8723,7 +8958,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 }
                 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');
@@ -9026,7 +9261,8 @@ var RowDD = /** @__PURE__ @class */ (function () {
         else {
             rowTop = rowPositionHeight + contentHeight + roundOff;
         }
-        var rowBottom = rowTop + row[0].offsetHeight;
+        var rowBottom = row[0].offsetHeight !== 0 && isNullOrUndefined(rowEle) ?
+            rowTop + row[0].offsetHeight : rowTop + rowEle.offsetHeight;
         var difference = rowBottom - rowTop;
         var divide = difference / 3;
         var topRowSegment = rowTop + divide;
@@ -9043,6 +9279,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
         var isTopSegment = posy <= topRowSegment;
         var isMiddleRowSegment = (posy > topRowSegment && posy <= middleRowSegment);
         var isBottomRowSegment = (posy > middleRowSegment && posy <= bottomRowSegment);
+        var isBorderNeed = true;
         if (isTopSegment || isMiddleRowSegment || isBottomRowSegment) {
             if (isTopSegment && this.dropPosition !== 'Invalid') {
                 this.removeChildBorder();
@@ -9051,19 +9288,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 this.addFirstrowBorder(rowEle);
                 this.removeErrorElem();
                 this.removeLastrowBorder(rowEle);
-                this.topOrBottomBorder(args.target);
             }
             if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
                 this.removetopOrBottomBorder();
-                var rowElement = [];
-                var 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();
@@ -9072,11 +9302,165 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 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') {
+                var rowElement = [];
+                var 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.
+     */
+    RowDD.prototype.updateBorderStatus = function (row, index) {
+        var _this = this;
+        var isBorderNeed = true;
+        var rows = this.parent.grid.getRows();
+        var childRows = [];
+        var hasDetailTemplate = false;
+        if (!isNullOrUndefined(this.parent.detailTemplate)) {
+            rows = this.parent.getDataRows();
+            hasDetailTemplate = true;
+        }
+        var treegridColumnIndex = this.parent.treeColumnIndex;
+        var treeColIndex = this.parent.allowRowDragAndDrop ?
+            (hasDetailTemplate ? treegridColumnIndex + 2 : treegridColumnIndex + 1) :
+            (hasDetailTemplate ? treegridColumnIndex + 1 : treegridColumnIndex);
+        if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+            treeColIndex = treegridColumnIndex;
+        }
+        var dragRows = row;
+        var targetRow = [rows["" + index]];
+        if (this.dropPosition === 'topSegment') {
+            row.filter(function (e) {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(targetRow[0]) ||
+                    isNullOrUndefined(targetRow[0].cells)) {
+                    return true;
+                }
+                var regex = /index(\d+)|level(\d+)/g;
+                var parentIndexLevel = e === null || e === undefined ? undefined : e.cells["" + treeColIndex].className.match(regex);
+                var dropIndexLevel = targetRow[0].cells["" + treeColIndex].className.match(regex);
+                if (isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
+                    return true;
+                }
+                var parentLevel = +parentIndexLevel[1].match(/\d+/)[0];
+                var dropParentLevel = +dropIndexLevel[1].match(/\d+/)[0];
+                var InDraggedRowIndex = false;
+                if (parentLevel !== 0 && parentLevel !== dropParentLevel) {
+                    return true;
+                }
+                for (var 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]) {
+                        var parentIndexLevelInRow = rows[parseInt(i.toString(), 10)].cells["" + treeColIndex].className.match(regex);
+                        var 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(function (e) {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
+                    isNullOrUndefined(dragRows[0].cells)) {
+                    return true;
+                }
+                var regex = /index(\d+)|level(\d+)/g;
+                var parentIndexLevel = e === null || e === undefined ? undefined : e.cells["" + treeColIndex].className.match(regex);
+                var dragIndexLevel = dragRows[0].cells["" + treeColIndex].className.match(regex);
+                if (isNullOrUndefined(dragIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
+                    return true;
+                }
+                var parentLevel = +parentIndexLevel[1].match(/\d+/)[0];
+                var dragParentLevel = +dragIndexLevel[1].match(/\d+/)[0];
+                var InDraggedRowIndex = false;
+                if (parentLevel !== 0 && parentLevel !== dragParentLevel) {
+                    return true;
+                }
+                for (var 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]) {
+                        var parentIndexLevelInRow = rows[parseInt(i.toString(), 10)].cells["" + treeColIndex].className.match(regex);
+                        var 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(function (e) {
+                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
+                    isNullOrUndefined(dragRows[0].cells)) {
+                    return true;
+                }
+                for (var i = 0; i < dragRows.length; i++) {
+                    var regex = /index(\d+)|level(\d+)/g;
+                    var dropActualIndex = targetRow[0].rowIndex;
+                    var dragIndexLevel = dragRows[parseInt(i.toString(), 10)].cells["" + treeColIndex].className.match(regex);
+                    if (!dragIndexLevel) {
+                        return true;
+                    }
+                    var dragIndex = parseInt(dragIndexLevel.find(function (item) { return 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.
      *
@@ -9217,23 +9601,28 @@ var RowDD = /** @__PURE__ @class */ (function () {
      * 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.
      */
-    RowDD.prototype.topOrBottomBorder = function (target) {
-        var rowElement = [];
+    RowDD.prototype.topOrBottomBorder = function (target, isBorderNeed) {
+        if (isBorderNeed === void 0) { isBorderNeed = true; }
         var 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');
+        var rowElements = element ?
+            Array.from(element.querySelectorAll('.e-rowcell, .e-rowdragdrop, .e-detailrowcollapse')) : [];
+        if (!rowElements.length) {
+            return;
+        }
+        var classAction = isBorderNeed ? this.addRemoveClasses.bind(this, rowElements, true) : this.addRemoveClasses.bind(this, rowElements, false, 'e-dragborder');
+        if (this.dropPosition === 'topSegment') {
+            classAction('e-droptop');
+            var 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.
@@ -9243,6 +9632,9 @@ var RowDD = /** @__PURE__ @class */ (function () {
     RowDD.prototype.removetopOrBottomBorder = function () {
         var 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');
@@ -9298,18 +9690,29 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         cloneElement.style.cursor = '';
         var rowEle = args.target ? closest(args.target, 'tr') : null;
-        var rowIdx = rowEle ? rowEle.rowIndex : -1;
+        var 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;
         }
         var dragRecords = Array.isArray(args.data) ? args.data : [args.data];
         var droppedRecord = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+        if (tObj.rowDropSettings.targetID) {
+            var dropElement = parentsUntil(args.target, 'e-treegrid');
+            if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
+                var srcControl = dropElement.ej2_instances[0];
+                droppedRecord = srcControl.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+            }
+        }
         this.removeErrorElem();
         this.canDrop = true;
         this.ensuredropPosition(dragRecords, droppedRecord);
@@ -9321,6 +9724,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
             if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
                 var 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)) {
@@ -9341,13 +9745,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
         var 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)) {
@@ -9364,9 +9768,15 @@ var RowDD = /** @__PURE__ @class */ (function () {
         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);
@@ -9499,13 +9909,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
     };
     /**
-     * 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.
      */
     RowDD.prototype.getTargetIdx = function (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.
@@ -9568,7 +9978,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
                     this.droppedRecord = tObj.getCurrentViewRecords()[parseInt(index.toString(), 10)];
                 }
                 else {
-                    this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
+                    if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+                        var rowsObject = this.parent.grid.getRowsObject();
+                        this.droppedRecord = rowsObject.length > 0 ? rowsObject[args.dropIndex].data : undefined;
+                    }
+                    else {
+                        this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
+                    }
                 }
             }
             var dragRecords = [];
@@ -10106,6 +10522,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
     };
     /**
      * Cleans up resources, event listeners, and DOM elements when the TreeGrid component is destroyed.
+     *
      * @returns {void}
      */
     RowDD.prototype.destroy = function () {
@@ -10159,7 +10576,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.
  */
 var RowDropSettings = /** @__PURE__ @class */ (function (_super) {
     __extends$e(RowDropSettings, _super);
@@ -10219,7 +10636,8 @@ var TreeVirtualRowModelGenerator = /** @__PURE__ @class */ (function (_super) {
         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;
                 }
             }
@@ -10228,7 +10646,7 @@ var TreeVirtualRowModelGenerator = /** @__PURE__ @class */ (function (_super) {
             }
         }
         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.prototype.generateRows.call(this, data, notifyArgs);
         }
         else {
@@ -10249,7 +10667,7 @@ var TreeVirtualRowModelGenerator = /** @__PURE__ @class */ (function (_super) {
         var clear = ['paging', 'refresh', 'sorting', 'filtering', 'searching', 'reorder',
             'save', 'delete'].some(function (value) { return 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)) {
             var model = 'model';
             var currentPage = this["" + model].currentPage;
             if (clear) {
@@ -11038,7 +11456,7 @@ var Page = /** @__PURE__ @class */ (function () {
         return newResults;
     };
     Page.prototype.updatePageSize = function (pageingDetails) {
-        var updateSize = pageingDetails.result.length;
+        var updateSize = pageingDetails.count;
         var gridPagerModule = this.parent.grid.pagerModule;
         if (this.parent.pageSettings.pageSizes === true) {
             if (gridPagerModule.pagerObj.pagerdropdownModule['dropDownListObject'].value === gridPagerModule.pagerObj.getLocalizedLabel('All')) {
@@ -11449,7 +11867,7 @@ var Aggregate = /** @__PURE__ @class */ (function () {
         var cellElement = createElement('td', {
             className: 'e-summary'
         });
-        if (this.parent.isReact) {
+        if (this.parent.isReact && typeof (summaryColumn.footerTemplate) !== 'string') {
             var renderReactTemplates = 'renderReactTemplates';
             tempObj.fn(single[summaryColumn.columnName], this.parent, tempObj.property, '', null, null, cellElement);
             this.parent["" + renderReactTemplates]();
@@ -12071,7 +12489,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
             focusModule.getContent().matrix.current = [actualIndex, focusModule.getContent().matrix.current[1]];
             if (this.parent.editModule['isAddedRowByMethod'] && !isNullOrUndefined(this.parent.editModule['addRowIndex']) && !this.parent.editModule['isAddedRowByContextMenu']) {
                 var newlyAddedRecords = this.parent.getBatchChanges()['addedRecords'];
-                var index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[newlyAddedRecords.length - 1].getAttribute('data-rowindex'), 10);
+                var index = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[newlyAddedRecords.length - 1].getAttribute('aria-rowindex'), 10) - 1;
                 this.batchRecords.splice(index, 0, newlyAddedRecords[newlyAddedRecords.length - 1]);
             }
         }
@@ -12100,7 +12518,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
             childs = findChildrenRecords(data);
             uid = this.parent.getSelectedRows()[0].getAttribute('data-uid');
         }
-        var parentRowIndex = parseInt(this.parent.grid.getRowElementByUID(uid).getAttribute('data-rowindex'), 10);
+        var parentRowIndex = parseInt(this.parent.grid.getRowElementByUID(uid).getAttribute('aria-rowindex'), 10) - 1;
         if (childs.length) {
             var totalCount = parentRowIndex + childs.length;
             var firstChildIndex = parentRowIndex + 1;
@@ -12137,7 +12555,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
     BatchEdit.prototype.updateRowIndex = function () {
         var rows = this.parent.grid.getDataRows();
         for (var 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());
         }
     };
     BatchEdit.prototype.updateChildCount = function (records) {
@@ -12266,7 +12684,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                 if (this.parent.editModule['isAddedRowByMethod'] && addRecords.length && !isNullOrUndefined(this.parent.editModule['addRowIndex']) && !this.parent.editModule['isAddedRowByContextMenu']) {
                     addRecords.reverse();
                     for (var i_1 = 0; i_1 < addRecords.length; i_1++) {
-                        var index_1 = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[parseInt(i_1.toString(), 10)].getAttribute('data-rowindex'), 10);
+                        var index_1 = parseInt(this.parent.getContentTable().getElementsByClassName('e-insertedrow')[parseInt(i_1.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1;
                         data.splice(index_1, 0, addRecords[parseInt(i_1.toString(), 10)]);
                     }
                 }
@@ -12406,8 +12824,15 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
     BatchEdit.prototype.nextCellIndex = function (args) {
         var index = 'index';
         var rowIndex = 'rowIndex';
+        var batchChanges = this.parent.getBatchChanges();
+        var 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;
@@ -12483,7 +12908,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         }
         if (e.target.classList.contains('e-treegridcollapse') || e.target.classList.contains('e-treegridexpand')) {
             var tr = parentsUntil(e.target, 'e-row');
-            var rowIndex = tr && parseInt(tr.getAttribute('data-rowindex'), 10);
+            var 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;
@@ -12653,7 +13078,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         if (!(this.parent.grid.editSettings.allowEditing) || this.parent.grid.isEdit) {
             return;
         }
-        var column = this.parent.grid.getColumnByIndex(+target.closest('td.e-rowcell').getAttribute('data-colindex'));
+        var 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) {
@@ -12661,8 +13086,8 @@ var Edit = /** @__PURE__ @class */ (function () {
             this.parent.grid.setProperties({ selectedRowIndex: args.rowIndex }, true);
             if (this.parent.enableVirtualization) {
                 var 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');
         }
@@ -12706,7 +13131,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         var 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') {
@@ -13030,8 +13455,8 @@ var Edit = /** @__PURE__ @class */ (function () {
             }
         }
         var rows = this.parent.grid.getDataRows();
-        var firstAriaIndex = rows.length ? +rows[0].getAttribute('data-rowindex') : 0;
-        var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
+        var firstAriaIndex = rows.length ? +rows[0].getAttribute('aria-rowindex') - 1 : 0;
+        var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
         var withinRange = this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
         var isVirtualization = this.parent.enableVirtualization && this.addRowIndex > -1 && this.prevAriaRowIndex !== '-1';
         if (this.parent.editSettings.mode !== 'Dialog') {
@@ -13082,7 +13507,7 @@ var Edit = /** @__PURE__ @class */ (function () {
                 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();
                 }
@@ -13178,7 +13603,7 @@ var Edit = /** @__PURE__ @class */ (function () {
                 this.selectedIndex = this.parent.grid.selectedRowIndex;
             }
             if (this.parent.enableVirtualization) {
-                var selector = '.e-row[data-rowindex="' + this.selectedIndex + '"]';
+                var selector = '.e-row[aria-rowindex="' + (this.selectedIndex + 1) + '"]';
                 var row = void 0;
                 if (this.selectedIndex > -1 && this.parent.editSettings.newRowPosition !== 'Top' &&
                     this.parent.editSettings.newRowPosition !== 'Bottom') {
@@ -13188,7 +13613,7 @@ var Edit = /** @__PURE__ @class */ (function () {
                 }
                 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;
                     }
@@ -13281,7 +13706,7 @@ var Edit = /** @__PURE__ @class */ (function () {
             var isVirtualization = this.parent.enableVirtualization && this.addRowIndex > -1 && this.prevAriaRowIndex !== '-1';
             var rows = this.parent.getRows();
             var firstAriaIndex = rows.length ? currentData.indexOf(currentData[0]) : 0;
-            var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
+            var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
             var withinRange = this.parent.enableVirtualization && args.index !== 0 ? true :
                 this.selectedIndex >= firstAriaIndex && this.selectedIndex <= lastAriaIndex;
             if (currentData.length) {
@@ -13475,7 +13900,7 @@ var Edit = /** @__PURE__ @class */ (function () {
     Edit.prototype.closeEdit = function () {
         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();
     };
@@ -13643,6 +14068,11 @@ var __extends$g = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+/**
+ * VirtualTreeContentRenderer
+ *
+ * @hidden
+ */
 var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
     __extends$g(VirtualTreeContentRenderer, _super);
     function VirtualTreeContentRenderer(parent, locator) {
@@ -13664,23 +14094,45 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
     VirtualTreeContentRenderer.prototype.getModelGenerator = function () {
         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.
+     */
     VirtualTreeContentRenderer.prototype.getRowByIndex = function (index) {
         if (this.parent.enableVirtualization && this.parent.isFrozenGrid()) {
             return this.getRowCollection(index, true);
         }
         var dataRows = this.parent.getDataRows();
-        var targetRow = dataRows.find(function (e) { return parseInt(e.getAttribute('data-rowindex'), 10) === index; });
+        var targetRow = dataRows.find(function (e) { return 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.
+     */
     VirtualTreeContentRenderer.prototype.getFrozenRightVirtualRowByIndex = function (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
     VirtualTreeContentRenderer.prototype.getRowCollection = function (index, isMovable, isRowObject, isFrozenRight) {
-        var startIdx = parseInt(this.parent.getRows()[0].getAttribute(dataRowIndex), 10);
+        var startIdx = parseInt(this.parent.getRows()[0].getAttribute(ariaRowIndex), 10) - 1;
         var rowCollection = this.parent.getDataRows();
         var collection = isRowObject ? this.parent.getCurrentViewRecords() : rowCollection;
         var selectedRow = collection[index - startIdx];
@@ -13694,12 +14146,27 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                     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}
+     */
     VirtualTreeContentRenderer.prototype.addEventListener = function () {
         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}
+     */
     VirtualTreeContentRenderer.prototype.virtualOtherAction = function (args) {
         if (args.setTop) {
             this.translateY = 0;
@@ -13710,10 +14177,22 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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}
+     */
     VirtualTreeContentRenderer.prototype.indexModifier = function (args) {
         var content = this.parent.getContent().querySelector('.e-content');
+        var 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) {
                 var nextSetResIndex = ~~(content.scrollTop / this.parent.getRowHeight());
                 var lastIndex = nextSetResIndex + this.parent.getRows().length;
                 if (lastIndex > args.count) {
@@ -13731,12 +14210,12 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         }
         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 {
@@ -13744,6 +14223,12 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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}
+     */
     VirtualTreeContentRenderer.prototype.eventListener = function (action) {
         var _this = this;
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
@@ -13770,6 +14255,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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);
@@ -13780,15 +14266,30 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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.prototype.eventListener.call(this, '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}
+     */
     VirtualTreeContentRenderer.prototype.cellFocus = function (e) {
         var virtualCellFocus = 'virtualCellFocus';
         _super.prototype["" + virtualCellFocus].call(this, 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}
+     */
     VirtualTreeContentRenderer.prototype.onDataReady = function (e) {
         _super.prototype.onDataReady.call(this, e);
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
@@ -13813,6 +14314,12 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    /**
+     * 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}
+     */
     VirtualTreeContentRenderer.prototype.renderTable = function () {
         _super.prototype.renderTable.call(this);
         if (!(this.parent.dataSource instanceof DataManager && this.parent.dataSource.dataSource.url !== undefined
@@ -13822,6 +14329,17 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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.
+     */
     VirtualTreeContentRenderer.prototype.getTranslateY = function (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)) {
@@ -13829,15 +14347,15 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                 this.isRemoteExpand = false;
                 return this.preTranslate;
             }
-            else {
-                this.preTranslate = _super.prototype.getTranslateY.call(this, sTop, cHeight, info, isOnenter);
-                return _super.prototype.getTranslateY.call(this, sTop, cHeight, info, isOnenter);
-            }
-        }
-        else {
-            return _super.prototype.getTranslateY.call(this, sTop, cHeight, info, isOnenter);
+            this.preTranslate = _super.prototype.getTranslateY.call(this, sTop, cHeight, info, isOnenter);
         }
+        return _super.prototype.getTranslateY.call(this, sTop, cHeight, info, isOnenter);
     };
+    /**
+     * Handles the dataBound event to calculate and set the initial row top position for the grid.
+     *
+     * @returns {void}
+     */
     VirtualTreeContentRenderer.prototype.dataBoundEvent = function () {
         var dataBoundEve = 'dataBound';
         var initialRowTop = 'initialRowTop';
@@ -13854,11 +14372,27 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         }
         _super.prototype["" + dataBoundEve].call(this);
     };
+    /**
+     * 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.
+     */
     VirtualTreeContentRenderer.prototype.rowSelectedEvent = function (args) {
         var rowSelected = 'rowSelected';
         _super.prototype["" + rowSelected].call(this, 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}
+     */
     VirtualTreeContentRenderer.prototype.toSelectVirtualRow = function (args) {
         if (this.parent.isEdit) {
             return;
@@ -13881,9 +14415,20 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             _super.prototype["" + selectVirtualRow].call(this, 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.
+     */
     VirtualTreeContentRenderer.prototype.refreshCell = function (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.
+     */
     VirtualTreeContentRenderer.prototype.generateCells = function () {
         var cells = [];
         for (var i = 0; i < this.parent.columns.length; i++) {
@@ -13891,6 +14436,18 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         }
         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.
+     */
     VirtualTreeContentRenderer.prototype.generateCell = function (col, rowId, cellType, colSpan, oIndex, foreignKeyData) {
         var opt = {
             'visible': col.visible,
@@ -13909,13 +14466,29 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         }
         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}
+     */
     VirtualTreeContentRenderer.prototype.beginEdit = function (e) {
         this['editedRowIndex'] = e.index;
-        var selector = '.e-row[data-rowindex="' + e.index + '"]';
+        var selector = '.e-row[aria-rowindex="' + (e.index + 1) + '"]';
         var index = this.parent.getContent().querySelector(selector).rowIndex;
         var 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}
+     */
     VirtualTreeContentRenderer.prototype.beginAdd = function (args) {
         var addAction = 'addActionBegin';
         var isAdd = 'isAdd';
@@ -13925,8 +14498,8 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         this.addRowIndex = addArgs.addRowIndex;
         this.dataRowIndex = addArgs.dataRowIndex;
         var rows = this.parent.getRows();
-        var firstAriaIndex = rows.length ? +rows[0].getAttribute('data-rowindex') : 0;
-        var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('data-rowindex') : 0;
+        var firstAriaIndex = rows.length ? +rows[0].getAttribute('aria-rowindex') - 1 : 0;
+        var lastAriaIndex = rows.length ? +rows[rows.length - 1].getAttribute('aria-rowindex') - 1 : 0;
         var withInRange = this.parent.selectedRowIndex >= firstAriaIndex && this.parent.selectedRowIndex <= lastAriaIndex;
         if (!(this.rowPosition === 'Top' || this.rowPosition === 'Bottom')) {
             this["" + isAdd] = true;
@@ -13936,10 +14509,21 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             _super.prototype["" + addAction].call(this, 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.
+     */
     VirtualTreeContentRenderer.prototype.restoreEditState = function () {
         var restoreEdit = 'restoreEdit';
         _super.prototype["" + restoreEdit].call(this);
     };
+    /**
+     * Resets the edit state if certain conditions are met.
+     *
+     * @returns {void}
+     */
     VirtualTreeContentRenderer.prototype.resetIseditValue = function () {
         var resetIsEdit = 'resetIsedit';
         var isAdd = 'isAdd';
@@ -13948,6 +14532,12 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             _super.prototype["" + resetIsEdit].call(this);
         }
     };
+    /**
+     * 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}
+     */
     VirtualTreeContentRenderer.prototype.virtualEditSuccess = function () {
         var isAdd = 'isAdd';
         var content = this.parent.getContent().querySelector('.e-content');
@@ -13955,14 +14545,33 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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}
+     */
     VirtualTreeContentRenderer.prototype.cancelEdit = function (args) {
         var editCancel = 'editCancel';
         _super.prototype["" + editCancel].call(this, 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.
+     */
     VirtualTreeContentRenderer.prototype.toSelectRowOnContextOpen = function (args) {
         var selectRowOnContextOpen = 'selectRowOnContextOpen';
         _super.prototype["" + selectRowOnContextOpen].call(this, 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.
+     */
     VirtualTreeContentRenderer.prototype.restoreNewRow = function () {
         var isAdd = 'isAdd';
         var content = this.parent.getContent().querySelector('.e-content');
@@ -13971,10 +14580,41 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             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.
+     */
     VirtualTreeContentRenderer.prototype.getData = function (data) {
         var getVirtualData = 'getVirtualData';
         _super.prototype["" + getVirtualData].call(this, 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}
+     */
+    VirtualTreeContentRenderer.prototype.handleActionBegin = function (args) {
+        var actionBegin = 'actionBegin';
+        _super.prototype["" + actionBegin].call(this, 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.
+     */
     VirtualTreeContentRenderer.prototype.onActionComplete = function (args) {
         if (args.requestType === 'add') {
             var addArgs = { newRowPosition: this.rowPosition, addRowIndex: this.addRowIndex, dataRowIndex: this.dataRowIndex };
@@ -13986,6 +14626,19 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         var actionComplete = 'actionComplete';
         _super.prototype["" + actionComplete].call(this, 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.
+     */
     VirtualTreeContentRenderer.prototype.onEnteredAction = function () {
         var _this = this;
         return function (element, current, direction, e, isWheel, check) {
@@ -14028,8 +14681,17 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             }
         };
     };
+    /**
+     * 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.
+     */
     VirtualTreeContentRenderer.prototype.scrollListeners = function (scrollArgs) {
         this['scrollAfterEdit']();
+        this.shouldPreventScrolling(scrollArgs);
         if (this.parent.root.enablePersistence) {
             this.parent.root.scrollPosition = scrollArgs.offset;
         }
@@ -14049,9 +14711,11 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         if (upScroll && (scrollArgs.direction !== 'right' && scrollArgs.direction !== 'left') && !isNullOrUndefined(content)) {
             var vHeight = +(this.parent.height.toString().indexOf('%') < 0 ? parseInt(this.parent.height.toString(), 10) :
                 this.parent.element.getBoundingClientRect().height);
-            var 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
+            var scrolledRows = Math.floor(content.scrollTop / rowHeight);
+            var visibleRows = Math.ceil(vHeight / rowHeight);
+            // Calculate the index by subtracting the page size from the total rows taken into account
+            var 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) {
@@ -14128,20 +14792,19 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                 this.parent.selectionModule && this.parent.selectionModule.isRowSelected) {
                 this.startIndex = currentViewData[0]["" + indexValue] + (this.parent.pageSettings.pageSize / 2);
             }
-            if (this.parent.root.isSelfReference) {
-                var 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 {
@@ -14154,24 +14817,23 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
-        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))) {
             var 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;
             }
@@ -14199,9 +14861,32 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    /**
+     * Prevents scrolling under specific conditions related to adding a new row.
+     *
+     * @param {ScrollArg} scrollArgs - The scroll event arguments containing offset details.
+     * @returns {void}
+     */
+    VirtualTreeContentRenderer.prototype.shouldPreventScrolling = function (scrollArgs) {
+        var 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}
+     */
     VirtualTreeContentRenderer.prototype.appendContent = function (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;
             }
@@ -14229,6 +14914,9 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             target.appendChild(newChild);
             var 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);
@@ -14261,6 +14949,12 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
             _super.prototype["" + ensureSelectedRowPosition].call(this);
         }
     };
+    /**
+     * 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}
+     */
     VirtualTreeContentRenderer.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
             return;
@@ -14281,6 +14975,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
         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);
     };
     return VirtualTreeContentRenderer;
 }(VirtualContentRenderer));
@@ -14294,6 +14989,15 @@ var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
         _this.timer = 0;
         return _this;
     }
+    /**
+     * 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}
+     */
     TreeInterSectionObserver.prototype.observes = function (callback, onEnterCallback, instance) {
         var containerRect = 'containerRect';
         _super.prototype["" + containerRect] = getValue('options', this).container.getBoundingClientRect();
@@ -14304,9 +15008,23 @@ var TreeInterSectionObserver = /** @__PURE__ @class */ (function (_super) {
             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.
+     */
     TreeInterSectionObserver.prototype.clear = function () {
         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.
+     */
     TreeInterSectionObserver.prototype.virtualScrollHandlers = function (callback, onEnterCallback, instance) {
         var _this = this;
         var delay = Browser.info.name === 'chrome' ? 200 : 100;
@@ -14417,9 +15135,6 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         Grid.Inject(TreeVirtual);
         this.addEventListener();
     }
-    VirtualScroll.prototype.returnVisualData = function (args) {
-        args.data = this.visualData;
-    };
     /**
      * For internal use only - Get the module name.
      *
@@ -14453,28 +15168,58 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         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.
+     */
     VirtualScroll.prototype.collapseExpandVirtualchilds = function (row) {
         this.parent.grid.notify(virtualActionArgs, { isExpandCollapse: true });
         this.expandCollapseRec = row.record;
         row.record.expanded = row.action === 'collapse' ? false : true;
-        var ret = {
+        this.parent.flatData.map(function (e) { return e.expanded = e.uniqueID === row.record.uniqueID &&
+            e.expanded !== row.record.expanded ? row.record.expanded : e.expanded; });
+        var 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();
+        var 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}
+     */
+    VirtualScroll.prototype.handleSelection = function () {
+        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();
         }
-        var 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}
+     */
     VirtualScroll.prototype.virtualPageAction = function (pageingDetails) {
         var _this = this;
         var dm = new DataManager(pageingDetails.result);
@@ -14505,7 +15250,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             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 });
             }
@@ -14545,10 +15290,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                     sIndex = sIndex > 0 ? sIndex : 0;
                     endIndex = visualData.length;
                     if (endIndex - startIndex < resourceCount) {
-                        var newRowsCount = sIndex - startIndex;
                         startIndex = sIndex;
                         if (visualData.indexOf(this.expandCollapseRec) > visualData.length - resourceCount / 2) {
-                            var newTranslateY = translateY + (newRowsCount * this.parent.grid.getRowHeight());
+                            var newTranslateY = startIndex * this.parent.grid.getRowHeight();
                             this.parent.grid.contentModule['translateY'] = newTranslateY;
                             this.parent.grid.contentModule.virtualEle.adjustTable(0, newTranslateY);
                         }
@@ -14571,7 +15315,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 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;
                 }
             }
@@ -14598,6 +15342,26 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
     VirtualScroll.prototype.destroy = function () {
         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.
+     */
+    VirtualScroll.prototype.updateSelection = function (args) {
+        if (args.isHeaderCheckboxClicked &&
+            this.parent.grid.currentViewData.length !== this.parent.grid.selectionModule.selectedRowIndexes.length) {
+            var updateRowSelection = 'updateRowSelection';
+            for (var 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);
+                }
+            }
+        }
+    };
     return VirtualScroll;
 }());
 var TreeVirtual = /** @__PURE__ @class */ (function (_super) {
@@ -15096,5 +15860,5 @@ var InfiniteScroll = /** @__PURE__ @class */ (function () {
     return 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.es5.js.map