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

Author: MayaKirova

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-hgrid-lifecycle-placeholder (igcConnected)="onLifecyclePlaceholderConnected()"
+    (igcDisconnected)="onLifecyclePlaceholderDisconnected()">
+</igc-hgrid-lifecycle-placeholder>

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

@@ -38,6 +38,7 @@ import { IgxPaginatorToken } from 'igniteui-angular/paginator';
 import { IgxGridCellMergePipe, IgxGridComponent, IgxGridFilteringPipe, IgxGridSortingPipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid';
 
 let NEXT_ID = 0;
+const HGRID_LIFECYCLE_PLACEHOLDER_TAG = 'igc-hgrid-lifecycle-placeholder';
 
 /**
  * @hidden @internal
@@ -662,6 +663,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      * @hidden
      */
     public override ngOnInit() {
+        this.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 +676,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
      */
@@ -720,6 +742,24 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             this.parentIsland.showExpandAll : this.rootGrid.showExpandAll;
     }
 
+    private registerLifecyclePlaceholderElement(): void {
+        if (!this.platform.isBrowser || typeof customElements === 'undefined' || customElements.get(HGRID_LIFECYCLE_PLACEHOLDER_TAG)) {
+            return;
+        }
+
+        class IgxHierarchicalGridLifecyclePlaceholderElement extends HTMLElement {
+            public connectedCallback(): void {
+                this.dispatchEvent(new CustomEvent('igcConnected', { bubbles: true, composed: true }));
+            }
+
+            public disconnectedCallback(): void {
+                this.dispatchEvent(new CustomEvent('igcDisconnected', { bubbles: true, composed: true }));
+            }
+        }
+
+        customElements.define(HGRID_LIFECYCLE_PLACEHOLDER_TAG, IgxHierarchicalGridLifecyclePlaceholderElement);
+    }
+
     /**
      * @hidden
      */
@@ -1232,15 +1272,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 +1289,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
                     this.data[0][rowIsland.key][0] : null;
                 return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData));
             }
-            , []);
+                , []);
         }
 
         return entities;

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

@@ -146,12 +146,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>