Skip to content

refactor(row-drag-base): change tgrid and hgrid samples to mimic those in Angular #951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: vnext
Choose a base branch
from
Open

refactor(row-drag-base): change tgrid and hgrid samples to mimic those in Angular #951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b8ce3d
refactor(row-drag-base): change tgrid and hgrid samples to mimic angu…
IMinchev64 Nov 4, 2025
9e290de
fix(row-drag-base): change sizings so samples fit in iframes
IMinchev64 Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions samples/grids/hierarchical-grid/row-drag-base/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
138 changes: 34 additions & 104 deletions samples/grids/hierarchical-grid/row-drag-base/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,144 +8,70 @@ 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"
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"
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"
Expand Down Expand Up @@ -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"
Expand Down
23 changes: 21 additions & 2 deletions samples/grids/tree-grid/row-drag-base/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading