chore(*): Make sure elements specific events re-emit for row island.

Author: MayaKirova

projects/igniteui-angular-elements/src/index.html

@@ -527,6 +527,9 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
             </igc-grid-toolbar-actions>
         </igc-grid-toolbar>
     `;
+    virtualMachinesRowIsland.addEventListener('columnsAutogenerated', (e) => {
+        console.log('columns autogenerated for VirtualMachinesRowIsland', e);
+    });
     </script>
 
     <igc-grid auto-generate="false" id="mergedGrid" cell-merge-mode="always" width="100%" height="570px">

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

@@ -1,5 +1,5 @@
 
-import { ChangeDetectionStrategy, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, QueryList } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, QueryList, reflectComponentType, ViewChildren } from '@angular/core';
 import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 
 import { IgxHierarchicalGridAPIService } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-api.service';
@@ -29,10 +29,82 @@ import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxActionStripToken, IgxOverlayOutletDirective } from 'igniteui-angular/core';
 import { IgxGridCellMergePipe, IgxGridFilteringPipe, IgxGridSortingPipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid';
-import { IgxChildGridRowComponent, IgxHierarchicalGridComponent as IgxHierarchicalGrid } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component';
+import { IgxChildGridRowComponent as IgxChildGridRow, IgxHierarchicalGridComponent as IgxHierarchicalGrid } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component';
 import { IgxRowIslandComponent } from './row-island.component';
 import { IColumnsAutoGeneratedEventArgs } from './events';
 
+
+/**
+ * @hidden @internal
+ */
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'igx-child-grid-row',
+    templateUrl: '../../../../igniteui-angular/grids/hierarchical-grid/src/child-grid-row.component.html',
+    imports: [NgClass]
+})
+export class IgxChildGridRowComponent extends IgxChildGridRow {
+
+    /**
+     * @hidden
+     */
+    public override hGrid: IgxHierarchicalGridComponent;
+
+    /**
+     * @hidden
+     */
+    public override ngOnInit() {
+        const ref = this.container.createComponent(IgxHierarchicalGridComponent, { injector: this.container.injector });
+        this.hGrid = ref.instance;
+        this.hGrid.setDataInternal(this.data.childGridsData[this.layout.key]);
+        this.hGrid.nativeElement["__componentRef"] = ref;
+        this.layout.layoutChange.subscribe((ch) => {
+            this._handleLayoutChanges(ch);
+        });
+        const changes = this.layout.initialChanges;
+        changes.forEach(change => {
+            this._handleLayoutChanges(change);
+        });
+        this.hGrid.parent = this.parentGrid;
+        this.hGrid.parentIsland = this.layout;
+        this.hGrid.childRow = this;
+        // handler logic that re-emits hgrid events on the row island
+        this.setupEventEmitters();
+        this.layout.gridCreated.emit({
+            owner: this.layout,
+            parentID: this.data.rowID,
+            grid: this.hGrid,
+            parentRowData: this.data.parentRowData,
+        });
+    }
+
+    protected override setupEventEmitters() {
+        const destructor = takeUntil(this.hGrid.destroy$);
+        // use wc type so that it includes elements specific events: childrenResolved, columnsAutogenerated, etc.
+        const mirror = reflectComponentType(IgxHierarchicalGridComponent);
+        // exclude outputs related to two-way binding functionality
+        const inputNames = mirror.inputs.map(input => input.propName);
+        const outputs = mirror.outputs.filter(o => {
+            const matchingInputPropName = o.propName.slice(0, o.propName.indexOf('Change'));
+            return inputNames.indexOf(matchingInputPropName) === -1;
+        });
+
+        // TODO: Skip the `rendered` output. Rendered should be called once per grid.
+        outputs.filter(o => o.propName !== 'rendered').forEach(output => {
+            if (this.hGrid[output.propName]) {
+                this.hGrid[output.propName].pipe(destructor).subscribe((args) => {
+                    if (!args) {
+                        args = {};
+                    }
+                    args.owner = this.hGrid;
+                    this.layout[output.propName].emit(args);
+                });
+            }
+        });
+    }
+
+}
+
 /* blazorAdditionalDependency: Column */
 /* blazorAdditionalDependency: ColumnGroup */
 /* blazorAdditionalDependency: ColumnLayout */
@@ -123,6 +195,12 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGrid {
         });
     }
 
+    /**
+     * @hidden
+     */
+    @ViewChildren(IgxChildGridRowComponent)
+    public override hierarchicalRows: QueryList<IgxChildGridRowComponent>;
+
     /**
      * @hidden
      * @internal

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

@@ -211,7 +211,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
         this.hGrid.cdr.detectChanges();
     }
 
-    private setupEventEmitters() {
+    protected setupEventEmitters() {
         const destructor = takeUntil(this.hGrid.destroy$);
 
         const mirror = reflectComponentType(IgxGridComponent);
@@ -237,7 +237,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
     }
 
 
-    private _handleLayoutChanges(changes: SimpleChanges) {
+    protected _handleLayoutChanges(changes: SimpleChanges) {
         for (const change in changes) {
             if (changes.hasOwnProperty(change)) {
                 this.hGrid[change] = changes[change].currentValue;