fix(grid): call detectChanges when update cell or row #5763

Author: nrobakova

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

@@ -118,9 +118,11 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     public submit_value() {
         const cell = this.grid.crudService.cell;
         if (cell) {
-            const args = this.update_cell(cell, cell.editValue);
-            if (args.cancel) {
-                return;
+            if (!(isEqual(cell.value, cell.editValue))) {
+                const args = this.update_cell(cell, cell.editValue);
+                if (args.cancel) {
+                    return;
+                }
             }
             this.escape_editMode();
         }

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';
@@ -830,6 +830,50 @@ 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 {