Merge pull request #5795 from IgniteUI/nrobakova/fix-issue-5763

Should be able to update different cell from onCellEdit event

Author: zdrawku

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

@@ -151,12 +151,12 @@ export class IgxGridCRUDService {
     }
 
     begin(cell): void {
-        this.cell = this.createCell(cell);
-        this.cell.primaryKey = this.primaryKey;
+        const newCell = this.createCell(cell);
+        newCell.primaryKey = this.primaryKey;
         const args = {
-            cellID: this.cell.id,
-            rowID: this.cell.id.rowID,
-            oldValue: this.cell.value,
+            cellID: newCell.id,
+            rowID: newCell.id.rowID,
+            oldValue: newCell.value,
             cancel: false
         };
 
@@ -167,20 +167,22 @@ export class IgxGridCRUDService {
             return;
         }
 
-
         if (this.rowEditing) {
-            if (!this.row) {
+            if (this.row && !this.sameRow(newCell.id.rowID)) {
+                this.grid.endEdit(true);
+                this.cell = newCell;
                 this.beginRowEdit();
                 return;
             }
 
-            if (this.row && !this.sameRow(this.cell.id.rowID)) {
-                this.grid.endEdit(true);
-                this.cell = this.createCell(cell);
+            this.cell = newCell;
+
+            if (!this.row) {
                 this.beginRowEdit();
                 return;
             }
         } else {
+            this.cell = newCell;
             this.endRowEdit();
         }
     }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -117,7 +117,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
     public submit_value() {
         const cell = this.grid.crudService.cell;
-        if (cell) {
+        if (cell ) {
             const args = this.update_cell(cell, cell.editValue);
             if (args.cancel) {
                 return;

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

@@ -3845,8 +3845,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                     }
                     this.gridAPI.escape_editMode();
                 }
-
-                this.notifyChanges();
+                this.cdr.detectChanges();
             }
         }
     }
@@ -3872,7 +3871,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             }
             const row = new IgxRow(rowSelector, -1, this.gridAPI.getRowData(rowSelector));
             this.gridAPI.update_row(row, value);
-            this.notifyChanges();
+            this.cdr.detectChanges();
         }
     }
 

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

@@ -647,6 +647,46 @@ describe('IgxGrid - Cell Editing #grid', () => {
             expect(cell.editMode).toBe(true);
         });
 
+        it(`Should be able to update other cell in 'onCellEdit' event`, () => {
+            grid.primaryKey = 'personNumber';
+            fixture.detectChanges();
+
+            spyOn(grid.onCellEdit, 'emit').and.callThrough();
+            grid.onCellEdit.subscribe((e: IGridEditEventArgs) => {
+                if (e.cellID.columnID === 0) {
+                    grid.updateCell(1, e.rowID, 'age' );
+                }
+            });
+
+            let cell = grid.getCellByColumn(0, 'fullName');
+
+            UIInteractions.simulateClickAndSelectCellEvent(cell);
+            fixture.detectChanges();
+
+            cell.nativeElement.dispatchEvent(new MouseEvent('dblclick'));
+            fixture.detectChanges();
+
+            expect(cell.editMode).toBe(true);
+            let editTemplate = fixture.debugElement.query(By.css('input'));
+            UIInteractions.sendInput(editTemplate, 'New Name');
+            fixture.detectChanges();
+
+            // press tab on edited cell
+            UIInteractions.triggerKeyDownWithBlur('tab', cell.nativeElement, true);
+            fixture.detectChanges();
+
+            expect(grid.onCellEdit.emit).toHaveBeenCalledTimes(2);
+            cell = grid.getCellByColumn(0, 'age');
+            expect(cell.editMode).toBe(true);
+            expect(cell.value).toEqual(1);
+            expect(cell.editValue).toEqual(1);
+            editTemplate = fixture.debugElement.query(By.css('input'));
+            expect(editTemplate.nativeElement.value).toEqual('1');
+
+            cell = grid.getCellByColumn(0, 'fullName');
+            expect(cell.value).toEqual('New Name');
+        });
+
         it(`Should properly emit 'onCellEditCancel' event`, () => {
             spyOn(grid.onCellEditCancel, 'emit').and.callThrough();
             const cell = grid.getCellByColumn(0, 'fullName');

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

@@ -1809,6 +1809,33 @@ describe('IgxGrid - Row Editing #grid', () => {
                 cancel: false
             });
         }));
+
+        it(`Should properly emit 'onCellEdit' event `, fakeAsync(() => {
+            spyOn(grid.onCellEdit, 'emit').and.callThrough();
+            spyOn(grid.onRowEdit, 'emit').and.callThrough();
+
+            let cell = grid.getCellByColumn(0, 'ProductName');
+            const cellArgs = { cellID: cell.cellID, rowID: cell.row.rowID, oldValue: 'Chai', newValue: 'New Value', cancel: false };
+
+            cell.nativeElement.dispatchEvent(new MouseEvent('dblclick'));
+            tick(16);
+            fix.detectChanges();
+
+            expect(cell.editMode).toBe(true);
+            const editTemplate = fix.debugElement.query(By.css('input'));
+            UIInteractions.sendInput(editTemplate, 'New Value');
+            fix.detectChanges();
+
+            // Click on cell in different row
+            cell = grid.getCellByColumn(2, 'ProductName');
+            UIInteractions.simulateClickAndSelectCellEvent(cell);
+            tick(16);
+            fix.detectChanges();
+
+            expect(grid.onRowEdit.emit).toHaveBeenCalledTimes(1);
+            expect(grid.onCellEdit.emit).toHaveBeenCalledTimes(1);
+            expect(grid.onCellEdit.emit).toHaveBeenCalledWith(cellArgs);
+        }));
     });
 
     describe('Column editable property', () => {

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

@@ -1240,12 +1240,12 @@ describe('IgxGrid - Row Selection #grid', () => {
         });
 
         it('Should be able to update row through primaryKey', () => {
-            spyOn(grid.cdr, 'markForCheck').and.callThrough();
+            spyOn(grid.onRowEdit, 'emit').and.callThrough();
             expect(grid.primaryKey).toBeTruthy();
             expect(grid.rowList.length).toEqual(10, 'All 10 rows should initialized');
             expect(grid.getRowByKey(2).rowData['JobTitle']).toMatch('Director');
             grid.updateRow({ ID: 2, Name: 'Gilberto Todd', JobTitle: 'Vice President' }, 2);
-            expect(grid.cdr.markForCheck).toHaveBeenCalledTimes(1);
+            expect(grid.onRowEdit.emit).toHaveBeenCalledTimes(1);
             fix.detectChanges();
             expect(grid.getRowByIndex(1).rowData['JobTitle']).toMatch('Vice President');
             expect(grid.getRowByKey(2).rowData['JobTitle']).toMatch('Vice President');

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

@@ -566,7 +566,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
      */
     public groupBy(expression: IGroupingExpression | Array<IGroupingExpression>): void {
         this.endEdit(true);
-        this._gridAPI.submit_value();
         if (expression instanceof Array) {
             this._gridAPI.groupBy_multiple(expression);
         } else {