diff --git a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts index c90cb47014e..4ca64e19e49 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts @@ -1065,7 +1065,7 @@ export class IgxForOfDirective extends IgxForOfToken node.nodeType === Node.ELEMENT_NODE) || embView.rootNodes[0].nextElementSibling); const view = container.detach(0); - + view.detectChanges(); this.updateTemplateContext(embView.context, i); container.insert(view); this._embeddedViews.push(embView); @@ -1085,7 +1085,7 @@ export class IgxForOfDirective extends IgxForOfToken node.nodeType === Node.ELEMENT_NODE) || embView.rootNodes[0].nextElementSibling); const view = container.detach(container.length - 1); - + view.detectChanges(); this.updateTemplateContext(embView.context, i); container.insert(view, 0); this._embeddedViews.unshift(embView); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html index 03b1f6c872d..cbc9fc39999 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html @@ -276,3 +276,8 @@ } + + + + diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index fb4c2f4aa85..eb934967039 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -36,6 +36,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; import { EntityType, FieldType, IFilteringExpressionsTree, IgxActionStripToken, IgxOverlayOutletDirective, flatten, IGridResourceStrings } from 'igniteui-angular/core'; import { IgxPaginatorToken } from 'igniteui-angular/paginator'; import { IgxGridCellMergePipe, IgxGridComponent, IgxGridFilteringPipe, IgxGridSortingPipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid'; +import { registerLifecyclePlaceholderElement } from './lifecycle-placeholder-element'; let NEXT_ID = 0; @@ -662,6 +663,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti * @hidden */ public override ngOnInit() { + if (this.platform.isBrowser) { + registerLifecyclePlaceholderElement(); + } // this.expansionStatesChange.pipe(takeUntil(this.destroy$)).subscribe((value: Map) => { // const res = Array.from(value.entries()).filter(({1: v}) => v === true).map(([k]) => k); // }); @@ -674,6 +678,26 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti super.ngOnInit(); } + // Event that triggers when element gets connected back to the DOM. + // Used to determine when to reopen a previously closed row editing overlay. + protected onLifecyclePlaceholderConnected(): void { + if (this.rowEditable && this.crudService.rowInEditMode && this.rowEditingOverlay && + this.rowEditingOverlay.collapsed) { + // Row is in edit mode, but overlay is closed - reopen. + this.openRowOverlay(this.crudService.rowInEditMode.id); + } + + } + + // Event that triggers when element gets disconnected from the DOM, for example as a result of virtualization or caching. + // Used to determine when to close the row editing overlay. + protected onLifecyclePlaceholderDisconnected(): void { + if (this.rowEditable && this.crudService.rowInEditMode && this.rowEditingOverlay) { + // disconnected from DOM (possibly cached) & row was in edit mode - close overlay. + this.closeRowEditingOverlay(); + } + } + /** * @hidden */ @@ -1232,15 +1256,15 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti { name: null, fields: filterableFields.map(f => ({ - field: f.field, - dataType: f.dataType, - header: f.header, - editorOptions: f.editorOptions, - filters: f.filters, - pipeArgs: f.pipeArgs, - defaultTimeFormat: f.defaultTimeFormat, - defaultDateTimeFormat: f.defaultDateTimeFormat - })) as FieldType[] + field: f.field, + dataType: f.dataType, + header: f.header, + editorOptions: f.editorOptions, + filters: f.filters, + pipeArgs: f.pipeArgs, + defaultTimeFormat: f.defaultTimeFormat, + defaultDateTimeFormat: f.defaultDateTimeFormat + })) as FieldType[] } ]; @@ -1249,7 +1273,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti this.data[0][rowIsland.key][0] : null; return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData)); } - , []); + , []); } return entities; diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/lifecycle-placeholder-element.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/lifecycle-placeholder-element.ts new file mode 100644 index 00000000000..e22c54aaee2 --- /dev/null +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/lifecycle-placeholder-element.ts @@ -0,0 +1,23 @@ +const LIFECYCLE_PLACEHOLDER_TAG = 'igc-lifecycle-placeholder'; +const LIFECYCLE_CONNECTED_EVENT = 'igcConnected'; +const LIFECYCLE_DISCONNECTED_EVENT = 'igcDisconnected'; + +/** @hidden @internal */ +export function registerLifecyclePlaceholderElement(): void { + if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined' || + typeof CustomEvent === 'undefined' || customElements.get(LIFECYCLE_PLACEHOLDER_TAG)) { + return; + } + + class LifecyclePlaceholderElement extends HTMLElement { + public connectedCallback(): void { + this.dispatchEvent(new CustomEvent(LIFECYCLE_CONNECTED_EVENT)); + } + + public disconnectedCallback(): void { + this.dispatchEvent(new CustomEvent(LIFECYCLE_DISCONNECTED_EVENT)); + } + } + + customElements.define(LIFECYCLE_PLACEHOLDER_TAG, LifecyclePlaceholderElement); +} diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 81ee690a48f..45835fc2cf3 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -146,12 +146,12 @@

Sample two

- - - +