@syncfusion/ej2-treegrid 27.2.2 → 28.1.33

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

@@ -1,4 +1,4 @@
-import { merge, Property, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, Component, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, closest, classList, setStyleAttribute, select, debounce, remove } from '@syncfusion/ej2-base';
+import { merge, Property, ChildProperty, Collection, isNullOrUndefined, Browser, removeClass, addClass, getValue, createElement, setValue, extend as extend$1, Internationalization, getEnumValue, compile, Component, L10n, EventHandler, KeyboardEvents, SanitizeHtmlHelper, Complex, Event, NotifyPropertyChanges, closest, setStyleAttribute, select, classList, debounce, remove } from '@syncfusion/ej2-base';
 import { Logger as Logger$1, Grid, 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, RowDD as RowDD$1, Scroll, VirtualRowModelGenerator, Filter as Filter$1, ExcelExport as ExcelExport$1, Data, ExportHelper, PdfExport as PdfExport$1, Page as Page$1, Toolbar as Toolbar$1, Aggregate as Aggregate$1, calculateAggregate, Sort as Sort$1, ColumnMenu as ColumnMenu$1, ContextMenu as ContextMenu$1, Edit as Edit$1, resetRowIndex, CommandColumn as CommandColumn$1, DetailRow as DetailRow$1, VirtualContentRenderer, Cell, InterSectionObserver, getTransformValues, VirtualScroll as VirtualScroll$1, RenderType, VirtualHeaderRenderer, ColumnChooser as ColumnChooser$1, InfiniteScroll as InfiniteScroll$1, RowRenderer } 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';
@@ -2117,9 +2117,15 @@ class DataManipulation {
                         records[parseInt(rec.toString(), 10)].taskData = extend$1({}, records[parseInt(rec.toString(), 10)]);
                         records[parseInt(rec.toString(), 10)].uniqueID = getUid(this.parent.element.id + '_data_');
                         setValue('uniqueIDCollection.' + records[parseInt(rec.toString(), 10)].uniqueID, records[parseInt(rec.toString(), 10)], this.parent);
-                        records[parseInt(rec.toString(), 10)].level = 0;
-                        if (isRemoteData(this.parent) && this.parent.enableVirtualization && records[parseInt(rec.toString(), 10)][`${this.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.parent) && this.parent.enableVirtualization && records[parseInt(rec.toString(), 10)][`${this.parent.parentIdMapping}`] && (isNullOrUndefined(records[parseInt(rec.toString(), 10)].level) || records[parseInt(rec.toString(), 10)].level === 0)) {
+                            const parentID = records[parseInt(rec.toString(), 10)][`${this.parent.parentIdMapping}`];
+                            const parentRec = records.find((record) => record[`${this.parent.idMapping}`] === parentID);
+                            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.parent.hasChildMapping] ||
@@ -2318,7 +2324,7 @@ class DataManipulation {
                             const parentData = this.parent[`${remoteExpandedData}`][parseInt(i.toString(), 10)];
                             delete parentData.childRecords;
                             result[parseInt(r.toString(), 10)].parentItem = parentData;
-                            result[parseInt(r.toString(), 10)].parentUniqueID = rowDetails.record.uniqueID;
+                            result[parseInt(r.toString(), 10)].parentUniqueID = parentData.uniqueID;
                         }
                     }
                 }
@@ -2353,6 +2359,9 @@ class DataManipulation {
                 }
                 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 (let p = 0; p < this.parent.grid.currentViewData.length; p++) {
@@ -2541,7 +2550,14 @@ class DataManipulation {
                 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) {
@@ -3928,7 +3944,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     requiredModules() {
         const modules = [];
         const splitFrozenCount = 'splitFrozenCount';
-        if (!this.isReact && isNullOrUndefined(this['changedProperties'].columns)) {
+        if (isNullOrUndefined(this['changedProperties'].columns)) {
             this.grid[`${splitFrozenCount}`](this.getColumns());
         }
         if (this.isDestroyed) {
@@ -4428,7 +4444,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
             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 = (args) => {
             this.IsExpandCollapseClicked(args);
@@ -5189,11 +5207,8 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     onPropertyChanged(newProp) {
         const properties = Object.keys(newProp);
         let requireRefresh = false;
-        if (properties.indexOf('columns') > -1 && !isNullOrUndefined(newProp.columns) && this.frozenColumns === 0
-            && this.frozenRows === 0 && !this.columnModel.some((col) => 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 (const prop of properties) {
             switch (prop) {
@@ -6241,12 +6256,28 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     refreshColumns(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);
         }
     }
+    getTreeColumn() {
+        const columnModel = 'columnModel';
+        const treeColumn = this[`${columnModel}`][this.treeColumnIndex];
+        let treeIndex;
+        const updatedCols = this.getColumns();
+        for (let f = 0; f < updatedCols.length; f++) {
+            const treeColumnfield = getObject('field', treeColumn);
+            const parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
+            if (treeColumnfield === parentColumnfield) {
+                treeIndex = f;
+                break;
+            }
+        }
+        this.setProperties({ treeColumnIndex: treeIndex }, true);
+    }
     /**
      * Refreshes the TreeGrid header.
      *
@@ -7036,7 +7067,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
                 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)) {
@@ -7058,7 +7089,7 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
     }
     toggleRowVisibility(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);
         }
     }
@@ -7559,7 +7590,9 @@ let TreeGrid = TreeGrid_1 = class TreeGrid extends Component {
      * @returns {void}
      */
     reorderRows(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.
@@ -8013,13 +8046,13 @@ class Reorder {
      * @returns {void}
      */
     addEventListener() {
-        this.parent.on('getColumnIndex', this.getTreeColumn, this);
+        this.parent.on('getColumnIndex', this.updateTreeColumn, this);
     }
     removeEventListener() {
         if (this.parent.isDestroyed) {
             return;
         }
-        this.parent.off('getColumnIndex', this.getTreeColumn);
+        this.parent.off('getColumnIndex', this.updateTreeColumn);
     }
     /**
      * To destroy the Reorder
@@ -8030,20 +8063,8 @@ class Reorder {
     destroy() {
         this.removeEventListener();
     }
-    getTreeColumn() {
-        const columnModel = 'columnModel';
-        const treeColumn = this.parent[`${columnModel}`][this.parent.treeColumnIndex];
-        let treeIndex;
-        const updatedCols = this.parent.getColumns();
-        for (let f = 0; f < updatedCols.length; f++) {
-            const treeColumnfield = getObject('field', treeColumn);
-            const parentColumnfield = getObject('field', updatedCols[parseInt(f.toString(), 10)]);
-            if (treeColumnfield === parentColumnfield) {
-                treeIndex = f;
-                break;
-            }
-        }
-        this.parent.setProperties({ treeColumnIndex: treeIndex }, true);
+    updateTreeColumn() {
+        this.parent['getTreeColumn']();
     }
 }
 
@@ -8106,24 +8127,44 @@ class RowDD {
      * @param {TreeGrid} parent - Tree Grid instance
      */
     constructor(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.
+     */
     getChildrecordsByParentID(id) {
         let treeGridDataSource;
         if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
@@ -8157,6 +8198,9 @@ class RowDD {
      */
     reorderRows(fromIndexes, toIndex, position) {
         const tObj = this.parent;
+        if (fromIndexes[0] === toIndex || ['above', 'below', 'child'].indexOf(position) === -1) {
+            return;
+        }
         const action = 'action';
         const dropPosition = 'dropPosition';
         const updateRowAndCellElements = 'updateRowAndCellElements';
@@ -8195,13 +8239,9 @@ class RowDD {
             }
             this.parent.grid.refresh();
             if (this.parent.enableImmutableMode && this.dropPosition === 'middleSegment') {
-                let index;
-                if (this.parent.allowRowDragAndDrop) {
-                    index = this.parent.treeColumnIndex + 1;
-                }
-                else if (this.parent[`${action}`] === 'indenting') {
-                    index = this.parent.treeColumnIndex;
-                }
+                const index = this.parent.allowRowDragAndDrop
+                    ? this.parent.treeColumnIndex + 1
+                    : (this.parent[`${action}`] === 'indenting' ? this.parent.treeColumnIndex : undefined);
                 const row = this.parent.getRows()[fromIndexes[0]];
                 const dropData = args.data[0];
                 const totalRecord = [];
@@ -8216,13 +8256,9 @@ class RowDD {
                 this.parent[`${updateRowAndCellElements}`](totalRecord, rows, index);
             }
             if (this.parent.enableImmutableMode && this.parent[`${action}`] === 'outdenting') {
-                let index;
-                if (this.parent.allowRowDragAndDrop) {
-                    index = this.parent.treeColumnIndex + 1;
-                }
-                else if (this.parent[`${action}`] === 'outdenting') {
-                    index = this.parent.treeColumnIndex;
-                }
+                const index = this.parent.allowRowDragAndDrop
+                    ? this.parent.treeColumnIndex + 1
+                    : (this.parent[`${action}`] === 'outdenting' ? this.parent.treeColumnIndex : undefined);
                 const record = args.data[0];
                 const row = this.parent.getRows()[fromIndexes[0]];
                 const totalRecord = [];
@@ -8232,10 +8268,14 @@ class RowDD {
                 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}
+     */
     indentOutdentAction(record, request) {
         const tObj = this.parent;
         const action = 'action';
@@ -8310,6 +8350,13 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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}
+     */
     eventTrigger(action, dropIndex) {
         const actionArgs = {
             action: action,
@@ -8338,6 +8385,12 @@ class RowDD {
             }
         });
     }
+    /**
+     * 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.
+     */
     orderToIndex(currentData) {
         for (let i = 0; i < currentData.length; i++) {
             currentData[parseInt(i.toString(), 10)].index = i;
@@ -8348,6 +8401,15 @@ class RowDD {
         }
         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.
+     */
     rowsAdded(e) {
         let draggedRecord;
         const dragRecords = e.records;
@@ -8452,6 +8514,15 @@ class RowDD {
             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.
+     */
     rowsRemoved(e) {
         for (let i = 0; i < e.records.length; i++) {
             this.draggedRecord = e.records[parseInt(i.toString(), 10)];
@@ -8463,35 +8534,36 @@ class RowDD {
             }
         }
     }
+    /**
+     * Refreshes the data source of the TreeGrid.
+     *
+     * @returns {void} This function does not return any value.
+     */
     refreshGridDataSource() {
         const draggedRecord = this.draggedRecord;
         const droppedRecord = this.droppedRecord;
         const proxy = this.parent;
-        let tempDataSource;
-        let idx;
+        let temporaryDataSource;
+        let 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)) {
-            const keys = Object.keys(tempDataSource);
+            const keys = Object.keys(temporaryDataSource);
             for (let 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;
+                    indexOfDroppedRecord = i;
                 }
             }
-            if (this.dropPosition === 'topSegment') {
-                if (!this.parent.idMapping) {
-                    tempDataSource.splice(idx, 0, draggedRecord.taskData);
-                }
-            }
-            else if (this.dropPosition === 'bottomSegment') {
-                if (!this.parent.idMapping) {
-                    tempDataSource.splice(idx + 1, 0, draggedRecord.taskData);
+            if (!this.parent.idMapping) {
+                const positionAdjustment = this.dropPosition === 'topSegment' ? 0 : 1;
+                if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
+                    temporaryDataSource.splice(indexOfDroppedRecord + positionAdjustment, 0, draggedRecord.taskData);
                 }
             }
         }
@@ -8522,6 +8594,12 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     removeFirstrowBorder(element) {
         const canremove = this.dropPosition === 'bottomSegment';
         if (this.parent.element.getElementsByClassName('e-firstrow-border').length > 0 && element &&
@@ -8529,25 +8607,40 @@ class RowDD {
             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}
+     */
     removeLastrowBorder(element) {
-        const isEmptyRow = element && (element.classList.contains('e-emptyrow') || element.classList.contains('e-columnheader')
-            || element.classList.contains('e-detailrow'));
-        let 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');
+        const isEmptyRow = element.classList.contains('e-emptyrow') ||
+            element.classList.contains('e-columnheader') ||
+            element.classList.contains('e-detailrow');
+        if (isEmptyRow) {
+            return;
         }
-        const 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();
+        const lastRow = this.parent.enableVirtualization ?
+            this.parent.getRows()[this.parent.getCurrentViewRecords().length - 1] :
+            this.parent.getRowByIndex(this.parent.getCurrentViewRecords().length - 1);
+        const isNotLastRow = lastRow.getAttribute('data-uid') !== element.getAttribute('data-uid');
+        const canRemove = isNotLastRow || this.dropPosition === 'topSegment';
+        const 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').
+     */
     updateIcon(row, index, args) {
         const rowEle = args.target ? closest(args.target, 'tr') : null;
         this.dropPosition = undefined;
@@ -8559,6 +8652,10 @@ class RowDD {
                 || !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
@@ -8633,6 +8730,11 @@ class RowDD {
         }
         return this.dropPosition;
     }
+    /**
+     * Removes the visual border from all child rows within the TreeGrid.
+     *
+     * @returns {void} No return value.
+     */
     removeChildBorder() {
         let borderElem = [];
         borderElem = [].slice.call(this.parent.element.querySelectorAll('.e-childborder'));
@@ -8640,6 +8742,12 @@ class RowDD {
             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.
+     */
     addFirstrowBorder(targetRow) {
         const node = this.parent.element;
         const tObj = this.parent;
@@ -8662,9 +8770,21 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     addLastRowborder(trElement) {
+        if (!trElement) {
+            return;
+        }
         const 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')) {
             const bottomborder = this.parent.createElement('div', { className: 'e-lastrow-border' });
@@ -8677,40 +8797,55 @@ class RowDD {
             }
         }
     }
+    /**
+     * Retrieves the total scroll width of the TreeGrid content area.
+     *
+     * @returns {number} The width of the scrollbar if content overflows, otherwise 0.
+     */
     getScrollWidth() {
         const 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.
+     */
     addErrorElem() {
         const dragelem = document.getElementsByClassName('e-cloneproperties')[0];
-        const errorelem = dragelem.querySelectorAll('.e-errorelem').length;
+        const errorelemCount = dragelem.querySelectorAll('.e-errorelem').length;
         const sanitize = 'sanitize';
-        if (!errorelem && !this.parent.rowDropSettings.targetID) {
-            const ele = document.createElement('div');
-            classList(ele, ['e-errorcontainer'], []);
-            classList(ele, ['e-icons', 'e-errorelem'], []);
+        if (!errorelemCount && !this.parent.rowDropSettings.targetID) {
+            const errorContainer = document.createElement('div');
+            errorContainer.classList.add('e-errorcontainer', 'e-icons', 'e-errorelem');
+            const rowCell = dragelem.querySelector('.e-rowcell');
             const errorVal = dragelem.querySelector('.errorValue');
-            let content = dragelem.querySelector('.e-rowcell').innerHTML;
+            let content = rowCell.innerHTML;
             if (errorVal) {
                 content = this.parent[`${sanitize}`](errorVal.innerHTML);
                 errorVal.parentNode.removeChild(errorVal);
             }
-            dragelem.querySelector('.e-rowcell').innerHTML = '';
+            rowCell.innerHTML = '';
             const 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);
             const dropItemSpan = document.querySelector('.e-dropitemscount');
             if (this.hasDropItem && dropItemSpan) {
-                const dropItemLeft = parseInt(dropItemSpan.style.left, 10) + ele.offsetWidth + 16;
+                const dropItemLeft = parseInt(dropItemSpan.style.left, 10) + errorContainer.offsetWidth + 16;
                 const 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.
+     */
     removeErrorElem() {
         const errorelem = document.querySelector('.e-errorelem');
         const errorValue = document.querySelector('.errorValue');
@@ -8731,6 +8866,12 @@ class RowDD {
         }
         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.
+     */
     topOrBottomBorder(target) {
         let rowElement = [];
         const element = closest(target, 'tr');
@@ -8747,6 +8888,11 @@ class RowDD {
             }
         }
     }
+    /**
+     * Removes the drop border classes ('e-dropbottom' and 'e-droptop') from the parent element if present.
+     *
+     * @returns {void} No return value.
+     */
     removetopOrBottomBorder() {
         let border = [];
         border = [].slice.call(this.parent.element.querySelectorAll('.e-dropbottom, .e-droptop'));
@@ -8755,6 +8901,14 @@ class RowDD {
             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.
+     */
     addRemoveClasses(cells, add, className) {
         for (let i = 0, len = cells.length; i < len; i++) {
             if (add) {
@@ -8765,6 +8919,12 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     getOffset(element) {
         const box = element.getBoundingClientRect();
         const body = document.body;
@@ -8777,35 +8937,38 @@ class RowDD {
         const 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.
+     */
     Rowdraging(args) {
         const tObj = this.parent;
         const cloneElement = this.parent.element.querySelector('.e-cloneproperties');
+        if (!cloneElement) {
+            return;
+        }
         cloneElement.style.cursor = '';
         const rowEle = args.target ? closest(args.target, 'tr') : null;
         const rowIdx = rowEle ? rowEle.rowIndex : -1;
-        let dragRecords = [];
-        const 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;
         }
+        const dragRecords = Array.isArray(args.data) ? args.data : [args.data];
+        const 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) {
             const dropElement = parentsUntil(args.target, 'e-treegrid');
             if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
@@ -8820,17 +8983,26 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     rowDropped(args) {
         const tObj = this.parent;
         const 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);
                     }
@@ -8838,9 +9010,7 @@ class RowDD {
                         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();
                 }
             }
         }
@@ -8859,12 +9029,7 @@ class RowDD {
         }
         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}`])) {
             let index = this.parent.treeColumnIndex;
             index = index + 1;
@@ -8906,6 +9071,25 @@ class RowDD {
             }
         }
     }
+    /**
+     * Removes the border elements for the first and last rows of the TreeGrid.
+     *
+     * @returns {void} This function does not return a value.
+     */
+    removeRowBorders() {
+        ['e-firstrow-border', 'e-lastrow-border'].forEach((className) => {
+            const 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.
+     */
     dragDropGrid(args) {
         const tObj = this.parent;
         const targetRow = closest(args.target, 'tr');
@@ -8966,9 +9150,22 @@ class RowDD {
             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.
+     */
     getTargetIdx(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.
+     */
     getParentData(record, data) {
         const parentItem = record.parentItem;
         let selectedItemIndex = -1;
@@ -8996,6 +9193,13 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     dropRows(args, isByMethod) {
         if (this.dropPosition !== 'Invalid' && !isRemoteData(this.parent)) {
             const tObj = this.parent;
@@ -9044,91 +9248,107 @@ class RowDD {
             for (let i = 0; i < dragLength; i++) {
                 draggedRecord = dragRecords[parseInt(i.toString(), 10)];
                 this.draggedRecord = draggedRecord;
-                if (this.dropPosition !== 'Invalid' && !isNullOrUndefined(this.droppedRecord)) {
-                    if (!tObj.rowDropSettings.targetID || isByMethod) {
-                        this.deleteDragRow();
-                    }
-                    if (this.draggedRecord === this.droppedRecord) {
-                        let correctIndex = this.getTargetIdx(args.target.offsetParent.parentElement);
-                        if (isNaN(correctIndex)) {
-                            correctIndex = this.getTargetIdx(args.target.parentElement);
+                if (!this.draggedRecord.hasChildRecords) {
+                    for (const dragRecord of dragRecords) {
+                        if (!isNullOrUndefined(dragRecord.childRecords) &&
+                            dragRecord.childRecords.indexOf(this.draggedRecord) !== -1) {
+                            this.draggedRecord = undefined;
                         }
-                        args.dropIndex = correctIndex;
-                        droppedRecord = this.droppedRecord = this.parent.getCurrentViewRecords()[args.dropIndex];
                     }
-                    if (droppedRecord.parentItem || this.dropPosition === 'middleSegment') {
-                        const parentRecords = tObj.parentData;
-                        const newParentIndex = parentRecords.indexOf(this.draggedRecord);
-                        if (newParentIndex !== -1) {
-                            parentRecords.splice(newParentIndex, 1);
+                }
+                if (!isNullOrUndefined(this.draggedRecord)) {
+                    if (this.dropPosition !== 'Invalid' && !isNullOrUndefined(this.droppedRecord)) {
+                        if (!tObj.rowDropSettings.targetID || isByMethod) {
+                            this.deleteDragRow();
                         }
-                    }
-                    const recordIndex1 = this.treeGridData.indexOf(droppedRecord);
-                    this.dropAtTop(recordIndex1);
-                    if (this.dropPosition === 'bottomSegment') {
-                        if (!droppedRecord.hasChildRecords) {
-                            if (this.parent.parentIdMapping) {
-                                this.treeData.splice(recordIndex1 + 1, 0, this.draggedRecord.taskData);
+                        if (this.draggedRecord === this.droppedRecord) {
+                            let correctIndex = this.getTargetIdx(args.target.offsetParent.parentElement);
+                            if (isNaN(correctIndex)) {
+                                correctIndex = this.getTargetIdx(args.target.parentElement);
                             }
-                            this.treeGridData.splice(recordIndex1 + 1, 0, this.draggedRecord);
+                            args.dropIndex = correctIndex;
+                            droppedRecord = this.droppedRecord = this.parent.getCurrentViewRecords()[args.dropIndex];
                         }
-                        else {
-                            count = this.getChildCount(droppedRecord, 0);
-                            if (this.parent.parentIdMapping) {
-                                this.treeData.splice(recordIndex1 + count + 1, 0, this.draggedRecord.taskData);
+                        if (droppedRecord.parentItem || this.dropPosition === 'middleSegment') {
+                            const parentRecords = tObj.parentData;
+                            const newParentIndex = parentRecords.indexOf(this.draggedRecord);
+                            if (newParentIndex !== -1) {
+                                parentRecords.splice(newParentIndex, 1);
                             }
-                            this.treeGridData.splice(recordIndex1 + count + 1, 0, this.draggedRecord);
                         }
-                        if (isNullOrUndefined(droppedRecord.parentItem)) {
-                            delete draggedRecord.parentItem;
-                            delete draggedRecord.parentUniqueID;
-                            draggedRecord.level = 0;
-                            if (this.parent.parentIdMapping) {
-                                draggedRecord[this.parent.parentIdMapping] = null;
+                        const recordIndex1 = this.treeGridData.indexOf(droppedRecord);
+                        this.dropAtTop(recordIndex1);
+                        if (this.dropPosition === 'bottomSegment') {
+                            if (!droppedRecord.hasChildRecords) {
+                                if (this.parent.parentIdMapping) {
+                                    this.treeData.splice(recordIndex1 + 1, 0, this.draggedRecord.taskData);
+                                }
+                                this.treeGridData.splice(recordIndex1 + 1, 0, this.draggedRecord);
                             }
-                        }
-                        if (droppedRecord.parentItem) {
-                            const rec = this.getChildrecordsByParentID(droppedRecord.parentUniqueID);
-                            const childRecords = rec[0].childRecords;
-                            const droppedRecordIndex = childRecords.indexOf(droppedRecord) + 1;
-                            childRecords.splice(droppedRecordIndex, 0, draggedRecord);
-                            draggedRecord.parentItem = droppedRecord.parentItem;
-                            draggedRecord.parentUniqueID = droppedRecord.parentUniqueID;
-                            draggedRecord.level = droppedRecord.level;
-                            if (this.parent.parentIdMapping) {
-                                draggedRecord[this.parent.parentIdMapping] = droppedRecord[this.parent.parentIdMapping];
+                            else {
+                                count = this.getChildCount(droppedRecord, 0);
+                                if (this.parent.parentIdMapping) {
+                                    this.treeData.splice(recordIndex1 + count + 1, 0, this.draggedRecord.taskData);
+                                }
+                                this.treeGridData.splice(recordIndex1 + count + 1, 0, this.draggedRecord);
+                            }
+                            if (isNullOrUndefined(droppedRecord.parentItem)) {
+                                delete draggedRecord.parentItem;
+                                delete draggedRecord.parentUniqueID;
+                                draggedRecord.level = 0;
+                                if (this.parent.parentIdMapping) {
+                                    draggedRecord[this.parent.parentIdMapping] = null;
+                                }
+                            }
+                            if (droppedRecord.parentItem) {
+                                const rec = this.getChildrecordsByParentID(droppedRecord.parentUniqueID);
+                                const childRecords = rec[0].childRecords;
+                                const droppedRecordIndex = childRecords.indexOf(droppedRecord) + 1;
+                                childRecords.splice(droppedRecordIndex, 0, draggedRecord);
                                 draggedRecord.parentItem = droppedRecord.parentItem;
+                                draggedRecord.parentUniqueID = droppedRecord.parentUniqueID;
                                 draggedRecord.level = droppedRecord.level;
+                                if (this.parent.parentIdMapping) {
+                                    draggedRecord[this.parent.parentIdMapping] = droppedRecord[this.parent.parentIdMapping];
+                                    draggedRecord.parentItem = droppedRecord.parentItem;
+                                    draggedRecord.level = droppedRecord.level;
+                                }
+                            }
+                            if (draggedRecord.hasChildRecords) {
+                                const level = 1;
+                                this.updateChildRecordLevel(draggedRecord, level);
+                                this.updateChildRecord(draggedRecord, recordIndex1 + count + 1);
                             }
                         }
-                        if (draggedRecord.hasChildRecords) {
-                            const level = 1;
-                            this.updateChildRecordLevel(draggedRecord, level);
-                            this.updateChildRecord(draggedRecord, recordIndex1 + count + 1);
-                        }
+                        this.dropMiddle(recordIndex1);
                     }
-                    this.dropMiddle(recordIndex1);
-                }
-                if (isNullOrUndefined(draggedRecord.parentItem)) {
-                    const parentRecords = tObj.parentData;
-                    const newParentIndex = parentRecords.indexOf(this.droppedRecord);
-                    let nonRepeat = 0;
-                    parentRecords.filter((e) => {
-                        if (draggedRecord.uniqueID === e.uniqueID) {
-                            nonRepeat++;
+                    if (isNullOrUndefined(draggedRecord.parentItem)) {
+                        const parentRecords = tObj.parentData;
+                        const newParentIndex = parentRecords.indexOf(this.droppedRecord);
+                        let nonRepeat = 0;
+                        parentRecords.filter((e) => {
+                            if (draggedRecord.uniqueID === e.uniqueID) {
+                                nonRepeat++;
+                            }
+                        });
+                        if (this.dropPosition === 'bottomSegment' && nonRepeat === 0) {
+                            parentRecords.splice(newParentIndex + 1, 0, draggedRecord);
+                        }
+                        else if (this.dropPosition === 'topSegment' && nonRepeat === 0) {
+                            parentRecords.splice(newParentIndex, 0, draggedRecord);
                         }
-                    });
-                    if (this.dropPosition === 'bottomSegment' && nonRepeat === 0) {
-                        parentRecords.splice(newParentIndex + 1, 0, draggedRecord);
-                    }
-                    else if (this.dropPosition === 'topSegment' && nonRepeat === 0) {
-                        parentRecords.splice(newParentIndex, 0, draggedRecord);
                     }
+                    tObj.rowDragAndDropModule.refreshGridDataSource();
                 }
-                tObj.rowDragAndDropModule.refreshGridDataSource();
             }
         }
     }
+    /**
+     * 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.
+     */
     dropMiddle(recordIndex) {
         const tObj = this.parent;
         const childRecords = findChildrenRecords(this.droppedRecord);
@@ -9149,15 +9369,23 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     dropAtTop(recordIndex1) {
         const 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;
+            const 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) {
                 const level = 1;
@@ -9168,10 +9396,16 @@ class RowDD {
                 const rec = this.getChildrecordsByParentID(this.droppedRecord.parentUniqueID);
                 const childRecords = rec[0].childRecords;
                 const 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.
+     */
     recordLevel() {
         const tObj = this.parent;
         const draggedRecord = this.draggedRecord;
@@ -9193,6 +9427,7 @@ class RowDD {
             draggedRecord.parentItem = parentItem;
             draggedRecord.parentUniqueID = droppedRecord.uniqueID;
             droppedRecord.childRecords.splice(droppedRecord.childRecords.length, 0, draggedRecord);
+            setValue('uniqueIDCollection.' + draggedRecord.uniqueID, draggedRecord, tObj);
             const isSelfReference = 'isSelfReference';
             if (tObj[`${isSelfReference}`]) {
                 droppedRecord[tObj.childMapping] = [];
@@ -9212,6 +9447,11 @@ class RowDD {
             droppedRecord.expanded = true;
         }
     }
+    /**
+     * Deletes the currently dragged row from the TreeGrid.
+     *
+     * @returns {void} - This function does not return any value.
+     */
     deleteDragRow() {
         if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
             this.treeGridData = this.parent.grid.dataSource.dataSource.json;
@@ -9227,6 +9467,13 @@ class RowDD {
         }
         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.
+     */
     updateChildRecord(record, count) {
         let currentRecord;
         const tObj = this.parent;
@@ -9254,6 +9501,13 @@ class RowDD {
         }
         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.
+     */
     updateChildRecordLevel(record, level) {
         let length = 0;
         let currentRecord;
@@ -9284,6 +9538,12 @@ class RowDD {
         }
         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.
+     */
     removeRecords(record) {
         const tObj = this.parent;
         let dataSource;
@@ -9366,6 +9626,12 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     updateModifiedRecords(record) {
         const parentData = getParentData(this.parent, record.parentUniqueID);
         if (!isNullOrUndefined(parentData)) {
@@ -9373,6 +9639,12 @@ class RowDD {
             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.
+     */
     removeChildItem(record) {
         let currentRecord;
         let idx;
@@ -9419,6 +9691,13 @@ class RowDD {
             }
         }
     }
+    /**
+     * 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.
+     */
     getChildCount(record, count) {
         let currentRecord;
         if (!record.hasChildRecords) {
@@ -9433,6 +9712,14 @@ class RowDD {
         }
         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.
+     */
     ensuredropPosition(draggedRecords, currentRecord) {
         draggedRecords.filter((e) => {
             if (e.hasChildRecords && !isNullOrUndefined(e.childRecords)) {
@@ -9444,11 +9731,28 @@ class RowDD {
                     this.dropPosition = 'Invalid';
                     this.addErrorElem();
                     this.canDrop = false;
+                    if (isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
+                        this.removetopOrBottomBorder();
+                        this.removeChildBorder();
+                    }
                     return;
                 }
             }
         });
     }
+    isDuplicateData(currentData) {
+        const primaryKeys = this.parent.getPrimaryKeyFieldNames();
+        if (primaryKeys.length === 0) {
+            return false;
+        }
+        return this.parent.flatData.some((data) => 
+        // eslint-disable-next-line
+        primaryKeys.every((key) => data[key] === currentData[key]));
+    }
+    /**
+     * Cleans up resources, event listeners, and DOM elements when the TreeGrid component is destroyed.
+     * @returns {void}
+     */
     destroy() {
         this.removeEventListener();
     }
@@ -11032,7 +11336,9 @@ class ContextMenu {
             if (((indent || outdent) || tObj.grid.isEdit) && isNullOrUndefined(selectedrow)) {
                 for (const items of args.items) {
                     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']);
@@ -11221,69 +11527,71 @@ class BatchEdit {
                 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;
-                            const childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
-                            let record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
-                            record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
-                            currentDataIndex = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(record[`${primaryKey}`]);
-                            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;
+                                const childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
+                                let record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
+                                record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
+                                currentDataIndex = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(record[`${primaryKey}`]);
+                                if (this.isSelfReference) {
+                                    added[this.parent.parentIdMapping] = idMapping;
+                                }
+                                updateParentRow(primaryKey, added.parentItem, 'add', this.parent, this.isSelfReference, added);
                             }
-                            updateParentRow(primaryKey, 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) {
+                                const childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
+                                let record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
+                                record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
+                                currentDataIndex = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(record[`${primaryKey}`]);
+                            }
+                            if (this.parent.editSettings.newRowPosition === 'Above' && this.selectedIndex > -1) {
+                                const record = this.batchRecords[this.addRowIndex];
+                                currentDataIndex = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(record[`${primaryKey}`]);
+                            }
+                            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) {
-                            const childRecordCount = findChildrenRecords(this.batchRecords[this.addRowIndex]).length;
-                            let record = findChildrenRecords(this.batchRecords[this.addRowIndex])[childRecordCount - 1];
-                            record = isNullOrUndefined(record) ? this.batchRecords[this.addRowIndex] : record;
-                            currentDataIndex = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(record[`${primaryKey}`]);
+                        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) {
-                            const record = this.batchRecords[this.addRowIndex];
-                            currentDataIndex = data.map((e) => { return e[`${primaryKey}`]; }).indexOf(record[`${primaryKey}`]);
+                        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;
@@ -13325,9 +13633,15 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 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;
@@ -13361,6 +13675,10 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                 ((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) {
+                const selectedIndex = this.parent.root.selectedRowIndex;
+                this.startIndex = selectedIndex !== -1 && selectedIndex !== this.startIndex ? this.startIndex - 1 : this.startIndex;
+            }
             if (scrollArgs.offset.top > (rowHeight * this.totalRecords)) {
                 this.translateY = this.getTranslateY(scrollArgs.offset.top, content.getBoundingClientRect().height);
             }
@@ -13369,10 +13687,7 @@ class VirtualTreeContentRenderer extends VirtualContentRenderer {
                     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 {
@@ -13724,6 +14039,11 @@ class VirtualScroll {
                 (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)) {
                 const resourceCount = this.parent.getRows();
                 let sIndex = visualData.indexOf(this.expandCollapseRec);