chore(*): Update templates. Remove redundant getters. Add test.

Author: MKirova

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

@@ -2423,24 +2423,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * @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/grid/grid-row-editing.spec.ts

@@ -22,7 +22,8 @@ import {
     IgxGridCustomOverlayComponent,
     IgxGridEmptyRowEditTemplateComponent,
     VirtualGridComponent,
-    ObjectCloneStrategy
+    ObjectCloneStrategy,
+    IgxGridCustomRowEditTemplateComponent
 } from '../../test-utils/grid-samples.spec';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -46,6 +47,7 @@ describe('IgxGrid - Row Editing #grid', () => {
                 IgxGridRowEditingWithoutEditableColumnsComponent,
                 IgxGridCustomOverlayComponent,
                 IgxGridEmptyRowEditTemplateComponent,
+                IgxGridCustomRowEditTemplateComponent,
                 VirtualGridComponent
             ],
             imports: [
@@ -2127,6 +2129,32 @@ describe('IgxGrid - Row Editing #grid', () => {
             cell = grid.getCellByColumn(0, 'ProductName');
             expect(cell.editMode).toBe(true);
         }));
+
+        it('should allow setting custom templates via Input.', () => {
+            const fix = TestBed.createComponent(IgxGridCustomRowEditTemplateComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+
+            grid.rowAddTextTemplate = fix.componentInstance.addText;
+            grid.rowEditTextTemplate = fix.componentInstance.editText;
+            grid.rowEditActionsTemplate = fix.componentInstance.editActions;
+            fix.detectChanges();
+
+            // enter edit mode
+            const cellElem = grid.gridAPI.get_cell_by_index(0, 'ProductName');
+            UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
+            fix.detectChanges();
+
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('CUSTOM EDIT TEXT');
+            const bannerRow = GridFunctions.getRowEditingBannerRow(fix);
+            expect(bannerRow.textContent.trim()).toBe('CUSTOM EDIT ACTIONS');
+
+            grid.endEdit();
+
+            grid.beginAddRowByIndex(0);
+            fix.detectChanges();
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('CUSTOM ADD TEXT');
+        });
     });
 
     describe('Transaction', () => {

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

@@ -252,15 +252,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' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : 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="rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
             </ng-container>
         </div>
     </div>

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

@@ -203,7 +203,7 @@
     <div class="igx-banner__message">
         <span class="igx-banner__text">
             <ng-container
-                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : resolveRowEditText || defaultRowEditText;
+                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;
                 context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }">
             </ng-container>
         </span>

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

@@ -536,14 +536,14 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      * @hidden
      */
     public get resolveRowEditActions() {
-        return this.parentIsland ? this.parentIsland.rowEditActions : this.rowEditActions;
+        return this.parentIsland ? this.parentIsland.rowEditActionsTemplate : this.rowEditActionsTemplate;
     }
 
     /**
      * @hidden
      */
     public get resolveRowEditText() {
-        return this.parentIsland ? this.parentIsland.rowEditText : this.rowEditText;
+        return this.parentIsland ? this.parentIsland.rowEditTextTemplate : this.rowEditTextTemplate;
     }
 
     /** @hidden */

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

@@ -193,15 +193,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' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : 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="rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
             </ng-container>
         </div>
     </div>

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1770,6 +1770,38 @@ export class IgxGridEmptyRowEditTemplateComponent extends BasicGridComponent {
     public data = SampleTestData.foodProductData();
 }
 
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px" [rowEditable]="true">
+        <igx-column field="ProductID" header="Product ID"></igx-column>
+        <igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
+        <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
+        <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
+    </igx-grid>
+    <ng-template #editActions igxRowEditActions>
+        CUSTOM EDIT ACTIONS
+    </ng-template>
+    <ng-template #addText igxRowAddText>
+        CUSTOM ADD TEXT
+    </ng-template>
+    <ng-template #editText igxRowEditText>
+        CUSTOM EDIT TEXT
+    </ng-template>
+    `
+})
+export class IgxGridCustomRowEditTemplateComponent extends BasicGridComponent {
+    public data = SampleTestData.foodProductData();
+    @ViewChild('editActions', {read: TemplateRef })
+    public editActions: TemplateRef<any>;
+
+    @ViewChild('addText', {read: TemplateRef })
+    public addText: TemplateRef<any>;
+
+    @ViewChild('editText', {read: TemplateRef })
+    public editText: TemplateRef<any>;
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" [batchEditing]="true" [primaryKey]="'ProductID'" width="900px" height="900px" [rowEditable]="true" >