Merge pull request #2878 from IgniteUI/13-migrations-manual

zdrawku · web-flow · commit 71632c58f6ac · 2021-11-22T14:17:56.000+02:00
13 migrations manual
diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts
@@ -128,7 +128,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
 
     public cellSelection(evt) {
         const cell = evt.cell;
-        this.grid1.selectRows([cell.row.rowID], true);
+        this.grid1.selectRows([cell.row.key], true);
     }
 
     public getIconType(cell) {
diff --git a/src/app/grid/grid-batch-editing/grid-batch-editing-sample.component.html b/src/app/grid/grid-batch-editing/grid-batch-editing-sample.component.html
@@ -3,7 +3,7 @@
         [rowEditable]="true">
         <igx-column [editable]="false">
             <ng-template igxCell let-cell="cell" let-val>
-                <button igxButton (click)="grid.deleteRow(cell.id.rowID)"
+                <button igxButton (click)="cell.id.rowID"
                     [disabled]="cell.row.deleted">Delete</button>
             </ng-template>
         </igx-column>
diff --git a/src/app/grid/grid-composite-data-binding/grid-composite-data.component.html b/src/app/grid/grid-composite-data-binding/grid-composite-data.component.html
@@ -71,7 +71,7 @@
                                 <input #postalCode igxInput [(ngModel)]="cell.row.data.PostalCode" />
                             </igx-input-group>
                             <br>
-                            <span><strong>Phone:</strong> {{cell.row.data.Phone}}</span>
+                            <span><strong>Selected:</strong> {{cell.row.selected}}</span>
                             <igx-input-group width="100%">
                                 <input #postalCode igxInput [(ngModel)]="cell.row.data.Phone" />
                             </igx-input-group>
diff --git a/src/app/grid/grid-drop-indicator/grid-drop-indicator.ts b/src/app/grid/grid-drop-indicator/grid-drop-indicator.ts
@@ -3,6 +3,7 @@ import { IDragMoveEventArgs, IDropDroppedEventArgs, IgxGridComponent, IRowDragSt
 import { DATA } from '../../data/customers';
 import { Subject, interval, Observable, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { IgxRowDirective } from 'igniteui-angular/lib/grids/row.directive';
 
 @Component({
     selector: 'app-grid-drop-indicator',
@@ -56,7 +57,7 @@ export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy {
   }
 
   private getRowIndexAtPoint(
-    rowList: any[],
+    rowList: IgxRowDirective[],
     cursorPosition: Point
   ): number {
     for (const row of rowList) {
@@ -68,7 +69,7 @@ export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy {
         cursorPosition.x < rowRect.right + window.scrollX
       ) {
         // return the index of the targeted row
-        return this.data.indexOf(this.data.find(r => r.ID === row.rowID));
+        return this.data.indexOf(this.data.find(r => r.ID === row.key));
       }
     }
 
diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.ts
@@ -309,6 +309,7 @@ export class GridKeyboardnavGuide implements OnInit, OnDestroy {
         if (this._keyboardHandler.gridSection === GridSection.TBODY) {
             if (key === 'enter') {
                 const cell = this.grid.getCellByColumnVisibleIndex(activeNode.row, activeNode.column);
+                const isCellSelected = cell.selected;
                 if (cell && cell.column.editable && cell.editMode) {
                     this._keyboardHandler.selectItem(0);
                 }
diff --git a/src/app/grid/grid-multiple-row-drag/grid-multiple-row-drag.component.ts b/src/app/grid/grid-multiple-row-drag/grid-multiple-row-drag.component.ts
@@ -1,6 +1,6 @@
 
 import { Component, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IDropDroppedEventArgs, IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/customers';
 @Component({
     selector: 'app-grid-multiple-row-drag',
@@ -27,7 +27,7 @@ export class GridMultipleRowDragComponent  {
         args.animation = true;
     }
 
-    public onDropAllowed(args) {
+    public onDropAllowed(args: IDropDroppedEventArgs) {
         let selected = false;
         const ids = this.sourceGrid.selectedRows;
         const selectedRowData = this.sourceGrid.data.filter((record) => ids.includes(record.ID));
@@ -37,8 +37,8 @@ export class GridMultipleRowDragComponent  {
             this.sourceGrid.deleteRow(rowData.ID);
         });
         if (selected === false) {
-            this.targetGrid.addRow(args.dragData.rowData);
-            this.sourceGrid.deleteRow(args.dragData.rowID);
+            this.targetGrid.addRow(args.dragData.data);
+            this.sourceGrid.deleteRow(args.dragData.key);
         }
     }
 
diff --git a/src/app/grid/grid-paste/grid-paste-sample.component.ts b/src/app/grid/grid-paste/grid-paste-sample.component.ts
@@ -72,7 +72,7 @@ export class GridPasteSampleComponent {
             return;
         }
         const rowIndex = cell.row.index;
-        // const rowPkValue = cell.row.rowData[pk];
+        // const rowPkValue = cell.row.key;
         const cellIndex = cell.column.visibleIndex;
         const columns = this.grid1.visibleColumns;
         let index = 0;
diff --git a/src/app/grid/grid-row-drag-base/grid-row-drag-base.component.ts b/src/app/grid/grid-row-drag-base/grid-row-drag-base.component.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IDropDroppedEventArgs, IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/customers';
 
 // eslint-disable-next-line no-shadow
@@ -30,9 +30,9 @@ export class GridDragBaseSampleComponent {
         args.animation = true;
     }
 
-    public onDropAllowed(args) {
-        this.targetGrid.addRow(args.dragData.rowData);
-        this.sourceGrid.deleteRow(args.dragData.rowID);
+    public onDropAllowed(args: IDropDroppedEventArgs) {
+        this.targetGrid.addRow(args.dragData.data);
+        this.sourceGrid.deleteRow(args.dragData.key);
     }
 
     public onEnterAllowed(args) {
diff --git a/src/app/grid/grid-row-drag-to-grid/grid-row-drag-to-grid.component.ts b/src/app/grid/grid-row-drag-to-grid/grid-row-drag-to-grid.component.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IDropDroppedEventArgs, IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/customers';
 
 // eslint-disable-next-line no-shadow
@@ -30,9 +30,9 @@ export class GridDragToGridSampleComponent {
         args.animation = true;
     }
 
-    public onDropAllowed(args) {
-        this.targetGrid.addRow(args.dragData.rowData);
-        this.sourceGrid.deleteRow(args.dragData.rowID);
+    public onDropAllowed(args: IDropDroppedEventArgs) {
+        this.targetGrid.addRow(args.dragData.data);
+        this.sourceGrid.deleteRow(args.dragData.key);
     }
 
     public onEnterAllowed(args) {
diff --git a/src/app/grid/grid-row-drag/grid-row-drag.component.ts b/src/app/grid/grid-row-drag/grid-row-drag.component.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, ViewChildren } from '@angular/core';
+import { RowType } from 'igniteui-angular';
 import { moonData, planetData } from './data';
 import { PlanetComponent as PlanetComponent } from './planet/planet.component';
 
@@ -37,7 +38,7 @@ export class GridDragSampleComponent {
 
     public onEnter(args, planet: PlanetComponent) {
         args.drag.ghostElement.classList.add(
-            this.isDropAllowed(args.dragData.rowData.name, planet.name) ? HoverClassList.ALLOW : HoverClassList.DENY);
+            this.isDropAllowed(args.dragData.data.name, planet.name) ? HoverClassList.ALLOW : HoverClassList.DENY);
     }
 
     public onLeave(args) {
@@ -50,10 +51,10 @@ export class GridDragSampleComponent {
     }
 
     public onDrop(args, planet: PlanetComponent) {
-        const row: any = args.dragData;
+        const row: RowType = args.dragData;
         if (this.isDropAllowed(row.data.name, planet.name)) {
             row.data.planet = planet.name;
-            row.grid.selectRows([row.rowID]);
+            row.grid.selectRows([row.key]);
 
             planet.moonsCount++;
         }
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
@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import {
+    IDropDroppedEventArgs,
     IgxGridComponent,
     IPinningConfig,
     IRowDragStartEventArgs,
     RowPinningPosition,
     RowType
 } from 'igniteui-angular';
+import { IgxRowDirective } from 'igniteui-angular/lib/grids/row.directive';
 import { DATA } from '../../data/customers';
 
 @Component({
@@ -40,7 +42,7 @@ export class GridPinningDragSampleComponent implements OnInit {
         }
     }
 
-    public onDropAllowed(args) {
+    public onDropAllowed(args: IDropDroppedEventArgs) {
         const event = args.originalEvent;
         let currRowPinnedIndex;
         const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
@@ -55,15 +57,15 @@ export class GridPinningDragSampleComponent implements OnInit {
             currRowPinnedIndex = this.grid.pinnedRows.indexOf(this.grid.pinnedRows.find((r) => r.key === currRowID));
         }
         // remove the row that was dragged and place it onto its new location
-        this.grid.deleteRow(args.dragData.rowID);
-        this.data.splice(currRowIndex, 0, args.dragData.rowData);
+        this.grid.deleteRow((args.dragData as RowType).key);
+        this.data.splice(currRowIndex, 0, args.dragData.data);
         if (currentRow.pinned && !args.dragData.pinned) {
-            this.grid.pinRow(args.dragData.rowID, currRowPinnedIndex);
+            this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
         } else if (!currentRow.pinned && args.dragData.pinned) {
-            this.grid.unpinRow(args.dragData.rowID);
+            this.grid.unpinRow(args.dragData.key);
         } else if (currentRow.pinned && args.dragData.pinned) {
-            this.grid.unpinRow(args.dragData.rowID);
-            this.grid.pinRow(args.dragData.rowID, currRowPinnedIndex);
+            this.grid.unpinRow(args.dragData.key);
+            this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
         }
     }
 
@@ -79,20 +81,20 @@ export class GridPinningDragSampleComponent implements OnInit {
             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
-                return this.data.indexOf(this.data.find((r) => r.ID === row.rowData.ID));
+                return this.data.indexOf(this.data.find((r) => r.ID === row.key));
             }
         }
 
         return -1;
     }
 
-    private getCurrentRowID(rowList, cursorPosition) {
+    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) {
                 // return the ID of the targeted row
-                return row.rowData.ID;
+                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
@@ -1,5 +1,6 @@
-import { Component, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { Component, QueryList, ViewChild } from '@angular/core';
+import { IgxGridComponent, RowType } from 'igniteui-angular';
+import { IgxRowDirective } from 'igniteui-angular/lib/grids/row.directive';
 import { DATA } from '../../data/customers';
 
 @Component({
@@ -26,13 +27,13 @@ export class GridRowReorderComponent {
         this.data.splice(currRowIndex, 0, args.dragData.data);
     }
 
-    private getCurrentRowIndex(rowList, cursorPosition) {
+    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
-                return this.data.indexOf(this.data.find((r) => r.ID === row.rowID));
+                return this.data.indexOf(this.data.find((r) => r.ID === row.key));
             }
         }
 
diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts b/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts
@@ -56,7 +56,7 @@ export class HGridRowReorderComponent {
     private getTargetRowIndex(rowListArr: any[], cursorPosition: Point): number {
         const targetElem = this.catchCursorPosOnElem(rowListArr, cursorPosition);
         // get the index of the row that has the same ID as the dragged row
-        return rowListArr.indexOf(rowListArr.find((r) => r.rowData.id === targetElem.rowData.id));
+        return rowListArr.indexOf(rowListArr.find((r) => r.key === targetElem.key));
     }
 
     private catchCursorPosOnElem(rowListArr: any[], cursorPosition: Point): any {
diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.ts b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.ts
@@ -217,7 +217,6 @@ export class TGridKeyboardnavGuide implements OnInit, OnDestroy {
 
     public ngOnInit() {
         this.data = generateEmployeeDetailedFlatData();
-
         this.tgrid.columnSelectionChanging.pipe(takeUntil(this._destroyer))
             .subscribe((args) => {
                 const evt = args.event;
diff --git a/src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component.html b/src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component.html
@@ -18,10 +18,10 @@
         <igx-column [filterable]="false" width="130px">
             <ng-template igxCell let-cell="cell">
                 <div class="buttonsArea">
-                    <button igxButton="icon" (click)="openDialog(cell.row.rowID)" class="emplBtn">
+                    <button igxButton="icon" (click)="openDialog(cell.row.key)" class="emplBtn">
                         <igx-icon>person_add</igx-icon>
                     </button>
-                    <button igxButton="icon" (click)="deleteRow(cell.row.rowID)" class="emplBtn">
+                    <button igxButton="icon" (click)="deleteRow(cell.row.key)" class="emplBtn">
                         <igx-icon>delete</igx-icon>
                     </button>
                 </div>

Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {`
`128`	`128`
`129`	`129`	`public cellSelection(evt) {`
`130`	`130`	`const cell = evt.cell;`
`131`		`- this.grid1.selectRows([cell.row.rowID], true);`
	`131`	`+ this.grid1.selectRows([cell.row.key], true);`
`132`	`132`	`}`
`133`	`133`
`134`	`134`	`public getIconType(cell) {`
Original file line number	Diff line number	Diff line change
`@@ -309,6 +309,7 @@ export class GridKeyboardnavGuide implements OnInit, OnDestroy {`
`309`	`309`	`if (this._keyboardHandler.gridSection === GridSection.TBODY) {`
`310`	`310`	`if (key === 'enter') {`
`311`	`311`	`const cell = this.grid.getCellByColumnVisibleIndex(activeNode.row, activeNode.column);`
	`312`	`+ const isCellSelected = cell.selected;`
`312`	`313`	`if (cell && cell.column.editable && cell.editMode) {`
`313`	`314`	`this._keyboardHandler.selectItem(0);`
`314`	`315`	`}`
Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@ export class GridPasteSampleComponent {`
`72`	`72`	`return;`
`73`	`73`	`}`
`74`	`74`	`const rowIndex = cell.row.index;`
`75`		`- // const rowPkValue = cell.row.rowData[pk];`
	`75`	`+ // const rowPkValue = cell.row.key;`
`76`	`76`	`const cellIndex = cell.column.visibleIndex;`
`77`	`77`	`const columns = this.grid1.visibleColumns;`
`78`	`78`	`let index = 0;`