feat(grid): console.warn if primaryKey col does not exist

Author: ddaribo

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -440,7 +440,14 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     @WatchChanges()
     @Input()
-    public primaryKey: string;
+    public get primaryKey(): string {
+        return this._primaryKey;
+    }
+
+    public set primaryKey(value: string) {
+        this._primaryKey = value;
+        this.checkPrimaryKeyColumn();
+    }
 
     /* blazorSuppress */
     /**
@@ -3132,6 +3139,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         return this.verticalScrollContainer.getScrollNativeSize();
     }
 
+    private _primaryKey: string;
     private _rowEditable = false;
     private _currentRowState: any;
     private _filteredSortedData = null;
@@ -6642,6 +6650,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         this.initColumns(this._columns, (col: IgxColumnComponent) => this.columnInit.emit(col));
         this.columnListDiffer.diff(this.columnList);
+        this.checkPrimaryKeyColumn();
 
         this.columnList.changes
             .pipe(takeUntil(this.destroy$))
@@ -6753,6 +6762,16 @@ export abstract class IgxGridBaseDirective implements GridType,
             if (added || removed) {
                 this.onColumnsAddedOrRemoved();
             }
+            this.checkPrimaryKeyColumn();
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    protected checkPrimaryKeyColumn() {
+        if (this.primaryKey && this.columns.length > 0 && !this.columns.find(c => c.field === this.primaryKey)) {
+            console.warn(`Primary key column "${this.primaryKey}" is not defined. Set \`primaryKey\` to a valid column.`);
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -673,6 +673,40 @@ describe('IgxGrid Component Tests #grid', () => {
             const expectedCellHeight = 76; // rowHeight + 1px border
             expect(cell.offsetHeight).toEqual(expectedCellHeight);
         });
+
+        it('should throw a warning when primaryKey is set to a non-existing column field', () => {
+            const fixture = TestBed.createComponent(IgxGridTestComponent);
+            const grid = fixture.componentInstance.grid;
+            const warnSpy = spyOn(console, 'warn');
+            grid.primaryKey = 'testField';
+            fixture.detectChanges();
+
+            expect(console.warn).toHaveBeenCalledTimes(1);
+            expect(console.warn).toHaveBeenCalledWith(
+                `Primary key column "${grid.primaryKey}" is not defined. Set \`primaryKey\` to a valid column.`
+            );
+            warnSpy.calls.reset();
+
+            // update columns to include the 'testField'
+            fixture.componentInstance.columns = [
+                { field: 'index', header: 'index', dataType: 'number', width: null, hasSummary: false },
+                { field: 'value', header: 'value', dataType: 'number', width: null, hasSummary: false },
+                { field: 'testField', header: 'testField', dataType: 'number', width: null, hasSummary: false }
+            ];
+            fixture.detectChanges();
+
+            expect(console.warn).toHaveBeenCalledTimes(0);
+
+            // remove the 'testField' runtime
+            fixture.componentInstance.columns.pop();
+            fixture.componentInstance.columns = [...fixture.componentInstance.columns];
+            fixture.detectChanges();
+
+            expect(console.warn).toHaveBeenCalledTimes(1);
+            expect(console.warn).toHaveBeenCalledWith(
+                `Primary key column "${grid.primaryKey}" is not defined. Set \`primaryKey\` to a valid column.`
+            );
+        });
     });
 
     describe('IgxGrid - virtualization tests', () => {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -1139,6 +1139,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     protected override setupColumns() {
         if (this.parentIsland && this.parentIsland.childColumns.length > 0 && !this.autoGenerate) {
             this.createColumnsList(this.parentIsland.childColumns.toArray());
+            super.checkPrimaryKeyColumn();
         } else {
             super.setupColumns();
         }

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

@@ -638,6 +638,35 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             fixture.detectChanges();
             expect(hierarchicalGrid.columnInit.emit).toHaveBeenCalled();
         });
+
+        it('should throw a warning when primaryKey is set to a non-existing column field', () => {
+            spyOn(console, 'warn');
+            hierarchicalGrid.primaryKey = 'testField';
+            fixture.componentInstance.rowIsland.primaryKey = 'testField-rowIsland';
+            fixture.componentInstance.rowIsland2.primaryKey = 'testField-rowIsland2';
+            fixture.detectChanges();
+
+            expect(console.warn).toHaveBeenCalledWith(
+                `Primary key column "${hierarchicalGrid.primaryKey}" is not defined. Set \`primaryKey\` to a valid column.`
+            );
+
+            let row1 = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row1.expander);
+            fixture.detectChanges();
+
+            expect(console.warn).toHaveBeenCalledWith(
+                `Primary key column "${fixture.componentInstance.rowIsland.primaryKey}" is not defined. Set \`primaryKey\` to a valid column.`
+            );
+
+            const secondLevelGrid = hierarchicalGrid.gridAPI.getChildGrids()[0];
+            row1 = secondLevelGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row1.expander);
+            fixture.detectChanges();
+
+            expect(console.warn).toHaveBeenCalledWith(
+                `Primary key column "${fixture.componentInstance.rowIsland2.primaryKey}" is not defined. Set \`primaryKey\` to a valid column.`
+            );
+        });
     });
 
     describe('IgxHierarchicalGrid Row Islands #hGrid', () => {