@syncfusion/ej2-treegrid 27.2.3 → 28.1.33

package/src/treegrid/actions/rowdragdrop.js

@@ -1,6 +1,6 @@
 import { Grid, RowDD as GridDragDrop, parentsUntil } from '@syncfusion/ej2-grids';
 import { getObject, Scroll } from '@syncfusion/ej2-grids';
-import { closest, isNullOrUndefined, classList, setValue, extend, getValue, removeClass, addClass, setStyleAttribute } from '@syncfusion/ej2-base';
+import { closest, isNullOrUndefined, setValue, extend, getValue, removeClass, addClass, setStyleAttribute } from '@syncfusion/ej2-base';
 import { DataManager } from '@syncfusion/ej2-data';
 import * as events from '../base/constant';
 import { editAction } from './crud-actions';
@@ -17,24 +17,44 @@ var RowDD = /** @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(GridDragDrop);
         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)) {
@@ -68,6 +88,9 @@ var RowDD = /** @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';
@@ -106,13 +129,9 @@ var RowDD = /** @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 = [];
@@ -127,13 +146,9 @@ var RowDD = /** @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 = [];
@@ -143,10 +158,14 @@ var RowDD = /** @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';
@@ -221,6 +240,13 @@ var RowDD = /** @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 = {
@@ -250,6 +276,12 @@ var RowDD = /** @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;
@@ -260,6 +292,15 @@ var RowDD = /** @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;
@@ -364,6 +405,15 @@ var RowDD = /** @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)];
@@ -375,35 +425,36 @@ var RowDD = /** @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);
                 }
             }
         }
@@ -434,6 +485,12 @@ var RowDD = /** @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 &&
@@ -441,25 +498,40 @@ var RowDD = /** @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;
@@ -471,6 +543,10 @@ var RowDD = /** @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
@@ -545,6 +621,11 @@ var RowDD = /** @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'));
@@ -552,6 +633,12 @@ var RowDD = /** @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;
@@ -574,9 +661,21 @@ var RowDD = /** @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' });
@@ -589,40 +688,55 @@ var RowDD = /** @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');
@@ -643,6 +757,12 @@ var RowDD = /** @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');
@@ -659,6 +779,11 @@ var RowDD = /** @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'));
@@ -667,6 +792,14 @@ var RowDD = /** @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) {
@@ -677,6 +810,12 @@ var RowDD = /** @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;
@@ -689,35 +828,38 @@ var RowDD = /** @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) {
@@ -732,17 +874,26 @@ var RowDD = /** @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(events.rowDrop, args);
                 if (!args.cancel) {
+                    if (!isCountRequired(this.parent) && this.dropPosition === 'Invalid') {
+                        return;
+                    }
                     if (!isCountRequired(this.parent)) {
                         this.dropRows(args);
                     }
@@ -750,9 +901,7 @@ var RowDD = /** @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();
                 }
             }
         }
@@ -771,12 +920,7 @@ var RowDD = /** @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;
@@ -818,6 +962,26 @@ var RowDD = /** @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');
@@ -878,9 +1042,22 @@ var RowDD = /** @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;
@@ -908,6 +1085,13 @@ var RowDD = /** @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;
@@ -956,88 +1140,99 @@ var RowDD = /** @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++) {
@@ -1045,6 +1240,12 @@ var RowDD = /** @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);
@@ -1065,15 +1266,23 @@ var RowDD = /** @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;
@@ -1084,10 +1293,16 @@ var RowDD = /** @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;
@@ -1109,6 +1324,7 @@ var RowDD = /** @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] = [];
@@ -1128,6 +1344,11 @@ var RowDD = /** @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;
@@ -1143,6 +1364,13 @@ var RowDD = /** @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;
@@ -1170,6 +1398,13 @@ var RowDD = /** @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;
@@ -1200,6 +1435,12 @@ var RowDD = /** @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;
@@ -1282,6 +1523,12 @@ var RowDD = /** @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)) {
@@ -1289,6 +1536,12 @@ var RowDD = /** @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;
@@ -1335,6 +1588,13 @@ var RowDD = /** @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) {
@@ -1349,6 +1609,14 @@ var RowDD = /** @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) {
@@ -1361,11 +1629,29 @@ var RowDD = /** @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();
     };