diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md index bb1b58f658..a8e166cfe6 100644 --- a/projects/angular/clarity.api.md +++ b/projects/angular/clarity.api.md @@ -5230,6 +5230,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>; diff --git a/projects/angular/src/data/datagrid/datagrid.ts b/projects/angular/src/data/datagrid/datagrid.ts index 9715ca19a6..0f9b95ab26 100644 --- a/projects/angular/src/data/datagrid/datagrid.ts +++ b/projects/angular/src/data/datagrid/datagrid.ts @@ -280,10 +280,12 @@ export class ClrDatagrid implements AfterContentInit, AfterViewInit, On */ if (row) { this.detailService.open(row.item, row.detailButton.nativeElement); - } - // always keep open when virtual scroll is available otherwise close it - else if (!this.hasVirtualScroller) { - this.detailService.close(); + // always keep open when virtual scroll is available otherwise close it + } else if (!this.hasVirtualScroller) { + // Using setTimeout to make sure the inner cycles in rows are done + setTimeout(() => { + this.detailService.close(); + }); } } diff --git a/projects/angular/src/data/datagrid/enums/column-changes.enum.ts b/projects/angular/src/data/datagrid/enums/column-changes.enum.ts index bd4b488a63..de7da89bba 100644 --- a/projects/angular/src/data/datagrid/enums/column-changes.enum.ts +++ b/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)[key]) - .filter(key => key === parseInt(key, 10)); // extracts only integer keys + .filter(key => key === parseInt(key, 10) && key !== DatagridColumnChanges.INITIALIZE); // extracts only integer keys diff --git a/projects/angular/src/data/datagrid/providers/columns.service.ts b/projects/angular/src/data/datagrid/providers/columns.service.ts index 33510fe6b6..76f4d7cd0b 100644 --- a/projects/angular/src/data/datagrid/providers/columns.service.ts +++ b/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[] = []; + columnsStateChange: BehaviorSubject = 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, diff: ColumnStateDiff) { - column.next({ ...column.value, ...diff }); + const changedState = { ...column.value, ...diff }; + column.next(changedState); + this.columnsStateChange.next(changedState); } } diff --git a/projects/angular/src/data/datagrid/render/cell-renderer.ts b/projects/angular/src/data/datagrid/render/cell-renderer.ts index cd71fff9d4..7cf8b32bd1 100644 --- a/projects/angular/src/data/datagrid/render/cell-renderer.ts +++ b/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); } diff --git a/projects/angular/src/data/datagrid/render/main-renderer.ts b/projects/angular/src/data/datagrid/render/main-renderer.ts index caab7e0a64..cbf2cd87d3 100644 --- a/projects/angular/src/data/datagrid/render/main-renderer.ts +++ b/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,6 +226,10 @@ 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 => { @@ -227,7 +237,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af 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. */