Skip to content

fix(tree-grid): correctly process esf when tree grid grouping is enabled #17338

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mddragnev wants to merge 3 commits into
base: master
Choose a base branch
from
+70 −15
Open

fix(tree-grid): correctly process esf when tree grid grouping is enabled #17338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f992901
test(esf): add a tree grid test with grouping
mddragnev Jun 22, 2026
ec1dd7e
test(esf): add tree grid test checking esf items
mddragnev Jun 22, 2026
9665a14
fix(search): enhance filtering logic for tree grid with group by support
mddragnev Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion ...cts/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -611,7 +612,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();

Expand Down Expand Up @@ -897,4 +898,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);
}
Comment on lines +902 to +908
}
58 changes: 52 additions & 6 deletions projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Comment on lines 8 to +9

describe('IgxTreeGrid', () => {

Expand All @@ -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);
Expand Down Expand Up @@ -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([]);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();
Expand All @@ -195,7 +196,7 @@ describe('IgxTreeGrid', () => {
const aggregations = [{
field: 'HireDate',
aggregate: (_parent: any, children: any[]) => children.map((c) => c.HireDate)
.reduce((min, c) => min < c ? min : c, new Date())
.reduce((min, c) => min < c ? min : c, new Date())
}];

fix.componentInstance.aggregations = aggregations;
Expand Down Expand Up @@ -296,6 +297,51 @@ describe('IgxTreeGrid', () => {
expect(treeGrid.getColumnByName('OnPTO').hidden).toBeTrue();
expect(treeGrid.getColumnByName('HireDate').hidden).toBeTrue();
}));

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;
Comment on lines +301 to +304
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);
}));

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;
Comment on lines +324 to +327
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) => {
Expand Down
16 changes: 8 additions & 8 deletions projects/igniteui-angular/test-utils/tree-grid-components.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1074,19 +1074,19 @@ export class IgxTreeGridCascadingSelectionTransactionComponent {
@Component({
template: `
<igx-tree-grid #treeGrid [data]="data | treeGridGrouping:groupingExpressions:groupKey:childDataKey:treeGrid:aggregations"
[childDataKey]="childDataKey" [expansionDepth]="0" width="900px" height="1000px">
[childDataKey]="childDataKey" [expansionDepth]="0" width="900px" height="1000px" >
<igx-tree-grid-group-by-area
[grid]="treeGrid"
[expressions]="groupingExpressions"
[hideGroupedColumns]="false">
</igx-tree-grid-group-by-area>
<igx-column [field]="groupKey" [resizable]="true" [width]="'250px'" [hidden]="groupingExpressions.length === 0"></igx-column>
<igx-column [field]="'ID'" dataType="number"></igx-column>
<igx-column [field]="'Name'" dataType="string"></igx-column>
<igx-column [field]="'JobTitle'" dataType="string"></igx-column>
<igx-column [field]="'HireDate'" dataType="date"></igx-column>
<igx-column [field]="'Age'" dataType="number"></igx-column>
<igx-column [field]="'OnPTO'" dataType="boolean"></igx-column>
<igx-column [field]="groupKey" [resizable]="true" [width]="'250px'" [hidden]="groupingExpressions.length === 0" [filterable]="true"></igx-column>
<igx-column [field]="'ID'" dataType="number" [filterable]="true"></igx-column>
<igx-column [field]="'Name'" dataType="string" [filterable]="true"></igx-column>
<igx-column [field]="'JobTitle'" dataType="string" [filterable]="true"></igx-column>
<igx-column [field]="'HireDate'" dataType="date" [filterable]="true"></igx-column>
<igx-column [field]="'Age'" dataType="number" [filterable]="true"></igx-column>
<igx-column [field]="'OnPTO'" dataType="boolean" [filterable]="true"></igx-column>
</igx-tree-grid>
`,
changeDetection: ChangeDetectionStrategy.Eager,
Expand Down
Loading