From 45ad41eb04b99a629e232f9744c6e1bb2c0447eb Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 22 Jun 2026 12:04:19 +0300 Subject: [PATCH 1/3] test(esf): add a tree grid test with grouping --- .../tree-grid/src/tree-grid-grouping.spec.ts | 34 ++++++++++++++++--- .../test-utils/tree-grid-components.spec.ts | 16 ++++----- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts index 8ac61eb1c91..46d273a362e 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts @@ -6,6 +6,7 @@ import { IgxTreeGridGroupByAreaComponent } from 'igniteui-angular/grids/tree-gri import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec'; import { IgxTreeGridComponent } from './tree-grid.component'; import { DefaultSortingStrategy } from 'igniteui-angular/core'; +import { GridFunctions } from 'igniteui-angular/test-utils/grid-functions.spec'; describe('IgxTreeGrid', () => { @@ -24,7 +25,7 @@ describe('IgxTreeGrid', () => { let groupByArea: IgxTreeGridGroupByAreaComponent; const DROP_AREA_MSG = 'Drag a column header and drop it here to group by that column.'; - describe(' GroupByArea Standalone', ()=> { + describe(' GroupByArea Standalone', () => { beforeEach(() => { fix = TestBed.createComponent(IgxTreeGridGroupByAreaTestComponent); @@ -53,7 +54,7 @@ describe('IgxTreeGrid', () => { expect(spanElement.innerText).toEqual(DROP_AREA_MSG); })); - it ('has the expected default properties\' values', fakeAsync(() => { + it('has the expected default properties\' values', fakeAsync(() => { expect(groupByArea).toBeDefined(); expect(groupByArea.grid).toEqual(treeGrid); expect(groupByArea.expressions).toEqual([]); @@ -97,7 +98,7 @@ describe('IgxTreeGrid', () => { clearGridSubs(); }); - it ('GroupByArea has the expected properties\' values set', fakeAsync(() => { + it('GroupByArea has the expected properties\' values set', fakeAsync(() => { expect(groupByArea).toBeDefined(); expect(groupByArea.expressions.length).toEqual(2); expect(groupByArea.grid).toEqual(treeGrid); @@ -132,7 +133,7 @@ describe('IgxTreeGrid', () => { expect(chips[0].id).toEqual('OnPTO'); expect(chips[1].id).toEqual('HireDate'); - groupingExpressions.push({ fieldName: 'JobTitle', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); + groupingExpressions.push({ fieldName: 'JobTitle', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); fix.detectChanges(); tick(); @@ -180,7 +181,7 @@ describe('IgxTreeGrid', () => { expect(treeGrid.getColumnByName('HireDate').hidden).toBeFalse(); - groupingExpressions.push({ fieldName: 'JobTitle', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance()}); + groupingExpressions.push({ fieldName: 'JobTitle', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }); groupByArea.expressions = [...groupingExpressions]; fix.detectChanges(); tick(); @@ -296,6 +297,29 @@ describe('IgxTreeGrid', () => { expect(treeGrid.getColumnByName('OnPTO').hidden).toBeTrue(); expect(treeGrid.getColumnByName('HireDate').hidden).toBeTrue(); })); + + it('should handle excel style filtering when grouping is applied', fakeAsync(() => { + treeGrid.filterMode = "excelStyleFilter"; + treeGrid.allowFiltering = true; + treeGrid.expansionDepth = Infinity; + fix.detectChanges(); + GridFunctions.clickExcelFilterIconFromCode(fix, treeGrid, 'Name'); + const checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix, null, 'igx-tree-grid'); + // unselect all + checkboxes[0].click(); + fix.detectChanges(); + + checkboxes[2].click(); + checkboxes[3].click(); + checkboxes[4].click(); + fix.detectChanges(); + + GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid'); + fix.detectChanges(); + + + expect(treeGrid.filteredData.length).toEqual(8); + })); }); const getChips = (fixture) => { diff --git a/projects/igniteui-angular/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/test-utils/tree-grid-components.spec.ts index 704f9ef36c8..cf93d5a4522 100644 --- a/projects/igniteui-angular/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/test-utils/tree-grid-components.spec.ts @@ -1032,19 +1032,19 @@ export class IgxTreeGridCascadingSelectionTransactionComponent { @Component({ template: ` + [childDataKey]="childDataKey" [expansionDepth]="0" width="900px" height="1000px" > - - - - - - - + + + + + + + `, imports: [IgxTreeGridComponent, IgxColumnComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe] From 358f5c28290d09c29ef357e6b5af1608ceb07793 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 22 Jun 2026 12:17:01 +0300 Subject: [PATCH 2/3] test(esf): add tree grid test checking esf items --- .../tree-grid/src/tree-grid-grouping.spec.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts index 46d273a362e..3632ddbb092 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts @@ -298,7 +298,7 @@ describe('IgxTreeGrid', () => { expect(treeGrid.getColumnByName('HireDate').hidden).toBeTrue(); })); - it('should handle excel style filtering when grouping is applied', fakeAsync(() => { + it('should handle excel style filtering when grouping is applied and 3 or more items are selected', fakeAsync(() => { treeGrid.filterMode = "excelStyleFilter"; treeGrid.allowFiltering = true; treeGrid.expansionDepth = Infinity; @@ -320,6 +320,28 @@ describe('IgxTreeGrid', () => { expect(treeGrid.filteredData.length).toEqual(8); })); + + it('should handle excel style filtering when grouping is applied and preserve all checked esf items', fakeAsync(() => { + treeGrid.filterMode = "excelStyleFilter"; + treeGrid.allowFiltering = true; + treeGrid.expansionDepth = Infinity; + fix.detectChanges(); + GridFunctions.clickExcelFilterIconFromCode(fix, treeGrid, 'Name'); + let checkboxes: HTMLInputElement[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, null, 'igx-tree-grid') as HTMLInputElement[]); + // unselect just one + checkboxes[2].click(); + fix.detectChanges(); + + GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid'); + fix.detectChanges(); + + GridFunctions.clickExcelFilterIconFromCode(fix, treeGrid, 'Name'); + checkboxes = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, null, 'igx-tree-grid') as HTMLInputElement[]); + + const uncheckedItem = checkboxes.splice(2, 1)[0]; + expect(uncheckedItem.checked).toBeFalse(); + checkboxes.forEach(c => expect(c.checked).toBeTrue()); + })); }); const getChips = (fixture) => { From c04a13799f19a09037fffbbe04dec5393271c661 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 22 Jun 2026 15:02:54 +0300 Subject: [PATCH 3/3] fix(search): enhance filtering logic for tree grid with group by support --- .../excel-style/excel-style-search.component.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts index 61fd8075565..756592950dc 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts @@ -29,6 +29,7 @@ export class IgxExcelStyleLoadingValuesTemplateDirective { } let NEXT_ID = 0; +const TREE_GRID_GROUPING_HIDDEN_FIELD = '_Igx_Hidden_Data_'; /** * A component used for presenting Excel style search UI. */ @@ -610,7 +611,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { searchVal = new Set(selectedItems.map(e => e.value.toLocaleTimeString())); break; case GridColumnDataType.String: - if (this.esf.column.filteringIgnoreCase && !this.isHierarchical()) { + if (this.esf.column.filteringIgnoreCase && !this.isHierarchical() && !this.isTreeGridWithGroupBy()) { const selectedValues = new Set(selectedItems.map(item => item.value.toLowerCase())); searchVal = new Set(); @@ -896,4 +897,12 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { const subRequired = indexOutOfChunk || scrollNeeded; return subRequired; } + + private isTreeGridWithGroupBy(): boolean { + if (this.esf.grid.type !== 'tree') { + return false; + } + const data = this.esf.grid.data; + return Array.isArray(data) && data.some(item => item && typeof item === 'object' && TREE_GRID_GROUPING_HIDDEN_FIELD in item); + } }