diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 310089d1688..b28a7b8d88b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6738,7 +6738,7 @@ export abstract class IgxGridBaseDirective implements GridType, } protected getColumnList() { - return this.columnList.toArray(); + return this.columnList.toArray().filter((col) => col.grid === this); } /** @@ -6796,6 +6796,9 @@ export abstract class IgxGridBaseDirective implements GridType, let removed = false; let pinning = false; diff.forEachAddedItem((record: IterableChangeRecord) => { + if (record.item.grid !== this) { + return; + } added = true; if (record.item.pinned) { this._pinnedColumns.push(record.item); @@ -6805,12 +6808,15 @@ export abstract class IgxGridBaseDirective implements GridType, } }); - this.initColumns(this.columnList.toArray(), (col: IgxColumnComponent) => this.columnInit.emit(col)); + this.initColumns(this.getColumnList(), (col: IgxColumnComponent) => this.columnInit.emit(col)); if (pinning) { this.initPinning(); } diff.forEachRemovedItem((record: IterableChangeRecord) => { + if (record.item.grid !== this) { + return; + } const isColumnGroup = record.item instanceof IgxColumnGroupComponent; if (!isColumnGroup) { // Clear Grouping diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index 059c522d602..e560be34e71 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, OnInit, DebugElement, QueryList, TemplateRef } from '@angular/core'; +import { Component, ViewChild, OnInit, DebugElement, QueryList, TemplateRef, ContentChild, ViewChildren } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; @@ -358,6 +358,16 @@ describe('IgxGrid Master Detail #grid', () => { const firstDetail = GridFunctions.getMasterRowDetail(gridRows[0]); expect(firstDetail.textContent.trim()).toBe('NEW TEMPLATE'); }); + + it('should allow grids in details view without breaking the column collection of the master grid', () => { + grid = fix.componentInstance.grid; + grid.detailTemplate = fix.componentInstance.gridTemplate; + fix.detectChanges(); + grid.toggleRow(fix.componentInstance.data[0].ID); + fix.detectChanges(); + expect(grid.unpinnedColumns.map(c => c.field)).toEqual(['ContactName', 'CompanyName']); + expect(fix.componentInstance.childGrid.first.unpinnedColumns.map(c => c.field)).toEqual(['ColA', 'ColB']); + }); }); describe('Keyboard Navigation ', () => { @@ -1282,6 +1292,12 @@ describe('IgxGrid Master Detail #grid', () => { NEW TEMPLATE + + + + + + `, imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxCheckboxComponent, IgxPaginatorComponent, IgxInputGroupComponent, IgxInputDirective] }) @@ -1292,6 +1308,12 @@ export class DefaultGridMasterDetailComponent { @ViewChild('detailTemplate', { read: TemplateRef, static: true }) public detailTemplate: TemplateRef; + @ViewChild('gridTemplate', { read: TemplateRef, static: true }) + public gridTemplate: TemplateRef; + + @ViewChildren('childGrid', { read: IgxGridComponent }) + public childGrid: IgxGridComponent; + public width = '800px'; public height = '500px'; public data = SampleTestData.contactInfoDataFull();