Skip to content

Commit bfa8130

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #8983 from IgniteUI/ibarakov/fix-8907-master
fix(hierarchical-grid): fix excel style filtering in row-island
2 parents e99195a + 8dde186 commit bfa8130

File tree

3 files changed

+98
-24
lines changed

3 files changed

+98
-24
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
328328
* @hidden @internal
329329
*/
330330
public get grid(): IgxGridBaseDirective {
331-
return this.gridAPI?.grid ?? this.column?.grid;
331+
return this.column?.grid ?? this.gridAPI?.grid;
332332
}
333333

334334
/**

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { DisplayDensity } from '../../core/displayDensity';
1313
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
1414
import { IGridCellEventArgs } from '../grid/public_api';
1515
import { GridSelectionMode } from '../common/enums';
16+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
1617

1718
describe('Basic IgxHierarchicalGrid #hGrid', () => {
1819
configureTestSuite();
@@ -1206,25 +1207,24 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
12061207

12071208
describe('IgxHierarchicalGrid custom template #hGrid', () => {
12081209
configureTestSuite();
1209-
let fixture: ComponentFixture<IgxHierarchicalGridCustomTemplateComponent>;
1210-
let hierarchicalGrid: IgxHierarchicalGridComponent;
1210+
12111211
beforeAll(waitForAsync(() => {
12121212
TestBed.configureTestingModule({
12131213
declarations: [
1214-
IgxHierarchicalGridCustomTemplateComponent
1214+
IgxHierarchicalGridCustomTemplateComponent,
1215+
IgxHierarchicalGridCustomFilteringTemplateComponent,
12151216
],
12161217
imports: [
12171218
NoopAnimationsModule, IgxHierarchicalGridModule]
12181219
}).compileComponents();
12191220
}));
12201221

1221-
beforeEach(fakeAsync(() => {
1222-
fixture = TestBed.createComponent(IgxHierarchicalGridCustomTemplateComponent);
1222+
it('should allow setting custom template for expand/collapse icons', async () => {
1223+
const fixture = TestBed.createComponent(IgxHierarchicalGridCustomTemplateComponent);
12231224
fixture.detectChanges();
1224-
hierarchicalGrid = fixture.componentInstance.hgrid;
1225-
}));
12261225

1227-
it(' should allow setting custom template for expand/collapse icons', async () => {
1226+
const hierarchicalGrid = fixture.componentInstance.hgrid;
1227+
12281228
let rows = hierarchicalGrid.dataRowList.toArray();
12291229
for (const row of rows) {
12301230
const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander');
@@ -1257,6 +1257,36 @@ describe('IgxHierarchicalGrid custom template #hGrid', () => {
12571257
fixture.detectChanges();
12581258
expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED');
12591259
});
1260+
1261+
it('should correctly filter templated row island in hierarchical grid', fakeAsync(() => {
1262+
const fixture = TestBed.createComponent(IgxHierarchicalGridCustomFilteringTemplateComponent);
1263+
fixture.detectChanges();
1264+
1265+
const hierarchicalGrid = fixture.componentInstance.hgrid;
1266+
const firstRow = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
1267+
UIInteractions.simulateClickAndSelectEvent(firstRow.expander);
1268+
fixture.detectChanges();
1269+
1270+
GridFunctions.clickExcelFilterIconFromCode(fixture, hierarchicalGrid, 'ProductName');
1271+
tick(200);
1272+
fixture.detectChanges();
1273+
1274+
const searchComponent = GridFunctions.getExcelStyleSearchComponent(fixture, null, 'igx-hierarchical-grid');
1275+
const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fixture, searchComponent, 'igx-hierarchical-grid');
1276+
UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'A4', fixture);
1277+
tick(100);
1278+
fixture.detectChanges();
1279+
1280+
GridFunctions.clickApplyExcelStyleFiltering(fixture, null, 'igx-hierarchical-grid');
1281+
tick(100);
1282+
fixture.detectChanges();
1283+
1284+
const gridCellValues = GridFunctions.getColumnCells(fixture, 'ProductName', 'igx-hierarchical-grid-cell')
1285+
.map(c => c.nativeElement.innerText)
1286+
.sort();
1287+
1288+
expect(gridCellValues.length).toBe(1);
1289+
}));
12601290
});
12611291

12621292
@Component({
@@ -1490,3 +1520,47 @@ public toggleChildRI = true;
14901520
})
14911521
export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalGridTestBaseComponent {}
14921522

1523+
@Component({
1524+
template: `
1525+
<igx-hierarchical-grid #grid1 [data]="data" [showExpandAll]='true'
1526+
[autoGenerate]="false" [height]="'400px'" [width]="width" [allowFiltering]='true' filterMode="excelStyleFilter" #hierarchicalGrid>
1527+
<igx-column field="ID"></igx-column>
1528+
<igx-column field="ProductName"></igx-column>
1529+
<igx-row-island [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false"
1530+
[allowFiltering]='true' filterMode="excelStyleFilter" #rowIsland>
1531+
<ng-template igxExcelStyleHeaderIcon>
1532+
<igx-icon>filter_alt</igx-icon>
1533+
</ng-template>
1534+
<igx-grid-excel-style-filtering [minHeight]="'280px'" [maxHeight]="'300px'">
1535+
<igx-excel-style-column-operations>
1536+
<igx-excel-style-header
1537+
[showPinning]="true"
1538+
[showHiding]="true"
1539+
>
1540+
</igx-excel-style-header>
1541+
<igx-excel-style-sorting></igx-excel-style-sorting>
1542+
</igx-excel-style-column-operations>
1543+
<igx-excel-style-filter-operations>
1544+
<igx-excel-style-search></igx-excel-style-search>
1545+
</igx-excel-style-filter-operations>
1546+
</igx-grid-excel-style-filtering>
1547+
<igx-column field="ID"></igx-column>
1548+
<igx-column field="ProductName"></igx-column>
1549+
<igx-row-island [key]="'childData'" [autoGenerate]="true" #rowIsland2 >
1550+
</igx-row-island>
1551+
</igx-row-island>
1552+
<ng-template igxRowExpandedIndicator>
1553+
<span>EXPANDED</span>
1554+
</ng-template>
1555+
<ng-template igxRowCollapsedIndicator>
1556+
<span>COLLAPSED</span>
1557+
</ng-template>
1558+
<ng-template igxHeaderCollapsedIndicator>
1559+
<span>COLLAPSED</span>
1560+
</ng-template>
1561+
<ng-template igxHeaderExpandedIndicator>
1562+
<span>EXPANDED</span>
1563+
</ng-template>
1564+
</igx-hierarchical-grid>`
1565+
})
1566+
export class IgxHierarchicalGridCustomFilteringTemplateComponent extends IgxHierarchicalGridTestBaseComponent {}

‎projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -694,23 +694,23 @@ export class GridFunctions {
694694
UIInteractions.simulateClickAndSelectEvent(icon);
695695
}
696696

697-
public static clickExcelFilterIconFromCode(fix: ComponentFixture<any>, grid: IgxGridComponent, columnField: string) {
697+
public static clickExcelFilterIconFromCode(fix: ComponentFixture<any>, grid: IgxGridBaseDirective, columnField: string) {
698698
const event = { stopPropagation: () => { }, preventDefault: () => { } };
699699
const header = grid.getColumnByName(columnField).headerCell;
700700
header.onFilteringIconClick(event);
701701
tick(50);
702702
fix.detectChanges();
703703
}
704704

705-
public static getApplyButtonExcelStyleFiltering(fix: ComponentFixture<any>, menu = null) {
706-
const excelMenu = menu ? menu : GridFunctions.getExcelStyleFilteringComponent(fix);
705+
public static getApplyButtonExcelStyleFiltering(fix: ComponentFixture<any>, menu = null, grid = 'igx-grid') {
706+
const excelMenu = menu ? menu : GridFunctions.getExcelStyleFilteringComponent(fix, grid);
707707
const raisedButtons = Array.from(excelMenu.querySelectorAll('.igx-button--raised'));
708708
const applyButton: any = raisedButtons.find((rb: any) => rb.innerText === 'apply');
709709
return applyButton;
710710
}
711711

712-
public static clickApplyExcelStyleFiltering(fix: ComponentFixture<any>, menu = null) {
713-
const applyButton = GridFunctions.getApplyButtonExcelStyleFiltering(fix, menu);
712+
public static clickApplyExcelStyleFiltering(fix: ComponentFixture<any>, menu = null, grid = 'igx-grid') {
713+
const applyButton = GridFunctions.getApplyButtonExcelStyleFiltering(fix, menu, grid);
714714
applyButton.click();
715715
}
716716

@@ -966,8 +966,8 @@ export class GridFunctions {
966966
fix.detectChanges();
967967
}
968968

969-
public static getExcelStyleFilteringComponent(fix) {
970-
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
969+
public static getExcelStyleFilteringComponent(fix, grid = 'igx-grid') {
970+
const gridNativeElement = fix.debugElement.query(By.css(grid)).nativeElement;
971971
let excelMenu = gridNativeElement.querySelector(ESF_MENU_CLASS);
972972
if (!excelMenu) {
973973
excelMenu = fix.nativeElement.querySelector(ESF_MENU_CLASS);
@@ -999,8 +999,8 @@ export class GridFunctions {
999999
return moveContainer.querySelectorAll('.igx-button--flat');
10001000
}
10011001

1002-
public static getExcelStyleSearchComponent(fix, menu = null) {
1003-
const excelMenu = menu ? menu : GridFunctions.getExcelStyleFilteringComponent(fix);
1002+
public static getExcelStyleSearchComponent(fix, menu = null, grid = 'igx-grid') {
1003+
const excelMenu = menu ? menu : GridFunctions.getExcelStyleFilteringComponent(fix, grid);
10041004
const searchComponent = excelMenu.querySelector('.igx-excel-filter__menu-main');
10051005
return searchComponent;
10061006
}
@@ -1011,13 +1011,13 @@ export class GridFunctions {
10111011
return scrollbar;
10121012
}
10131013

1014-
public static getExcelStyleSearchComponentInput(fix, comp = null): HTMLInputElement {
1015-
const searchComponent = comp ? comp : GridFunctions.getExcelStyleSearchComponent(fix);
1014+
public static getExcelStyleSearchComponentInput(fix, comp = null, grid = 'igx-grid'): HTMLInputElement {
1015+
const searchComponent = comp ? comp : GridFunctions.getExcelStyleSearchComponent(fix, null, grid);
10161016
return searchComponent.querySelector('.igx-input-group__input');
10171017
}
10181018

1019-
public static getExcelStyleSearchComponentListItems(fix, comp = null): HTMLElement[] {
1020-
const searchComponent = comp ? comp : GridFunctions.getExcelStyleSearchComponent(fix);
1019+
public static getExcelStyleSearchComponentListItems(fix, comp = null, grid = 'igx-grid'): HTMLElement[] {
1020+
const searchComponent = comp ? comp : GridFunctions.getExcelStyleSearchComponent(fix, null, grid);
10211021
return GridFunctions.sortNativeElementsVertically(Array.from(searchComponent.querySelectorAll('igx-list-item')));
10221022
}
10231023

@@ -1173,8 +1173,8 @@ export class GridFunctions {
11731173
return loadingIndicator;
11741174
}
11751175

1176-
public static getColumnCells(fix, columnKey) {
1177-
const allCells = fix.debugElement.queryAll(By.css('igx-grid-cell'));
1176+
public static getColumnCells(fix, columnKey, gridCell = 'igx-grid-cell') {
1177+
const allCells = fix.debugElement.queryAll(By.css(gridCell));
11781178
return allCells.filter((cell) => cell.componentInstance.column.field === columnKey);
11791179
}
11801180

0 commit comments

Comments
 (0)