@syncfusion/ej2-treegrid 31.1.17 → 31.1.20

package/dist/ts/treegrid/actions/rowdragdrop.ts

@@ -1,1896 +0,0 @@
-import { TreeGrid } from '../base/treegrid';
-import { Grid, RowDD as GridDragDrop, RowDropEventArgs, parentsUntil, Row, Column } from '@syncfusion/ej2-grids';
-import { EJ2Intance, getObject, Scroll } from '@syncfusion/ej2-grids';
-import { closest, isNullOrUndefined, setValue, extend, getValue, removeClass, addClass, setStyleAttribute } from '@syncfusion/ej2-base';
-import { ITreeData } from '../base';
-import { DataManager } from '@syncfusion/ej2-data';
-import * as events from '../base/constant';
-import { editAction } from './crud-actions';
-import { getParentData, findChildrenRecords, isRemoteData, isOffline, isCountRequired } from '../utils';
-import { TreeActionEventArgs } from '../models';
-import { RowDragEventArgs } from '../base';
-
-/**
- * TreeGrid RowDragAndDrop module
- *
- * @hidden
- */
-export class RowDD {
-    private parent: TreeGrid;
-    /** @hidden
-     * Represents the position where a row can be dropped within the TreeGrid.
-     */
-    private dropPosition: string;
-    /** @hidden
-     * Represents the record that is currently being dragged in the TreeGrid.
-     */
-    private draggedRecord: ITreeData;
-    /** @hidden
-     * Represents the record that the currently dragged item is being dropped onto in the TreeGrid.
-     */
-    private droppedRecord: ITreeData;
-    /** @hidden
-     * Stores the data representation of the TreeGrid, including hierarchical structures.
-     */
-    public treeGridData: ITreeData[];
-    /** @hidden
-     * Represents the underlying hierarchical data of the TreeGrid.
-     */
-    private treeData: ITreeData[];
-    /** @hidden
-     * Indicates whether a row can be dropped into the current target position during a drag-and-drop operation.
-     */
-    private canDrop: boolean = true;
-    /** @hidden
-     * Indicates whether the current drag operation includes child records of the dragged item.
-     */
-    private isDraggedWithChild: boolean = false;
-    /** @hidden
-     *
-     */
-    public isMultipleGrid: string;
-    /** @hidden
-     * Indicates whether multiple TreeGrid instances are being managed or displayed.
-     */
-    private modifiedRecords: string = 'modifiedRecords';
-    /** @hidden
-     * Represents the currently selected item in the TreeGrid.
-     */
-    private selectedItem: ITreeData;
-    /** @hidden
-     * Represents the currently selected item in the TreeGrid.
-     */
-    private selectedRecords: string = 'selectedRecords';
-    /** @hidden
-     * Holds an array of currently selected records in the TreeGrid.
-     */
-    private selectedRows: string = 'selectedRows';
-    /** @hidden
-     * Indicates whether there is a droppable item in the TreeGrid.
-     */
-    private hasDropItem: boolean = true;
-    /** @hidden
-     * Indicates whether the item is being added to the bottom of the TreeGrid.
-     */
-    public isaddtoBottom: boolean = false;
-    private selectedRecord: ITreeData;
-    private selectedRow: HTMLTableRowElement;
-
-    /**
-     * Constructor for render module
-     *
-     * @param {TreeGrid} parent - Tree Grid instance
-     */
-    constructor(parent?: TreeGrid) {
-        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.
-     */
-    private getChildrecordsByParentID(id: string): ITreeData[] {
-        let treeGridDataSource: Object;
-        if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-            treeGridDataSource = (<DataManager>this.parent.grid.dataSource).dataSource.json;
-        } else {
-            treeGridDataSource = this.parent.grid.dataSource;
-        }
-        const record: Object[] = (treeGridDataSource as ITreeData[]).filter((e: ITreeData) => {
-            return e.uniqueID === id;
-        });
-        return record;
-    }
-
-    /**
-     * @hidden
-     * @returns {void}
-     */
-    private addEventListener(): void {
-        this.parent.on(events.rowdraging, this.Rowdraging, this);
-        this.parent.on(events.rowDropped, this.rowDropped, this);
-        this.parent.on(events.rowsAdd, this.rowsAdded, this);
-        this.parent.on(events.rowsRemove, this.rowsRemoved, this);
-    }
-
-    /**
-     * Reorder the rows based on given indexes and position
-     *
-     * @returns {void}
-     * @param {number[]} fromIndexes - source indexes of rows to be re-ordered
-     * @param {number} toIndex - Destination row index
-     * @param {string} position - Drop position as above or below or child
-     */
-    public reorderRows(fromIndexes: number[], toIndex: number, position: string): void {
-        const tObj: TreeGrid = this.parent;
-        if (fromIndexes[0] === toIndex || ['above', 'below', 'child'].indexOf(position) === -1) {
-            return;
-        }
-        const action: string = 'action'; const dropPosition: string = 'dropPosition';
-        if (fromIndexes[0] !== toIndex && ['above', 'below', 'child'].indexOf(position) !== -1) {
-            if (position === 'above') {
-                this.dropPosition = 'topSegment';
-            }
-            if (position === 'below') {
-                this.dropPosition = 'bottomSegment';
-            }
-            if (position === 'child') {
-                this.dropPosition = 'middleSegment';
-            }
-            this.parent[`${dropPosition}`] = this.dropPosition;
-            const data: ITreeData[] = [];
-            for (let i: number = 0; i < fromIndexes.length; i++) {
-                const index: number = (this.parent.getRowByIndex(fromIndexes[parseInt(i.toString(), 10)]) as HTMLTableRowElement).rowIndex;
-                data[parseInt(i.toString(), 10)] = this.parent.getCurrentViewRecords()[parseInt(index.toString(), 10)];
-            }
-            const isByMethod: boolean = true;
-            const args: RowDropEventArgs = {
-                data: data,
-                dropIndex: toIndex
-            };
-            if (!isCountRequired(this.parent)) {
-                this.dropRows(args, isByMethod);
-            }
-            //this.refreshGridDataSource();
-            if (tObj.isLocalData) {
-                tObj.flatData = this.orderToIndex(tObj.flatData);
-            }
-            if (this.parent[`${action}`] === 'outdenting') {
-                if (!isNullOrUndefined(data[0].parentItem)) {
-                    data[0].level = data[0].parentItem.level + 1;
-                }
-            }
-            this.parent.grid.refresh();
-            if (this.parent.enableImmutableMode && this.dropPosition === 'middleSegment') {
-                const index: number = this.parent.allowRowDragAndDrop
-                    ? this.parent.treeColumnIndex + 1
-                    : (this.parent[`${action}`] === 'indenting' ? this.parent.treeColumnIndex : undefined);
-                const row: HTMLTableRowElement = this.parent.getRows()[fromIndexes[0]];
-                const dropData: Object = args.data[0];
-                const totalRecord: Object[] = []; const rows: HTMLTableRowElement[] = [];
-                totalRecord.push(dropData); rows.push(row);
-                const parentUniqueID: string = 'parentUniqueID';
-                const parentData: Object = getParentData(this.parent, args.data[0][`${parentUniqueID}`]);
-                const parentrow: HTMLTableRowElement = this.parent.getRows()[parseInt(toIndex.toString(), 10)];
-                totalRecord.push(parentData); rows.push(parentrow);
-                this.updateRowAndCellElements(totalRecord, rows, index);
-            }
-            if (this.parent.enableImmutableMode && this.parent[`${action}`] === 'outdenting') {
-                const index: number = this.parent.allowRowDragAndDrop
-                    ? this.parent.treeColumnIndex + 1
-                    : (this.parent[`${action}`] === 'outdenting' ? this.parent.treeColumnIndex : undefined);
-                const record: Object = args.data[0];
-                const row: HTMLTableRowElement = this.parent.getRows()[fromIndexes[0]];
-                const totalRecord: Object[] = []; const rows: HTMLTableRowElement[] = [];
-                totalRecord.push(record); rows.push(row);
-                this.updateRowAndCellElements(totalRecord, rows, index);
-            }
-        }
-    }
-
-    /**
-     * Updates the rows and cells
-     *
-     * @param {Object[]} records - Updates the given records
-     * @param {HTMLTableRowElement[]} rows - Updates the given rows
-     * @param {number} index -  Updates the given cell index
-     * @returns {void}
-     */
-    private updateRowAndCellElements(records: Object[], rows: HTMLTableRowElement[], index: number): void {
-        for (let i: number = 0; i < records.length; i++) {
-            this.parent.renderModule.cellRender({
-                data: records[parseInt(i.toString(), 10)], cell: rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)] ,
-                column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
-                requestType: 'rowDragAndDrop'
-            });
-            if (this.parent['action'] === 'indenting' || this.parent['action'] === 'outdenting') {
-                this.parent.renderModule.RowModifier({
-                    data: records[parseInt(i.toString(), 10)], row: rows[parseInt(i.toString(), 10)]
-                });
-            }
-        }
-    }
-
-    /**
-     * 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}
-     */
-    private indentOutdentAction(record?: ITreeData, request?: string): void {
-        const tObj: TreeGrid = this.parent; const action: string = 'action';
-        const droppedIndex: string = 'dropIndex'; let selectedItemIndex: number = -1;
-        if (isNullOrUndefined(record) && this.parent.selectedRowIndex === -1) {
-            return;
-        } else {
-            if (this.parent.enableVirtualization && this.parent.selectedRowIndex !== -1) {
-                selectedItemIndex = (this.parent.getSelectedRows()[0] as HTMLTableRowElement).rowIndex;
-            } else if (this.parent.selectedRowIndex !== -1) {
-                selectedItemIndex = this.parent.selectedRowIndex;
-            }
-            this.selectedItem = isNullOrUndefined(record) ?
-                tObj.getCurrentViewRecords()[parseInt(selectedItemIndex.toString(), 10)] as ITreeData : record as ITreeData;
-            const primaryKeyField: string = this.parent.getPrimaryKeyFieldNames()[0];
-            const rowIndex: number = this.parent.grid.getRowIndexByPrimaryKey(this.selectedItem[`${primaryKeyField}`]);
-            this.selectedRow = this.parent[this.selectedRows] = selectedItemIndex !== -1 ?
-                this.parent.getSelectedRows()[0] as HTMLTableRowElement
-                : this.parent.grid.getRowByIndex(rowIndex) as HTMLTableRowElement;
-            this.selectedRecord = this.parent[this.selectedRecords] = selectedItemIndex !== -1 ?
-                tObj.getCurrentViewRecords()[parseInt(selectedItemIndex.toString(), 10)] as ITreeData
-                : this.selectedItem as ITreeData;
-            if (request === 'indent') {
-                const record: ITreeData = tObj.getCurrentViewRecords()[this.selectedRow.rowIndex - 1];
-                let dropIndex: number;
-                if (this.selectedRow.rowIndex === 0 || this.selectedRow.rowIndex === -1 ||
-                    (tObj.getCurrentViewRecords()[this.selectedRow.rowIndex] as ITreeData).level - record.level === 1) {
-                    return;
-                }
-                if (record.level > this.selectedRecord.level) {
-                    for (let i: number = 0; i < tObj.getCurrentViewRecords().length; i++) {
-                        if ((tObj.getCurrentViewRecords()[parseInt(i.toString(), 10)] as ITreeData).taskData ===
-                            record.parentItem.taskData) {
-                            dropIndex = i;
-                            if (tObj.enableVirtualization) {
-                                dropIndex = parseInt(tObj.getRows()[parseInt(i.toString(), 10)].getAttribute('aria-rowindex'), 10) - 1;
-                            }
-                        }
-                    }
-                }
-                else {
-                    dropIndex = this.selectedRow.rowIndex - 1;
-                }
-                if (this.parent.enableVirtualization && this.selectedRecord && !(record.level > this.selectedRecord.level)) {
-                    dropIndex = parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 2;
-                }
-                tObj[`${action}`] = 'indenting'; tObj[`${droppedIndex}`] = dropIndex;
-                this.eventTrigger('indenting', dropIndex);
-            } else if (request === 'outdent') {
-                const isInvalidSelection: boolean = this.selectedRow.rowIndex === -1 || this.selectedRow.rowIndex === 0;
-                const isRootLevel: boolean = (tObj.getCurrentViewRecords()[this.selectedRow.rowIndex] as ITreeData).level === 0;
-                if (isInvalidSelection || isRootLevel) {
-                    return;
-                }
-                const parentItem: ITreeData = this.selectedRecord.parentItem;
-                const records: object[] = tObj.getCurrentViewRecords();
-                let dropIndex: number = records.findIndex((record: ITreeData) => record.uniqueID === parentItem.uniqueID);
-                if (dropIndex === -1) {
-                    return;
-                }
-                if (this.parent.enableVirtualization && this.selectedRecord) {
-                    const ariaRowIndex: string = this.parent.getRows()[parseInt(dropIndex.toString(), 10)].getAttribute('aria-rowindex');
-                    dropIndex = parseInt(ariaRowIndex, 10) - 1;
-                }
-                tObj[`${action}`] = 'outdenting'; tObj[`${droppedIndex}`] = dropIndex;
-                this.eventTrigger('outdenting', dropIndex);
-            }
-        }
-    }
-
-    /**
-     * 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}
-     */
-    private eventTrigger(action: string, dropIndex: number): void {
-        const actionArgs: TreeActionEventArgs = {
-            action: action,
-            cancel: false,
-            data: [this.parent[this.selectedRecords]],
-            row: this.parent[this.selectedRows]
-        };
-        this.parent.trigger(events.actionBegin, actionArgs, (actionArgs: TreeActionEventArgs) => {
-            if (!actionArgs.cancel) {
-                if (actionArgs.action === 'indenting') {
-                    if (this.parent.enableVirtualization) {
-                        this.reorderRows([parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 1], dropIndex, 'child');
-                    }
-                    else {
-                        this.reorderRows([this.selectedRow.rowIndex], dropIndex, 'child');
-                    }
-                } else if (actionArgs.action === 'outdenting') {
-                    if (this.parent.enableVirtualization) {
-                        this.reorderRows([parseInt(this.selectedRow.getAttribute('aria-rowindex'), 10) - 1], dropIndex, 'below');
-                    }
-                    else {
-                        this.reorderRows([this.selectedRow.rowIndex], dropIndex, 'below');
-                    }
-                }
-            }
-        });
-    }
-
-    /**
-     * 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.
-     */
-    private orderToIndex(currentData: ITreeData[]): ITreeData[] {
-        for (let i: number = 0; i < currentData.length; i++) {
-            currentData[parseInt(i.toString(), 10)].index = i;
-            if (!isNullOrUndefined(currentData[parseInt(i.toString(), 10)].parentItem)) {
-                const updatedParent: ITreeData = getValue('uniqueIDCollection.' + currentData[parseInt(i.toString(), 10)].parentUniqueID, this.parent);
-                currentData[parseInt(i.toString(), 10)].parentItem.index = updatedParent.index;
-            }
-        }
-        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.
-     */
-    private rowsAdded(e: { toIndex: number, records: Object[] }): void {
-        let draggedRecord: ITreeData;
-        const dragRecords: ITreeData[] = e.records;
-        for (let i: number = e.records.length - 1; i > -1; i--) {
-            draggedRecord = dragRecords[parseInt(i.toString(), 10)];
-            if (draggedRecord.parentUniqueID) {
-                const record: ITreeData[] = dragRecords.filter((data: ITreeData) => {
-                    return data.uniqueID === draggedRecord.parentUniqueID;
-                });
-                if (record.length) {
-                    const index: number = record[0].childRecords.indexOf(draggedRecord);
-                    const parentRecord: ITreeData = record[0];
-                    if (index !== -1) {
-                        if (isNullOrUndefined(this.parent.idMapping)) {
-                            parentRecord.childRecords.splice(index, 1);
-                            if (!parentRecord.childRecords.length) {
-                                parentRecord.hasChildRecords = false;
-                                parentRecord.hasFilteredChildRecords = false;
-                            }
-                        }
-                        this.isDraggedWithChild = true;
-                    }
-                }
-            }
-        }
-        if (isNullOrUndefined(this.parent.dataSource as ITreeData[]) || !(this.parent.dataSource as ITreeData[]).length) {
-            const tObj: TreeGrid = this.parent;
-            let draggedRecord: ITreeData;
-            const dragRecords: ITreeData[] = e.records;
-            const dragLength: number = e.records.length;
-            for (let i: number = dragLength - 1; i > -1; i--) {
-                draggedRecord = dragRecords[parseInt(i.toString(), 10)];
-                if (!i && draggedRecord.hasChildRecords) {
-                    draggedRecord.taskData[this.parent.parentIdMapping] = null;
-                }
-                const recordIndex1: number = 0;
-                if (!isNullOrUndefined(tObj.parentIdMapping)) {
-                    tObj.childMapping = null;
-                }
-                if (!isNullOrUndefined(draggedRecord.taskData) && !isNullOrUndefined(tObj.childMapping) &&
-                    !Object.prototype.hasOwnProperty.call(draggedRecord.taskData, tObj.childMapping)) {
-                    draggedRecord.taskData[tObj.childMapping] = [];
-                }
-                if (!isNullOrUndefined(draggedRecord[tObj.childMapping])) {
-                    if (Object.prototype.hasOwnProperty.call(draggedRecord, tObj.childMapping) &&
-                        ((draggedRecord[tObj.childMapping]) as ITreeData[]).length && !this.isDraggedWithChild &&
-                        !isNullOrUndefined(tObj.parentIdMapping)) {
-                        const childData: ITreeData[] = (draggedRecord[tObj.childMapping]) as ITreeData[];
-                        for (let j: number = 0; j < childData.length; j++) {
-                            if (dragRecords.indexOf(childData[parseInt(j.toString(), 10)]) === -1) {
-                                dragRecords.splice(j, 0, childData[parseInt(j.toString(), 10)]);
-                                childData[parseInt(j.toString(), 10)].taskData = extend({}, childData[parseInt(j.toString(), 10)]);
-                                i += 1;
-                            }
-                        }
-                    }
-                }
-                if (Object.prototype.hasOwnProperty.call(draggedRecord, tObj.parentIdMapping)
-                    && draggedRecord[tObj.parentIdMapping] !== null
-                    && !this.isDraggedWithChild) {
-                    draggedRecord.taskData[tObj.parentIdMapping] = null;
-                    delete draggedRecord.parentItem;
-                    delete draggedRecord.parentUniqueID;
-                }
-                if (isNullOrUndefined(tObj.dataSource as ITreeData[])) {
-                    tObj.dataSource = [];
-                }
-                (tObj.dataSource as ITreeData[]).splice(recordIndex1, 0, draggedRecord.taskData);
-            }
-            tObj.setProperties({ dataSource: tObj.dataSource }, false);
-        } else {
-            for (let i: number = 0; i < dragRecords.length; i++) {
-                setValue('uniqueIDCollection.' + dragRecords[parseInt(i.toString(), 10)].uniqueID, dragRecords[parseInt(i.toString(), 10)], this.parent);
-            }
-            const args: RowDropEventArgs = { data: e.records, dropIndex: e.toIndex };
-            if (this.parent.dataSource instanceof DataManager) {
-                this.treeGridData = this.parent.dataSource.dataSource.json;
-                this.treeData = this.parent.dataSource.dataSource.json;
-            } else {
-                this.treeGridData = this.parent.grid.dataSource as ITreeData[];
-                this.treeData = this.parent.dataSource as ITreeData[];
-            }
-            if (isNullOrUndefined(this.dropPosition)) {
-                this.dropPosition = 'bottomSegment';
-                args.dropIndex = this.parent.getCurrentViewRecords().length > 1 ? this.parent.getCurrentViewRecords().length - 1 :
-                    args.dropIndex;
-                args.data = args.data.map((i: ITreeData) => {
-                    if (i.hasChildRecords && isNullOrUndefined(i.parentItem)) {
-                        i.level = 0;
-                        return i;
-                    }
-                    else {
-                        delete i.parentItem;
-                        delete i.parentUniqueID;
-                        i.level = 0;
-                        return i;
-                    }
-                });
-            }
-            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.
-     */
-    private rowsRemoved(e: { indexes: number[], records: Object[] }): void {
-        for (let i: number = 0; i < e.records.length; i++) {
-            this.draggedRecord = e.records[parseInt(i.toString(), 10)];
-            if (this.draggedRecord.hasChildRecords || this.draggedRecord.parentItem &&
-                (this.parent.grid.dataSource as ITreeData[]).
-                    indexOf(this.getChildrecordsByParentID(this.draggedRecord.parentUniqueID)[0]) !== -1 ||
-                this.draggedRecord.level === 0) {
-                this.deleteDragRow();
-            }
-        }
-    }
-
-    /**
-     * Refreshes the data source of the TreeGrid.
-     *
-     * @returns {void} This function does not return any value.
-     */
-    private refreshGridDataSource(): void {
-        const draggedRecord: ITreeData = this.draggedRecord;
-        const droppedRecord: ITreeData = this.droppedRecord;
-        const proxy: TreeGrid = this.parent;
-        let temporaryDataSource: Object; let indexOfDroppedRecord: number;
-        if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-            temporaryDataSource = (<DataManager>proxy.dataSource).dataSource.json;
-        } else {
-            temporaryDataSource = proxy.dataSource;
-        }
-        if (temporaryDataSource && (!isNullOrUndefined(droppedRecord) && !droppedRecord.parentItem)
-            && !isNullOrUndefined(droppedRecord.taskData)) {
-            const keys: string[] = Object.keys(temporaryDataSource);
-            for (let i: number = 0; i < keys.length; i++) {
-                if (temporaryDataSource[parseInt(i.toString(), 10)][this.parent.childMapping] ===
-                    droppedRecord.taskData[this.parent.childMapping]) {
-                    indexOfDroppedRecord = i;
-                }
-            }
-            if (!this.parent.idMapping) {
-                const positionAdjustment: number = this.dropPosition === 'topSegment' ? 0 : 1;
-                if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
-                    (temporaryDataSource as ITreeData[]).splice(indexOfDroppedRecord + positionAdjustment, 0, draggedRecord.taskData);
-                }
-            }
-        } else if (!this.parent.parentIdMapping && (!isNullOrUndefined(droppedRecord) && droppedRecord.parentItem)) {
-            if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
-                const record: ITreeData = (this.getChildrecordsByParentID(droppedRecord.parentUniqueID) as ITreeData)[0];
-                const childRecords: ITreeData[] = record.childRecords;
-                for (let i: number = 0; i < childRecords.length; i++) {
-                    droppedRecord.parentItem.taskData[this.parent.childMapping][parseInt(i.toString(), 10)]
-                        = childRecords[parseInt(i.toString(), 10)].taskData;
-                }
-            }
-        }
-
-        if (this.parent.parentIdMapping) {
-            if (draggedRecord.parentItem) {
-                if (this.dropPosition === 'topSegment' || this.dropPosition === 'bottomSegment') {
-                    draggedRecord[this.parent.parentIdMapping] = droppedRecord[this.parent.parentIdMapping];
-                    draggedRecord.taskData[this.parent.parentIdMapping] = droppedRecord[this.parent.parentIdMapping];
-                } else {
-                    draggedRecord[this.parent.parentIdMapping] = droppedRecord[this.parent.idMapping];
-                    draggedRecord.taskData[this.parent.parentIdMapping] = droppedRecord[this.parent.idMapping];
-                }
-            } else {
-                draggedRecord.taskData[this.parent.parentIdMapping] = null;
-                draggedRecord[this.parent.parentIdMapping] = null;
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private removeFirstrowBorder(element: HTMLTableRowElement): void {
-        const canremove: boolean = this.dropPosition === 'bottomSegment';
-        if (this.parent.element.getElementsByClassName('e-firstrow-border').length > 0 && element &&
-            ((element as HTMLTableRowElement).rowIndex !== 0 || canremove)) {
-            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}
-     */
-    private removeLastrowBorder(element: HTMLTableRowElement): void {
-        if (!element) { return; }
-        const isEmptyRow: boolean = element.classList.contains('e-emptyrow') ||
-            element.classList.contains('e-columnheader') ||
-            element.classList.contains('e-detailrow');
-        if (isEmptyRow) { return; }
-        const lastRow: HTMLTableRowElement = this.parent.enableVirtualization ?
-            this.parent.getRows()[this.parent.getCurrentViewRecords().length - 1] as HTMLTableRowElement :
-            this.parent.getRowByIndex(this.parent.getCurrentViewRecords().length - 1) as HTMLTableRowElement;
-        const isNotLastRow: boolean = lastRow.getAttribute('data-uid') !== element.getAttribute('data-uid');
-        const canRemove: boolean = isNotLastRow || this.dropPosition === 'topSegment';
-        const lastRowBorderElement: HTMLElement = this.parent.element.getElementsByClassName('e-lastrow-border')[0] as HTMLElement;
-        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').
-     */
-    private updateIcon(row: Element[], index: number, args: RowDragEventArgs): string {
-        const rowEle: Element = args.target ? closest(args.target, 'tr') : null;
-        this.dropPosition = undefined;
-        let rowPositionHeight: number = 0;
-        this.removeFirstrowBorder(rowEle as HTMLTableRowElement);
-        this.removeLastrowBorder(rowEle as HTMLTableRowElement);
-        for (let i: number = 0; i < args.rows.length; i++) {
-            if (!isNullOrUndefined(rowEle) && rowEle.getAttribute('data-uid') === args.rows[parseInt(i.toString(), 10)].getAttribute('data-uid')
-                || !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
-        const tObj: TreeGrid = this.parent;
-        let rowTop: number = 0;
-        const roundOff: number = 0;
-        const toolHeight: number = tObj.toolbar && tObj.toolbar.length ?
-            document.getElementById(tObj.element.id + '_gridcontrol_toolbarItems').offsetHeight : 0;
-        // tObj.lastRow = tObj.getRowByIndex(tObj.getCurrentViewRecords().length - 1);
-        const positionOffSet: PositionOffSet = this.getOffset(tObj.element);
-        // let contentHeight1: number = (tObj.element.offsetHeight  - (tObj.getContent() as HTMLElement).offsetHeight) + positionOffSet.top;
-        const contentHeight: number = (tObj.getHeaderContent() as HTMLElement).offsetHeight + positionOffSet.top + toolHeight;
-        const scrollTop: number = (tObj.getContent() as HTMLElement).firstElementChild.scrollTop;
-        if (!isNullOrUndefined(rowEle)) {
-            rowPositionHeight = (rowEle as HTMLElement).offsetTop - scrollTop;
-        }
-        // let scrollTop = (tObj.grid.scrollModule as any).content.scrollTop;
-        if (this.parent.enableVirtualization) {
-            rowTop = rowEle.getBoundingClientRect().top;
-        }
-        else {
-            rowTop = rowPositionHeight + contentHeight + roundOff;
-        }
-        const rowBottom: number = (row[0] as HTMLElement).offsetHeight !== 0 && isNullOrUndefined(rowEle) ?
-            rowTop + (row[0] as HTMLElement).offsetHeight : rowTop + (rowEle as HTMLElement).offsetHeight;
-        const difference: number = rowBottom - rowTop;
-        const divide: number = difference / 3;
-        const topRowSegment: number = rowTop + divide;
-        const middleRowSegment: number = topRowSegment + divide;
-        const bottomRowSegment: number = middleRowSegment + divide;
-        const mouseEvent: MouseEvent = getObject('originalEvent.event', args);
-        const touchEvent: TouchEvent = getObject('originalEvent.event', args);
-        let posy: number = (mouseEvent.type === 'mousemove') ? mouseEvent.pageY : ((!isNullOrUndefined(touchEvent) &&
-            !isNullOrUndefined(touchEvent.changedTouches)) ? touchEvent.changedTouches[0].pageY : null);
-        if (this.parent.enableVirtualization) {
-            posy = (mouseEvent.type === 'mousemove') ? mouseEvent.clientY : ((!isNullOrUndefined(touchEvent) &&
-                !isNullOrUndefined(touchEvent.changedTouches)) ? touchEvent.changedTouches[0].clientY : null);
-        }
-        const isTopSegment: boolean = posy <= topRowSegment;
-        const isMiddleRowSegment: boolean = (posy > topRowSegment && posy <= middleRowSegment);
-        const isBottomRowSegment: boolean = (posy > middleRowSegment && posy <= bottomRowSegment);
-        let isBorderNeed: boolean = true;
-        if (isTopSegment || isMiddleRowSegment || isBottomRowSegment) {
-            if (isTopSegment && this.dropPosition !== 'Invalid') {
-                this.removeChildBorder();
-                this.dropPosition = 'topSegment';
-                this.removetopOrBottomBorder();
-                this.addFirstrowBorder(rowEle as HTMLTableRowElement);
-                this.removeErrorElem();
-                this.removeLastrowBorder(rowEle as HTMLTableRowElement);
-            }
-            if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
-                this.removetopOrBottomBorder();
-                this.dropPosition = 'middleSegment';
-                this.addLastRowborder(rowEle as HTMLTableRowElement);
-                this.addFirstrowBorder(rowEle as HTMLTableRowElement);
-            }
-            if (isBottomRowSegment && this.dropPosition !== 'Invalid') {
-                this.removeErrorElem();
-                this.removetopOrBottomBorder();
-                this.removeChildBorder();
-                this.dropPosition = 'bottomSegment';
-                this.addLastRowborder(rowEle as HTMLTableRowElement);
-                this.removeFirstrowBorder(rowEle as HTMLTableRowElement);
-            }
-            if ((isTopSegment || isBottomRowSegment) && this.dropPosition !== 'Invalid') {
-                isBorderNeed = this.updateBorderStatus(row, index);
-                this.topOrBottomBorder(args.target, isBorderNeed);
-            }
-            else if (isMiddleRowSegment && this.dropPosition !== 'Invalid') {
-                let rowElement: HTMLElement[] = [];
-                const element: Element = closest(args.target, 'tr');
-                rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));
-                isBorderNeed = this.updateBorderStatus(row, index);
-                if (rowElement.length > 0 && isBorderNeed) {
-                    this.addRemoveClasses(rowElement, true, 'e-childborder');
-                }
-            }
-        }
-        return this.dropPosition;
-    }
-
-    /**
-     * Updates the border status for a specified row and index.
-     *
-     * @private
-     * @param {Element[]} row - The array of row elements to be updated.
-     * @param {number} index - The index of the row element for which the border status is to be updated.
-     * @returns {boolean} - Returns true if the border status was successfully updated, otherwise false.
-     */
-    private updateBorderStatus(row: Element[], index: number): boolean {
-        let isBorderNeed: boolean = true;
-        let rows: any[] = this.parent.grid.getRows();
-        const childRows: any[] = [];
-        let hasDetailTemplate: boolean = false;
-        if (!isNullOrUndefined(this.parent.detailTemplate)) {
-            rows = this.parent.getDataRows();
-            hasDetailTemplate = true;
-        }
-        const treegridColumnIndex: number = this.parent.treeColumnIndex;
-        let treeColIndex: number = this.parent.allowRowDragAndDrop ?
-            (hasDetailTemplate ? treegridColumnIndex + 2 : treegridColumnIndex + 1) :
-            (hasDetailTemplate ? treegridColumnIndex + 1 : treegridColumnIndex);
-        if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
-            treeColIndex = treegridColumnIndex;
-        }
-        const dragRows: any[] = row;
-        const targetRow: any[] = [rows[`${index}`]];
-        if (this.dropPosition === 'topSegment') {
-            row.filter((e: any) => {
-                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(targetRow[0]) ||
-                    isNullOrUndefined(targetRow[0].cells)) {
-                    return true;
-                }
-                const regex: RegExp = /index(\d+)|level(\d+)/g;
-                const parentIndexLevel: number = e === null || e === undefined ? undefined : e.cells[`${treeColIndex}`].className.match(regex);
-                const dropIndexLevel: number = targetRow[0].cells[`${treeColIndex}`].className.match(regex);
-                if (isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(dropIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
-                    return true;
-                }
-                const parentLevel: number = +parentIndexLevel[1].match(/\d+/)[0];
-                const dropParentLevel: number = +dropIndexLevel[1].match(/\d+/)[0];
-                let InDraggedRowIndex: boolean = false;
-                if (parentLevel !== 0 && parentLevel !== dropParentLevel) {
-                    return true;
-                }
-                for (let i: number = 0; i < rows.length; i++) {
-                    if (rows[parseInt(i.toString(), 10)] === dragRows[0]) {
-                        InDraggedRowIndex = true;
-                    }
-                    if (InDraggedRowIndex && rows[parseInt(i.toString(), 10)] !== dragRows[0]) {
-                        const parentIndexLevelInRow: any = rows[parseInt(i.toString(), 10)].cells[`${treeColIndex}`].className.match(regex);
-                        const parentLevelInRow: number = +parentIndexLevelInRow[1].match(/\d+/)[0];
-                        if (parentLevelInRow !== parentLevel && parentLevelInRow > parentLevel) {
-                            childRows.push(rows[parseInt(i.toString(), 10)]);
-                        } else {
-                            break;
-                        }
-                    }
-                }
-                if (parentLevel === dropParentLevel && ((childRows.length > 0 && parseInt(row[0].getAttribute('aria-rowindex')!, 10) - 1 === index - (childRows.length + 1)) || (childRows.length === 0 && parseInt(row[0].getAttribute('aria-rowindex')!, 10) - 1 === index - 1))) {
-                    isBorderNeed = false;
-                }
-                return true;
-            });
-            isBorderNeed = (!isNullOrUndefined(row) && childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index - 1) && isNullOrUndefined(row[0]) ? false : isBorderNeed;
-        }
-        if (this.dropPosition === 'bottomSegment') {
-            targetRow.filter((e: any) => {
-                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
-                    isNullOrUndefined(dragRows[0].cells)) {
-                    return true;
-                }
-                const regex: RegExp = /index(\d+)|level(\d+)/g;
-                const parentIndexLevel: number = e === null || e === undefined ? undefined : e.cells[`${treeColIndex}`].className.match(regex);
-                const dragIndexLevel: number = dragRows[0].cells[`${treeColIndex}`].className.match(regex);
-                if (isNullOrUndefined(dragIndexLevel) || isNullOrUndefined(parentIndexLevel)) {
-                    return true;
-                }
-                const parentLevel: number = +parentIndexLevel[1].match(/\d+/)[0];
-                const dragParentLevel: number = +dragIndexLevel[1].match(/\d+/)[0];
-                let InDraggedRowIndex: boolean = false;
-                if (parentLevel !== 0 && parentLevel !== dragParentLevel) {
-                    return true;
-                }
-                for (let i: number = 0; i < rows.length; i++) {
-                    if (rows[parseInt(i.toString(), 10)] === targetRow[0]) {
-                        InDraggedRowIndex = true;
-                    }
-                    if (InDraggedRowIndex && rows[parseInt(i.toString(), 10)] !== targetRow[0]) {
-                        const parentIndexLevelInRow: any = rows[parseInt(i.toString(), 10)].cells[`${treeColIndex}`].className.match(regex);
-                        const parentLevelInRow: number = +parentIndexLevelInRow[1].match(/\d+/)[0];
-                        if (parentLevelInRow !== parentLevel && parentLevelInRow > parentLevel) {
-                            childRows.push(rows[parseInt(i.toString(), 10)]);
-                        } else {
-                            break;
-                        }
-                    }
-                }
-                if (!isNullOrUndefined(row) && parentLevel === dragParentLevel && ((childRows.length > 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + (childRows.length + 1)) || (childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + 1))) {
-                    isBorderNeed = false;
-                }
-                return true;
-            });
-            isBorderNeed = (!isNullOrUndefined(row) && childRows.length === 0 && !isNullOrUndefined(row[0].getAttribute('aria-rowindex')) && parseInt(row[0].getAttribute('aria-rowindex'), 10) - 1 === index + 1) && isNullOrUndefined(row[0]) ? false : isBorderNeed;
-        }
-        if (this.dropPosition === 'middleSegment') {
-            targetRow.filter((e: any) => {
-                if (isNullOrUndefined(e) || isNullOrUndefined(e.cells) || isNullOrUndefined(dragRows[0]) ||
-                    isNullOrUndefined(dragRows[0].cells)) {
-                    return true;
-                }
-                for (let i: number = 0; i < dragRows.length; i++) {
-                    const regex: RegExp = /index(\d+)|level(\d+)/g;
-                    let dropActualIndex: number = targetRow[0].rowIndex;
-                    const dragIndexLevel: RegExpMatchArray | null = dragRows[parseInt(i.toString(), 10)].cells[`${treeColIndex}`].className.match(regex);
-                    if (!dragIndexLevel) { return true; }
-                    const dragIndex: number = parseInt(dragIndexLevel.find((item: string) => item.includes('index')).match(/\d+/)[0] || '0', 10);
-                    if (hasDetailTemplate) {
-                        dropActualIndex = dropActualIndex / 2;
-                    }
-                    if (dragIndex === dropActualIndex && !this.parent.rowDropSettings.targetID) {
-                        isBorderNeed = false;
-                    }
-                    else {
-                        isBorderNeed = true;
-                        break;
-                    }
-                }
-                if (!isBorderNeed) {
-                    this.dropPosition = 'Invalid';
-                    this.addErrorElem();
-                }
-                return isBorderNeed;
-            });
-        }
-        this.canDrop = isBorderNeed;
-        return isBorderNeed;
-    }
-
-    /**
-     * Removes the visual border from all child rows within the TreeGrid.
-     *
-     * @returns {void} No return value.
-     */
-    private removeChildBorder(): void {
-        let borderElem: HTMLElement[] = [];
-        borderElem = [].slice.call(this.parent.element.querySelectorAll('.e-childborder'));
-        if (borderElem.length > 0) {
-            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.
-     */
-    private addFirstrowBorder(targetRow: HTMLTableRowElement): void {
-        const node: Element = this.parent.element;
-        const tObj: TreeGrid = this.parent;
-        if (targetRow && targetRow.rowIndex === 0 && !targetRow.classList.contains('e-emptyrow')) {
-            const div: HTMLElement = this.parent.createElement('div', { className: 'e-firstrow-border' });
-            const gridheaderEle: Element = this.parent.getHeaderContent();
-            let toolbarHeight: number = 0;
-            if (tObj.toolbar) {
-                toolbarHeight = (tObj.toolbarModule.getToolbar() as HTMLElement).offsetHeight;
-            }
-            const multiplegrid: boolean = !isNullOrUndefined(this.parent.rowDropSettings.targetID);
-            if (multiplegrid) {
-                div.style.top = (this.parent.grid.element.getElementsByClassName('e-gridheader')[0] as HTMLElement).offsetHeight
-                    + toolbarHeight + 'px';
-            }
-            div.style.width = multiplegrid ? (node as HTMLElement).offsetWidth + 'px' :
-                (node as HTMLElement).offsetWidth - this.getScrollWidth() + 'px';
-            if (!gridheaderEle.querySelectorAll('.e-firstrow-border').length) {
-                gridheaderEle.appendChild(div);
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private addLastRowborder(trElement: HTMLTableRowElement): void {
-        if (!trElement) { return; }
-        const isEmptyRow: boolean = 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: HTMLElement = this.parent.createElement('div', { className: 'e-lastrow-border' });
-            const gridcontentEle: Element = this.parent.getContent();
-            bottomborder.style.width = (this.parent.element as HTMLElement).offsetWidth - this.getScrollWidth() + 'px';
-            if (!gridcontentEle.querySelectorAll('.e-lastrow-border').length) {
-                gridcontentEle.classList.add('e-treegrid-relative');
-                gridcontentEle.appendChild(bottomborder);
-                bottomborder.style.bottom = this.getScrollWidth() + 'px';
-            }
-        }
-    }
-
-    /**
-     * Retrieves the total scroll width of the TreeGrid content area.
-     *
-     * @returns {number} The width of the scrollbar if content overflows, otherwise 0.
-     */
-    private getScrollWidth(): number {
-        const scrollElem: HTMLElement = this.parent.getContent().firstElementChild as HTMLElement;
-        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.
-     */
-    private addErrorElem(): void {
-        const dragelem: Element = document.getElementsByClassName('e-cloneproperties')[0];
-        const errorelemCount: number = dragelem.querySelectorAll('.e-errorelem').length;
-        const sanitize: string = 'sanitize';
-        if (!errorelemCount && !this.parent.rowDropSettings.targetID) {
-            const errorContainer: HTMLElement = document.createElement('div');
-            errorContainer.classList.add('e-errorcontainer', 'e-icons', 'e-errorelem');
-            const rowCell: HTMLElement = dragelem.querySelector('.e-rowcell') as HTMLElement;
-            const errorVal: Element = dragelem.querySelector('.errorValue');
-            let content: string = rowCell.innerHTML;
-            if (errorVal) {
-                content = this.parent[`${sanitize}`](errorVal.innerHTML);
-                errorVal.parentNode.removeChild(errorVal);
-            }
-            rowCell.innerHTML = '';
-            const spanContent: HTMLElement = document.createElement('span');
-            spanContent.className = 'errorValue';
-            spanContent.style.paddingLeft = '16px';
-            spanContent.innerHTML = this.parent[`${sanitize}`](content);
-            rowCell.appendChild(errorContainer);
-            rowCell.appendChild(spanContent);
-            const dropItemSpan: HTMLElement = document.querySelector('.e-dropitemscount');
-            if (this.hasDropItem && dropItemSpan) {
-                const dropItemLeft: number = parseInt(dropItemSpan.style.left, 10) + errorContainer.offsetWidth + 16;
-                const spanLeft: number = !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.
-     */
-    private removeErrorElem(): void {
-        const errorelem: HTMLElement = document.querySelector('.e-errorelem');
-        const errorValue: HTMLElement = document.querySelector('.errorValue');
-        const dropItemSpan: HTMLElement = document.querySelector('.e-dropitemscount');
-        if (errorelem) {
-            if (dropItemSpan) {
-                const dropItemLeft: number = parseInt(dropItemSpan.style.left, 10) - errorelem.offsetWidth - 16;
-                setStyleAttribute(errorValue, {
-                    paddingLeft: '0px'
-                });
-                if (!this.parent.enableRtl) {
-                    setStyleAttribute(dropItemSpan, {
-                        left: `${dropItemLeft}px`
-                    });
-                }
-            }
-            errorelem.remove();
-        }
-        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.
-     * @param {boolean} [isBorderNeed=true] - Indicates whether a border is needed during the drop action. Defaults to `true`.
-     * @returns {void} No return value.
-     */
-    private topOrBottomBorder(target: Element, isBorderNeed: boolean = true): void {
-        const element: Element = closest(target, 'tr');
-        const rowElements: HTMLElement[] = element ?
-            Array.from(element.querySelectorAll('.e-rowcell, .e-rowdragdrop, .e-detailrowcollapse')) : [];
-        if (!rowElements.length) { return; }
-        const classAction: any = isBorderNeed ? this.addRemoveClasses.bind(this, rowElements, true) : this.addRemoveClasses.bind(this, rowElements, false, 'e-dragborder');
-        if (this.dropPosition === 'topSegment') {
-            classAction('e-droptop');
-            const lastRowDragBorder: Element = this.parent.element.querySelector('.e-lastrow-dragborder');
-            if (lastRowDragBorder) {
-                lastRowDragBorder.remove();
-            }
-        }
-        if (this.dropPosition === 'bottomSegment') {
-            classAction('e-dropbottom');
-        }
-    }
-
-    /**
-     * Removes the drop border classes ('e-dropbottom' and 'e-droptop') from the parent element if present.
-     *
-     * @returns {void} No return value.
-     */
-    private removetopOrBottomBorder(): void {
-        let border: HTMLElement[] = [];
-        border = [].slice.call(this.parent.element.querySelectorAll('.e-dropbottom, .e-droptop'));
-        if (this.parent.rowDropSettings.targetID) {
-            border = [].slice.call(document.querySelectorAll('.e-dropbottom, .e-droptop'));
-        }
-        if (border.length) {
-            this.addRemoveClasses(border, false, 'e-dropbottom');
-            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.
-     */
-    private addRemoveClasses(cells: Element[], add: boolean, className: string): void {
-        for (let i: number = 0, len: number = cells.length; i < len; i++) {
-            if (add) {
-                cells[parseInt(i.toString(), 10)].classList.add(className);
-            } else {
-                cells[parseInt(i.toString(), 10)].classList.remove(className);
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private getOffset(element: Element): PositionOffSet {
-        const box: DOMRect | ClientRect = element.getBoundingClientRect();
-        const body: HTMLElement = document.body;
-        const docElem: HTMLElement = document.documentElement;
-        const scrollTop: number = window.pageYOffset || docElem.scrollTop || body.scrollTop;
-        const scrollLeft: number = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
-        const clientTop: number = docElem.clientTop || body.clientTop || 0;
-        const clientLeft: number = docElem.clientLeft || body.clientLeft || 0;
-        const top: number = box.top + scrollTop - clientTop;
-        const left: number = 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.
-     */
-    private Rowdraging(args: RowDragEventArgs): void {
-        const tObj: TreeGrid = this.parent;
-        const cloneElement: HTMLElement = this.parent.element.querySelector('.e-cloneproperties') as HTMLElement;
-        if (!cloneElement) { return; }
-        cloneElement.style.cursor = '';
-        const rowEle: Element = args.target ? closest(args.target, 'tr') : null;
-        let rowIdx: number = -1;
-        if (!isNullOrUndefined(this.parent.detailTemplate)) {
-            rowIdx = rowEle ? this.parent.getDataRows().indexOf(rowEle as HTMLTableRowElement) : -1;
-        }
-        else {
-            rowIdx = rowEle ? (rowEle as HTMLTableRowElement).rowIndex : -1;
-        }
-        if (rowIdx === -1) {
-            this.canDrop = false;
-            this.addErrorElem();
-            this.removetopOrBottomBorder();
-            this.removeChildBorder();
-            return;
-        }
-        const dragRecords: ITreeData[] = Array.isArray(args.data) ? args.data : [args.data as ITreeData];
-        let droppedRecord: ITreeData = tObj.getCurrentViewRecords()[parseInt(rowIdx.toString(), 10)];
-        if (tObj.rowDropSettings.targetID) {
-            const dropElement: Element = parentsUntil(args.target, 'e-treegrid');
-            if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
-                const srcControl: TreeGrid = (<EJ2Intance>dropElement).ej2_instances[0];
-                droppedRecord = srcControl.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 (tObj.rowDropSettings.targetID) {
-            const dropElement: Element = parentsUntil(args.target, 'e-treegrid');
-            if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID) {
-                const srcControl: TreeGrid = (<EJ2Intance>dropElement).ej2_instances[0];
-                srcControl.rowDragAndDropModule.updateIcon(args.rows, rowIdx, args);
-                this.dropPosition = srcControl.rowDragAndDropModule.dropPosition;
-            }
-        }
-        if (args.target && closest(args.target, '#' + tObj.rowDropSettings.targetID)) {
-            const dropElement: Element = parentsUntil(args.target, 'e-treegrid');
-            if (!dropElement) {
-                cloneElement.style.cursor = 'default';
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private rowDropped(args: RowDropEventArgs): void {
-        const tObj: TreeGrid = this.parent;
-        const parentItem: string = 'parentItem';
-        if (!tObj.rowDropSettings.targetID) {
-            if (parentsUntil(args.target, 'e-content') || (this.dropPosition === 'Invalid' || !this.canDrop)) {
-                if (this.parent.element.querySelector('.e-errorelem') || !this.canDrop) {
-                    this.dropPosition = 'Invalid';
-                }
-                setValue('dropPosition', this.dropPosition, args);
-                tObj.trigger(events.rowDrop, args);
-                if (!args.cancel) {
-                    if (!isCountRequired(this.parent) && (this.dropPosition === 'Invalid' && !this.canDrop)) {
-                        return;
-                    }
-                    if (!isCountRequired(this.parent)) {
-                        this.dropRows(args);
-                    }
-                    if (tObj.isLocalData) {
-                        tObj.flatData = this.orderToIndex(tObj.flatData);
-                    }
-                    tObj.grid.refresh();
-                    this.removeRowBorders();
-                }
-            }
-        } else {
-            if (args.target && closest(args.target, '#' + tObj.rowDropSettings.targetID) || parentsUntil(args.target, 'e-treegrid') &&
-                parentsUntil(args.target, 'e-treegrid').id === tObj.rowDropSettings.targetID || args.target && document.getElementById(tObj.rowDropSettings.targetID)) {
-                if (this.parent.element.querySelector('.e-errorelem') || !this.canDrop) {
-                    this.dropPosition = 'Invalid';
-                }
-                setValue('dropPosition', this.dropPosition, args);
-                tObj.trigger(events.rowDrop, args);
-                if (!args.cancel && tObj.rowDropSettings.targetID) {
-                    if (this.dropPosition === 'Invalid' && !this.canDrop) {
-                        return;
-                    }
-                    this.dragDropGrid(args);
-                    if (tObj.isLocalData) {
-                        tObj.flatData = this.orderToIndex(tObj.flatData);
-                    }
-                }
-            }
-        }
-        this.removetopOrBottomBorder();
-        this.removeChildBorder();
-        this.removeRowBorders();
-        if (this.parent.enableImmutableMode && !this.parent.allowPaging && !isNullOrUndefined(args.data[0][`${parentItem}`])) {
-            let index: number = this.parent.treeColumnIndex;
-            index = index + 1;
-            const primaryKeyField: string = this.parent.getPrimaryKeyFieldNames()[0];
-            let rowIndex: number = this.parent.grid.getRowIndexByPrimaryKey(args.data[0][`${primaryKeyField}`]);
-            const row: HTMLTableRowElement = this.parent.getRows()[parseInt(rowIndex.toString(), 10)];
-            let data: Object = args.data[0];
-            if (this.dropPosition === 'middleSegment') {
-                const record: Object[] = []; const rows: HTMLTableRowElement[] = [];
-                record.push(data); rows.push(row);
-                const parentUniqueID: string = 'parentUniqueID';
-                data = getParentData(this.parent, args.data[0][`${parentUniqueID}`]);
-                rowIndex = this.parent.grid.getRowIndexByPrimaryKey(data[`${primaryKeyField}`]);
-                const parentrow: HTMLTableRowElement = this.parent.getRows()[parseInt(rowIndex.toString(), 10)];
-                record.push(data); rows.push(parentrow);
-                for (let i: number = 0; i < record.length; i++) {
-                    this.parent.renderModule.cellRender({
-                        data: record[parseInt(i.toString(), 10)],
-                        cell: rows[parseInt(i.toString(), 10)].cells[parseInt(index.toString(), 10)],
-                        column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
-                        requestType: 'rowDragAndDrop'
-                    });
-                }
-                const targetEle: Element = parentrow.getElementsByClassName('e-treegridcollapse')[0];
-                if (!isNullOrUndefined(targetEle)) {
-                    removeClass([targetEle], 'e-treegridcollapse');
-                    addClass([targetEle], 'e-treegridexpand');
-                }
-            } else {
-                this.parent.renderModule.cellRender({
-                    data: data, cell: row.cells[parseInt(index.toString(), 10)],
-                    column: this.parent.grid.getColumns()[this.parent.treeColumnIndex],
-                    requestType: 'rowDragAndDrop'
-                });
-            }
-        }
-    }
-
-    /**
-     * Removes the border elements for the first and last rows of the TreeGrid.
-     *
-     * @returns {void} This function does not return a value.
-     */
-    private removeRowBorders(): void {
-        ['e-firstrow-border', 'e-lastrow-border'].forEach((className: string): void => {
-            const element: HTMLElement = this.parent.element.getElementsByClassName(className)[0] as HTMLElement;
-            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.
-     */
-    private dragDropGrid(args: RowDropEventArgs): void {
-        const tObj: TreeGrid = this.parent;
-        const targetRow: HTMLTableRowElement = closest(args.target, 'tr') as HTMLTableRowElement;
-        const targetIndex: number = isNaN(this.getTargetIdx(targetRow)) ? 0 : this.getTargetIdx(targetRow);
-        const dropElement: Element = parentsUntil(args.target, 'e-treegrid');
-        let srcControl: TreeGrid;
-        if (dropElement && dropElement.id === this.parent.rowDropSettings.targetID && !isRemoteData(this.parent)
-            && !isCountRequired(this.parent)) {
-            srcControl = (<EJ2Intance>dropElement).ej2_instances[0];
-            let records: ITreeData[] = tObj.getSelectedRecords();
-            const indexes: number[] = [];
-            for (let i: number = 0; i < records.length; i++) {
-                indexes[parseInt(i.toString(), 10)] = records[parseInt(i.toString(), 10)].index;
-            }
-            const data: ITreeData[] = srcControl.dataSource as ITreeData[];
-            if (this.parent.idMapping !== null && (isNullOrUndefined(this.dropPosition) || this.dropPosition === 'bottomSegment' || this.dropPosition === 'Invalid') && !(data.length)) {
-                const actualData: ITreeData[] = [];
-                for (let i: number = 0; i < records.length; i++) {
-                    if (records[parseInt(i.toString(), 10)].hasChildRecords) {
-                        actualData.push(records[parseInt(i.toString(), 10)]);
-                        const child: ITreeData[] = findChildrenRecords(records[parseInt(i.toString(), 10)]);
-                        for (let i: number = 0; i < child.length; i++) {
-                            actualData.push(child[parseInt(i.toString(), 10)]); // push child records to drop the parent record along with its child records
-                        }
-                    }
-                }
-                if (actualData.length) {
-                    records = actualData;
-                }
-            }
-            tObj.notify(events.rowsRemove, { indexes: indexes, records: records });
-            srcControl.notify(events.rowsAdd, { toIndex: targetIndex, records: records });
-            const srcControlFlatData: ITreeData[] = srcControl.rowDragAndDropModule.treeGridData;
-            if (!isNullOrUndefined(srcControlFlatData)) {
-                for (let i: number = 0; i < srcControlFlatData.length; i++) {
-                    srcControlFlatData[parseInt(i.toString(), 10)].index = i;
-                    if (!isNullOrUndefined(srcControlFlatData[parseInt(i.toString(), 10)].parentItem)) {
-                        const actualIndex: number =
-                            <number>getValue('uniqueIDCollection.' + srcControlFlatData[parseInt(i.toString(), 10)].parentUniqueID + '.index', srcControl);
-                        srcControlFlatData[parseInt(i.toString(), 10)].parentItem.index = actualIndex;
-                    }
-                }
-            }
-            tObj.grid.refresh();
-            srcControl.grid.refresh();
-            if ((<ITreeData[]>srcControl.grid.dataSource).length > 1) {
-                srcControl.grid.refresh();
-                if (!isNullOrUndefined(srcControl.getHeaderContent().querySelector('.e-firstrow-border'))) {
-                    srcControl.getHeaderContent().querySelector('.e-firstrow-border').remove();
-                }
-                if (!isNullOrUndefined(srcControl.getContent().querySelector('.e-lastrow-border'))) {
-                    srcControl.getContent().querySelector('.e-lastrow-border').remove();
-                }
-            }
-        }
-        if (isCountRequired(this.parent)) {
-            srcControl = (<EJ2Intance>dropElement).ej2_instances[0];
-            tObj.grid.refresh();
-            srcControl.grid.refresh();
-        }
-    }
-
-    /**
-     * Retrieves the index of the target row based on its 'aria-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.
-     */
-    private getTargetIdx(targetRow: Element): number {
-        return targetRow ? parseInt(targetRow.getAttribute('aria-rowindex'), 10) - 1 : 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.
-     */
-    private getParentData(record: ITreeData, data?: Object[]): void {
-        const parentItem: ITreeData = record.parentItem; let selectedItemIndex: number = -1;
-        if (this.parent.enableVirtualization && this.parent.selectedRowIndex !== -1) {
-            selectedItemIndex = (this.parent.getSelectedRows()[0] as HTMLTableRowElement).rowIndex;
-        } else if (this.parent.selectedRowIndex !== -1) {
-            selectedItemIndex = this.parent.selectedRowIndex;
-        }
-        if (this.dropPosition === 'bottomSegment') {
-            const primaryKeyField: string = this.parent.getPrimaryKeyFieldNames()[0];
-            const rowIndex: number = selectedItemIndex === -1 ?
-                (this.parent.grid.getRowIndexByPrimaryKey(data[0][`${primaryKeyField}`]))
-                : this.parent.getSelectedRowIndexes()[0];
-            const selectedRecord: ITreeData = this.parent.getCurrentViewRecords()[parseInt(rowIndex.toString(), 10)];
-            this.droppedRecord = getParentData(this.parent, selectedRecord.parentItem.uniqueID);
-        }
-        if (this.dropPosition === 'middleSegment') {
-            const level: number = (this.parent.getCurrentViewRecords()[parseInt(selectedItemIndex.toString(), 10)] as ITreeData).level;
-            if (level === parentItem.level) {
-                this.droppedRecord = getParentData(this.parent, parentItem.uniqueID);
-            } else {
-                this.getParentData(parentItem);
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private dropRows(args: RowDropEventArgs, isByMethod?: boolean): void {
-        if (this.dropPosition !== 'Invalid' && !isRemoteData(this.parent)) {
-            const tObj: TreeGrid = this.parent;
-            let draggedRecord: ITreeData; let droppedRecord: ITreeData;
-            if (isNullOrUndefined(args.dropIndex)) {
-                const primaryKeyField: string = this.parent.getPrimaryKeyFieldNames()[0];
-                const rowIndex: number = tObj.selectedRowIndex === -1 ?
-                    (this.parent.grid.getRowIndexByPrimaryKey(args.data[0][`${primaryKeyField}`])) - 1
-                    : tObj.getSelectedRowIndexes()[0] - 1;
-                const record: ITreeData = (tObj.getCurrentViewRecords()[parseInt(rowIndex.toString(), 10)] as ITreeData);
-                this.getParentData(record, args.data);
-            } else {
-                args.dropIndex = args.dropIndex === args.fromIndex ? this.getTargetIdx(args.target.parentElement) : args.dropIndex;
-                if (this.parent.enableVirtualization) {
-                    const index: number = (this.parent.getRowByIndex(args.dropIndex) as HTMLTableRowElement).rowIndex;
-                    this.droppedRecord = tObj.getCurrentViewRecords()[parseInt(index.toString(), 10)];
-                }
-                else {
-                    if (!isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
-                        const rowsObject: Row<Column>[] = this.parent.grid.getRowsObject();
-                        this.droppedRecord = rowsObject.length > 0 ? rowsObject[args.dropIndex].data : undefined;
-                    }
-                    else {
-                        this.droppedRecord = tObj.getCurrentViewRecords()[args.dropIndex];
-                    }
-                }
-            }
-            let dragRecords: ITreeData[] = [];
-            droppedRecord = this.droppedRecord;
-            if (!args.data[0]) {
-                dragRecords.push(args.data as ITreeData);
-            } else {
-                dragRecords = args.data;
-            }
-            this.parent[this.modifiedRecords].push(args.data[0], droppedRecord);
-            let count: number = 0;
-            const multiplegrid: string = this.parent.rowDropSettings.targetID;
-            this.isMultipleGrid = multiplegrid;
-            if (!multiplegrid) {
-                this.ensuredropPosition(dragRecords, droppedRecord);
-            } else {
-                this.isaddtoBottom = multiplegrid && this.isDraggedWithChild;
-            }
-            const dragLength: number = dragRecords.length;
-            if (!isNullOrUndefined(this.parent.idMapping)) {
-                dragRecords.reverse();
-            }
-            for (let i: number = 0; i < dragLength; i++) {
-                draggedRecord = dragRecords[parseInt(i.toString(), 10)];
-                this.draggedRecord = draggedRecord;
-                if (!this.draggedRecord.hasChildRecords) {
-                    for (const dragRecord of dragRecords) {
-                        if (!isNullOrUndefined(dragRecord.childRecords) &&
-                            dragRecord.childRecords.indexOf(this.draggedRecord) !== -1) {
-                            this.draggedRecord = undefined;
-                        }
-                    }
-                }
-                if (!isNullOrUndefined(this.draggedRecord)) {
-                    if (this.dropPosition !== 'Invalid' && !isNullOrUndefined(this.droppedRecord)) {
-                        if (!tObj.rowDropSettings.targetID || isByMethod) {
-                            this.deleteDragRow();
-                        }
-                        if (this.draggedRecord === this.droppedRecord) {
-                            let correctIndex: number = this.getTargetIdx((<HTMLElement>args.target).offsetParent.parentElement);
-                            if (isNaN(correctIndex)) {
-                                correctIndex = this.getTargetIdx(args.target.parentElement);
-                            }
-                            args.dropIndex = correctIndex;
-                            droppedRecord = this.droppedRecord = this.parent.getCurrentViewRecords()[args.dropIndex];
-                        }
-                        if (droppedRecord.parentItem || this.dropPosition === 'middleSegment') {
-                            const parentRecords: ITreeData[] = tObj.parentData;
-                            const newParentIndex: number = parentRecords.indexOf(this.draggedRecord);
-                            if (newParentIndex !== -1) {
-                                parentRecords.splice(newParentIndex, 1);
-                            }
-                        }
-                        const recordIndex1: number = 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);
-                            } 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: ITreeData[] = this.getChildrecordsByParentID(droppedRecord.parentUniqueID);
-                                const childRecords: ITreeData[] = rec[0].childRecords;
-                                const droppedRecordIndex: number = 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: number = 1;
-                                this.updateChildRecordLevel(draggedRecord, level);
-                                this.updateChildRecord(draggedRecord, recordIndex1 + count + 1);
-                            }
-                        }
-                        this.dropMiddle(recordIndex1);
-                    }
-                    if (isNullOrUndefined(draggedRecord.parentItem)) {
-                        const parentRecords: ITreeData[] = tObj.parentData;
-                        const newParentIndex: number = parentRecords.indexOf(this.droppedRecord);
-                        let nonRepeat: number = 0;
-                        parentRecords.filter((e: ITreeData) => {
-                            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);
-                        }
-                    }
-                    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.
-     */
-    private dropMiddle(recordIndex: number): void {
-        const tObj: TreeGrid = this.parent;
-        const childRecords: ITreeData[] = findChildrenRecords(this.droppedRecord);
-        const childRecordsLength: number = (isNullOrUndefined(childRecords) ||
-            childRecords.length === 0) ? recordIndex + 1 :
-            childRecords.length + recordIndex + 1;
-        if (this.dropPosition === 'middleSegment') {
-            if (tObj.parentIdMapping) {
-                this.treeData.splice(childRecordsLength, 0, this.draggedRecord.taskData);
-                this.treeGridData.splice(childRecordsLength, 0, this.draggedRecord);
-            } else {
-                this.treeGridData.splice(childRecordsLength, 0, this.draggedRecord);
-            }
-            this.recordLevel();
-            if (this.draggedRecord.hasChildRecords) {
-                this.updateChildRecord(this.draggedRecord, childRecordsLength);
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private dropAtTop(recordIndex1: number): void {
-        const tObj: TreeGrid = this.parent;
-        if (this.dropPosition === 'topSegment') {
-            if (tObj.parentIdMapping) {
-                this.treeData.splice(recordIndex1, 0, this.draggedRecord.taskData);
-            }
-            const targetRecord: ITreeData = 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: number = 1;
-                this.updateChildRecord(this.draggedRecord, recordIndex1);
-                this.updateChildRecordLevel(this.draggedRecord, level);
-            }
-            if (this.droppedRecord.parentItem) {
-                const rec: ITreeData[] = this.getChildrecordsByParentID(this.droppedRecord.parentUniqueID);
-                const childRecords: ITreeData[] = rec[0].childRecords;
-                const droppedRecordIndex: number = 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.
-     */
-    private recordLevel(): void {
-        const tObj: TreeGrid = this.parent;
-        const draggedRecord: ITreeData = this.draggedRecord;
-        const droppedRecord: ITreeData = this.droppedRecord;
-        const childItem: string = tObj.childMapping;
-        if (!droppedRecord.hasChildRecords) {
-            droppedRecord.hasChildRecords = true;
-            droppedRecord.hasFilteredChildRecords = true;
-            if (isNullOrUndefined(droppedRecord.childRecords) || droppedRecord.childRecords.length === 0) {
-                droppedRecord.childRecords = [];
-                if (!tObj.parentIdMapping && isNullOrUndefined(droppedRecord.taskData[`${childItem}`])) {
-                    droppedRecord.taskData[`${childItem}`] = [];
-                }
-            }
-        }
-        if (this.dropPosition === 'middleSegment') {
-            const parentItem: ITreeData = extend({}, droppedRecord);
-            delete parentItem.childRecords;
-            draggedRecord.parentItem = parentItem;
-            draggedRecord.parentUniqueID = droppedRecord.uniqueID;
-            droppedRecord.childRecords.splice(droppedRecord.childRecords.length, 0, draggedRecord);
-            setValue('uniqueIDCollection.' + draggedRecord.uniqueID, draggedRecord, tObj);
-            const isSelfReference: string = 'isSelfReference';
-            if (tObj[`${isSelfReference}`]) {
-                droppedRecord[tObj.childMapping] = [];
-                droppedRecord[tObj.childMapping].splice(droppedRecord[tObj.childMapping].length, 0, draggedRecord);
-            }
-            if (!isNullOrUndefined(draggedRecord) && !tObj.parentIdMapping && !isNullOrUndefined(droppedRecord.taskData[`${childItem}`])) {
-                droppedRecord.taskData[tObj.childMapping].splice(droppedRecord.childRecords.length, 0, draggedRecord.taskData);
-            }
-            if (!draggedRecord.hasChildRecords) {
-                draggedRecord.level = droppedRecord.level + 1;
-            } else {
-                const level: number = 1;
-                draggedRecord.level = droppedRecord.level + 1;
-                this.updateChildRecordLevel(draggedRecord, level);
-            }
-            droppedRecord.expanded = true;
-        }
-    }
-
-    /**
-     * Deletes the currently dragged row from the TreeGrid.
-     *
-     * @returns {void} - This function does not return any value.
-     */
-    private deleteDragRow(): void {
-        if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-            this.treeGridData = (<DataManager>this.parent.grid.dataSource).dataSource.json;
-            this.treeData = (<DataManager>this.parent.dataSource).dataSource.json;
-        } else {
-            this.treeGridData = this.parent.grid.dataSource as ITreeData[];
-            this.treeData = this.parent.dataSource as ITreeData[];
-        }
-        const deletedRow: ITreeData = getParentData(this.parent, this.draggedRecord.uniqueID);
-        if (!isNullOrUndefined(deletedRow.childRecords) && deletedRow.childRecords.length) {
-            deletedRow.hasChildRecords = true;
-        }
-        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.
-     */
-    private updateChildRecord(record: ITreeData, count: number): number {
-        let currentRecord: ITreeData;
-        const tObj: TreeGrid = this.parent;
-        let length: number = 0;
-        if (!record.hasChildRecords) {
-            return 0;
-        }
-        length = record.childRecords.length;
-        for (let i: number = 0; i < length; i++) {
-            if (!this.isMultipleGrid) {
-                currentRecord = getValue('uniqueIDCollection.' + record.childRecords[parseInt(i.toString(), 10)].uniqueID, tObj);
-            } else {
-                currentRecord = record.childRecords[parseInt(i.toString(), 10)];
-            }
-            count++;
-            tObj.flatData.splice(count, 0, currentRecord);
-            setValue('uniqueIDCollection.' + currentRecord.uniqueID, currentRecord, this.parent);
-            if (tObj.parentIdMapping) {
-                this.treeData.splice(count, 0, currentRecord.taskData);
-            }
-            if (currentRecord.hasChildRecords) {
-                count = this.updateChildRecord(currentRecord, count);
-            }
-        }
-        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.
-     */
-    private updateChildRecordLevel(record: ITreeData, level: number): number {
-        let length: number = 0;
-        let currentRecord: ITreeData;
-        level++;
-        if (!record.hasChildRecords) {
-            return 0;
-        }
-        length = record.childRecords.length;
-        for (let i: number = 0; i < length; i++) {
-            if (!this.isMultipleGrid) {
-                currentRecord = getValue('uniqueIDCollection.' + record.childRecords[parseInt(i.toString(), 10)].uniqueID, this.parent);
-            } else {
-                currentRecord = record.childRecords[parseInt(i.toString(), 10)];
-            }
-            let parentData: ITreeData;
-            if (record.parentItem) {
-                parentData = getParentData(this.parent, record.parentItem.uniqueID);
-            }
-            if (isNullOrUndefined(parentData) && !isNullOrUndefined(record.parentItem)) { parentData = record.parentItem; }
-            currentRecord.level = record.parentItem ? parentData.level + level : record.level + 1;
-            if (currentRecord.hasChildRecords) {
-                level--;
-                level = this.updateChildRecordLevel(currentRecord, level);
-            }
-        }
-        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.
-     */
-    private removeRecords(record: ITreeData): void {
-        const tObj: TreeGrid = this.parent;
-        let dataSource: Object;
-        if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-            dataSource = (<DataManager>this.parent.dataSource).dataSource.json;
-        } else {
-            dataSource = this.parent.dataSource;
-        }
-        const deletedRow: ITreeData = record;
-        const isSelfReference: boolean = !isNullOrUndefined(tObj.parentIdMapping);
-        const flatParentData: ITreeData = (this.getChildrecordsByParentID(deletedRow.parentUniqueID) as ITreeData)[0];
-        if (deletedRow) {
-            if (deletedRow.parentItem) {
-                const childRecords: ITreeData[] = flatParentData ? flatParentData.childRecords : [];
-                let childIndex: number = 0;
-                if (childRecords && childRecords.length > 0) {
-                    childIndex = childRecords.indexOf(deletedRow);
-                    flatParentData.childRecords.splice(childIndex, 1);
-                    if (!this.parent.parentIdMapping || tObj.enableImmutableMode) {
-                        editAction({ value: deletedRow, action: 'delete' }, this.parent,
-                                   isSelfReference, deletedRow.index, deletedRow.index);
-                    }
-                }
-            }
-            if (tObj.parentIdMapping) {
-                if (deletedRow.hasChildRecords && deletedRow.childRecords.length > 0) {
-                    this.removeChildItem(deletedRow);
-                }
-                const treeGridData: ITreeData[] = dataSource as ITreeData[];
-                const idx: number = treeGridData.findIndex((data: ITreeData) => {
-                    return data[this.parent.idMapping] === deletedRow.taskData[this.parent.idMapping];
-                });
-                const idz: number = this.treeGridData.findIndex((data: ITreeData) => {
-                    return data[this.parent.idMapping] === deletedRow.taskData[this.parent.idMapping];
-                });
-                if (idx !== -1 && !isNullOrUndefined(idx)) {
-                    (dataSource as ITreeData[]).splice(idx, 1);
-                }
-                if (idz !== -1 && !isNullOrUndefined(idz)) {
-                    this.treeGridData.splice(idz, 1);
-                }
-            }
-            let recordIndex: number = this.treeGridData.indexOf(deletedRow);
-            if (!tObj.parentIdMapping) {
-                const parentIndex: number = this.parent.parentData.indexOf(deletedRow);
-                if (parentIndex !== -1) {
-                    tObj.parentData.splice(parentIndex, 1);
-                    (dataSource as ITreeData[]).splice(parentIndex, 1);
-                }
-            }
-            if (recordIndex === -1 && !tObj.parentIdMapping) {
-                const primaryKeyField: string = tObj.getPrimaryKeyFieldNames()[0];
-                for (let j: number = 0; j < this.treeGridData.length; j++) {
-                    if (this.treeGridData[parseInt(j.toString(), 10)][`${primaryKeyField}`] === deletedRow[`${primaryKeyField}`]) {
-                        recordIndex = j;
-                    }
-                }
-            }
-            if (!tObj.parentIdMapping) {
-                const deletedRecordCount: number = this.getChildCount(deletedRow, 0);
-                this.treeGridData.splice(recordIndex, deletedRecordCount + 1);
-            }
-            if (deletedRow.parentItem && flatParentData && flatParentData.childRecords && !flatParentData.childRecords.length) {
-                flatParentData.expanded = false;
-                flatParentData.hasChildRecords = false;
-                flatParentData.hasFilteredChildRecords = false;
-            }
-            if (this.parent[this.modifiedRecords].indexOf(flatParentData) === -1 && !isNullOrUndefined(flatParentData)) {
-                this.parent[this.modifiedRecords].push(flatParentData);
-            }
-            if (!isNullOrUndefined(flatParentData)) {
-                this.updateModifiedRecords(flatParentData);
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private updateModifiedRecords(record: ITreeData): void {
-        const parentData: Object = getParentData(this.parent, record.parentUniqueID);
-        if (!isNullOrUndefined(parentData)) {
-            this.parent[this.modifiedRecords].push(parentData);
-            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.
-     */
-    private removeChildItem(record: ITreeData): void {
-        let currentRecord: ITreeData;
-        let idx: number;
-        let idz: number;
-        let dataSource: Object;
-        if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-            dataSource = (<DataManager>this.parent.dataSource).dataSource.json;
-        } else {
-            dataSource = this.parent.dataSource;
-        }
-        for (let i: number = 0; i < record.childRecords.length; i++) {
-            currentRecord = record.childRecords[parseInt(i.toString(), 10)];
-            if (!isNullOrUndefined(currentRecord.childRecords) && currentRecord.childRecords.length) {
-                currentRecord.hasChildRecords = true;
-            }
-            let treeGridData: Object;
-            if (this.parent.dataSource instanceof DataManager && isOffline(this.parent)) {
-                treeGridData = (<DataManager>this.parent.dataSource).dataSource.json;
-            } else {
-                treeGridData = this.parent.dataSource;
-            }
-            for (let i: number = 0; i < (<ITreeData[]>treeGridData).length; i++) {
-                if (treeGridData[parseInt(i.toString(), 10)][this.parent.idMapping] === currentRecord.taskData[this.parent.idMapping]) {
-                    idx = i;
-                }
-            }
-            for (let i: number = 0; i < this.treeGridData.length; i++) {
-                if (this.treeGridData[parseInt(i.toString(), 10)][this.parent.idMapping]
-                    === currentRecord.taskData[this.parent.idMapping]) {
-                    idz = i;
-                    break;
-                }
-            }
-            if (idx !== -1 && !isNullOrUndefined(idx)) {
-                (dataSource as ITreeData[]).splice(idx, 1);
-            }
-            if (idz !== -1 && !isNullOrUndefined(idz)) {
-                this.treeGridData.splice(idz, 1);
-            }
-            if (currentRecord.hasChildRecords) {
-                this.removeChildItem(currentRecord);
-            }
-        }
-    }
-
-    /**
-     * 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.
-     */
-    private getChildCount(record: ITreeData, count: number): number {
-        let currentRecord: ITreeData;
-        if (!record.hasChildRecords) {
-            return 0;
-        }
-        for (let i: number = 0; i < record.childRecords.length; i++) {
-            currentRecord = record.childRecords[parseInt(i.toString(), 10)];
-            count++;
-            if (currentRecord.hasChildRecords) {
-                count = this.getChildCount(currentRecord, count);
-            }
-        }
-        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.
-     */
-    private ensuredropPosition(draggedRecords: ITreeData[], currentRecord: ITreeData): void {
-        draggedRecords.filter((e: ITreeData) => {
-            if (e.hasChildRecords && !isNullOrUndefined(e.childRecords)) {
-                const valid: number = e.childRecords.indexOf(currentRecord);
-                if (valid === -1) {
-                    this.ensuredropPosition(e.childRecords, currentRecord);
-                } else {
-                    this.dropPosition = 'Invalid';
-                    this.addErrorElem();
-                    this.canDrop = false;
-                    if (isNullOrUndefined(this.parent.rowDropSettings.targetID)) {
-                        this.removetopOrBottomBorder();
-                        this.removeChildBorder();
-                    }
-                    return;
-                }
-            }
-        });
-    }
-
-    private isDuplicateData(currentData: any): boolean {
-        const primaryKeys: string[] = this.parent.getPrimaryKeyFieldNames();
-        if (primaryKeys.length === 0) {
-            return false;
-        }
-        return this.parent.flatData.some((data: any) =>
-            // eslint-disable-next-line
-            primaryKeys.every((key: string) => data[key] === currentData[key])
-        );
-    }
-
-    /**
-     * Cleans up resources, event listeners, and DOM elements when the TreeGrid component is destroyed.
-     *
-     * @returns {void}
-     */
-    public destroy(): void {
-        this.removeEventListener();
-    }
-
-    /**
-     * @hidden
-     * @returns {void}
-     */
-    public removeEventListener(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.parent.off(events.rowdraging, this.Rowdraging);
-        this.parent.off(events.rowDropped, this.rowDropped);
-        this.parent.off(events.rowsAdd, this.rowsAdded);
-        this.parent.off(events.rowsRemove, this.rowsRemoved);
-    }
-    /**
-     * hidden
-     */
-    /**
-     * For internal use only - Get the module name.
-     *
-     * @private
-     * @returns {string} Returns RowDragAndDrop module name
-     */
-    private getModuleName(): string {
-        return 'rowDragAndDrop';
-    }
-}
-
-
-interface PositionOffSet {
-    left: number;
-    top: number;
-}
-