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

Author: dobromirts

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));

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;
             }

src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts

@@ -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));
             }
         }