From 4c0399738774ad5edf2d872505fffa1547e7011f Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 3 Feb 2025 17:48:33 +0200 Subject: [PATCH 1/3] fix(igxTreeGrid): Re-eval correct row after collapsing. Add test. --- .../src/lib/grids/common/crud.service.ts | 7 ++- .../tree-grid/tree-grid-add-row-ui.spec.ts | 43 +++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts index 4f4f45381e6..39bc58733bf 100644 --- a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts +++ b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts @@ -686,7 +686,12 @@ export class IgxGridCRUDService extends IgxRowAddCrudState { this.endEdit(true, event); if (parentRow != null && this.grid.expansionStates.get(parentRow.key)) { - this.grid.collapseRow(parentRow.key); + const key = parentRow.key; + this.grid.collapseRow(key); + // detect changes and get correct row by key + // in case collapsing changes row context. + this.grid.cdr.detectChanges(); + parentRow = this.grid.getRowByKey(key); } this.createAddRow(parentRow, asChild); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts index b05a1acd5d5..a39d1e5f610 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts @@ -9,6 +9,7 @@ import { IgxActionStripComponent } from '../../action-strip/public_api'; import { IgxTreeGridRowComponent } from './tree-grid-row.component'; import { first } from 'rxjs/operators'; import { IRowDataCancelableEventArgs } from '../public_api'; +import { wait } from '../../test-utils/ui-interactions.spec'; describe('IgxTreeGrid - Add Row UI #tGrid', () => { configureTestSuite(); @@ -216,5 +217,47 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { const addedRow = treeGrid.getRowByKey(newRowId); expect(addedRow.data[treeGrid.foreignKey]).toBe(2); }); + + it('should collapse row when child row adding begins and it added row should go under correct parent.', async() => { + treeGrid.data = [ + { ID: 1, ParentID: -1, Name: 'Casey Houston', JobTitle: 'Vice President', Age: 32 }, + { ID: 2, ParentID: 10, Name: 'Gilberto Todd', JobTitle: 'Director', Age: 41 }, + { ID: 3, ParentID: 10, Name: 'Tanya Bennett', JobTitle: 'Director', Age: 29 }, + { ID: 4, ParentID: 6, Name: 'Jack Simon', JobTitle: 'Software Developer', Age: 33 }, + { ID: 6, ParentID: -1, Name: 'Erma Walsh', JobTitle: 'CEO', Age: 52 }, + { ID: 7, ParentID: 10, Name: 'Debra Morton', JobTitle: 'Associate Software Developer', Age: 35 }, + { ID: 9, ParentID: 10, Name: 'Leslie Hansen', JobTitle: 'Associate Software Developer', Age: 44 }, + { ID: 10, ParentID: -1, Name: 'Eduardo Ramirez', JobTitle: 'Manager', Age: 53 } + ]; + fix.detectChanges(); + treeGrid.collapseAll(); + treeGrid.height = "350px"; + fix.detectChanges(); + const parentRow1 = treeGrid.rowList.toArray()[1] as IgxTreeGridRowComponent; + treeGrid.expandRow(parentRow1.key); + const parentRow2 = treeGrid.rowList.toArray()[3] as IgxTreeGridRowComponent; + treeGrid.expandRow(parentRow2.key); + treeGrid.triggerPipes(); + fix.detectChanges(); + + // scroll bottom + treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1); + await wait(50); + fix.detectChanges(); + // start add row + parentRow2.beginAddChild(); + fix.detectChanges(); + // last row should be add row + const addRow = treeGrid.gridAPI.get_row_by_index(4); + expect(addRow.addRowUI).toBeTrue(); + endTransition(); + + // end edit + treeGrid.gridAPI.crudService.endEdit(true); + fix.detectChanges(); + + // row should be added under correct parent + expect(treeGrid.data[treeGrid.data.length - 1].ParentID).toBe(10); + }); }); }); From d63b8a0b3fc9bc508c687f8d101a9f7db0e1c2b3 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 4 Feb 2025 16:21:46 +0200 Subject: [PATCH 2/3] chore(*): Apply review comments. --- .../src/lib/grids/common/crud.service.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts index 39bc58733bf..1b0974fdab7 100644 --- a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts +++ b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts @@ -684,17 +684,13 @@ export class IgxGridCRUDService extends IgxRowAddCrudState { return; } this.endEdit(true, event); - - if (parentRow != null && this.grid.expansionStates.get(parentRow.key)) { - const key = parentRow.key; - this.grid.collapseRow(key); - // detect changes and get correct row by key - // in case collapsing changes row context. - this.grid.cdr.detectChanges(); - parentRow = this.grid.getRowByKey(key); + // work with copy of original row, since context may change on collapse. + const parentRowCopy = Object.assign(copyDescriptors(parentRow), parentRow); + if (parentRowCopy != null && this.grid.expansionStates.get(parentRowCopy.key)) { + this.grid.collapseRow(parentRowCopy.key); } - this.createAddRow(parentRow, asChild); + this.createAddRow(parentRowCopy, asChild); this.grid.transactions.startPending(); if (this.addRowParent.isPinned) { From 939dc7d2a8fbfa0cf09b42a52f11163c893798f8 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 4 Feb 2025 16:39:47 +0200 Subject: [PATCH 3/3] chore(*): Add null check. --- projects/igniteui-angular/src/lib/grids/common/crud.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts index 1b0974fdab7..76d217af1e6 100644 --- a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts +++ b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts @@ -685,7 +685,7 @@ export class IgxGridCRUDService extends IgxRowAddCrudState { } this.endEdit(true, event); // work with copy of original row, since context may change on collapse. - const parentRowCopy = Object.assign(copyDescriptors(parentRow), parentRow); + const parentRowCopy = parentRow ? Object.assign(copyDescriptors(parentRow), parentRow) : null; if (parentRowCopy != null && this.grid.expansionStates.get(parentRowCopy.key)) { this.grid.collapseRow(parentRowCopy.key); }