fix(datagrid): check visibility for calculations (backport to 16.x) (#…

…1578)

Backport of #1577

---------

Co-authored-by: GitHub <noreply@github.com>

projects/angular/clarity.api.md

@@ -5236,7 +5236,7 @@ export class ÇlrDatagridHeaderRenderer implements OnDestroy {
 
 // @public (undocumented)
 export class ÇlrDatagridMainRenderer implements AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy {
-    constructor(organizer: DatagridRenderOrganizer, items: Items, page: Page, domAdapter: DomAdapter, el: ElementRef, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
+    constructor(datagrid: ClrDatagrid, organizer: DatagridRenderOrganizer, items: Items, page: Page, domAdapter: DomAdapter, el: ElementRef, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)

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

@@ -22,6 +22,7 @@ import {
 import { Subscription } from 'rxjs';
 
 import { DomAdapter } from '../../../utils/dom-adapter/dom-adapter';
+import { ClrDatagrid } from '../datagrid';
 import { DatagridColumnChanges } from '../enums/column-changes.enum';
 import { DatagridRenderStep } from '../enums/render-step.enum';
 import { ColumnStateDiff } from '../interfaces/column-state.interface';
@@ -68,6 +69,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   private columnsSizesStable = false;
 
   constructor(
+    private datagrid: ClrDatagrid,
     private organizer: DatagridRenderOrganizer,
     private items: Items,
     private page: Page,
@@ -121,7 +123,8 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   }
 
   ngAfterViewChecked() {
-    if (this.shouldStabilizeColumns) {
+    const datagridIsVisible = this.checkAndUpdateVisibility();
+    if (this.shouldStabilizeColumns && datagridIsVisible) {
       this.stabilizeColumns();
     }
     if (this.shouldComputeHeight()) {
@@ -281,4 +284,14 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
       this.columnsSizesStable = true;
     }
   }
+
+  private checkAndUpdateVisibility() {
+    if (this.el.nativeElement.offsetParent) {
+      // this.datagrid.datagrid.nativeElement.style.visibility = 'visible';
+      return true;
+    } else {
+      // this.datagrid.datagrid.nativeElement.style.visibility = 'hidden';
+      return false;
+    }
+  }
 }