Merge pull request #9995 from IgniteUI/pbozhinov/fix-9925

Enable row editing overlay customization for child-level records

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1123,14 +1123,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ContentChild(IgxRowEditTemplateDirective, { read: TemplateRef })
-    public rowEditCustom: TemplateRef<any>;
+    @ContentChildren(IgxRowEditTemplateDirective, { descendants: false, read: TemplateRef })
+    public rowEditCustomDirectives: QueryList<TemplateRef<any>>;
 
     /**
      * @hidden @internal
      */
-    @ContentChild(IgxRowEditTextDirective, { read: TemplateRef })
-    public rowEditText: TemplateRef<any>;
+    @ContentChildren(IgxRowEditTextDirective, { descendants: false, read: TemplateRef })
+    public rowEditTextDirectives: QueryList<TemplateRef<any>>;
 
     /**
      * @hidden @internal
@@ -1141,8 +1141,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ContentChild(IgxRowEditActionsDirective, { read: TemplateRef })
-    public rowEditActions: TemplateRef<any>;
+    @ContentChildren(IgxRowEditActionsDirective, { descendants: false, read: TemplateRef })
+    public rowEditActionsDirectives: QueryList<TemplateRef<any>>;
 
 
     /**
@@ -2197,6 +2197,36 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.outlet;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get rowEditCustom(): TemplateRef<any> {
+        if (this.rowEditCustomDirectives && this.rowEditCustomDirectives.first) {
+            return this.rowEditCustomDirectives.first;
+        }
+        return null;
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public get rowEditText(): TemplateRef<any> {
+        if (this.rowEditTextDirectives && this.rowEditTextDirectives.first) {
+            return this.rowEditTextDirectives.first;
+        }
+        return null;
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public get rowEditActions(): TemplateRef<any> {
+        if (this.rowEditActionsDirectives && this.rowEditActionsDirectives.first) {
+            return this.rowEditActionsDirectives.first;
+        }
+        return null;
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -184,7 +184,7 @@
 <div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
     <div [className]="bannerClass">
         <ng-container
-            *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }">
+            *ngTemplateOutlet="resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }">
         </ng-container>
     </div>
 </div>
@@ -199,15 +199,15 @@
     <div class="igx-banner__message">
         <span class="igx-banner__text">
             <ng-container
-                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;
+                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : resolveRowEditText || defaultRowEditText;
                 context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }">
             </ng-container>
         </span>
     </div>
     <div class="igx-banner__actions">
         <div class="igx-banner__row">
             <ng-container
-                *ngTemplateOutlet="rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
+                *ngTemplateOutlet="resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
             </ng-container>
         </div>
     </div>

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

@@ -328,6 +328,30 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         return !!this.childLayoutKeys.length;
     }
 
+    /**
+     * @hidden
+     */
+    public get resolveRowEditContainer() {
+        if (this.parentIsland && this.parentIsland.rowEditCustom) {
+            return this.parentIsland.rowEditContainer;
+        }
+        return this.rowEditContainer;
+    }
+
+    /**
+     * @hidden
+     */
+    public get resolveRowEditActions() {
+        return this.parentIsland ? this.parentIsland.rowEditActions : this.rowEditActions;
+    }
+
+    /**
+     * @hidden
+     */
+    public get resolveRowEditText() {
+        return this.parentIsland ? this.parentIsland.rowEditText : this.rowEditText;
+    }
+
     /** @hidden */
     public hideActionStrip() {
         if (!this.parent) {

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

@@ -1322,7 +1322,8 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
     configureTestSuite((() => {
         TestBed.configureTestingModule({
             declarations: [
-                IgxHierarchicalGridToggleRIComponent
+                IgxHierarchicalGridToggleRIComponent,
+                IgxHierarchicalGridCustomRowEditOverlayComponent
             ],
             imports: [
                 NoopAnimationsModule, IgxHierarchicalGridModule]
@@ -1405,6 +1406,55 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
 
     });
 
+    it(`Should apply template to both parent and child grids`, async () => {
+        const customFixture = TestBed.createComponent(IgxHierarchicalGridCustomRowEditOverlayComponent);
+        customFixture.detectChanges();
+        hierarchicalGrid = customFixture.componentInstance.hgrid;
+        hierarchicalGrid.primaryKey = 'ID';
+        hierarchicalGrid.rowEditable = true;
+
+        let cellElem = hierarchicalGrid.hgridAPI.get_cell_by_index(0, 'ProductName');
+        let row = hierarchicalGrid.gridAPI.get_row_by_index(0);
+
+        UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
+        customFixture.detectChanges();
+        expect(row.inEditMode).toBe(true);
+
+        const mainGridOverlay = GridFunctions.getRowEditingOverlay(customFixture);
+        expect(mainGridOverlay).not.toBeNull();
+
+        const mainGridOverlayTextContent = mainGridOverlay.querySelector('.igx-banner__text').textContent;
+        const mainGridOverlayActionsContent = mainGridOverlay.querySelector('.igx-banner__actions').textContent;
+
+        expect(mainGridOverlayTextContent).toBe(' You have 0 changes in this row\n');
+        expect(mainGridOverlayActionsContent).toBe('CancelDone');
+
+        hierarchicalGrid.expandRow(hierarchicalGrid.getRowByIndex(0).rowID);
+        customFixture.detectChanges();
+
+        const secondLevelGrid = hierarchicalGrid.hgridAPI.getChildGrids()[0];
+        expect(secondLevelGrid).not.toBeNull();
+        customFixture.detectChanges();
+
+        expect(GridFunctions.getRowEditingOverlay(customFixture)).toBeNull();
+
+        cellElem = secondLevelGrid.hgridAPI.get_cell_by_index(0, 'ProductName');
+        row = secondLevelGrid.gridAPI.get_row_by_index(0);
+
+        UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
+        customFixture.detectChanges();
+        expect(row.inEditMode).toBe(true);
+
+        const nestedGridOverlay = GridFunctions.getRowEditingOverlay(customFixture);
+        expect(nestedGridOverlay).not.toBeNull();
+
+        const nestedGridOverlayTextContent = nestedGridOverlay.querySelector('.igx-banner__text').textContent;
+        const nestedGridOverlayActionsContent = nestedGridOverlay.querySelector('.igx-banner__actions').textContent;
+
+        expect(nestedGridOverlayTextContent).toBe('Row Edit Text');
+        expect(nestedGridOverlayActionsContent).toBe('Row Edit Actions');
+    });
+
     it(`Should keep the overlay when scrolling an igxHierarchicalGrid with an opened 
             row island with <= 2 data records`, async () => {
         hierarchicalGrid.primaryKey = 'ID';
@@ -1845,3 +1895,26 @@ export class IgxHierarchicalGridHidingPinningColumnsComponent extends IgxHierarc
         col.hidden = true;
     }
 }
+
+@Component({
+    template: `
+    <igx-hierarchical-grid #grid1 [data]="data" [autoGenerate]="false"
+    [height]="'400px'" [width]="width" [rowEditable]="true" #hierarchicalGrid>
+     <igx-column field="ID"></igx-column>
+     <igx-column field="ProductName"></igx-column>
+        <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowEditable]="true"
+            #rowIsland>
+            <igx-column field="ID"></igx-column>
+            <igx-column field="ProductName"></igx-column>
+            <igx-row-island [key]="'childData'" [autoGenerate]="true" #rowIsland2 >
+            </igx-row-island>
+            <ng-template igxRowEditText let-rowChangesCount>
+                <span>Row Edit Text</span>
+            </ng-template>
+            <ng-template igxRowEditActions let-endRowEdit>
+                <span>Row Edit Actions</span>
+            </ng-template>
+        </igx-row-island>
+    </igx-hierarchical-grid>`
+})
+export class IgxHierarchicalGridCustomRowEditOverlayComponent extends IgxHierarchicalGridTestBaseComponent { }