fix(hgrid): add and use lifecycle placeholder for grid connection eve… (#17242)

* fix(hgrid): add and use lifecycle placeholder for grid connection events.

* chore(*): Fix virtualization issue with change detection.

* chore(*): Apply review comments.

* chore(*): Remove duplicate detectChange.

* chore(*): Remove the other duplicate detect.

---------

Co-authored-by: Konstantin Dinev <kdinev@infragistics.com>

Author: MayaKirova

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -1065,7 +1065,6 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
                 this.scrollFocus(embView.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE)
                     || embView.rootNodes[0].nextElementSibling);
                 const view = container.detach(0);
-                // embView and view both refer to the same collections
                 this.updateTemplateContext(embView.context, i);
 
                 // Because in Elements the whole parent div (containing data-index) gets removed (possibly due to being disconnected). In Angular it just gets moved.
@@ -1091,7 +1090,6 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
                     || embView.rootNodes[0].nextElementSibling);
                 // embView and view both refer to the same collections
                 const view = container.detach(container.length - 1);
-
                 this.updateTemplateContext(embView.context, i);
                 view.detectChanges();
 

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html

@@ -276,3 +276,8 @@
     <ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
     <ng-content select="igx-row-island,igc-row-island"></ng-content>
 }
+
+ <!-- Lifecycle placeholder used to determine when the grid gets connected/disconnected from the DOM, for example as a result of virtualization or caching. -->
+<igc-lifecycle-placeholder (igcConnected)="onLifecyclePlaceholderConnected()"
+    (igcDisconnected)="onLifecyclePlaceholderDisconnected()">
+</igc-lifecycle-placeholder>

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<any, boolean>) => {
         //     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
      */
@@ -1254,15 +1278,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[]
                 }
             ];
 
@@ -1271,7 +1295,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
                     this.data[0][rowIsland.key][0] : null;
                 return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData));
             }
-            , []);
+                , []);
         }
 
         return entities;

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);
+}

src/app/hierarchical-grid/hierarchical-grid.sample.html

@@ -150,12 +150,12 @@ <h4 class="sample-title">Sample two</h4>
                 <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>
-        <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
+        <igx-row-island [rowEditable]="true" [primaryKey]="'ID'" [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
             [allowFiltering]="true">
-            <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
+            <igx-row-island [rowEditable]="true" [primaryKey]="'ID'" [key]="'childData'" [autoGenerate]="true" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
                 [allowFiltering]="true"></igx-row-island>
         </igx-row-island>
-        <igx-row-island [key]="'childData2'" [autoGenerate]="true" [allowFiltering]="true"></igx-row-island>
+        <igx-row-island [rowEditable]="true" [primaryKey]="'ID'" [key]="'childData2'" [autoGenerate]="true" [allowFiltering]="true"></igx-row-island>
     </igx-hierarchical-grid>