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

Should be able to update different cell from onCellEdit event

Author: zdrawku

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

@@ -152,12 +152,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
         };
 
@@ -168,20 +168,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/grid-base.component.ts

@@ -3619,7 +3619,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                     this.gridAPI.escape_editMode();
                 }
 
-                this.cdr.markForCheck();
+                this.cdr.detectChanges();
             }
         }
     }
@@ -3645,7 +3645,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.cdr.markForCheck();
+            this.cdr.detectChanges();
         }
     }
 

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

@@ -2,7 +2,7 @@ import { Component, ViewChild, OnInit } from '@angular/core';
 import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxColumnComponent, IgxGridCellComponent, IgxGridComponent, IgxGridModule, IGridCellEventArgs } from './index';
+import { IgxColumnComponent, IgxGridCellComponent, IgxGridComponent, IgxGridModule, IGridCellEventArgs, IGridEditEventArgs } from './index';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -839,6 +839,49 @@ describe('IgxGrid - Cell component', () => {
         });
     });
 
+    it(`Should be able to update other cell in 'onCellEdit' event`, () => {
+        const fixture = TestBed.createComponent(CellEditingTestComponent);
+        fixture.detectChanges();
+        const grid = fixture.componentInstance.grid;
+        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 fit last cell in the available display container when there is vertical scroll.', async(() => {
         const fix = TestBed.createComponent(VirtualGridComponent);
         fix.detectChanges();

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

@@ -66,12 +66,12 @@ describe('IgxGrid - Row Selection', () => {
         const fix = TestBed.createComponent(GridWithPrimaryKeyComponent);
         fix.detectChanges();
         const grid = fix.componentInstance.grid;
-        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.spec.ts

@@ -1813,6 +1813,38 @@ describe('IgxGrid Component Tests', () => {
                 expect(grid.onRowEdit.emit).toHaveBeenCalledWith(rowArgs);
             }));
 
+            it(`Should properly emit 'onCellEdit' event `, fakeAsync(() => {
+                const fix = TestBed.createComponent(IgxGridRowEditingComponent);
+                fix.detectChanges();
+                tick(16);
+
+                const grid = fix.componentInstance.grid;
+                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);
+            }));
+
             it('Should display the banner below the edited row if it is not the last one', fakeAsync(() => {
                 const fix = TestBed.createComponent(IgxGridRowEditingComponent);
                 fix.detectChanges();

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

@@ -597,7 +597,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 {