diff --git a/samples/grids/hierarchical-grid/row-drag-base/src/index.css b/samples/grids/hierarchical-grid/row-drag-base/src/index.css
index 1fcfe3aac1..d3985cd442 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/src/index.css
+++ b/samples/grids/hierarchical-grid/row-drag-base/src/index.css
@@ -2,6 +2,25 @@
 /* https://static.infragistics.com/xplatform/css/samples */
 
 .wrapper {
-    justify-content: space-evenly;
-    margin: 1rem;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+  margin: 1rem;
+}
+
+.drop-area {
+  width: 240px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px dashed rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
+  background: #dcdcdc;
+  color: #111;
+  text-align: center;
 }
diff --git a/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx b/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
index 07b74e65e6..eee3f7626d 100644
--- a/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
+++ b/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
@@ -8,42 +8,53 @@ import {
   IgrRowIsland,
   IgrRowDragEndEventArgs,
 } from "igniteui-react-grids";
+import { IgrIcon } from "igniteui-react";
 import { SingersData } from "./SingersData";
 
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 
 export default function App() {
   const singersData = new SingersData();
-  const rightHGridRef = useRef<IgrHierarchicalGrid>(null);
+  const treeGridRef = useRef<IgrHierarchicalGrid>(null);
 
-  const RowDragEnd = (evt: IgrRowDragEndEventArgs) => {
-    const leftGrid = evt.target as IgrHierarchicalGrid;
+  const onRowDragEnd = (evt: IgrRowDragEndEventArgs) => {
     const ghostElement = evt.detail.dragDirective.ghostElement;
     if (ghostElement != null) {
       const dragElementPos = ghostElement.getBoundingClientRect();
-      const gridPosition = document.getElementById("hierarchicalGrid2").getBoundingClientRect();
+      const dropAreaPosition = document
+        .getElementById("dropArea")
+        .getBoundingClientRect();
 
-      const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
-      const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
+      const withinXBounds =
+        dragElementPos.x >= dropAreaPosition.x &&
+        dragElementPos.x <= dropAreaPosition.x + dropAreaPosition.width;
+      const withinYBounds =
+        dragElementPos.y >= dropAreaPosition.y &&
+        dragElementPos.y <= dropAreaPosition.y + dropAreaPosition.height;
       if (withinXBounds && withinYBounds) {
-        leftGrid.deleteRow(evt.detail.dragData.key);
-        rightHGridRef.current.addRow(evt.detail.dragData.data);
+        treeGridRef.current.deleteRow(evt.detail.dragData.key);
       }
     }
-  }
+  };
 
   return (
     <div className="container sample ig-typography">
       <div className="container fill">
         <div className="container horizontal wrapper">
+          <div className="drop-area" id="dropArea">
+            <IgrIcon>delete</IgrIcon>
+            <div>Drag a row here to delete it</div>
+          </div>
+
           <IgrHierarchicalGrid
+            ref={treeGridRef}
             autoGenerate={false}
             data={singersData}
             primaryKey="ID"
-            id="hierarchicalGrid1"
-            width="40%"
+            height="480px"
+            width="70%"
             rowDraggable={true}
-            onRowDragEnd={RowDragEnd}
+            onRowDragEnd={onRowDragEnd}
           >
             <IgrColumn
               field="Artist"
@@ -51,101 +62,16 @@ export default function App() {
               dataType="string"
               width="150px"
             ></IgrColumn>
-            <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
-            <IgrColumn field="Debut" header="Debut" dataType="number"></IgrColumn>
             <IgrColumn
-              field="GrammyNominations"
-              header="Grammy Nominations"
-              dataType="string"
-              width="200px"
+              field="Photo"
+              header="Photo"
+              dataType="image"
             ></IgrColumn>
             <IgrColumn
-              field="GrammyAwards"
-              header="Grammy Awards"
-              dataType="string"
-              width="200px"
+              field="Debut"
+              header="Debut"
+              dataType="number"
             ></IgrColumn>
-            <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
-              <IgrColumn
-                field="Album"
-                header="Album"
-                dataType="string"
-              ></IgrColumn>
-              <IgrColumn
-                field="LaunchDate"
-                header="Launch Date"
-                dataType="date"
-              ></IgrColumn>
-              <IgrColumn
-                field="BillboardReview"
-                header="Billboard Review"
-                dataType="string"
-              ></IgrColumn>
-              <IgrColumn
-                field="USBillboard200"
-                header="US Billboard 200"
-                dataType="string"
-              ></IgrColumn>
-              <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
-                <IgrColumn
-                  field="Number"
-                  header="No."
-                  dataType="string"
-                ></IgrColumn>
-                <IgrColumn
-                  field="Title"
-                  header="Title"
-                  dataType="string"
-                ></IgrColumn>
-                <IgrColumn
-                  field="Released"
-                  header="Released"
-                  dataType="date"
-                ></IgrColumn>
-                <IgrColumn
-                  field="Genre"
-                  header="Genre"
-                  dataType="string"
-                ></IgrColumn>
-              </IgrRowIsland>
-            </IgrRowIsland>
-            <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
-              <IgrColumn field="Tour" header="Tour" dataType="string"></IgrColumn>
-              <IgrColumn
-                field="StartedOn"
-                header="Started on"
-                dataType="string"
-              ></IgrColumn>
-              <IgrColumn
-                field="Location"
-                header="Location"
-                dataType="string"
-              ></IgrColumn>
-              <IgrColumn
-                field="Headliner"
-                header="Headliner"
-                dataType="string"
-              ></IgrColumn>
-            </IgrRowIsland>
-          </IgrHierarchicalGrid>
-
-          <IgrHierarchicalGrid
-            autoGenerate={false}
-            data={[]}
-            primaryKey="ID"
-            ref={rightHGridRef}
-            id="hierarchicalGrid2"
-            width="40%"
-            emptyGridMessage="Drag and Drop a row from the left grid to this grid"
-          >
-            <IgrColumn
-              field="Artist"
-              header="Artist"
-              dataType="string"
-              width="150px"
-            ></IgrColumn>
-            <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
-            <IgrColumn field="Debut" header="Debut" dataType="number"></IgrColumn>
             <IgrColumn
               field="GrammyNominations"
               header="Grammy Nominations"
@@ -203,7 +129,11 @@ export default function App() {
               </IgrRowIsland>
             </IgrRowIsland>
             <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
-              <IgrColumn field="Tour" header="Tour" dataType="string"></IgrColumn>
+              <IgrColumn
+                field="Tour"
+                header="Tour"
+                dataType="string"
+              ></IgrColumn>
               <IgrColumn
                 field="StartedOn"
                 header="Started on"
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.css b/samples/grids/tree-grid/row-drag-base/src/index.css
index 1fcfe3aac1..d3985cd442 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.css
+++ b/samples/grids/tree-grid/row-drag-base/src/index.css
@@ -2,6 +2,25 @@
 /* https://static.infragistics.com/xplatform/css/samples */
 
 .wrapper {
-    justify-content: space-evenly;
-    margin: 1rem;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+  margin: 1rem;
+}
+
+.drop-area {
+  width: 240px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px dashed rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
+  background: #dcdcdc;
+  color: #111;
+  text-align: center;
 }
diff --git a/samples/grids/tree-grid/row-drag-base/src/index.tsx b/samples/grids/tree-grid/row-drag-base/src/index.tsx
index 82ad8813ae..0cf3a385b7 100644
--- a/samples/grids/tree-grid/row-drag-base/src/index.tsx
+++ b/samples/grids/tree-grid/row-drag-base/src/index.tsx
@@ -6,101 +6,58 @@ import {
   IgrColumn,
   IgrRowDragEndEventArgs,
 } from "igniteui-react-grids";
-import { EmployeesNestedTreeData, EmployeesNestedTreeDataItem } from "./EmployeesNestedTreeData";
+import { IgrIcon } from "igniteui-react";
+import { EmployeesNestedTreeData } from "./EmployeesNestedTreeData";
 
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 
 export default function App() {
+  const treeGridRef = useRef<IgrTreeGrid>(null);
   const employeesData = new EmployeesNestedTreeData();
-  const rightTGridRef = useRef<IgrTreeGrid>(null);
 
-  // Recursive function to add the row and its children
-  const addRowAndChildren = (row: EmployeesNestedTreeDataItem, newData: EmployeesNestedTreeDataItem[]) => {
-    if (newData.includes(row)) {
-      return;
-    }
-    newData.push(row);
-    const children = employeesData.filter(emp => emp.ParentID === row.ID);
-    children.forEach(child => addRowAndChildren(child, newData));
-  }
-
-  const RowDragEnd = (evt: IgrRowDragEndEventArgs) => {
-    const leftGrid = evt.target as IgrTreeGrid;
+  const onRowDragEnd = (evt: IgrRowDragEndEventArgs) => {
     const ghostElement = evt.detail.dragDirective.ghostElement;
+
     if (ghostElement != null) {
       const dragElementPos = ghostElement.getBoundingClientRect();
-      const gridPosition = document.getElementById("treeGrid2").getBoundingClientRect();
+      const dropAreaPosition = document
+        .getElementById("dropArea")
+        .getBoundingClientRect();
 
-      const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
-      const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
+      const withinXBounds =
+        dragElementPos.x >= dropAreaPosition.x &&
+        dragElementPos.x <= dropAreaPosition.x + dropAreaPosition.width;
+      const withinYBounds =
+        dragElementPos.y >= dropAreaPosition.y &&
+        dragElementPos.y <= dropAreaPosition.y + dropAreaPosition.height;
 
       if (withinXBounds && withinYBounds) {
-        const newData = [...rightTGridRef.current.data];
-        const draggedRowData = evt.detail.dragData.data;
-
-        addRowAndChildren(draggedRowData, newData);
-        rightTGridRef.current.data = newData;
-        leftGrid.deleteRow(evt.detail.dragData.key);
+        treeGridRef.current.deleteRow(evt.detail.dragData.key);
       }
     }
-  }
+  };
 
   return (
     <div className="container sample ig-typography">
       <div className="container fill">
         <div className="container horizontal wrapper">
+          <div className="drop-area" id="dropArea">
+            <IgrIcon>delete</IgrIcon>
+            <div>Drag a row here to delete it</div>
+          </div>
+
           <IgrTreeGrid
-            autoGenerate={false}
+            ref={treeGridRef}
             data={employeesData}
             primaryKey="ID"
             foreignKey="ParentID"
-            id="treeGrid"
-            width="40%"
-            rowDraggable={true}
-            onRowDragEnd={RowDragEnd}
-          >
-            <IgrColumn
-              field="Name"
-              header="Full Name"
-              dataType="string"
-              resizable={true}
-              sortable={true}
-              editable={true}>
-            </IgrColumn>
-            <IgrColumn
-              field="Age"
-              dataType="number"
-              resizable={false}
-              sortable={false}
-              filterable={false}
-              editable={true}>
-            </IgrColumn>
-            <IgrColumn
-              field="Title"
-              dataType="string"
-              resizable={true}
-              sortable={true}
-              editable={true}>
-            </IgrColumn>
-            <IgrColumn
-              field="HireDate"
-              header="Hire Date"
-              dataType="date"
-              resizable={true}
-              sortable={true}
-              editable={true}>
-            </IgrColumn>
-          </IgrTreeGrid>
-
-          <IgrTreeGrid
+            height="480px"
+            width="70%"
             autoGenerate={false}
-            data={[]}
-            primaryKey="ID"
-            foreignKey="ParentID"
-            ref={rightTGridRef}
-            id="treeGrid2"
-            width="40%"
-            emptyGridMessage="Drag and Drop a row from the left grid to this grid"
+            moving={true}
+            rowDraggable={true}
+            allowFiltering={true}
+            onRowDragEnd={onRowDragEnd}
           >
             <IgrColumn
               field="Name"
@@ -108,31 +65,31 @@ export default function App() {
               dataType="string"
               resizable={true}
               sortable={true}
-              editable={true}>
-            </IgrColumn>
+              editable={true}
+            ></IgrColumn>
             <IgrColumn
               field="Age"
               dataType="number"
               resizable={false}
               sortable={false}
               filterable={false}
-              editable={true}>
-            </IgrColumn>
+              editable={true}
+            ></IgrColumn>
             <IgrColumn
               field="Title"
               dataType="string"
               resizable={true}
               sortable={true}
-              editable={true}>
-            </IgrColumn>
+              editable={true}
+            ></IgrColumn>
             <IgrColumn
               field="HireDate"
               header="Hire Date"
               dataType="date"
               resizable={true}
               sortable={true}
-              editable={true}>
-            </IgrColumn>
+              editable={true}
+            ></IgrColumn>
           </IgrTreeGrid>
         </div>
       </div>