fix(grid): allowing for grids in grids for master-detail - 20.0 (#15876)

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -6739,7 +6739,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
     protected getColumnList() {
-        return this.columnList.toArray();
+        return this.columnList.toArray().filter((col) => col.grid === this);
     }
 
     /**
@@ -6797,6 +6797,9 @@ export abstract class IgxGridBaseDirective implements GridType,
             let removed = false;
             let pinning = false;
             diff.forEachAddedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
+                if (record.item.grid !== this) {
+                    return;
+                }
                 added = true;
                 if (record.item.pinned) {
                     this._pinnedColumns.push(record.item);
@@ -6806,12 +6809,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<IgxColumnComponent | IgxColumnGroupComponent>) => {
+                if (record.item.grid !== this) {
+                    return;
+                }
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
                     // Clear Grouping

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
         </div>
     </ng-template>
+    <ng-template igxGridDetail #gridTemplate>
+        <igx-grid #childGrid>
+            <igx-column [field]="'ColA'" [width]="'400px'"></igx-column>
+            <igx-column [field]="'ColB'" [width]="'400px'"></igx-column>
+        </igx-grid>
+    </ng-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<any>;
 
+    @ViewChild('gridTemplate', { read: TemplateRef, static: true })
+    public gridTemplate: TemplateRef<any>;
+
+    @ViewChildren('childGrid', { read: IgxGridComponent })
+    public childGrid: IgxGridComponent;
+
     public width = '800px';
     public height = '500px';
     public data = SampleTestData.contactInfoDataFull();