fix(grid): disallow editing or primary column in grid with transactions #5377

Author: wnvko

projects/igniteui-angular/src/lib/core/grid-selection.ts

@@ -105,8 +105,8 @@ export class IgxGridCRUDService {
         return new IgxRow(cell.id.rowID, cell.rowIndex, cell.rowData);
     }
 
-    sameRow(rowID): boolean {
-        return this.row && this.row.id === rowID;
+    sameRow(rowIndex): boolean {
+        return this.row && this.row.index === rowIndex;
     }
 
     sameCell(cell: IgxCell): boolean {
@@ -175,7 +175,7 @@ export class IgxGridCRUDService {
                 return;
             }
 
-            if (this.row && !this.sameRow(this.cell.id.rowID)) {
+            if (this.row && !this.sameRow(this.cell.rowIndex)) {
                 this.grid.endEdit(true);
                 this.cell = this.createCell(cell);
                 this.beginRowEdit();

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -584,7 +584,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         const editableCell = this.crudService.cell;
         const editMode = !!(crud.row || crud.cell);
 
-
         if (this.editable && editMode && !this.row.deleted) {
             if (editableCell) {
                 this.gridAPI.update_cell(editableCell, editableCell.editValue);
@@ -595,9 +594,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             return;
         }
 
-        if (editableCell && crud.sameRow(this.cellID.rowID)) {
+        if (editableCell && crud.sameRow(this.rowIndex)) {
             this.gridAPI.submit_value();
-        } else if (editMode && !crud.sameRow(this.cellID.rowID)) {
+        } else if (editMode && !crud.sameRow(this.rowIndex)) {
             this.grid.endEdit(true);
         }
     }
@@ -979,14 +978,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         if (this.editMode) {
-            const v = this.crudService.cell;
-            const args = {
-                cellID: v.id,
-                rowID: v.id.rowID,
-                oldValue: v.value,
-                newValue: v.editValue,
-                cancel: false
-            } as IGridEditEventArgs;
+            const args = this.crudService.cell.createEditEventArgs();
             this.grid.onCellEditCancel.emit(args);
             if (args.cancel) {
                 return;

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -126,13 +126,20 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     @Input()
     get editable(): boolean {
-        let result = false;
+        // Updating the primary key when grid has transactions (incl. row edit)
+        // should not be allowed, as that can corrupt transaction state.
+        const rowEditable = this.grid && this.grid.rowEditable;
+        const hasTransactions = this.grid && this.grid.transactions.enabled;
+
+        if (this.isPrimaryColumn && (rowEditable || hasTransactions)) {
+            return false;
+        }
+
         if (this._editable !== undefined) {
-            result = this._editable;
+            return this._editable;
         } else {
-            result = this.grid && this.grid.rowEditable && this.field !== this.grid.primaryKey;
+            return rowEditable;
         }
-        return result;
     }
     /**
      * Sets whether the column is editable.
@@ -1085,6 +1092,12 @@ export class IgxColumnComponent implements AfterContentInit {
      * @hidden
      */
     protected _editable: boolean;
+    /**
+     * @hidden
+     */
+    protected get isPrimaryColumn(): boolean {
+        return this.field !== undefined && this.grid !== undefined && this.field === this.grid.primaryKey;
+    }
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -2883,7 +2883,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation', () => {
         await wait(100);
         fix.detectChanges();
 
-        targetCell = grid.getCellByColumn(0, 'ID');
+        targetCell = grid.getCellByColumn(0, 'PostalCode');
         expect(targetCell.focused).toBe(true);
     });
 

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

@@ -711,7 +711,6 @@ describe('IgxGrid - Summaries', () => {
             await wait(30);
             fixture.detectChanges();
             const grid = fixture.componentInstance.grid;
-            grid.getColumnByName('ID').editable = true;
             grid.getColumnByName('ParentID').editable = true;
             fixture.detectChanges();
             grid.rowEditable = true;
@@ -735,18 +734,14 @@ describe('IgxGrid - Summaries', () => {
 
             const editTemplate = fixture.debugElement.query(By.css('input[type=\'number\']'));
             UIInteractions.sendInput(editTemplate, 87);
-            fixture.detectChanges();
-
-            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true);
             await wait(50);
             fixture.detectChanges();
 
             summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
             HelperUtils.verifyColumnSummaries(summaryRow, 1,
                 ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['1', '17', '17', '17', '17']);
 
-            const idCell = grid.getCellByColumn(1, 'ID');
-            UIInteractions.triggerKeyDownEvtUponElem('enter', idCell.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('enter', cell.nativeElement, true);
             await wait(50);
             fixture.detectChanges();