@syncfusion/ej2-treegrid 27.2.2 → 28.1.33

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

@@ -1,4 +1,4 @@
-import { Property, merge, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, Component, closest, classList, setStyleAttribute, select, debounce, remove } from '@syncfusion/ej2-base';
+import { Property, merge, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, Component, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
 import { Grid, Logger as Logger$1, detailLists, Clipboard, getObject, parentsUntil, Print as Print$1, templateCompiler, appendChildren, extend, CellRenderer, getUid, CellType, Freeze as Freeze$1, getNumberFormat, getActualProperties, iterateArrayOrObject, RowDropSettings as RowDropSettings$1, Reorder as Reorder$1, Resize as Resize$1, Scroll, RowDD as RowDD$1, VirtualRowModelGenerator, Filter as Filter$1, Data, ExportHelper, ExcelExport as ExcelExport$1, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, calculateAggregate, Aggregate as Aggregate$1, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, resetRowIndex, Edit as Edit$1, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, Cell, VirtualContentRenderer, InterSectionObserver, getTransformValues, RenderType, VirtualHeaderRenderer, VirtualScroll as VirtualScroll$1, ColumnChooser as ColumnChooser$1, RowRenderer, InfiniteScroll as InfiniteScroll$1 } from '@syncfusion/ej2-grids';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
 import { DataManager, ODataAdaptor, WebApiAdaptor, WebMethodAdaptor, CacheAdaptor, UrlAdaptor, Query, DataUtil, RemoteSaveAdaptor, Deferred, JsonAdaptor, Predicate as Predicate$1 } from '@syncfusion/ej2-data';
@@ -2239,6 +2239,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
      * @returns {void}
      */
     DataManipulation.prototype.updateParentRemoteData = function (args) {
+        var _this = this;
         var actionArgs = 'actionArgs';
         if (isRemoteData(this.parent) && this.parent.enableVirtualization && args["" + actionArgs].requestType === 'virtualscroll') {
             this.parent.hideSpinner();
@@ -2278,9 +2279,15 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                         records[parseInt(rec.toString(), 10)].taskData = extend$1({}, records[parseInt(rec.toString(), 10)]);
                         records[parseInt(rec.toString(), 10)].uniqueID = getUid(this_1.parent.element.id + '_data_');
                         setValue('uniqueIDCollection.' + records[parseInt(rec.toString(), 10)].uniqueID, records[parseInt(rec.toString(), 10)], this_1.parent);
-                        records[parseInt(rec.toString(), 10)].level = 0;
-                        if (isRemoteData(this_1.parent) && this_1.parent.enableVirtualization && records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping] && records[parseInt(rec.toString(), 10)].level === 0) {
-                            records[parseInt(rec.toString(), 10)].level = records[parseInt(rec.toString(), 10)].level + 1;
+                        if (isRemoteData(this_1.parent) && this_1.parent.enableVirtualization && records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping] && (isNullOrUndefined(records[parseInt(rec.toString(), 10)].level) || records[parseInt(rec.toString(), 10)].level === 0)) {
+                            var parentID_1 = records[parseInt(rec.toString(), 10)]["" + this_1.parent.parentIdMapping];
+                            var parentRec = records.find(function (record) { return record["" + _this.parent.idMapping] === parentID_1; });
+                            if (parentRec) {
+                                records[parseInt(rec.toString(), 10)].level = parentRec.level + 1;
+                            }
+                        }
+                        else {
+                            records[parseInt(rec.toString(), 10)].level = 0;
                         }
                         records[parseInt(rec.toString(), 10)].index = Math.ceil(Math.random() * 1000);
                         if ((records[parseInt(rec.toString(), 10)][this_1.parent.hasChildMapping] ||
@@ -2486,7 +2493,7 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                             var parentData = _this.parent["" + remoteExpandedData][parseInt(i.toString(), 10)];
                             delete parentData.childRecords;
                             result[parseInt(r.toString(), 10)].parentItem = parentData;
-                            result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                            result[parseInt(r.toString(), 10)].parentUniqueID = parentData.uniqueID;
                         }
                     }
                 }
@@ -2521,6 +2528,9 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                 }
                 result[parseInt(r.toString(), 10)].index = Math.ceil(Math.random() * 1000);
                 result[parseInt(r.toString(), 10)].uniqueID = getUid(_this.parent.element.id + '_data_');
+                if (rowDetails.record["" + _this.parent.idMapping] === result[parseInt(r.toString(), 10)]["" + _this.parent.idMapping]) {
+                    rowDetails.record.uniqueID = result[parseInt(r.toString(), 10)].uniqueID;
+                }
                 result[parseInt(r.toString(), 10)].checkboxState = 'uncheck';
                 if (_this.parent.enableVirtualization && isNullOrUndefined(result[parseInt(r.toString(), 10)].level)) {
                     for (var p = 0; p < _this.parent.grid.currentViewData.length; p++) {
@@ -2709,7 +2719,14 @@ var DataManipulation = /** @__PURE__ @class */ (function () {
                 this.parent.flatData.push(currentData);
             }
             else if (isNullOrUndefined(currentData["" + this.parent.parentIdMapping]) || currentData.parentItem) {
-                this.parent.flatData.push(currentData);
+                if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+                    if (!this.parent.rowDragAndDropModule['isDuplicateData'](currentData)) {
+                        this.parent.flatData.push(currentData);
+                    }
+                }
+                else {
+                    this.parent.flatData.push(currentData);
+                }
                 this.parent['infiniteScrollData'].push(currentData);
             }
             if (!this.isSelfReference && currentData.level === 0) {
@@ -4218,7 +4235,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     TreeGrid.prototype.requiredModules = function () {
         var modules = [];
         var splitFrozenCount = 'splitFrozenCount';
-        if (!this.isReact && isNullOrUndefined(this['changedProperties'].columns)) {
+        if (isNullOrUndefined(this['changedProperties'].columns)) {
             this.grid["" + splitFrozenCount](this.getColumns());
         }
         if (this.isDestroyed) {
@@ -4723,7 +4740,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
             if (_this.pageSettings.pageSizeMode === 'Root') {
                 _this.grid.selectionModule['totalRecordsCount'] = _this.grid.currentViewData.length;
             }
-            _this.trigger(rowSelecting, args);
+            if (!args.cancel) {
+                _this.trigger(rowSelecting, args);
+            }
         };
         this.grid.rowDeselecting = function (args) {
             _this.IsExpandCollapseClicked(args);
@@ -5494,11 +5513,8 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     TreeGrid.prototype.onPropertyChanged = function (newProp) {
         var properties = Object.keys(newProp);
         var requireRefresh = false;
-        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns) && this.frozenColumns === 0
-            && this.frozenRows === 0 && !this.columnModel.some(function (col) { return col.isFrozen || col.freeze; })) {
-            this.grid.columns = this.getGridColumns(newProp.columns);
-            this.grid['updateColumnObject']();
-            requireRefresh = true;
+        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns)) {
+            this.refreshColumns();
         }
         for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
             var prop = properties_1[_i];
@@ -6551,12 +6567,28 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     TreeGrid.prototype.refreshColumns = function (refreshUI) {
         if (isNullOrUndefined(refreshUI) || refreshUI) {
             this.grid.columns = this.getGridColumns(this.columns);
+            this.getTreeColumn();
             this.grid.refreshColumns();
         }
         else {
             this.grid.setProperties({ columns: this.getGridColumns(this.columns) }, true);
         }
     };
+    TreeGrid.prototype.getTreeColumn = function () {
+        var columnModel = 'columnModel';
+        var treeColumn = this["" + columnModel][this.treeColumnIndex];
+        var treeIndex;
+        var updatedCols = this.getColumns();
+        for (var f = 0; f < updatedCols.length; f++) {
+            var treeColumnfield = getObject('field', treeColumn);
+            var parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
+            if (treeColumnfield === parentColumnfield) {
+                treeIndex = f;
+                break;
+            }
+        }
+        this.setProperties({ treeColumnIndex: treeIndex }, true);
+    };
     /**
      * Refreshes the TreeGrid header.
      *
@@ -7368,7 +7400,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
                 this.toggleRowVisibility(freezeRightRows[parseInt(i.toString(), 10)], displayAction);
             }
             this.notify('childRowExpand', { row: rows[parseInt(i.toString(), 10)] });
-            if ((!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) && childRecords[parseInt(i.toString(), 10)].childRecords.length > 0) && (action !== 'expand' ||
+            if ((!isNullOrUndefined(childRecords)) && (!isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].childRecords) && childRecords[parseInt(i.toString(), 10)].childRecords.length > 0) && (action !== 'expand' ||
                 isNullOrUndefined(childRecords[parseInt(i.toString(), 10)].expanded) || childRecords[parseInt(i.toString(), 10)].expanded)) {
                 this.expandCollapse(action, rows[parseInt(i.toString(), 10)], childRecords[parseInt(i.toString(), 10)], true);
                 if (this.frozenColumns <= this.treeColumnIndex && !isNullOrUndefined(movableRows)) {
@@ -7390,7 +7422,7 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
     };
     TreeGrid.prototype.toggleRowVisibility = function (row, displayAction) {
         if (row) {
-            row.classList.remove('e-childrow-hidden', 'e-childrow-visible');
+            row.classList.remove('e-childrow-hidden', 'e-childrow-visible', 'e-hide');
             row.classList.add(displayAction);
         }
     };
@@ -7895,7 +7927,9 @@ var TreeGrid = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     TreeGrid.prototype.reorderRows = function (fromIndexes, toIndex, position) {
-        this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
+        if (!isNullOrUndefined(this.rowDragAndDropModule)) {
+            this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex, position);
+        }
     };
     /**
      * Indents the record to one level of hierarchy. Moves the selected row as the last child of its previous row.
@@ -8351,13 +8385,13 @@ var Reorder = /** @__PURE__ @class */ (function () {
      * @returns {void}
      */
     Reorder.prototype.addEventListener = function () {
-        this.parent.on('getColumnIndex', this.getTreeColumn, this);
+        this.parent.on('getColumnIndex', this.updateTreeColumn, this);
     };
     Reorder.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
             return;
         }
-        this.parent.off('getColumnIndex', this.getTreeColumn);
+        this.parent.off('getColumnIndex', this.updateTreeColumn);
     };
     /**
      * To destroy the Reorder
@@ -8368,20 +8402,8 @@ var Reorder = /** @__PURE__ @class */ (function () {
     Reorder.prototype.destroy = function () {
         this.removeEventListener();
     };
-    Reorder.prototype.getTreeColumn = function () {
-        var columnModel = 'columnModel';
-        var treeColumn = this.parent["" + columnModel][this.parent.treeColumnIndex];
-        var treeIndex;
-        var updatedCols = this.parent.getColumns();
-        for (var f = 0; f < updatedCols.length; f++) {
-            var treeColumnfield = getObject('field', treeColumn);
-            var parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
-            if (treeColumnfield === parentColumnfield) {
-                treeIndex = f;
-                break;
-            }
-        }
-        this.parent.setProperties({ treeColumnIndex: treeIndex }, true);
+    Reorder.prototype.updateTreeColumn = function () {
+        this.parent['getTreeColumn']();
     };
     return Reorder;
 }());
@@ -8446,24 +8468,44 @@ var RowDD = /** @__PURE__ @class */ (function () {
      * @param {TreeGrid} parent - Tree Grid instance
      */
     function RowDD(parent) {
-        /** @hidden */
+        /** @hidden
+         * Indicates whether a row can be dropped into the current target position during a drag-and-drop operation.
+         */
         this.canDrop = true;
-        /** @hidden */
+        /** @hidden
+         * Indicates whether the current drag operation includes child records of the dragged item.
+         */
         this.isDraggedWithChild = false;
-        /** @hidden */
+        /** @hidden
+         * Indicates whether multiple TreeGrid instances are being managed or displayed.
+         */
         this.modifiedRecords = 'modifiedRecords';
-        /** @hidden */
+        /** @hidden
+         * Represents the currently selected item in the TreeGrid.
+         */
         this.selectedRecords = 'selectedRecords';
-        /** @hidden */
+        /** @hidden
+         * Holds an array of currently selected records in the TreeGrid.
+         */
         this.selectedRows = 'selectedRows';
-        /** @hidden */
+        /** @hidden
+         * Indicates whether there is a droppable item in the TreeGrid.
+         */
         this.hasDropItem = true;
-        /** @hidden */
+        /** @hidden
+         * Indicates whether the item is being added to the bottom of the TreeGrid.
+         */
         this.isaddtoBottom = false;
         Grid.Inject(RowDD$1);
         this.parent = parent;
         this.addEventListener();
     }
+    /**
+     * Retrieves child records for a specified parent ID in the TreeGrid.
+     *
+     * @param {string} id - The unique ID of the parent record for which to retrieve child records.
+     * @returns {ITreeData[]} An array of child records corresponding to the specified parent ID.
+     */
     RowDD.prototype.getChildrecordsByParentID = function (id) {
         var treeGridDataSource;
         if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
@@ -8497,6 +8539,9 @@ var RowDD = /** @__PURE__ @class */ (function () {
      */
     RowDD.prototype.reorderRows = function (fromIndexes, toIndex, position) {
         var tObj = this.parent;
+        if (fromIndexes[0] === toIndex || ['above', 'below', 'child'].indexOf(position) === -1) {
+            return;
+        }
         var action = 'action';
         var dropPosition = 'dropPosition';
         var updateRowAndCellElements = 'updateRowAndCellElements';
@@ -8535,13 +8580,9 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
             this.parent.grid.refresh();
             if (this.parent.enableImmutableMode && this.dropPosition === 'middleSegment') {
-                var index = void 0;
-                if (this.parent.allowRowDragAndDrop) {
-                    index = this.parent.treeColumnIndex + 1;
-                }
-                else if (this.parent["" + action] === 'indenting') {
-                    index = this.parent.treeColumnIndex;
-                }
+                var index = this.parent.allowRowDragAndDrop
+                    ? this.parent.treeColumnIndex + 1
+                    : (this.parent["" + action] === 'indenting' ? this.parent.treeColumnIndex : undefined);
                 var row = this.parent.getRows()[fromIndexes[0]];
                 var dropData = args.data[0];
                 var totalRecord = [];
@@ -8556,13 +8597,9 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 this.parent["" + updateRowAndCellElements](totalRecord, rows, index);
             }
             if (this.parent.enableImmutableMode && this.parent["" + action] === 'outdenting') {
-                var index = void 0;
-                if (this.parent.allowRowDragAndDrop) {
-                    index = this.parent.treeColumnIndex + 1;
-                }
-                else if (this.parent["" + action] === 'outdenting') {
-                    index = this.parent.treeColumnIndex;
-                }
+                var index = this.parent.allowRowDragAndDrop
+                    ? this.parent.treeColumnIndex + 1
+                    : (this.parent["" + action] === 'outdenting' ? this.parent.treeColumnIndex : undefined);
                 var record = args.data[0];
                 var row = this.parent.getRows()[fromIndexes[0]];
                 var totalRecord = [];
@@ -8572,10 +8609,14 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 this.parent["" + updateRowAndCellElements](totalRecord, rows, index);
             }
         }
-        else {
-            return;
-        }
     };
+    /**
+     * Performs indent or outdent actions on selected records in the TreeGrid.
+     *
+     * @param {ITreeData} [record] - The record to be indented or outdented. If undefined, the method operates on the currently selected record.
+     * @param {string} [request] - The action to perform, either 'indent' or 'outdent'.
+     * @returns {void}
+     */
     RowDD.prototype.indentOutdentAction = function (record, request) {
         var tObj = this.parent;
         var action = 'action';
@@ -8650,6 +8691,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Triggers a specified event for the TreeGrid, notifying subscribers about the event occurrence.
+     *
+     * @param {string} action - The action to be triggered, either 'indenting' or 'outdenting'.
+     * @param {number} dropIndex - The index at which the row should be dropped.
+     * @returns {void}
+     */
     RowDD.prototype.eventTrigger = function (action, dropIndex) {
         var _this = this;
         var actionArgs = {
@@ -8679,6 +8727,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         });
     };
+    /**
+     * Reorders the flat data array of the TreeGrid and updates the index of each record.
+     *
+     * @param {ITreeData[]} currentData - The array of tree data records to reorder.
+     * @returns {ITreeData[]} The updated array of tree data records with indices set.
+     */
     RowDD.prototype.orderToIndex = function (currentData) {
         for (var i = 0; i < currentData.length; i++) {
             currentData[parseInt(i.toString(), 10)].index = i;
@@ -8689,6 +8743,15 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         return currentData;
     };
+    /**
+     * Handles the addition of new rows to the TreeGrid.
+     *
+     * @param {Object} e - The event object containing information about the rows being added.
+     * @param {number} e.toIndex - The index at which the new rows should be added in the TreeGrid.
+     * @param {Object[]} e.records - An array of the records to be added to the TreeGrid.
+     *
+     * @returns {void} This function does not return any value.
+     */
     RowDD.prototype.rowsAdded = function (e) {
         var draggedRecord;
         var dragRecords = e.records;
@@ -8793,6 +8856,15 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.dropRows(args);
         }
     };
+    /**
+     * Handles the removal of specified rows from the TreeGrid.
+     *
+     * @param {Object} e - The event object containing information about the removed rows.
+     * @param {number[]} e.indexes - An array of indexes of the rows that were removed.
+     * @param {Object[]} e.records - An array of the records corresponding to the removed rows.
+     *
+     * @returns {void} This function does not return any value.
+     */
     RowDD.prototype.rowsRemoved = function (e) {
         for (var i = 0; i < e.records.length; i++) {
             this.draggedRecord = e.records[parseInt(i.toString(), 10)];
@@ -8804,35 +8876,36 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Refreshes the data source of the TreeGrid.
+     *
+     * @returns {void} This function does not return any value.
+     */
     RowDD.prototype.refreshGridDataSource = function () {
         var draggedRecord = this.draggedRecord;
         var droppedRecord = this.droppedRecord;
         var proxy = this.parent;
-        var tempDataSource;
-        var idx;
+        var temporaryDataSource;
+        var indexOfDroppedRecord;
         if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-            tempDataSource = proxy.dataSource.dataSource.json;
+            temporaryDataSource = proxy.dataSource.dataSource.json;
         }
         else {
-            tempDataSource = proxy.dataSource;
+            temporaryDataSource = proxy.dataSource;
         }
-        if (tempDataSource && (!isNullOrUndefined(droppedRecord) && !droppedRecord.parentItem)
+        if (temporaryDataSource && (!isNullOrUndefined(droppedRecord) && !droppedRecord.parentItem)
             && !isNullOrUndefined(droppedRecord.taskData)) {
-            var keys = Object.keys(tempDataSource);
+            var keys = Object.keys(temporaryDataSource);
             for (var i = 0; i < keys.length; i++) {
-                if (tempDataSource[parseInt(i.toString(), 10)][this.parent.childMapping] ===
+                if (temporaryDataSource[parseInt(i.toString(), 10)][this.parent.childMapping] ===
                     droppedRecord.taskData[this.parent.childMapping]) {
-                    idx = i;
-                }
-            }
-            if (this.dropPosition === 'topSegment') {
-                if (!this.parent.idMapping) {
-                    tempDataSource.splice(idx, 0, draggedRecord.taskData);
+                    indexOfDroppedRecord = i;
                 }
             }
-            else if (this.dropPosition === 'bottomSegment') {
-                if (!this.parent.idMapping) {
-                    tempDataSource.splice(idx + 1, 0, draggedRecord.taskData);
+            if (!this.parent.idMapping) {
+                var positionAdjustment = this.dropPosition === 'topSegment' ? 0 : 1;
+                if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
+                    temporaryDataSource.splice(indexOfDroppedRecord + positionAdjustment, 0, draggedRecord.taskData);
                 }
             }
         }
@@ -8863,6 +8936,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Removes the border from the first row of the TreeGrid.
+     *
+     * @param {HTMLTableRowElement} element - The table row element from which to remove the border.
+     * @returns {void} This function does not return any value.
+     */
     RowDD.prototype.removeFirstrowBorder = function (element) {
         var canremove = this.dropPosition === 'bottomSegment';
         if (this.parent.element.getElementsByClassName('e-firstrow-border').length > 0 && element &&
@@ -8870,25 +8949,40 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.parent.element.getElementsByClassName('e-firstrow-border')[0].remove();
         }
     };
+    /**
+     * Removes the border from the last row of the TreeGrid.
+     *
+     * @param {HTMLTableRowElement} element - The row element from which to remove the last row border.
+     * @returns {void}
+     */
     RowDD.prototype.removeLastrowBorder = function (element) {
-        var isEmptyRow = element && (element.classList.contains('e-emptyrow') || element.classList.contains('e-columnheader')
-            || element.classList.contains('e-detailrow'));
-        var islastRowIndex;
-        if (this.parent.enableVirtualization) {
-            islastRowIndex = element && !isEmptyRow &&
-                this.parent.getRows()[this.parent.getCurrentViewRecords().length - 1].getAttribute('data-uid') !==
-                    element.getAttribute('data-uid');
+        if (!element) {
+            return;
         }
-        else {
-            islastRowIndex = element && !isEmptyRow &&
-                this.parent.getRowByIndex(this.parent.getCurrentViewRecords().length - 1).getAttribute('data-uid') !==
-                    element.getAttribute('data-uid');
+        var isEmptyRow = element.classList.contains('e-emptyrow') ||
+            element.classList.contains('e-columnheader') ||
+            element.classList.contains('e-detailrow');
+        if (isEmptyRow) {
+            return;
         }
-        var canremove = islastRowIndex || this.dropPosition === 'topSegment';
-        if (this.parent.element.getElementsByClassName('e-lastrow-border').length > 0 && element && (islastRowIndex || canremove)) {
-            this.parent.element.getElementsByClassName('e-lastrow-border')[0].remove();
+        var lastRow = this.parent.enableVirtualization ?
+            this.parent.getRows()[this.parent.getCurrentViewRecords().length - 1] :
+            this.parent.getRowByIndex(this.parent.getCurrentViewRecords().length - 1);
+        var isNotLastRow = lastRow.getAttribute('data-uid') !== element.getAttribute('data-uid');
+        var canRemove = isNotLastRow || this.dropPosition === 'topSegment';
+        var lastRowBorderElement = this.parent.element.getElementsByClassName('e-lastrow-border')[0];
+        if (lastRowBorderElement && canRemove) {
+            lastRowBorderElement.remove();
         }
     };
+    /**
+     * Updates the icons associated with the specified rows in the TreeGrid.
+     *
+     * @param {Element[]} row - The array of row elements to update the icons for.
+     * @param {number} index - The index of the row being updated.
+     * @param {RowDragEventArgs} args - The event arguments associated with the row drag operation.
+     * @returns {string} The drop position ('topSegment', 'middleSegment', 'bottomSegment', or 'Invalid').
+     */
     RowDD.prototype.updateIcon = function (row, index, args) {
         var rowEle = args.target ? closest(args.target, 'tr') : null;
         this.dropPosition = undefined;
@@ -8900,6 +8994,10 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 || !parentsUntil(args.target, 'e-gridcontent')) {
                 this.dropPosition = 'Invalid';
                 this.addErrorElem();
+                if (isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+                    this.removetopOrBottomBorder();
+                    this.removeChildBorder();
+                }
             }
         }
         // To get the corresponding drop position related to mouse position
@@ -8974,6 +9072,11 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         return this.dropPosition;
     };
+    /**
+     * Removes the visual border from all child rows within the TreeGrid.
+     *
+     * @returns {void} No return value.
+     */
     RowDD.prototype.removeChildBorder = function () {
         var borderElem = [];
         borderElem = [].slice.call(this.parent.element.querySelectorAll('.e-childborder'));
@@ -8981,6 +9084,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.addRemoveClasses(borderElem, false, 'e-childborder');
         }
     };
+    /**
+     * Adds a visual border to the first row of the TreeGrid.
+     *
+     * @param {HTMLTableRowElement} targetRow - The target row element to which the border will be added, if it is the first row.
+     * @returns {void} No return value.
+     */
     RowDD.prototype.addFirstrowBorder = function (targetRow) {
         var node = this.parent.element;
         var tObj = this.parent;
@@ -9003,9 +9112,21 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Adds a visual border to the last row of the TreeGrid.
+     *
+     * @param {HTMLTableRowElement} trElement - The table row element to which the border will be added, if it is the last row.
+     * @returns {void} No return value.
+     */
     RowDD.prototype.addLastRowborder = function (trElement) {
+        if (!trElement) {
+            return;
+        }
         var isEmptyRow = trElement && (trElement.classList.contains('e-emptyrow') ||
             trElement.classList.contains('e-columnheader') || trElement.classList.contains('e-detailrow'));
+        if (isEmptyRow) {
+            return;
+        }
         if (trElement && !isEmptyRow && this.parent.getRows()[this.parent.getCurrentViewRecords().length - 1].getAttribute('data-uid') ===
             trElement.getAttribute('data-uid')) {
             var bottomborder = this.parent.createElement('div', { className: 'e-lastrow-border' });
@@ -9018,40 +9139,55 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Retrieves the total scroll width of the TreeGrid content area.
+     *
+     * @returns {number} The width of the scrollbar if content overflows, otherwise 0.
+     */
     RowDD.prototype.getScrollWidth = function () {
         var scrollElem = this.parent.getContent().firstElementChild;
         return scrollElem.scrollWidth > scrollElem.offsetWidth ? Scroll.getScrollBarWidth() : 0;
     };
+    /**
+     * Adds an error element to the dragged row element during a row drag-and-drop operation.
+     *
+     * @returns {void} No return value.
+     */
     RowDD.prototype.addErrorElem = function () {
         var dragelem = document.getElementsByClassName('e-cloneproperties')[0];
-        var errorelem = dragelem.querySelectorAll('.e-errorelem').length;
+        var errorelemCount = dragelem.querySelectorAll('.e-errorelem').length;
         var sanitize = 'sanitize';
-        if (!errorelem && !this.parent.rowDropSettings.targetID) {
-            var ele = document.createElement('div');
-            classList(ele, ['e-errorcontainer'], []);
-            classList(ele, ['e-icons', 'e-errorelem'], []);
+        if (!errorelemCount && !this.parent.rowDropSettings.targetID) {
+            var errorContainer = document.createElement('div');
+            errorContainer.classList.add('e-errorcontainer', 'e-icons', 'e-errorelem');
+            var rowCell = dragelem.querySelector('.e-rowcell');
             var errorVal = dragelem.querySelector('.errorValue');
-            var content = dragelem.querySelector('.e-rowcell').innerHTML;
+            var content = rowCell.innerHTML;
             if (errorVal) {
                 content = this.parent["" + sanitize](errorVal.innerHTML);
                 errorVal.parentNode.removeChild(errorVal);
             }
-            dragelem.querySelector('.e-rowcell').innerHTML = '';
+            rowCell.innerHTML = '';
             var spanContent = document.createElement('span');
             spanContent.className = 'errorValue';
             spanContent.style.paddingLeft = '16px';
             spanContent.innerHTML = this.parent["" + sanitize](content);
-            dragelem.querySelector('.e-rowcell').appendChild(ele);
-            dragelem.querySelector('.e-rowcell').appendChild(spanContent);
+            rowCell.appendChild(errorContainer);
+            rowCell.appendChild(spanContent);
             var dropItemSpan = document.querySelector('.e-dropitemscount');
             if (this.hasDropItem && dropItemSpan) {
-                var dropItemLeft = parseInt(dropItemSpan.style.left, 10) + ele.offsetWidth + 16;
+                var dropItemLeft = parseInt(dropItemSpan.style.left, 10) + errorContainer.offsetWidth + 16;
                 var spanLeft = !this.parent.enableRtl ? dropItemLeft : 0;
                 dropItemSpan.style.left = spanLeft + "px";
                 this.hasDropItem = false;
             }
         }
     };
+    /**
+     * Removes the error element from the DOM and adjusts the position of the drop item count if necessary.
+     *
+     * @returns {void} No return value.
+     */
     RowDD.prototype.removeErrorElem = function () {
         var errorelem = document.querySelector('.e-errorelem');
         var errorValue = document.querySelector('.errorValue');
@@ -9072,6 +9208,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         this.hasDropItem = true;
     };
+    /**
+     * Applies drop border styles to row elements based on the current drop position ('topSegment' or 'bottomSegment').
+     *
+     * @param {Element} target - The target element where the drop action is taking place.
+     * @returns {void} No return value.
+     */
     RowDD.prototype.topOrBottomBorder = function (target) {
         var rowElement = [];
         var element = closest(target, 'tr');
@@ -9088,6 +9230,11 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Removes the drop border classes ('e-dropbottom' and 'e-droptop') from the parent element if present.
+     *
+     * @returns {void} No return value.
+     */
     RowDD.prototype.removetopOrBottomBorder = function () {
         var border = [];
         border = [].slice.call(this.parent.element.querySelectorAll('.e-dropbottom, .e-droptop'));
@@ -9096,6 +9243,14 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.addRemoveClasses(border, false, 'e-droptop');
         }
     };
+    /**
+     * Adds or removes a specified class from a list of HTML elements.
+     *
+     * @param {Element[]} cells - The list of HTML elements to which the class will be added or removed.
+     * @param {boolean} add - A flag indicating whether to add (`true`) or remove (`false`) the class.
+     * @param {string} className - The class name to be added or removed from each element in `cells`.
+     * @returns {void} No return value.
+     */
     RowDD.prototype.addRemoveClasses = function (cells, add, className) {
         for (var i = 0, len = cells.length; i < len; i++) {
             if (add) {
@@ -9106,6 +9261,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Calculates the offset position of the specified HTML element relative to the document.
+     *
+     * @param {Element} element - The HTML element for which the offset position is calculated.
+     * @returns {PositionOffSet} The offset position containing `top` and `left` values.
+     */
     RowDD.prototype.getOffset = function (element) {
         var box = element.getBoundingClientRect();
         var body = document.body;
@@ -9118,35 +9279,38 @@ var RowDD = /** @__PURE__ @class */ (function () {
         var left = box.left + scrollLeft - clientLeft;
         return { top: Math.round(top), left: Math.round(left) };
     };
+    /**
+     * Handles the dragging of rows in the TreeGrid.
+     *
+     * @param {RowDragEventArgs} args - The event arguments for the row drag action.
+     * @returns {void} This function does not return a value.
+     */
     RowDD.prototype.Rowdraging = function (args) {
         var tObj = this.parent;
         var cloneElement = this.parent.element.querySelector('.e-cloneproperties');
+        if (!cloneElement) {
+            return;
+        }
         cloneElement.style.cursor = '';
         var rowEle = args.target ? closest(args.target, 'tr') : null;
         var rowIdx = rowEle ? rowEle.rowIndex : -1;
-        var dragRecords = [];
-        var droppedRecord = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
-        this.removeErrorElem();
-        this.canDrop = true;
-        if (!args.data[0]) {
-            dragRecords.push(args.data);
-        }
-        else {
-            dragRecords = args.data;
-        }
-        if (rowIdx !== -1) {
-            this.ensuredropPosition(dragRecords, droppedRecord);
-        }
-        else {
+        if (rowIdx === -1) {
             this.canDrop = false;
             this.addErrorElem();
+            if (isNullOrUndefined(tObj.rowDropSettings.targetID)) {
+                this.removetopOrBottomBorder();
+                this.removeChildBorder();
+            }
+            return;
         }
+        var dragRecords = Array.isArray(args.data) ? args.data : [args.data];
+        var droppedRecord = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
+        this.removeErrorElem();
+        this.canDrop = true;
+        this.ensuredropPosition(dragRecords, droppedRecord);
         if (!tObj.rowDropSettings.targetID && this.canDrop && !isNullOrUndefined(args.rows[0])) {
             tObj.rowDragAndDropModule.updateIcon(args.rows, rowIdx, args);
         }
-        if (isNullOrUndefined(tObj.rowDropSettings.targetID) && !this.canDrop) {
-            this.removetopOrBottomBorder();
-        }
         if (tObj.rowDropSettings.targetID) {
             var dropElement = parentsUntil(args.target, 'e-treegrid');
             if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
@@ -9161,17 +9325,26 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Handles the row drop event for the TreeGrid.
+     *
+     * @param {RowDropEventArgs} args - The event arguments for the row drop action.
+     * @returns {void} This function does not return a value.
+     */
     RowDD.prototype.rowDropped = function (args) {
         var tObj = this.parent;
         var parentItem = 'parentItem';
         if (!tObj.rowDropSettings.targetID) {
-            if (parentsUntil(args.target, 'e-content')) {
+            if (parentsUntil(args.target, 'e-content') || (this.dropPosition === 'Invalid' || !this.canDrop)) {
                 if (this.parent.element.querySelector('.e-errorelem')) {
                     this.dropPosition = 'Invalid';
                 }
                 setValue('dropPosition', this.dropPosition, args);
                 tObj.trigger(rowDrop, args);
                 if (!args.cancel) {
+                    if (!isCountRequired(this.parent) && this.dropPosition === 'Invalid') {
+                        return;
+                    }
                     if (!isCountRequired(this.parent)) {
                         this.dropRows(args);
                     }
@@ -9179,9 +9352,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
                         tObj.flatData = this.orderToIndex(tObj.flatData);
                     }
                     tObj.grid.refresh();
-                    if (!isNullOrUndefined(tObj.getHeaderContent().querySelector('.e-firstrow-border'))) {
-                        tObj.getHeaderContent().querySelector('.e-firstrow-border').remove();
-                    }
+                    this.removeRowBorders();
                 }
             }
         }
@@ -9200,12 +9371,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         this.removetopOrBottomBorder();
         this.removeChildBorder();
-        if (!isNullOrUndefined(this.parent.element.getElementsByClassName('e-firstrow-border')[0])) {
-            this.parent.element.getElementsByClassName('e-firstrow-border')[0].remove();
-        }
-        else if (!isNullOrUndefined(this.parent.element.getElementsByClassName('e-lastrow-border')[0])) {
-            this.parent.element.getElementsByClassName('e-lastrow-border')[0].remove();
-        }
+        this.removeRowBorders();
         if (this.parent.enableImmutableMode && !this.parent.allowPaging && !isNullOrUndefined(args.data[0]["" + parentItem])) {
             var index = this.parent.treeColumnIndex;
             index = index + 1;
@@ -9247,6 +9413,26 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Removes the border elements for the first and last rows of the TreeGrid.
+     *
+     * @returns {void} This function does not return a value.
+     */
+    RowDD.prototype.removeRowBorders = function () {
+        var _this = this;
+        ['e-firstrow-border', 'e-lastrow-border'].forEach(function (className) {
+            var element = _this.parent.element.getElementsByClassName(className)[0];
+            if (element) {
+                element.remove();
+            }
+        });
+    };
+    /**
+     * Handles the drag-and-drop operation between TreeGrids, updating the source and target grids.
+     *
+     * @param {RowDropEventArgs} args - The arguments related to the row drop event, including target information and data being dropped.
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.dragDropGrid = function (args) {
         var tObj = this.parent;
         var targetRow = closest(args.target, 'tr');
@@ -9307,9 +9493,22 @@ var RowDD = /** @__PURE__ @class */ (function () {
             srcControl.grid.refresh();
         }
     };
+    /**
+     * Retrieves the index of the target row based on its 'data-rowindex' attribute.
+     *
+     * @param {Element} targetRow - The target row element from which to retrieve the index.
+     * @returns {number} - The index of the target row, or 0 if the targetRow is null or undefined.
+     */
     RowDD.prototype.getTargetIdx = function (targetRow) {
         return targetRow ? parseInt(targetRow.getAttribute('data-rowindex'), 10) : 0;
     };
+    /**
+     * Retrieves the parent data of a given record during a row drag-and-drop operation.
+     *
+     * @param {ITreeData} record - The record for which to retrieve the parent data.
+     * @param {Object[]} [data] - Optional data array containing additional information related to the drop operation.
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.getParentData = function (record, data) {
         var parentItem = record.parentItem;
         var selectedItemIndex = -1;
@@ -9337,6 +9536,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Handles the row drop operation for the tree grid.
+     *
+     * @param {RowDropEventArgs} args - The event arguments containing details about the drop operation, including the target index and data.
+     * @param {boolean} [isByMethod=false] - Optional flag indicating if the drop operation is triggered by a method.
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.dropRows = function (args, isByMethod) {
         if (this.dropPosition !== 'Invalid' && !isRemoteData(this.parent)) {
             var tObj = this.parent;
@@ -9385,88 +9591,99 @@ var RowDD = /** @__PURE__ @class */ (function () {
             var _loop_1 = function (i) {
                 draggedRecord_2 = dragRecords[parseInt(i.toString(), 10)];
                 this_1.draggedRecord = draggedRecord_2;
-                if (this_1.dropPosition !== 'Invalid' && !isNullOrUndefined(this_1.droppedRecord)) {
-                    if (!tObj.rowDropSettings.targetID || isByMethod) {
-                        this_1.deleteDragRow();
-                    }
-                    if (this_1.draggedRecord === this_1.droppedRecord) {
-                        var correctIndex = this_1.getTargetIdx(args.target.offsetParent.parentElement);
-                        if (isNaN(correctIndex)) {
-                            correctIndex = this_1.getTargetIdx(args.target.parentElement);
+                if (!this_1.draggedRecord.hasChildRecords) {
+                    for (var _i = 0, dragRecords_2 = dragRecords; _i < dragRecords_2.length; _i++) {
+                        var dragRecord = dragRecords_2[_i];
+                        if (!isNullOrUndefined(dragRecord.childRecords) &&
+                            dragRecord.childRecords.indexOf(this_1.draggedRecord) !== -1) {
+                            this_1.draggedRecord = undefined;
                         }
-                        args.dropIndex = correctIndex;
-                        droppedRecord = this_1.droppedRecord = this_1.parent.getCurrentViewRecords()[args.dropIndex];
                     }
-                    if (droppedRecord.parentItem || this_1.dropPosition === 'middleSegment') {
-                        var parentRecords = tObj.parentData;
-                        var newParentIndex = parentRecords.indexOf(this_1.draggedRecord);
-                        if (newParentIndex !== -1) {
-                            parentRecords.splice(newParentIndex, 1);
+                }
+                if (!isNullOrUndefined(this_1.draggedRecord)) {
+                    if (this_1.dropPosition !== 'Invalid' && !isNullOrUndefined(this_1.droppedRecord)) {
+                        if (!tObj.rowDropSettings.targetID || isByMethod) {
+                            this_1.deleteDragRow();
                         }
-                    }
-                    var recordIndex1 = this_1.treeGridData.indexOf(droppedRecord);
-                    this_1.dropAtTop(recordIndex1);
-                    if (this_1.dropPosition === 'bottomSegment') {
-                        if (!droppedRecord.hasChildRecords) {
-                            if (this_1.parent.parentIdMapping) {
-                                this_1.treeData.splice(recordIndex1 + 1, 0, this_1.draggedRecord.taskData);
+                        if (this_1.draggedRecord === this_1.droppedRecord) {
+                            var correctIndex = this_1.getTargetIdx(args.target.offsetParent.parentElement);
+                            if (isNaN(correctIndex)) {
+                                correctIndex = this_1.getTargetIdx(args.target.parentElement);
                             }
-                            this_1.treeGridData.splice(recordIndex1 + 1, 0, this_1.draggedRecord);
+                            args.dropIndex = correctIndex;
+                            droppedRecord = this_1.droppedRecord = this_1.parent.getCurrentViewRecords()[args.dropIndex];
                         }
-                        else {
-                            count = this_1.getChildCount(droppedRecord, 0);
-                            if (this_1.parent.parentIdMapping) {
-                                this_1.treeData.splice(recordIndex1 + count + 1, 0, this_1.draggedRecord.taskData);
+                        if (droppedRecord.parentItem || this_1.dropPosition === 'middleSegment') {
+                            var parentRecords = tObj.parentData;
+                            var newParentIndex = parentRecords.indexOf(this_1.draggedRecord);
+                            if (newParentIndex !== -1) {
+                                parentRecords.splice(newParentIndex, 1);
                             }
-                            this_1.treeGridData.splice(recordIndex1 + count + 1, 0, this_1.draggedRecord);
                         }
-                        if (isNullOrUndefined(droppedRecord.parentItem)) {
-                            delete draggedRecord_2.parentItem;
-                            delete draggedRecord_2.parentUniqueID;
-                            draggedRecord_2.level = 0;
-                            if (this_1.parent.parentIdMapping) {
-                                draggedRecord_2[this_1.parent.parentIdMapping] = null;
+                        var recordIndex1 = this_1.treeGridData.indexOf(droppedRecord);
+                        this_1.dropAtTop(recordIndex1);
+                        if (this_1.dropPosition === 'bottomSegment') {
+                            if (!droppedRecord.hasChildRecords) {
+                                if (this_1.parent.parentIdMapping) {
+                                    this_1.treeData.splice(recordIndex1 + 1, 0, this_1.draggedRecord.taskData);
+                                }
+                                this_1.treeGridData.splice(recordIndex1 + 1, 0, this_1.draggedRecord);
                             }
-                        }
-                        if (droppedRecord.parentItem) {
-                            var rec = this_1.getChildrecordsByParentID(droppedRecord.parentUniqueID);
-                            var childRecords = rec[0].childRecords;
-                            var droppedRecordIndex = childRecords.indexOf(droppedRecord) + 1;
-                            childRecords.splice(droppedRecordIndex, 0, draggedRecord_2);
-                            draggedRecord_2.parentItem = droppedRecord.parentItem;
-                            draggedRecord_2.parentUniqueID = droppedRecord.parentUniqueID;
-                            draggedRecord_2.level = droppedRecord.level;
-                            if (this_1.parent.parentIdMapping) {
-                                draggedRecord_2[this_1.parent.parentIdMapping] = droppedRecord[this_1.parent.parentIdMapping];
+                            else {
+                                count = this_1.getChildCount(droppedRecord, 0);
+                                if (this_1.parent.parentIdMapping) {
+                                    this_1.treeData.splice(recordIndex1 + count + 1, 0, this_1.draggedRecord.taskData);
+                                }
+                                this_1.treeGridData.splice(recordIndex1 + count + 1, 0, this_1.draggedRecord);
+                            }
+                            if (isNullOrUndefined(droppedRecord.parentItem)) {
+                                delete draggedRecord_2.parentItem;
+                                delete draggedRecord_2.parentUniqueID;
+                                draggedRecord_2.level = 0;
+                                if (this_1.parent.parentIdMapping) {
+                                    draggedRecord_2[this_1.parent.parentIdMapping] = null;
+                                }
+                            }
+                            if (droppedRecord.parentItem) {
+                                var rec = this_1.getChildrecordsByParentID(droppedRecord.parentUniqueID);
+                                var childRecords = rec[0].childRecords;
+                                var droppedRecordIndex = childRecords.indexOf(droppedRecord) + 1;
+                                childRecords.splice(droppedRecordIndex, 0, draggedRecord_2);
                                 draggedRecord_2.parentItem = droppedRecord.parentItem;
+                                draggedRecord_2.parentUniqueID = droppedRecord.parentUniqueID;
                                 draggedRecord_2.level = droppedRecord.level;
+                                if (this_1.parent.parentIdMapping) {
+                                    draggedRecord_2[this_1.parent.parentIdMapping] = droppedRecord[this_1.parent.parentIdMapping];
+                                    draggedRecord_2.parentItem = droppedRecord.parentItem;
+                                    draggedRecord_2.level = droppedRecord.level;
+                                }
+                            }
+                            if (draggedRecord_2.hasChildRecords) {
+                                var level = 1;
+                                this_1.updateChildRecordLevel(draggedRecord_2, level);
+                                this_1.updateChildRecord(draggedRecord_2, recordIndex1 + count + 1);
                             }
                         }
-                        if (draggedRecord_2.hasChildRecords) {
-                            var level = 1;
-                            this_1.updateChildRecordLevel(draggedRecord_2, level);
-                            this_1.updateChildRecord(draggedRecord_2, recordIndex1 + count + 1);
-                        }
+                        this_1.dropMiddle(recordIndex1);
                     }
-                    this_1.dropMiddle(recordIndex1);
-                }
-                if (isNullOrUndefined(draggedRecord_2.parentItem)) {
-                    var parentRecords = tObj.parentData;
-                    var newParentIndex = parentRecords.indexOf(this_1.droppedRecord);
-                    var nonRepeat_1 = 0;
-                    parentRecords.filter(function (e) {
-                        if (draggedRecord_2.uniqueID === e.uniqueID) {
-                            nonRepeat_1++;
+                    if (isNullOrUndefined(draggedRecord_2.parentItem)) {
+                        var parentRecords = tObj.parentData;
+                        var newParentIndex = parentRecords.indexOf(this_1.droppedRecord);
+                        var nonRepeat_1 = 0;
+                        parentRecords.filter(function (e) {
+                            if (draggedRecord_2.uniqueID === e.uniqueID) {
+                                nonRepeat_1++;
+                            }
+                        });
+                        if (this_1.dropPosition === 'bottomSegment' && nonRepeat_1 === 0) {
+                            parentRecords.splice(newParentIndex + 1, 0, draggedRecord_2);
+                        }
+                        else if (this_1.dropPosition === 'topSegment' && nonRepeat_1 === 0) {
+                            parentRecords.splice(newParentIndex, 0, draggedRecord_2);
                         }
-                    });
-                    if (this_1.dropPosition === 'bottomSegment' && nonRepeat_1 === 0) {
-                        parentRecords.splice(newParentIndex + 1, 0, draggedRecord_2);
-                    }
-                    else if (this_1.dropPosition === 'topSegment' && nonRepeat_1 === 0) {
-                        parentRecords.splice(newParentIndex, 0, draggedRecord_2);
                     }
+                    tObj.rowDragAndDropModule.refreshGridDataSource();
                 }
-                tObj.rowDragAndDropModule.refreshGridDataSource();
             };
             var this_1 = this;
             for (var i = 0; i < dragLength; i++) {
@@ -9474,6 +9691,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Handles the logic for inserting a dragged record into the middle of a parent record's child records.
+     *
+     * @param {number} recordIndex - The index at which to insert the dragged record relative to the parent record's child records.
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.dropMiddle = function (recordIndex) {
         var tObj = this.parent;
         var childRecords = findChildrenRecords(this.droppedRecord);
@@ -9494,15 +9717,23 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Handles the logic for inserting a dragged record at the top of a parent record's child records.
+     *
+     * @param {number} recordIndex1 - The index at which to insert the dragged record in the tree grid data.
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.dropAtTop = function (recordIndex1) {
         var tObj = this.parent;
         if (this.dropPosition === 'topSegment') {
             if (tObj.parentIdMapping) {
                 this.treeData.splice(recordIndex1, 0, this.draggedRecord.taskData);
             }
-            this.draggedRecord.parentItem = this.treeGridData[parseInt(recordIndex1.toString(), 10)].parentItem;
-            this.draggedRecord.parentUniqueID = this.treeGridData[parseInt(recordIndex1.toString(), 10)].parentUniqueID;
-            this.draggedRecord.level = this.treeGridData[parseInt(recordIndex1.toString(), 10)].level;
+            var targetRecord = this.treeGridData[parseInt(recordIndex1.toString(), 10)];
+            this.draggedRecord.parentItem = targetRecord.parentItem;
+            this.draggedRecord.parentUniqueID = targetRecord.parentUniqueID;
+            this.draggedRecord.level = targetRecord.level;
+            // Insert dragged record into the grid data
             this.treeGridData.splice(parseInt(recordIndex1.toString(), 10), 0, this.draggedRecord);
             if (this.draggedRecord.hasChildRecords) {
                 var level = 1;
@@ -9513,10 +9744,16 @@ var RowDD = /** @__PURE__ @class */ (function () {
                 var rec = this.getChildrecordsByParentID(this.droppedRecord.parentUniqueID);
                 var childRecords = rec[0].childRecords;
                 var droppedRecordIndex = childRecords.indexOf(this.droppedRecord);
+                // Insert the dragged record into the child records at the appropriate position
                 childRecords.splice(droppedRecordIndex, 0, this.draggedRecord);
             }
         }
     };
+    /**
+     * Updates the level and hierarchy of the dragged record based on the drop position.
+     *
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.recordLevel = function () {
         var tObj = this.parent;
         var draggedRecord = this.draggedRecord;
@@ -9538,6 +9775,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
             draggedRecord.parentItem = parentItem;
             draggedRecord.parentUniqueID = droppedRecord.uniqueID;
             droppedRecord.childRecords.splice(droppedRecord.childRecords.length, 0, draggedRecord);
+            setValue('uniqueIDCollection.' + draggedRecord.uniqueID, draggedRecord, tObj);
             var isSelfReference = 'isSelfReference';
             if (tObj["" + isSelfReference]) {
                 droppedRecord[tObj.childMapping] = [];
@@ -9557,6 +9795,11 @@ var RowDD = /** @__PURE__ @class */ (function () {
             droppedRecord.expanded = true;
         }
     };
+    /**
+     * Deletes the currently dragged row from the TreeGrid.
+     *
+     * @returns {void} - This function does not return any value.
+     */
     RowDD.prototype.deleteDragRow = function () {
         if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
             this.treeGridData = this.parent.grid.dataSource.dataSource.json;
@@ -9572,6 +9815,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         this.removeRecords(deletedRow);
     };
+    /**
+     * Updates the child records of a specified parent record in the TreeGrid.
+     *
+     * @param {ITreeData} record - The parent record whose child records will be updated.
+     * @param {number} count - The initial count to keep track of record positioning.
+     * @returns {number} - The updated count after processing all child records.
+     */
     RowDD.prototype.updateChildRecord = function (record, count) {
         var currentRecord;
         var tObj = this.parent;
@@ -9599,6 +9849,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         return count;
     };
+    /**
+     * Updates the level of child records for a specified parent record in the TreeGrid.
+     *
+     * @param {ITreeData} record - The parent record whose child records' levels will be updated.
+     * @param {number} level - The current level of the parent record.
+     * @returns {number} - The updated level after processing all child records.
+     */
     RowDD.prototype.updateChildRecordLevel = function (record, level) {
         var length = 0;
         var currentRecord;
@@ -9629,6 +9886,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         return level;
     };
+    /**
+     * Removes specified records from the TreeGrid data source.
+     *
+     * @param {ITreeData} record - The record to be removed, including any child records if applicable.
+     * @returns {void} - This method does not return a value.
+     */
     RowDD.prototype.removeRecords = function (record) {
         var tObj = this.parent;
         var dataSource;
@@ -9711,6 +9974,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Updates the records in the TreeGrid data source that have been modified.
+     *
+     * @param {ITreeData} record - The record to update, along with its parent records if applicable.
+     * @returns {void} - This method does not return a value.
+     */
     RowDD.prototype.updateModifiedRecords = function (record) {
         var parentData = getParentData(this.parent, record.parentUniqueID);
         if (!isNullOrUndefined(parentData)) {
@@ -9718,6 +9987,12 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.updateModifiedRecords(parentData);
         }
     };
+    /**
+     * Recursively removes child records from the specified record and updates the data source.
+     *
+     * @param {ITreeData} record - The parent record whose child records are to be removed.
+     * @returns {void} - This method does not return a value.
+     */
     RowDD.prototype.removeChildItem = function (record) {
         var currentRecord;
         var idx;
@@ -9764,6 +10039,13 @@ var RowDD = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    /**
+     * Retrieves the count of child records associated with the specified parent record.
+     *
+     * @param {ITreeData} record - The parent record for which child count is to be calculated.
+     * @param {number} count - The initial count to start with, usually passed as 0.
+     * @returns {number} - The total count of child records.
+     */
     RowDD.prototype.getChildCount = function (record, count) {
         var currentRecord;
         if (!record.hasChildRecords) {
@@ -9778,6 +10060,14 @@ var RowDD = /** @__PURE__ @class */ (function () {
         }
         return count;
     };
+    /**
+     * Ensures the validity of the drop position for the dragged records by verifying the hierarchy and position constraints.
+     * If the current record is found in the dragged records' children, sets the drop position to 'Invalid'.
+     *
+     * @param {ITreeData[]} draggedRecords - The array of dragged records being verified.
+     * @param {ITreeData} currentRecord - The current record to check against dragged records.
+     * @returns {void} - This function does not return a value.
+     */
     RowDD.prototype.ensuredropPosition = function (draggedRecords, currentRecord) {
         var _this = this;
         draggedRecords.filter(function (e) {
@@ -9790,11 +10080,29 @@ var RowDD = /** @__PURE__ @class */ (function () {
                     _this.dropPosition = 'Invalid';
                     _this.addErrorElem();
                     _this.canDrop = false;
+                    if (isNullOrUndefined(_this.parent.rowDropSettings.targetID)) {
+                        _this.removetopOrBottomBorder();
+                        _this.removeChildBorder();
+                    }
                     return;
                 }
             }
         });
     };
+    RowDD.prototype.isDuplicateData = function (currentData) {
+        var primaryKeys = this.parent.getPrimaryKeyFieldNames();
+        if (primaryKeys.length === 0) {
+            return false;
+        }
+        return this.parent.flatData.some(function (data) {
+            // eslint-disable-next-line
+            return primaryKeys.every(function (key) { return data[key] === currentData[key]; });
+        });
+    };
+    /**
+     * Cleans up resources, event listeners, and DOM elements when the TreeGrid component is destroyed.
+     * @returns {void}
+     */
     RowDD.prototype.destroy = function () {
         this.removeEventListener();
     };
@@ -11435,7 +11743,9 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
                 for (var _b = 0, _c = args.items; _b < _c.length; _b++) {
                     var items = _c[_b];
                     if (items.text === 'Outdent' || items.text === 'Indent') {
-                        tObj.grid.contextMenuModule['hiddenItems'].push(items.text);
+                        if (!tObj.grid.contextMenuModule['hiddenItems'].includes(items.text)) {
+                            tObj.grid.contextMenuModule['hiddenItems'].push(items.text);
+                        }
                     }
                 }
                 tObj.grid.contextMenuModule.contextMenu.hideItems(tObj.grid.contextMenuModule['hiddenItems']);
@@ -11625,69 +11935,71 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
                 this.batchAddRowRecord = extendArray(this.batchAddRowRecord);
                 this.batchAddRowRecord.push(this.batchRecords[this.addRowIndex]);
                 added = this.parent.grid.getRowsObject()[parseInt(rowObjectIndex.toString(), 10)].changes;
-                added.uniqueID = getUid(this.parent.element.id + '_data_');
-                setValue('uniqueIDCollection.' + added.uniqueID, added, this.parent);
-                if (!Object.prototype.hasOwnProperty.call(added, 'level')) {
-                    this.batchIndex = this.selectedIndex === -1 ? 0 : this.batchIndex;
-                    if (this.parent.editSettings.newRowPosition === 'Child') {
-                        added.primaryParent = parentRecord;
-                        if (this.selectedIndex > -1) {
-                            added.parentItem = extend$1({}, this.batchRecords[this.addRowIndex]);
-                            added.parentUniqueID = added.parentItem.uniqueID;
-                            delete added.parentItem.childRecords;
-                            delete added.parentItem[this.parent.childMapping];
-                            added.level = added.parentItem.level + 1;
-                            added.index = this.batchIndex;
-                            var childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
-                            var record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
-                            record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
-                            currentDataIndex = data.map(function (e) { return e["" + primaryKey_1]; }).indexOf(record["" + primaryKey_1]);
-                            if (this.isSelfReference) {
-                                added[this.parent.parentIdMapping] = idMapping;
+                if (!isNullOrUndefined(added)) {
+                    added.uniqueID = getUid(this.parent.element.id + '_data_');
+                    setValue('uniqueIDCollection.' + added.uniqueID, added, this.parent);
+                    if (!Object.prototype.hasOwnProperty.call(added, 'level')) {
+                        this.batchIndex = this.selectedIndex === -1 ? 0 : this.batchIndex;
+                        if (this.parent.editSettings.newRowPosition === 'Child') {
+                            added.primaryParent = parentRecord;
+                            if (this.selectedIndex > -1) {
+                                added.parentItem = extend$1({}, this.batchRecords[this.addRowIndex]);
+                                added.parentUniqueID = added.parentItem.uniqueID;
+                                delete added.parentItem.childRecords;
+                                delete added.parentItem[this.parent.childMapping];
+                                added.level = added.parentItem.level + 1;
+                                added.index = this.batchIndex;
+                                var childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
+                                var record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
+                                record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
+                                currentDataIndex = data.map(function (e) { return e["" + primaryKey_1]; }).indexOf(record["" + primaryKey_1]);
+                                if (this.isSelfReference) {
+                                    added[this.parent.parentIdMapping] = idMapping;
+                                }
+                                updateParentRow(primaryKey_1, added.parentItem, 'add', this.parent, this.isSelfReference, added);
                             }
-                            updateParentRow(primaryKey_1, added.parentItem, 'add', this.parent, this.isSelfReference, added);
                         }
-                    }
-                    else if ((this.parent.editSettings.newRowPosition === 'Above' || this.parent.editSettings.newRowPosition === 'Below')
-                        && !isNullOrUndefined(this.batchRecords[this.addRowIndex])) {
-                        added.level = this.batchRecords[parseInt(this.addRowIndex.toString(), 10)]["" + level];
-                        if (added.level && this.selectedIndex > -1) {
-                            added.parentItem = parentRecord;
-                            added.parentUniqueID = parentUniqueID;
-                            delete added.parentItem.childRecords;
-                            delete added.parentItem[this.parent.childMapping];
+                        else if ((this.parent.editSettings.newRowPosition === 'Above' || this.parent.editSettings.newRowPosition === 'Below')
+                            && !isNullOrUndefined(this.batchRecords[this.addRowIndex])) {
+                            added.level = this.batchRecords[parseInt(this.addRowIndex.toString(), 10)]["" + level];
+                            if (added.level && this.selectedIndex > -1) {
+                                added.parentItem = parentRecord;
+                                added.parentUniqueID = parentUniqueID;
+                                delete added.parentItem.childRecords;
+                                delete added.parentItem[this.parent.childMapping];
+                            }
+                            added.index = this.parent.editSettings.newRowPosition === 'Below' ? this.batchIndex : this.batchIndex - 1;
+                            if (this.parent.editSettings.newRowPosition === 'Below' && this.selectedIndex > -1) {
+                                var childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
+                                var record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
+                                record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
+                                currentDataIndex = data.map(function (e) { return e["" + primaryKey_1]; }).indexOf(record["" + primaryKey_1]);
+                            }
+                            if (this.parent.editSettings.newRowPosition === 'Above' && this.selectedIndex > -1) {
+                                var record = this.batchRecords[this.addRowIndex];
+                                currentDataIndex = data.map(function (e) { return e["" + primaryKey_1]; }).indexOf(record["" + primaryKey_1]);
+                            }
+                            if (this.isSelfReference) {
+                                added[this.parent.parentIdMapping] = parentIdMapping;
+                            }
                         }
-                        added.index = this.parent.editSettings.newRowPosition === 'Below' ? this.batchIndex : this.batchIndex - 1;
-                        if (this.parent.editSettings.newRowPosition === 'Below' && this.selectedIndex > -1) {
-                            var childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
-                            var record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
-                            record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
-                            currentDataIndex = data.map(function (e) { return e["" + primaryKey_1]; }).indexOf(record["" + primaryKey_1]);
+                        added.index = added.index === -1 ? 0 : added.index;
+                        added.hasChildRecords = false;
+                        added.childRecords = [];
+                        this.batchRecords.splice(added.index, 0, added);
+                        this.currentViewRecords.splice(added.index, 0, added);
+                        if (currentDataIndex) {
+                            indexvalue = currentDataIndex;
                         }
-                        if (this.parent.editSettings.newRowPosition === 'Above' && this.selectedIndex > -1) {
-                            var record = this.batchRecords[this.addRowIndex];
-                            currentDataIndex = data.map(function (e) { return e["" + primaryKey_1]; }).indexOf(record["" + primaryKey_1]);
+                        else {
+                            indexvalue = added.index;
                         }
-                        if (this.isSelfReference) {
-                            added[this.parent.parentIdMapping] = parentIdMapping;
+                        if (this.parent.editSettings.newRowPosition !== 'Above') {
+                            indexvalue = added.index === 0 ? indexvalue : indexvalue + 1;
                         }
+                        data.splice(indexvalue, 0, added);
+                        this.batchAddedRecords.push(added);
                     }
-                    added.index = added.index === -1 ? 0 : added.index;
-                    added.hasChildRecords = false;
-                    added.childRecords = [];
-                    this.batchRecords.splice(added.index, 0, added);
-                    this.currentViewRecords.splice(added.index, 0, added);
-                    if (currentDataIndex) {
-                        indexvalue = currentDataIndex;
-                    }
-                    else {
-                        indexvalue = added.index;
-                    }
-                    if (this.parent.editSettings.newRowPosition !== 'Above') {
-                        indexvalue = added.index === 0 ? indexvalue : indexvalue + 1;
-                    }
-                    data.splice(indexvalue, 0, added);
-                    this.batchAddedRecords.push(added);
                 }
                 this.parent.grid.getRowsObject()[parseInt(rowObjectIndex.toString(), 10)].data = added;
                 this.newBatchRowAdded = false;
@@ -13757,9 +14069,15 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                 firsttdinx = +attr; // this.parent.getContent().querySelector('.e-content tr').getAttribute('data-rowindex');
             }
             if (firsttdinx === 0) {
-                this.translateY = !isNullOrUndefined(this.endIndex) ?
-                    (this.endIndex - this.parent.pageSettings.pageSize) * (this.parent.rowHeight ?
-                        this.parent.rowHeight : this.parent.getRowHeight()) : 0;
+                if (this.endIndex - this.startIndex < this.parent.pageSettings.pageSize) {
+                    this.translateY = !isNullOrUndefined(this.endIndex) ?
+                        (this.endIndex - this.parent.pageSettings.pageSize) * (this.parent.rowHeight ?
+                            this.parent.rowHeight : this.parent.getRowHeight()) : 0;
+                }
+                else {
+                    this.translateY = (scrollArgs.offset.top - (outBuffer * rowHeight) > 0) ?
+                        scrollArgs.offset.top - (outBuffer * rowHeight) + rowHeight : 0;
+                }
             }
             else if (this.parent.getFrozenColumns() > 0) {
                 scrollArgs.offset.top = scrollArgs.offset.top + 80;
@@ -13793,6 +14111,10 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                 ((this.startIndex - currentViewData[0]["" + indexValue]) < (this.parent.pageSettings.pageSize / 2)) && 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);
             }
@@ -13801,10 +14123,7 @@ var VirtualTreeContentRenderer = /** @__PURE__ @class */ (function (_super) {
                     this.translateY = (this.totalRecords * rowHeight) - ((this.endIndex - this.startIndex) * rowHeight);
                 }
                 else {
-                    if (this.parent.allowRowDragAndDrop) {
-                        this.translateY = scrollArgs.offset.top - rowHeight * 2;
-                    }
-                    else if (this.parent.getFrozenColumns() > 0) {
+                    if (this.parent.getFrozenColumns() > 0) {
                         this.translateY = scrollArgs.offset.top - ((rowHeight * 2) + this.parent.pageSettings.pageSize);
                     }
                     else {
@@ -14175,6 +14494,11 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 (startIndex < this.parent.getRows().length && endIndex <= startIndex + this.parent.getRows().length) && translateY === 0) {
                 startIndex = 0;
             }
+            if ((pageingDetails.actionArgs.requestType === 'save' && startIndex !== this.prevstartIndex) &&
+                (startIndex < this.parent.getRows().length && endIndex <= startIndex + this.parent.getRows().length) && translateY === 0) {
+                startIndex = 0;
+                endIndex = startIndex + this.parent.grid.pageSettings.pageSize;
+            }
             if (!isNullOrUndefined(this.expandCollapseRec)) {
                 var resourceCount = this.parent.getRows();
                 var sIndex = visualData.indexOf(this.expandCollapseRec);