feat(hgrid): allow to prevent exiting of edit mode when row is toggled

Author: viktorkombov

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

@@ -397,6 +397,13 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         if (args.cancel) {
             return;
         }
+
+        const isHierarchicalGrid = grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
+
+        if (isHierarchicalGrid) {
+            grid.hgridAPI.endEditAll();
+        }
+
         expandedStates.set(rowID, expanded);
         grid.expansionStates = expandedStates;
         this.crudService.endEdit(false);

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -50,23 +50,23 @@ export interface IGridDataBindable {
 }
 
 export interface CellType {
-	value: any;
-	editValue: any;
-	selected: boolean;
-	active: boolean;
-	editable: boolean;
-	editMode: boolean;
+    value: any;
+    editValue: any;
+    selected: boolean;
+    active: boolean;
+    editable: boolean;
+    editMode: boolean;
     nativeElement?: HTMLElement;
-	column: ColumnType;
-	row: RowType;
-	grid: GridType;
-	id: { rowID: any; columnID: number; rowIndex: number };
+    column: ColumnType;
+    row: RowType;
+    grid: GridType;
+    id: { rowID: any; columnID: number; rowIndex: number };
     cellID?: any;
     readonly?: boolean;
     title?: any;
-	width: string;
+    width: string;
     visibleColumnIndex?: number;
-	update: (value: any) => void;
+    update: (value: any) => void;
     setEditMode?(value: boolean): void;
     calculateSizeToFit?(range: any): number;
     activate?(event: FocusEvent | KeyboardEvent): void;
@@ -95,7 +95,7 @@ export interface RowType {
     children?: RowType[];
     parent?: RowType;
     hasChildren?: boolean;
-    treeRow? : ITreeGridRecord;
+    treeRow?: ITreeGridRecord;
     addRowUI?: boolean;
     focused?: boolean;
     grid: GridType;
@@ -247,6 +247,7 @@ export interface GridServiceType {
     getChildGrid?(path: IPathSegment[]): GridType;
     // XXX: Fix type
     unsetChildRowIsland?(rowIsland: any): void;
+    endEditAll?(): void;
 }
 
 

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

@@ -3,11 +3,10 @@ import { Subject } from 'rxjs';
 import { GridType, IPathSegment } from '../common/grid.interface';
 import { Injectable } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
-
 @Injectable()
 export class IgxHierarchicalGridAPIService extends GridBaseAPIService<GridType> {
     protected childRowIslands: Map<string, IgxRowIslandComponent> = new Map<string, IgxRowIslandComponent>();
-    protected childGrids:  Map<string, Map<any, GridType>> =
+    protected childGrids: Map<string, Map<any, GridType>> =
         new Map<string, Map<any, GridType>>();
 
     public registerChildRowIsland(rowIsland: IgxRowIslandComponent) {
@@ -127,4 +126,15 @@ export class IgxHierarchicalGridAPIService extends GridBaseAPIService<GridType>
         const index = this.get_row_index_in_data(rowID, data);
         return data[index];
     }
+
+    public endEditAll(): void {
+        if (this.grid.gridAPI.crudService.cellInEditMode) {
+            this.grid.gridAPI.crudService.endEdit();
+        }
+        this.getChildGrids(true).forEach(g => {
+            if (g.gridAPI.crudService.cellInEditMode) {
+                g.gridAPI.crudService.endEdit();
+            }
+        });
+    }
 }

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

@@ -438,6 +438,76 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
         expect(childGridSecondRow.inEditMode).toBeFalsy();
     });
 
+    it('should be able to prevent exiting of edit mode when row is toggled through the UI', async () => {
+        hierarchicalGrid.primaryKey = 'ID';
+        hierarchicalGrid.rowEditable = true;
+        hierarchicalGrid.rowToggle.subscribe((e) => {
+            e.cancel = true;
+        });
+        fixture.detectChanges();
+        wait();
+
+        const masterGridFirstRow = hierarchicalGrid.hgridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+        expect(masterGridFirstRow.expanded).toBeFalsy();
+
+        const masterGridSecondCell = masterGridFirstRow.cells.find(c => c.columnIndex === 1);
+        expect(masterGridSecondCell.editMode).toBeFalsy();
+
+        masterGridSecondCell.setEditMode(true);
+        fixture.detectChanges();
+        wait();
+
+        expect(masterGridSecondCell.editMode).toBeTruthy();
+
+        UIInteractions.simulateClickAndSelectEvent(masterGridFirstRow.expander);
+        fixture.detectChanges();
+        wait();
+
+        expect(masterGridFirstRow.expanded).toBeFalsy();
+        expect(masterGridSecondCell.editMode).toBeTruthy();
+
+        hierarchicalGrid.rowToggle.subscribe((e) => {
+            e.cancel = false;
+        });
+        UIInteractions.simulateClickAndSelectEvent(masterGridFirstRow.expander);
+        fixture.detectChanges();
+        wait();
+
+        expect(masterGridFirstRow.expanded).toBeTruthy();
+        expect(masterGridSecondCell.editMode).toBeFalsy();
+
+        const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
+        expect(childGrid).toBeDefined();
+        
+        childGrid.primaryKey = 'ID';
+        childGrid.rowEditable = true;
+        childGrid.rowToggle.subscribe((e) => {
+            e.cancel = true;
+        });
+        fixture.detectChanges();
+        wait();
+
+        childGrid.columnList.find(c => c.index === 1).editable = true;
+        const childGridSecondRow = childGrid.gridAPI.get_row_by_index(1) as IgxHierarchicalRowComponent;
+        expect(childGridSecondRow.expanded).toBeFalsy();
+
+        const childGridSecondCell = childGridSecondRow.cells.find(c => c.columnIndex === 1);
+        expect(childGridSecondCell.editMode).toBeFalsy();
+
+        childGridSecondCell.setEditMode(true);
+        fixture.detectChanges();
+        wait();
+
+        expect(childGridSecondCell.editMode).toBeTruthy();
+
+        UIInteractions.simulateClickAndSelectEvent(masterGridFirstRow.expander);
+        fixture.detectChanges();
+        wait();
+
+        expect(childGrid.gridAPI.crudService.cellInEditMode).toBeTruthy();
+        expect(childGridSecondRow.inEditMode).toBeTruthy();
+    });
+
     it('child grid width should be recalculated if parent no longer shows scrollbar.', async () => {
         hierarchicalGrid.height = '1000px';
         fixture.detectChanges();

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

@@ -58,7 +58,7 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective {
     }
 
     public get viewIndex(): number {
-        return this.index + (this.grid.paginator?.page || 0 ) * (this.grid.paginator?.perPage || 0);
+        return this.index + (this.grid.paginator?.page || 0) * (this.grid.paginator?.perPage || 0);
     }
 
     /**
@@ -80,7 +80,7 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective {
     }
 
     public get hasChildren() {
-        return  !!this.grid.childLayoutKeys.length;
+        return !!this.grid.childLayoutKeys.length;
     }
 
     /**
@@ -91,10 +91,10 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective {
         return this.grid && this.grid.highlightedRowID === this.key;
     }
 
-   /**
-    * @hidden
-    */
-   public expanderClick(event) {
+    /**
+     * @hidden
+     */
+    public expanderClick(event) {
         event.stopPropagation();
         this.toggle();
     }
@@ -109,7 +109,6 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective {
         if (this.added) {
             return;
         }
-        this.endEdit(this.grid.rootGrid);
         this.grid.gridAPI.set_row_expansion_state(this.key, !this.expanded);
         this.grid.cdr.detectChanges();
     }
@@ -150,13 +149,6 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective {
 
     // TODO: consider moving into CRUD
     protected endEdit(grid: GridType) {
-        if (grid.gridAPI.crudService.cellInEditMode) {
-            grid.gridAPI.crudService.endEdit();
-        }
-        grid.hgridAPI.getChildGrids(true).forEach(g => {
-            if (g.gridAPI.crudService.cellInEditMode) {
-                g.gridAPI.crudService.endEdit();
-            }
-        });
+        grid.gridAPI.endEditAll();
     }
 }