Skip to content

fix(row-drag): fix disappearing rows in row drag samples #3954

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
dobromirts wants to merge 2 commits into
base: vnext
Choose a base branch
from
Open

fix(row-drag): fix disappearing rows in row drag samples #3954

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
a914242
fix(row-drag): fix disappearing rows in row drag samples
dobromirts Apr 22, 2026
ca0874f
Merge branch 'vnext' into dTsvetkov/fix-row-drag-samples
ChronosSF Apr 24, 2026
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
11 changes: 6 additions & 5 deletions src/app/grid/grid-drop-indicator/grid-drop-indicator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy {
private highlightedRow: HTMLElement;

constructor() {
this.data = DATA;
this.data = [...DATA];
}

public onDropAllowed(args: IDropDroppedEventArgs): void {
Expand All @@ -42,6 +42,7 @@ export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy {
// remove the row that was dragged and place it onto its new location
this.grid.deleteRow(this._draggedRow[this.grid.primaryKey]);
this.data.splice(currRowIndex, 0, this._draggedRow);
this.data = [...this.data];
this.clearHighlightElement();
}

Expand Down Expand Up @@ -69,10 +70,10 @@ export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy {
for (const row of rowList) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (
cursorPosition.y > rowRect.top + window.scrollY &&
cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX &&
cursorPosition.x < rowRect.right + window.scrollX
cursorPosition.y > rowRect.top &&
cursorPosition.y < rowRect.bottom &&
cursorPosition.x > rowRect.left &&
cursorPosition.x < rowRect.right
) {
// return the index of the targeted row
return this.data.indexOf(this.data.find(r => r.ID === row.key));
Expand Down
11 changes: 6 additions & 5 deletions src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export class GridPinningDragSampleComponent implements OnInit {
public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top };

constructor() {
this.data = DATA;
this.data = [...DATA];
}

public ngOnInit() {
Expand Down Expand Up @@ -56,6 +56,7 @@ export class GridPinningDragSampleComponent implements OnInit {
// remove the row that was dragged and place it onto its new location
this.grid.deleteRow((args.dragData as RowType).key);
this.data.splice(currRowIndex, 0, args.dragData.data);
this.data = [...this.data];
if (currentRow.pinned && !args.dragData.pinned) {
this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
} else if (!currentRow.pinned && args.dragData.pinned) {
Expand All @@ -75,8 +76,8 @@ export class GridPinningDragSampleComponent implements OnInit {
private getCurrentRowIndex(rowList, cursorPosition) {
for (const row of rowList) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
if (cursorPosition.y > rowRect.top && cursorPosition.y < rowRect.bottom &&
cursorPosition.x > rowRect.left && cursorPosition.x < rowRect.right) {
// return the index of the targeted row
return this.data.indexOf(this.data.find((r) => r.ID === row.key));
}
Expand All @@ -88,8 +89,8 @@ export class GridPinningDragSampleComponent implements OnInit {
private getCurrentRowID(rowList: IgxRowDirective[], cursorPosition) {
for (const row of rowList) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
if (cursorPosition.y > rowRect.top && cursorPosition.y < rowRect.bottom &&
cursorPosition.x > rowRect.left && cursorPosition.x < rowRect.right) {
// return the ID of the targeted row
return row.key;
}
Expand Down
9 changes: 4 additions & 5 deletions src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,24 @@ export class GridRowReorderComponent {
public data: any[];

constructor() {
this.data = DATA;
this.data = [...DATA];
}

public onDropAllowed(args) {
const event = args.originalEvent;
const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
{ x: event.clientX, y: event.clientY });
if (currRowIndex === -1) { return; }
// remove the row that was dragged and place it onto its new location
this.grid.deleteRow(args.dragData.key);
this.data.splice(currRowIndex, 0, args.dragData.data);
this.data = [...this.data];
}

private getCurrentRowIndex(rowList: IgxRowDirective[], cursorPosition) {
for (const row of rowList) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
// return the index of the targeted row
if (cursorPosition.y > rowRect.top && cursorPosition.y < rowRect.bottom &&
cursorPosition.x > rowRect.left && cursorPosition.x < rowRect.right) {
return this.data.indexOf(this.data.find((r) => r.ID === row.key));
}
}
Expand Down
Loading