fix(datagrid): propagate cell rendering changes only to owned rows

projects/angular/clarity.api.md

@@ -5425,13 +5425,15 @@ export class ÇlrDatagridRowRenderer implements AfterContentInit, OnDestroy {
     // (undocumented)
     cells: QueryList<ÇlrDatagridCellRenderer>;
     // (undocumented)
+    expandableRow: ÇlrDatagridRowRenderer;
+    // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     setCellsState(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ÇlrDatagridRowRenderer, "clr-dg-row, clr-dg-row-detail", never, {}, {}, ["cells"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ÇlrDatagridRowRenderer, "clr-dg-row, clr-dg-row-detail", never, {}, {}, ["expandableRow", "cells"], never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ÇlrDatagridRowRenderer, never>;
 }

projects/angular/src/data/datagrid/datagrid.spec.ts

@@ -411,23 +411,37 @@ class ProjectionTest {
   template: `
     <clr-datagrid>
       <clr-dg-column>
-        <ng-container *clrDgHideableColumn="{ hidden: true }">First</ng-container>
+        <ng-container *clrDgHideableColumn="{ hidden: firstColumnHidden }">First</ng-container>
       </clr-dg-column>
       <clr-dg-column>Second</clr-dg-column>
 
       <clr-dg-row *ngFor="let item of items">
         <clr-dg-cell>{{ item }}</clr-dg-cell>
         <clr-dg-cell>{{ item * item }}</clr-dg-cell>
-        <clr-dg-row-detail *clrIfExpanded="true" [clrDgReplace]="true">
-          <clr-dg-cell class="hidden-cell">{{ item }} (col 1 detail)</clr-dg-cell>
+        <clr-dg-row-detail *clrIfExpanded="true" [clrDgReplace]="replaceCells">
+          <clr-dg-cell class="first-expandable-row-cell">{{ item }} (col 1 detail)</clr-dg-cell>
           <clr-dg-cell>{{ item * item }} detail (col 2 detail)</clr-dg-cell>
         </clr-dg-row-detail>
       </clr-dg-row>
+
+      <ng-template [(clrIfDetail)]="detailItem">
+        <clr-dg-detail>
+          <clr-datagrid>
+            <clr-dg-column>Detail Column</clr-dg-column>
+            <clr-dg-row>
+              <clr-dg-cell class="nested-datagrid-cell">Detail Cell</clr-dg-cell>
+            </clr-dg-row>
+          </clr-datagrid>
+        </clr-dg-detail>
+      </ng-template>
     </clr-datagrid>
   `,
 })
-class ExpandedReplacedCellsTest {
+class ExpandedCellsTest {
   items = [1, 2, 3];
+  detailItem = null;
+  replaceCells = false;
+  firstColumnHidden = false;
 }
 
 @Component({
@@ -784,14 +798,50 @@ export default function (): void {
         expect(rowDetail).not.toBeNull();
       }));
 
-      it('hides cells in dg-row-detail when columns are hidden and rows are replaced', function () {
-        const context = this.create(ClrDatagrid, ExpandedReplacedCellsTest);
+      it('hides cells in dg-row-detail when column is hidden and rows are replaced', function () {
+        const context = this.create(ClrDatagrid, ExpandedCellsTest);
+        context.testComponent.replaceCells = true;
+        context.testComponent.firstColumnHidden = true;
         context.detectChanges();
-        const hiddenCell: HTMLElement = context.clarityElement.querySelector('.hidden-cell');
+
+        const hiddenCell: HTMLElement = context.clarityElement.querySelector('.first-expandable-row-cell');
         expect(hiddenCell.classList).toContain(HIDDEN_COLUMN_CLASS);
         expect(window.getComputedStyle(hiddenCell).display).toBe('none');
       });
 
+      it('shows cells in dg-row-detail when column is shown and rows are replaced', function () {
+        const context = this.create(ClrDatagrid, ExpandedCellsTest);
+        context.testComponent.replaceCells = true;
+        context.testComponent.firstColumnHidden = false;
+        context.detectChanges();
+
+        const hiddenCell: HTMLElement = context.clarityElement.querySelector('.first-expandable-row-cell');
+        expect(hiddenCell.classList).not.toContain(HIDDEN_COLUMN_CLASS);
+        expect(window.getComputedStyle(hiddenCell).display).toBe('block');
+      });
+
+      // regression test for CDE-2199
+      it('does not hide cells in nested datagrid', function () {
+        const context = this.create(ClrDatagrid, ExpandedCellsTest);
+        context.testComponent.firstColumnHidden = false;
+        context.testComponent.detailItem = context.testComponent.items[0];
+        context.detectChanges();
+
+        // It is important to hide column after first render for this test.
+        context.testComponent.firstColumnHidden = true;
+        context.detectChanges();
+
+        // The expandable row cell should be hidden.
+        const firstExpandableRowCell: HTMLElement = context.clarityElement.querySelector('.first-expandable-row-cell');
+        expect(firstExpandableRowCell.classList).toContain(HIDDEN_COLUMN_CLASS);
+        expect(window.getComputedStyle(firstExpandableRowCell).display).toBe('none');
+
+        // The nested datagrid cell should not be hidden.
+        const nestedDatagridCell: HTMLElement = context.clarityElement.querySelector('.nested-datagrid-cell');
+        expect(nestedDatagridCell.classList).not.toContain(HIDDEN_COLUMN_CLASS);
+        expect(window.getComputedStyle(nestedDatagridCell).display).toBe('block');
+      });
+
       it('can render mixed expandable/non-expandable', function () {
         const context = this.create(ClrDatagrid, MixedExpandableRowTest);
         const caretIcons = context.clarityElement.querySelectorAll('.datagrid-expandable-caret-icon');

projects/angular/src/data/datagrid/render/main-renderer.ts

@@ -54,7 +54,7 @@ export const domAdapterFactory = (platformId: any) => {
 })
 export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy {
   @ContentChildren(DatagridHeaderRenderer) private headers: QueryList<DatagridHeaderRenderer>;
-  @ContentChildren(DatagridRowRenderer, { descendants: true }) private rows: QueryList<DatagridRowRenderer>; // if expandable row is expanded initially, query its cells too.
+  @ContentChildren(DatagridRowRenderer) private rows: QueryList<DatagridRowRenderer>;
 
   private _heightSet = false;
   private shouldStabilizeColumns = true;
@@ -239,6 +239,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
             this.rows.forEach(row => {
               if (row?.cells.length === this.columnsService.columns.length) {
                 row.cells.get(columnIndex).setWidth(state);
+                row.expandableRow?.cells.get(columnIndex)?.setWidth(state);
               }
             });
             break;
@@ -247,6 +248,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
             this.rows.forEach(row => {
               if (row.cells && row.cells.length) {
                 row.cells.get(columnIndex).setHidden(state);
+                row.expandableRow?.cells.get(columnIndex)?.setHidden(state);
               }
             });
             this.keyNavigation.resetKeyGrid();
@@ -256,6 +258,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
               this.headers.get(columnIndex).setHidden(state);
               this.rows.forEach(row => {
                 row.setCellsState();
+                row.expandableRow?.setCellsState();
               });
             }
             break;

projects/angular/src/data/datagrid/render/row-renderer.ts

@@ -5,7 +5,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { AfterContentInit, ContentChildren, Directive, OnDestroy, QueryList } from '@angular/core';
+import {
+  AfterContentInit,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  forwardRef,
+  OnDestroy,
+  QueryList,
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { ColumnsService } from '../providers/columns.service';
@@ -16,6 +24,7 @@ import { DatagridCellRenderer } from './cell-renderer';
 })
 export class DatagridRowRenderer implements AfterContentInit, OnDestroy {
   @ContentChildren(DatagridCellRenderer) cells: QueryList<DatagridCellRenderer>;
+  @ContentChild(forwardRef(() => DatagridRowRenderer)) expandableRow: DatagridRowRenderer;
 
   private subscriptions: Subscription[] = [];