From 5b8ce3d0cd968e828afa0c1f5dce5d3e5e411485 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Tue, 4 Nov 2025 14:30:20 +0200 Subject: [PATCH 1/2] refactor(row-drag-base): change tgrid and hgrid samples to mimic angular samples --- .../row-drag-base/src/index.css | 20 ++- .../row-drag-base/src/index.tsx | 135 +++++------------- .../tree-grid/row-drag-base/src/index.css | 20 ++- .../tree-grid/row-drag-base/src/index.tsx | 112 +++++---------- 4 files changed, 102 insertions(+), 185 deletions(-) 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..6280a6f59e 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,22 @@ /* https://static.infragistics.com/xplatform/css/samples */ .wrapper { - justify-content: space-evenly; - margin: 1rem; + justify-content: space-evenly; + margin: 1rem; + align-items: center; +} + +.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..5a198e1373 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,52 @@ 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(null); + const treeGridRef = useRef(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 (
+
+ delete +
Drag a row here to delete it
+
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - + (null); const employeesData = new EmployeesNestedTreeData(); - const rightTGridRef = useRef(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 (
+
+ delete +
Drag a row here to delete it
+
+ - - - - - - - - - - - - + editable={true} + > - + editable={true} + > - + editable={true} + > - + editable={true} + >
From 9e290de899b76517e3f2a8c6b419f83e7b205103 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Tue, 4 Nov 2025 17:06:18 +0200 Subject: [PATCH 2/2] fix(row-drag-base): change sizings so samples fit in iframes --- .../grids/hierarchical-grid/row-drag-base/src/index.css | 7 +++++-- .../grids/hierarchical-grid/row-drag-base/src/index.tsx | 3 ++- samples/grids/tree-grid/row-drag-base/src/index.css | 7 +++++-- samples/grids/tree-grid/row-drag-base/src/index.tsx | 3 ++- 4 files changed, 14 insertions(+), 6 deletions(-) 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 6280a6f59e..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,9 +2,12 @@ /* 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 { 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 5a198e1373..eee3f7626d 100644 --- a/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx +++ b/samples/grids/hierarchical-grid/row-drag-base/src/index.tsx @@ -51,7 +51,8 @@ export default function App() { autoGenerate={false} data={singersData} primaryKey="ID" - width="40%" + height="480px" + width="70%" rowDraggable={true} onRowDragEnd={onRowDragEnd} > 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 6280a6f59e..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,9 +2,12 @@ /* 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 { 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 4331e6c231..0cf3a385b7 100644 --- a/samples/grids/tree-grid/row-drag-base/src/index.tsx +++ b/samples/grids/tree-grid/row-drag-base/src/index.tsx @@ -51,7 +51,8 @@ export default function App() { data={employeesData} primaryKey="ID" foreignKey="ParentID" - width="40%" + height="480px" + width="70%" autoGenerate={false} moving={true} rowDraggable={true}