@syncfusion/ej2-treegrid 28.2.6 → 29.1.37

package/src/treegrid/renderer/virtual-tree-content-render.js

@@ -19,7 +19,12 @@ import { TreeVirtualRowModelGenerator } from '../renderer/virtual-row-model-gene
 import * as events from '../base/constant';
 import { isNullOrUndefined, EventHandler, getValue, setValue, Browser, debounce } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
-import { isCountRequired, isRemoteData } from '../utils';
+import { isCountRequired } from '../utils';
+/**
+ * VirtualTreeContentRenderer
+ *
+ * @hidden
+ */
 var VirtualTreeContentRenderer = /** @class */ (function (_super) {
     __extends(VirtualTreeContentRenderer, _super);
     function VirtualTreeContentRenderer(parent, locator) {
@@ -41,23 +46,45 @@ var VirtualTreeContentRenderer = /** @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(literals.dataRowIndex), 10);
+        var startIdx = parseInt(this.parent.getRows()[0].getAttribute(literals.ariaRowIndex), 10) - 1;
         var rowCollection = this.parent.getDataRows();
         var collection = isRowObject ? this.parent.getCurrentViewRecords() : rowCollection;
         var selectedRow = collection[index - startIdx];
@@ -71,12 +98,27 @@ var VirtualTreeContentRenderer = /** @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(events.virtualActionArgs, this.virtualOtherAction, this);
         this.parent.on(events.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;
@@ -87,10 +129,22 @@ var VirtualTreeContentRenderer = /** @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) {
@@ -108,12 +162,12 @@ var VirtualTreeContentRenderer = /** @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 {
@@ -121,6 +175,12 @@ var VirtualTreeContentRenderer = /** @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
@@ -147,6 +207,7 @@ var VirtualTreeContentRenderer = /** @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(events.actionBegin, this.handleActionBegin.bind(this));
             this.parent.addEventListener(events.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);
@@ -157,15 +218,30 @@ var VirtualTreeContentRenderer = /** @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
@@ -190,6 +266,12 @@ var VirtualTreeContentRenderer = /** @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
@@ -199,6 +281,17 @@ var VirtualTreeContentRenderer = /** @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)) {
@@ -206,15 +299,15 @@ var VirtualTreeContentRenderer = /** @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';
@@ -231,11 +324,27 @@ var VirtualTreeContentRenderer = /** @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;
@@ -258,9 +367,20 @@ var VirtualTreeContentRenderer = /** @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++) {
@@ -268,6 +388,18 @@ var VirtualTreeContentRenderer = /** @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,
@@ -286,13 +418,29 @@ var VirtualTreeContentRenderer = /** @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';
@@ -302,8 +450,8 @@ var VirtualTreeContentRenderer = /** @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;
@@ -313,10 +461,21 @@ var VirtualTreeContentRenderer = /** @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';
@@ -325,6 +484,12 @@ var VirtualTreeContentRenderer = /** @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');
@@ -332,14 +497,33 @@ var VirtualTreeContentRenderer = /** @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');
@@ -348,10 +532,41 @@ var VirtualTreeContentRenderer = /** @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 };
@@ -363,6 +578,19 @@ var VirtualTreeContentRenderer = /** @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) {
@@ -405,8 +633,17 @@ var VirtualTreeContentRenderer = /** @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;
         }
@@ -426,9 +663,11 @@ var VirtualTreeContentRenderer = /** @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) {
@@ -505,20 +744,19 @@ var VirtualTreeContentRenderer = /** @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 {
@@ -531,24 +769,23 @@ var VirtualTreeContentRenderer = /** @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;
             }
@@ -576,9 +813,32 @@ var VirtualTreeContentRenderer = /** @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;
             }
@@ -606,6 +866,9 @@ var VirtualTreeContentRenderer = /** @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);
@@ -638,6 +901,12 @@ var VirtualTreeContentRenderer = /** @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;
@@ -658,6 +927,7 @@ var VirtualTreeContentRenderer = /** @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));
@@ -672,6 +942,15 @@ var TreeInterSectionObserver = /** @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();
@@ -682,9 +961,23 @@ var TreeInterSectionObserver = /** @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;