diff --git a/src/app/grid/grid-drop-indicator/grid-drop-indicator.ts b/src/app/grid/grid-drop-indicator/grid-drop-indicator.ts index 962a41ec2..1ac9308f0 100644 --- a/src/app/grid/grid-drop-indicator/grid-drop-indicator.ts +++ b/src/app/grid/grid-drop-indicator/grid-drop-indicator.ts @@ -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 { @@ -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(); } @@ -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)); diff --git a/src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component.ts b/src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component.ts index 740e79606..832f2e07a 100644 --- a/src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component.ts +++ b/src/app/grid/grid-row-pinning-drag/grid-row-pinning-drag.component.ts @@ -20,7 +20,7 @@ export class GridPinningDragSampleComponent implements OnInit { public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top }; constructor() { - this.data = DATA; + this.data = [...DATA]; } public ngOnInit() { @@ -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) { @@ -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)); } @@ -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; } diff --git a/src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts b/src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts index 29070b8ed..05f57d56b 100644 --- a/src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts +++ b/src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts @@ -17,7 +17,7 @@ export class GridRowReorderComponent { public data: any[]; constructor() { - this.data = DATA; + this.data = [...DATA]; } public onDropAllowed(args) { @@ -25,17 +25,16 @@ export class GridRowReorderComponent { 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)); } }