Skip to content

fix(tree-grid): correctly process esf when tree grid grouping is enabled - 21.2.x #17341

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: 21.2.x
Choose a base branch
from
+69 −14
Open

fix(tree-grid): correctly process esf when tree grid grouping is enabled - 21.2.x #17341

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
45ad41e
test(esf): add a tree grid test with grouping
mddragnev Jun 22, 2026
358f5c2
test(esf): add tree grid test checking esf items
mddragnev Jun 22, 2026
c04a137
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_';
Comment on lines 31 to +32
/**
* A component used for presenting Excel style search UI.
*/
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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);
}
}
56 changes: 51 additions & 5 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';

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 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;
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;
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());
Comment on lines +341 to +343
}));
});

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 @@ -1032,19 +1032,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>
`,
imports: [IgxTreeGridComponent, IgxColumnComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe]
Expand Down
Loading