diff --git a/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts b/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts index 918975267a2..47b59df3f21 100644 --- a/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts @@ -6,7 +6,7 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator';; import { DataParent } from '../../../test-utils/sample-test-data.spec'; import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec'; import { By } from '@angular/platform-browser'; -import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; +import { UIInteractions, wait, waitForActiveNodeChange } from '../../../test-utils/ui-interactions.spec'; import { hasClass, setElementSize } from '../../../test-utils/helper-utils.spec'; import { ColumnLayoutTestComponent } from './grid.multi-row-layout.spec'; import { IgxHierarchicalGridTestBaseComponent } from '../../hierarchical-grid/src/hierarchical-grid.spec'; @@ -1112,6 +1112,68 @@ describe('IgxGrid - Cell merging #grid', () => { ]); }); + it('should remerge child grid cells when focus moves to parent grid.', async () => { + const ri = fix.componentInstance.rowIsland; + ri.cellMergeMode = 'always'; + ri.getColumnByName('ProductName').merge = true; + fix.detectChanges(); + + const firstRow = grid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; + firstRow.toggle(); + fix.detectChanges(); + + const childGrid = grid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent; + expect(childGrid).toBeDefined(); + + const childCol = childGrid.getColumnByName('ProductName'); + GridFunctions.verifyColumnMergedState(childGrid, childCol, [ + { value: 'Product A', span: 2 }, + { value: 'Product B', span: 1 }, + { value: 'Product A', span: 1 } + ]); + + await wait(1); + fix.detectChanges(); + + const allGrids = fix.debugElement.queryAll(By.directive(IgxHierarchicalGridComponent)); + const childGridDE = allGrids.find(x => x.componentInstance === childGrid); + expect(childGridDE).toBeDefined(); + const childRows = childGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW)); + childRows.shift(); + const childRowDE = childRows[0]; + const childCells = childRowDE.queryAll(By.css('.igx-grid__td')); + const childCellDE = childCells[1]; + UIInteractions.simulateClickAndSelectEvent(childCellDE.nativeElement); + await wait(1); + fix.detectChanges(); + + GridFunctions.verifyColumnMergedState(childGrid, childCol, [ + { value: 'Product A', span: 1 }, + { value: 'Product A', span: 1 }, + { value: 'Product B', span: 1 }, + { value: 'Product A', span: 1 } + ]); + + const rootGridDE = allGrids.find(x => x.componentInstance === grid); + expect(rootGridDE).toBeDefined(); + const parentRows = rootGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW)); + parentRows.shift(); + const parentRowDE = parentRows[0]; + const parentCells = parentRowDE.queryAll(By.css('.igx-grid__td')); + const parentCellDE = parentCells[1]; + const activeChange = waitForActiveNodeChange(childGrid); + UIInteractions.simulateClickAndSelectEvent(parentCellDE.nativeElement); + await activeChange; + await wait(20); + fix.detectChanges(); + + GridFunctions.verifyColumnMergedState(childGrid, childCol, [ + { value: 'Product A', span: 2 }, + { value: 'Product B', span: 1 }, + { value: 'Product A', span: 1 } + ]); + }); + }); describe('TreeGrid', () => { diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-navigation.service.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-navigation.service.ts index c2180c755be..9cc4e413db3 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-navigation.service.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-navigation.service.ts @@ -365,6 +365,8 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi if (this.activeNode && Object.keys(this.activeNode).length) { this.activeNode = Object.assign({} as IActiveNode); } + + this.grid.activeNodeChange.emit(); } private hasNextTarget(grid: GridType, index: number, isNext: boolean) {