fix(datagrid): previously hidden columns visible after detail close

projects/angular/clarity.api.md

@@ -5227,6 +5227,8 @@ export class ÇlrDatagridMainRenderer implements AfterContentInit, AfterViewInit
  // (undocumented)
  ngOnDestroy(): void;
  // (undocumented)
+ ngOnInit(): void;
+ // (undocumented)
  toggleDetailPane(state: boolean): void;
  // (undocumented)
  static ɵdir: i0.ɵɵDirectiveDeclaration<ÇlrDatagridMainRenderer, "clr-datagrid", never, {}, {}, ["headers", "rows"], never, false, never>;

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

@@ -280,8 +280,11 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
  */
  if (row) {
  this.detailService.open(row.item, row.detailButton.nativeElement);
- } else if (!this.hasVirtualScroller || !row) {
- this.detailService.close();
+ } else if (!this.hasVirtualScroller) {
+ // Using setTimeout to make sure the inner cycles in rows are done
+ setTimeout(() => {
+ this.detailService.close();
+ });
  }
  }
 

projects/angular/src/data/datagrid/enums/column-changes.enum.ts

@@ -13,4 +13,4 @@ export enum DatagridColumnChanges {
 
 export const ALL_COLUMN_CHANGES: DatagridColumnChanges[] = Object.keys(DatagridColumnChanges)
  .map(key => (DatagridColumnChanges as Record<string, any>)[key])
- .filter(key => key === parseInt(key, 10)); // extracts only integer keys
+ .filter(key => key === parseInt(key, 10) && key !== DatagridColumnChanges.INITIALIZE); // extracts only integer keys

projects/angular/src/data/datagrid/providers/columns.service.ts

@@ -14,6 +14,7 @@ import { ColumnState, ColumnStateDiff } from '../interfaces/column-state.interfa
 @Injectable()
 export class ColumnsService {
  columns: BehaviorSubject<ColumnState>[] = [];
+ columnsStateChange: BehaviorSubject<ColumnState> = new BehaviorSubject(null);
 
  private _cache: ColumnState[] = [];
 
@@ -40,7 +41,9 @@ export class ColumnsService {
  resetToLastCache() {
  this._cache.forEach((state, index) => {
  // Just emit the exact value from the cache
- this.columns[index].next({ ...state, changes: ALL_COLUMN_CHANGES });
+ const cachedState = { ...state, changes: ALL_COLUMN_CHANGES };
+ this.columns[index].next(cachedState);
+ this.columnsStateChange.next(cachedState);
  });
  this._cache = [];
  }
@@ -54,6 +57,8 @@ export class ColumnsService {
  }
 
  emitStateChange(column: BehaviorSubject<ColumnState>, diff: ColumnStateDiff) {
- column.next({ ...column.value, ...diff });
+ const changedState = { ...column.value, ...diff };
+ column.next(changedState);
+ this.columnsStateChange.next(changedState);
  }
 }

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

@@ -8,7 +8,6 @@
 import { Directive, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
-import { ALL_COLUMN_CHANGES } from '../enums/column-changes.enum';
 import { DatagridRenderStep } from '../enums/render-step.enum';
 import { ColumnState } from '../interfaces/column-state.interface';
 import { HIDDEN_COLUMN_CLASS, STRICT_WIDTH_CLASS } from './constants';
@@ -35,7 +34,6 @@ export class DatagridCellRenderer implements OnDestroy {
  }
 
  resetState(state: ColumnState) {
- state.changes = ALL_COLUMN_CHANGES;
  this.setWidth(state);
  this.setHidden(state);
  }

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

@@ -19,7 +19,7 @@ import {
  QueryList,
  Renderer2,
 } from '@angular/core';
-import { merge, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import { DomAdapter } from '../../../utils/dom-adapter/dom-adapter';
 import { DatagridColumnChanges } from '../enums/column-changes.enum';
@@ -97,6 +97,10 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
  this.subscriptions.push(this.items.change.subscribe(() => (this.shouldStabilizeColumns = true)));
  }
 
+ ngOnInit() {
+ this.columnsService.columnsStateChange.subscribe(change => this.columnStateChanged(change));
+ }
+
  ngAfterContentInit() {
  this.setupColumns();
 
@@ -109,7 +113,6 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
  this.stabilizeColumns();
  })
  );
- this.listenForColumnChanges();
  }
 
  // Initialize and set Table width for horizontal scrolling here.
@@ -155,7 +158,10 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
  private setupColumns() {
  this.headers.forEach((header, index) => header.setColumnState(index));
  this.columnsService.columns.splice(this.headers.length); // Trim any old columns
- this.rows.forEach(row => row.setCellsState());
+ // Sets columnIndex for each column
+ this.columnsService.columns.forEach((column, index) => {
+ this.columnsService.emitStateChange(column, { changes: [DatagridColumnChanges.INITIALIZE], columnIndex: index });
+ });
  }
 
  private shouldComputeHeight(): boolean {
@@ -220,14 +226,18 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
  }
 
  private columnStateChanged(state) {
+ // eslint-disable-next-line eqeqeq
+ if (!this.headers || state.columnIndex == null) {
+ return;
+ }
  const columnIndex = state.columnIndex;
  if (state.changes && state.changes.length) {
  state.changes.forEach(change => {
  switch (change) {
  case DatagridColumnChanges.WIDTH:
  this.headers.get(columnIndex).setWidth(state);
  this.rows.forEach(row => {
- if (row.cells && row.cells.length) {
+ if (row?.cells.length === this.columnsService.columns.length) {
  row.cells.get(columnIndex).setWidth(state);
  }
  });
@@ -244,6 +254,9 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
  case DatagridColumnChanges.INITIALIZE:
  if (state.hideable && state.hidden) {
  this.headers.get(columnIndex).setHidden(state);
+ this.rows.forEach(row => {
+ row.setCellsState();
+ });
  }
  break;
  default:
@@ -253,18 +266,6 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
  }
  }
 
- private listenForColumnChanges() {
- this.columnsService.columns.forEach((column, index) => {
- this.columnsService.emitStateChange(column, { changes: [DatagridColumnChanges.INITIALIZE], columnIndex: index });
- });
- /* 
- Merges all column subject so we can track them at once
- and receive only the changed column as result
- */
- const columnChanges = merge(...this.columnsService.columns);
- this.subscriptions.push(columnChanges.subscribe(change => this.columnStateChanged(change)));
- }
-
  /**
  * Triggers a whole re-rendring cycle to set column sizes, if needed.
  */