@syncfusion/ej2-treegrid 28.2.4 → 29.1.33

package/src/treegrid/base/treegrid.js

@@ -114,13 +114,13 @@ var TreeGrid = /** @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) {
@@ -128,13 +128,13 @@ var TreeGrid = /** @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) {
@@ -142,21 +142,21 @@ var TreeGrid = /** @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) {
@@ -164,9 +164,9 @@ var TreeGrid = /** @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) {
@@ -174,9 +174,9 @@ var TreeGrid = /** @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) {
@@ -204,7 +204,8 @@ var TreeGrid = /** @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';
@@ -295,11 +296,11 @@ var TreeGrid = /** @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) {
@@ -308,7 +309,7 @@ var TreeGrid = /** @class */ (function (_super) {
         }
     };
     /**
-     * Clears all the sorted columns of the TreeGrid.
+     * Clears all the sorted columns in the TreeGrid.
      *
      * @returns {void}
      */
@@ -318,9 +319,9 @@ var TreeGrid = /** @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
      */
@@ -330,36 +331,32 @@ var TreeGrid = /** @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) {
@@ -382,9 +379,8 @@ var TreeGrid = /** @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}
      */
@@ -528,7 +524,7 @@ var TreeGrid = /** @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}
@@ -546,9 +542,12 @@ var TreeGrid = /** @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 () {
@@ -865,7 +864,7 @@ var TreeGrid = /** @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.');
         }
@@ -875,9 +874,6 @@ var TreeGrid = /** @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.');
         }
@@ -903,9 +899,12 @@ var TreeGrid = /** @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 = {
@@ -941,7 +940,7 @@ var TreeGrid = /** @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);
                 }
             });
@@ -1075,14 +1074,8 @@ var TreeGrid = /** @class */ (function (_super) {
             _this.trigger(events.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(events.rowSelected, args);
@@ -1824,6 +1817,14 @@ var TreeGrid = /** @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.
      *
@@ -2049,7 +2050,11 @@ var TreeGrid = /** @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}
@@ -2087,7 +2092,8 @@ var TreeGrid = /** @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}
@@ -2106,7 +2112,10 @@ var TreeGrid = /** @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
@@ -2198,7 +2207,9 @@ var TreeGrid = /** @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
      */
@@ -2206,7 +2217,9 @@ var TreeGrid = /** @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
      */
@@ -2214,12 +2227,14 @@ var TreeGrid = /** @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) {
@@ -2230,7 +2245,9 @@ var TreeGrid = /** @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}
      */
@@ -2240,7 +2257,9 @@ var TreeGrid = /** @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}
      */
@@ -2250,7 +2269,9 @@ var TreeGrid = /** @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.
@@ -2263,10 +2284,12 @@ var TreeGrid = /** @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.
+     *
+     * This method allows for bulk updates of row data programmatically.
      *
-     * @param {number} index Defines the row index.
-     * @param {Object} data Defines the data object to be updated.
+     * @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) {
@@ -2282,12 +2305,13 @@ var TreeGrid = /** @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))) {
@@ -2299,9 +2323,11 @@ var TreeGrid = /** @class */ (function (_super) {
         }
     };
     /**
-     * To edit any particular row by TR element.
+     * Initiates editing for a specific row using its HTML element.
+     *
+     * This allows for manual control of which row enters edit mode through the UI.
      *
-     * @param {HTMLTableRowElement} row - Defines the table row to be edited.
+     * @param {HTMLTableRowElement} row - The table row element to enter into edit mode.
      * @returns {void}
      */
     TreeGrid.prototype.startEdit = function (row) {
@@ -2310,10 +2336,12 @@ var TreeGrid = /** @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) {
@@ -2322,10 +2350,12 @@ var TreeGrid = /** @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) {
@@ -2334,7 +2364,9 @@ var TreeGrid = /** @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}
      */
@@ -2344,10 +2376,12 @@ var TreeGrid = /** @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) {
@@ -2356,9 +2390,11 @@ var TreeGrid = /** @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) {
@@ -2367,20 +2403,23 @@ var TreeGrid = /** @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) {
@@ -2390,11 +2429,12 @@ var TreeGrid = /** @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) {
@@ -2432,9 +2472,12 @@ var TreeGrid = /** @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) {
@@ -2443,9 +2486,12 @@ var TreeGrid = /** @class */ (function (_super) {
         }
     };
     /**
-     * Defines the text of external message.
+     * Updates the external message displayed within the pager component.
+     *
+     * This is useful for showing custom messages or additional information
+     * related to the data set or pagination status.
      *
-     * @param  {string} message - Defines the message to update.
+     * @param {string} message - The custom message to display in the pager.
      * @returns {void}
      */
     TreeGrid.prototype.updateExternalMessage = function (message) {
@@ -2454,20 +2500,26 @@ var TreeGrid = /** @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.
      *
-     * @param  {string} field - Specifies the column name.
-     * @returns {Column} - Returns tree grid column
+     * This is typically used for obtaining the details of a column for
+     * configuration or data manipulation purposes.
+     *
+     * @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) {
@@ -2478,10 +2530,13 @@ var TreeGrid = /** @class */ (function (_super) {
         })[0];
     };
     /**
-     * Gets a column by UID.
+     * Fetches a column object using the column's unique identifier (UID).
+     *
+     * Useful in scenarios where columns do not have unique field names but
+     * are uniquely identifiable via UID.
      *
-     * @param  {string} uid - Specifies the column UID.
-     * @returns {Column} - Returns tree grid column
+     * @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;
@@ -2497,34 +2552,45 @@ var TreeGrid = /** @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.
      *
-     * @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.
+     * This is useful for dynamically adjusting the visibility of columns
+     * based on user actions or application logic.
+     *
+     * @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) {
@@ -2532,10 +2598,13 @@ var TreeGrid = /** @class */ (function (_super) {
         this.updateColumnModel();
     };
     /**
-     * Hides a column by column name.
+     * Hides one or more columns based on the specified column names.
+     *
+     * Utilized to dynamically reduce the visibility of columns based on
+     * user roles or preferences.
      *
-     * @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.
+     * @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) {
@@ -2543,37 +2612,48 @@ var TreeGrid = /** @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);
@@ -2589,19 +2669,25 @@ var TreeGrid = /** @class */ (function (_super) {
         return !isNullOrUndefined(index) ? index : -1;
     };
     /**
-     * Gets a column index by UID.
+     * Determines the column index based on the unique identifier (UID).
+     *
+     * This can be crucial in scenarios that involve dynamic column management
+     * where UID provides an accurate reference.
      *
-     * @param  {string} uid - Specifies the column UID.
-     * @returns {number} - Returns column index
+     * @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.
      *
-     * @param {boolean} isRefresh - Defined whether to update DOM
-     * @returns {Column[]} - Returns treegrid columns collection
+     * Use this method to retrieve and optionally refresh the list of columns
+     * to ensure up-to-date configurations and settings.
+     *
+     * @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));
@@ -2664,9 +2750,12 @@ var TreeGrid = /** @class */ (function (_super) {
         });
     };
     /**
-     * Gets the content div of the TreeGrid.
+     * Retrieves the main content area of the TreeGrid.
+     *
+     * This method allows access to the main content DIV, which can
+     * be used for layout adjustments or adding custom elements.
      *
-     * @returns {Element} - Return tree grid content element
+     * @returns {Element} - Returns the TreeGrid content HTML element.
      */
     TreeGrid.prototype.getContent = function () {
         return this.grid.getContent();
@@ -2697,17 +2786,23 @@ var TreeGrid = /** @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.
      *
-     * @returns {Element} - Returns content table element
+     * This table contains the main data display area, allowing for
+     * interaction and data manipulation directly within the TreeGrid.
+     *
+     * @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.
+     *
+     * Provides a way to access the visual representation of data for purposes
+     * like custom formatting or event binding.
      *
-     * @returns {Element[]} - Returns row elements
+     * @returns {Element[]} - Returns an array of data row elements.
      */
     TreeGrid.prototype.getDataRows = function () {
         var dRows = [];
@@ -2720,9 +2815,12 @@ var TreeGrid = /** @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 () {
@@ -2730,60 +2828,78 @@ var TreeGrid = /** @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.
      *
-     * @returns {Element} - Return header table element
+     * This method is useful for direct access to the table structure
+     * where column headers are defined.
+     *
+     * @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 = [];
@@ -2796,7 +2912,9 @@ var TreeGrid = /** @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}
      */
@@ -2804,7 +2922,10 @@ var TreeGrid = /** @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}
      */
@@ -2812,7 +2933,10 @@ var TreeGrid = /** @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}
      */
@@ -2832,18 +2956,24 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.refresh();
     };
     /**
-     * Get the records of checked rows.
+     * Retrieves the records associated with rows that have their checkboxes checked.
+     *
+     * Facilitates operations that require information about specifically selected or
+     * interacted rows within the grid.
      *
-     * @returns {Object[]} - Returns records that has been checked
+     * @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.
      *
-     * @returns {Object[]} - Returns visible records based on collapse state of rows
+     * It considers row expansion and collapse states to return only those records
+     * that a user can currently interact with.
+     *
+     * @returns {Object[]} - Returns visible records reflecting the TreeGrid's current view.
      * @isGenericType true
      */
     TreeGrid.prototype.getVisibleRecords = function () {
@@ -2863,26 +2993,35 @@ var TreeGrid = /** @class */ (function (_super) {
         return visibleRecords;
     };
     /**
-     * Get the indexes of checked rows.
+     * Retrieves the indices of rows that have their checkboxes checked.
+     *
+     * This can assist in programatically assessing which rows have been selected
+     * by checkbox interaction for further processing.
      *
-     * @returns {number[]} - Returns checked row indexes
+     * @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) {
@@ -2911,7 +3050,10 @@ var TreeGrid = /** @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}
      */
@@ -2966,12 +3108,15 @@ var TreeGrid = /** @class */ (function (_super) {
         }
     };
     /**
-     * Expands child rows
+     * Expands the specified parent row within the TreeGrid to reveal its nested data.
      *
-     * @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
+     * This method is useful for programmatically expanding rows to display their
+     * hierarchical children, providing detailed views for nested data structures.
+     *
+     * @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) {
@@ -2987,7 +3132,7 @@ var TreeGrid = /** @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)) {
@@ -3027,7 +3172,6 @@ var TreeGrid = /** @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]))) {
@@ -3071,12 +3215,12 @@ var TreeGrid = /** @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];
@@ -3086,18 +3230,27 @@ var TreeGrid = /** @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.
+     *
+     * 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 - Collapse the given row
-     * @param {Object} record - Collapse the given record
-     * @param {Object} key - Primary key value
+     * @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) {
@@ -3179,9 +3332,12 @@ var TreeGrid = /** @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) {
@@ -3201,9 +3357,12 @@ var TreeGrid = /** @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) {
@@ -3258,9 +3417,12 @@ var TreeGrid = /** @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) {
@@ -3280,9 +3442,12 @@ var TreeGrid = /** @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) {
@@ -3321,7 +3486,10 @@ var TreeGrid = /** @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}
      */
@@ -3332,10 +3500,23 @@ var TreeGrid = /** @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}
      */
@@ -3346,6 +3527,16 @@ var TreeGrid = /** @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) {
@@ -3365,7 +3556,7 @@ var TreeGrid = /** @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;
@@ -3429,12 +3620,12 @@ var TreeGrid = /** @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(events.localPagedExpandCollapse, { action: action, row: row, record: record });
         }
@@ -3444,6 +3635,9 @@ var TreeGrid = /** @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)) {
@@ -3465,6 +3659,9 @@ var TreeGrid = /** @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)) {
@@ -3707,7 +3904,9 @@ var TreeGrid = /** @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;
                 });
@@ -3853,28 +4052,6 @@ var TreeGrid = /** @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}
@@ -3882,6 +4059,7 @@ var TreeGrid = /** @class */ (function (_super) {
     TreeGrid.prototype.addListener = function () {
         this.on('updateResults', this.updateResultModel, this);
         this.grid.on('initial-end', this.afterGridRender, this);
+        this.grid.on('last-rowcell-border-updated', this.lastRowCellBorderUpdated, this);
     };
     TreeGrid.prototype.updateResultModel = function (returnResult) {
         this.dataResults = returnResult;
@@ -3896,27 +4074,31 @@ var TreeGrid = /** @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.
+     *
+     * This method allows for dynamic filtering against column data using various
+     * operators and values, supporting case-sensitive filtering and accent sensitivity.
      *
-     * @param  {string} fieldName - Defines the field name of the column.
-     * @param  {string} filterOperator - Defines the operator to filter records.
-     * @param  {string | number | Date | boolean} filterValue - Defines the value used to filter records.
-     * @param  {string} predicate - Defines the relationship between one filter query and another by using AND or OR predicate.
-     * @param  {boolean} matchCase - If match case is set to true, the TreeGrid filters the records with exact match. if false, it filters
-     * case insensitive records (uppercase and lowercase letters are treated the same).
-     * @param  {boolean} ignoreAccent - If ignoreAccent is set to true,
-     * then filter ignores diacritic characters or accents while filtering.
-     * @param  {string} actualFilterValue - Defines the actual filter value for filter column.
-     * @param  {string} actualOperator - Defines the actual filter operator for filter column.
+     * @param {string} fieldName - The name of the column to apply the filter on.
+     * @param {string} filterOperator - The operator used to perform the filter (e.g., 'equals', 'startswith').
+     * @param {string | number | Date | boolean } filterValue - The value to filter against.
+     * @param {string} predicate - The logical operator ('AND'/'OR') to combine this filter with others.
+     * @param {boolean} matchCase - If true, the filter performs a case-sensitive match.
+     * @param {boolean} ignoreAccent - If true, the filter ignores diacritical marks.
+     * @param {string} actualFilterValue - The original value used for filtering, useful for distinguishing displayed and actual values.
+     * @param {string} actualOperator - The actual operator that is applied when different from the displayed operator.
      * @returns {void}
      */
     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}
      */
@@ -3935,26 +4117,32 @@ var TreeGrid = /** @class */ (function (_super) {
         this.grid.removeFilteredColsByField(field, isClearFilterBar);
     };
     /**
-     * Selects a row by given index.
+     * Selects a row in the TreeGrid by its index.
+     *
+     * Use this method to highlight a specific row; useful for programmatically navigating data.
      *
-     * @param  {number} index - Defines the row index.
-     * @param  {boolean} isToggle - If set to true, then it toggles the selection.
+     * @param {number} index - Index of the row to select.
+     * @param {boolean} isToggle - If true, toggles the selection state of the row.
      * @returns {void}
      */
     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.
      *
-     * @param  {number[]} rowIndexes - Specifies the row indexes.
+     * Useful for batch operations where multiple row selections are necessary.
+     *
+     * @param {number[]} rowIndexes - Array of row index numbers to select.
      * @returns {void}
      */
     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}
      */
@@ -3965,39 +4153,47 @@ var TreeGrid = /** @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.
      *
-     * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.
+     * This method supports including headers for better context when pasting elsewhere.
+     *
+     * @param {boolean} withHeader - (Optional) If true, includes column headers in the copied data.
      * @returns {void}
      */
     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.
+     *
+     * Automatically places the pasted data starting from the specified indices.
      *
-     * @param {boolean} data - Specifies the date for paste.
-     * @param {boolean} rowIndex - Specifies the row index.
-     * @param {boolean} colIndex - Specifies the column index.
+     * @param {string} data - The clipboard data to paste.
+     * @param {number} rowIndex - The starting row index for pasting.
+     * @param {number} colIndex - The starting column index for pasting.
      * @returns {void}
      */
     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.
      *
-     * @param  {IIndex} cellIndex - Defines the row and column indexes.
-     * @param  {boolean} isToggle - If set to true, then it toggles the selection.
+     * Useful for navigating or highlighting specific data cells within the grid.
+     *
+     * @param {IIndex} cellIndex - An object specifying the row and column indexes.
+     * @param {boolean} isToggle - (Optional) If true, toggles the selection state of the cell.
      * @returns {void}
      */
     TreeGrid.prototype.selectCell = function (cellIndex, isToggle) {
         this.grid.selectCell(cellIndex, isToggle);
     };
     /**
-     * Gets the collection of selected rows.
+     * Retrieves the currently selected rows.
+     *
+     * Useful for obtaining the selected data elements for downstream processing.
      *
-     * @returns {Element[]} - Returns selected row elements collection
+     * @returns {Element[]} - An array of Element objects representing the selected rows.
      */
     TreeGrid.prototype.getSelectedRows = function () {
         return this.grid.getSelectedRows();
@@ -4209,44 +4405,59 @@ var TreeGrid = /** @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.
      *
-     * @returns {{baseModule: Data, treeModule: DataManipulation}}: Returns grid and treegrid data module
+     * This includes both the base data module for standard grid operations and the tree module
+     * for handling hierarchical data, giving complete access to data management capabilities.
+     *
+     * @returns {{baseModule: Data, treeModule: DataManipulation}} - An object containing both grid and tree data modules.
      */
     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) {
@@ -4255,9 +4466,12 @@ var TreeGrid = /** @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.
+     *
+     * This function moves the selected row to become the last child of its preceding row,
+     * altering the visual and hierarchical data structure.
      *
-     * @param {Object} record – specifies the record to do indented
+     * @param {Object} record - (Optional) The record to be indented. If omitted, the currently selected row is used.
      * @returns {void}
      */
     TreeGrid.prototype.indent = function (record) {
@@ -4267,9 +4481,12 @@ var TreeGrid = /** @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.
      *
-     * @param {Object} record – specifies the record to do outdented
+     * This method repositions the selected row to be a sibling of its parent, impacting
+     * its display and the hierarchical relationships within the TreeGrid.
+     *
+     * @param {Object} record - (Optional) The record to be outdented. If omitted, the currently selected row is used.
      * @returns {void}
      */
     TreeGrid.prototype.outdent = function (record) {
@@ -4465,6 +4682,21 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Property('All')
     ], TreeGrid.prototype, "columnQueryMode", void 0);
+    __decorate([
+        Property(true)
+    ], TreeGrid.prototype, "allowSelection", void 0);
+    __decorate([
+        Property(-1)
+    ], TreeGrid.prototype, "selectedRowIndex", void 0);
+    __decorate([
+        Complex({}, SelectionSettings)
+    ], TreeGrid.prototype, "selectionSettings", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "allowExcelExport", void 0);
+    __decorate([
+        Property(false)
+    ], TreeGrid.prototype, "allowPdfExport", void 0);
     __decorate([
         Event()
     ], TreeGrid.prototype, "created", void 0);
@@ -4543,9 +4775,6 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], TreeGrid.prototype, "queryCellInfo", void 0);
-    __decorate([
-        Property(true)
-    ], TreeGrid.prototype, "allowSelection", void 0);
     __decorate([
         Event()
     ], TreeGrid.prototype, "rowSelecting", void 0);
@@ -4636,18 +4865,6 @@ var TreeGrid = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], TreeGrid.prototype, "rowDrop", void 0);
-    __decorate([
-        Property(-1)
-    ], TreeGrid.prototype, "selectedRowIndex", void 0);
-    __decorate([
-        Complex({}, SelectionSettings)
-    ], TreeGrid.prototype, "selectionSettings", void 0);
-    __decorate([
-        Property(false)
-    ], TreeGrid.prototype, "allowExcelExport", void 0);
-    __decorate([
-        Property(false)
-    ], TreeGrid.prototype, "allowPdfExport", void 0);
     __decorate([
         Event()
     ], TreeGrid.prototype, "pdfQueryCellInfo", void 0);