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 429f4bdc11e..ed999ecad3b 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 @@ -12,7 +12,7 @@ import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxList import { IgxButtonDirective, IgxForOfDirective } from 'igniteui-angular/directives'; import { IgxTreeComponent, IgxTreeNodeComponent, ITreeNodeSelectionEvent } from 'igniteui-angular/tree'; import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; -import { cloneHierarchicalArray, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, PlatformUtil, ɵSize } from 'igniteui-angular/core'; +import { cloneHierarchicalArray, columnFieldPath, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, PlatformUtil, resolveNestedPath, ɵSize } from 'igniteui-angular/core'; import { Navigate } from 'igniteui-angular/drop-down'; @Directive({ @@ -601,13 +601,15 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { searchVal = new Set(selectedItems.map(e => e.value.toLocaleTimeString())); break; case GridColumnDataType.String: - if (this.esf.column.filteringIgnoreCase) { + if (this.esf.column.filteringIgnoreCase && !this.isHierarchical()) { const selectedValues = new Set(selectedItems.map(item => item.value.toLowerCase())); searchVal = new Set(); this.esf.grid.data.forEach(item => { - if (typeof item[this.esf.column.field] === "string" && selectedValues.has(item[this.esf.column.field]?.toLowerCase())) { - searchVal.add(item[this.esf.column.field]); + const fieldPaths = columnFieldPath(this.esf.column.field) + const itemValue = resolveNestedPath(item, fieldPaths); + if (typeof itemValue === "string" && selectedValues.has(itemValue.toLowerCase())) { + searchVal.add(itemValue); } }); break; diff --git a/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts index 68ae5746d03..c69971704e9 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts @@ -1,4 +1,4 @@ -import { TestBed, ComponentFixture, fakeAsync, waitForAsync } from '@angular/core/testing'; +import { TestBed, ComponentFixture, fakeAsync, waitForAsync, tick } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, DebugElement, ViewChild } from '@angular/core'; @@ -318,6 +318,29 @@ describe('Grid - nested data source properties #grid', () => { expect(first(copiedData).user.name.first).toMatch('Updated!'); }); + + it('should correctly filter with ESF', fakeAsync(() => { + setupData(DATA); + grid.getColumnByName('user').field = 'user.name.first'; + fixture.detectChanges(); + grid.allowFiltering = true; + grid.filterMode="excelStyleFilter"; + fixture.detectChanges(); + + GridFunctions.clickExcelFilterIcon(fixture, 'user.name.first'); + fixture.detectChanges(); + tick(); + const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fixture, 'igx-grid'); + const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-grid')); + checkboxes[1].click(); + fixture.detectChanges(); + tick(); + + GridFunctions.clickApplyExcelStyleFiltering(fixture, null, 'igx-grid'); + fixture.detectChanges(); + tick(); + expect(grid.filteredSortedData.length).toBeGreaterThan(0); + })); }); }); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts index 409b315df20..393ae97a56e 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts @@ -770,6 +770,25 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => { expect(console.error).not.toHaveBeenCalled(); })); + + it('Should filter hierarchical data when an item is unselected.', fakeAsync(() => { + tGrid.filterStrategy = new TreeGridFilteringStrategy(['ID', "Name"]); + GridFunctions.clickExcelFilterIcon(fix, 'Name'); + fix.detectChanges(); + tick(); + + const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid'); + const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid')); + checkboxes[1].click(); + fix.detectChanges(); + tick(); + + GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid'); + fix.detectChanges(); + tick(); + + expect(tGrid.filteredSortedData.length).toBeGreaterThan(0); + })); }); describe('Tree grid ESF templates', () => {