Skip to content

Commit f29d95f

Browse files
authored
Merge branch 'master' into mkirova/fix-5478-8.2.x
2 parents 4f5e847 + d497969 commit f29d95f

File tree

4 files changed

+52
-2
lines changed

4 files changed

+52
-2
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
436436

437437
protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
438438
this.updateColumnList();
439-
const cols = change.filter(c => c.grid === this);
439+
const cols = change.filter(c => c.gridAPI.grid === this);
440440
if (cols.length > 0) {
441441
this.columnList.reset(cols);
442442
super.onColumnsChanged(this.columnList);

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -906,6 +906,30 @@ describe('IgxHierarchicalGrid Template Changing Scenarios', () => {
906906
expect(child2Headers[2].nativeElement.innerText).toEqual('Col1');
907907
});
908908

909+
it('should render correct columns when setting columns for parent and child post init using ngFor', () => {
910+
const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
911+
UIInteractions.clickElement(row.expander);
912+
fixture.detectChanges();
913+
914+
const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
915+
const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
916+
917+
fixture.componentInstance.parentCols = ['Col1', 'Col2'];
918+
fixture.componentInstance.islandCols1 = ['ID', 'ProductName', 'Col1'];
919+
fixture.detectChanges();
920+
// check parent cols
921+
expect(hierarchicalGrid.columns.length).toBe(4);
922+
expect(hierarchicalGrid.columns[0].field).toBe('ID');
923+
expect(hierarchicalGrid.columns[1].field).toBe('ProductName');
924+
expect(hierarchicalGrid.columns[2].field).toBe('Col1');
925+
expect(hierarchicalGrid.columns[3].field).toBe('Col2');
926+
// check child cols
927+
expect(child1Grid.columns.length).toBe(3);
928+
expect(hierarchicalGrid.columns[0].field).toBe('ID');
929+
expect(hierarchicalGrid.columns[1].field).toBe('ProductName');
930+
expect(hierarchicalGrid.columns[2].field).toBe('Col1');
931+
});
932+
909933
it('should update columns for expanded child when adding column to row island', () => {
910934
const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
911935
UIInteractions.clickElement(row.expander);
@@ -1206,6 +1230,7 @@ export class IgxHGridRemoteOnDemandComponent {
12061230
<igx-hierarchical-grid #hierarchicalGrid [data]="data" [autoGenerate]="false" [height]="'500px'" [width]="'800px'" >
12071231
<igx-column field="ID"></igx-column>
12081232
<igx-column field="ProductName"></igx-column>
1233+
<igx-column *ngFor="let colField of parentCols" [field]="colField"></igx-column>
12091234
<igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland [height]="'350px'">
12101235
<igx-column *ngFor="let colField of islandCols1" [field]="colField"></igx-column>
12111236
<igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland2 [height]="'200px'">
@@ -1217,6 +1242,7 @@ export class IgxHGridRemoteOnDemandComponent {
12171242
export class IgxHierarchicalGridColumnsUpdateComponent extends IgxHierarchicalGridTestBaseComponent implements AfterViewInit {
12181243
public cols1 = ['ID', 'ProductName', 'Col1', 'Col2', 'Col3'];
12191244
public cols2 = ['ID', 'ProductName', 'Col1'];
1245+
public parentCols = [];
12201246
public islandCols1 = [];
12211247
public islandCols2 = [];
12221248
constructor(public cdr: ChangeDetectorRef) {

src/app/hierarchical-grid/hierarchical-grid.sample.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ <h4 class="sample-title">Sample three</h4>
6666
<igx-hierarchical-grid [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
6767

6868
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true' >
69-
<div *ngIf='riToggle'>
69+
<div *ngIf='riToggle'>
7070
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true'></igx-row-island>
7171
</div>
7272
</igx-row-island>
@@ -81,5 +81,20 @@ <h4 class="sample-title">Sample three</h4>
8181
</div> -->
8282
</igx-hierarchical-grid>
8383

84+
<h4 class="sample-title">Sample 4</h4>
85+
<div class="sample-actions">
86+
<button igxButton="raised" (click)='LoadMoreColumns()'>Change columns runtime</button>
87+
</div>
88+
<igx-hierarchical-grid [data]="localData" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
89+
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
90+
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
91+
<igx-column field="ProductName" hasSummary='true'></igx-column>
92+
<igx-column *ngFor="let c of columns" [field]="c"></igx-column>
93+
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable' [allowFiltering]='true'>
94+
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
95+
<igx-column *ngFor="let c of childColumns" [field]="c"></igx-column>
96+
</igx-row-island>
97+
</igx-hierarchical-grid>
98+
8499

85100
</div>

src/app/hierarchical-grid/hierarchical-grid.sample.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export class HierarchicalGridSampleComponent {
1515
displayDensities;
1616
riToggle = true;
1717

18+
19+
public columns;
20+
public childColumns;
21+
1822
@ViewChild('layout1', { static: true })
1923
layout1: IgxRowIslandComponent;
2024

@@ -96,4 +100,9 @@ export class HierarchicalGridSampleComponent {
96100
selectDensity(event) {
97101
this.density = this.displayDensities[event.index].label;
98102
}
103+
104+
public LoadMoreColumns() {
105+
this.columns = ['Col1', 'Col2', 'Col3'];
106+
this.childColumns = ['ChildCol1', 'ChildCol2'];
107+
}
99108
}

0 commit comments

Comments
 (0)