Merge pull request #9170 from IgniteUI/mdragnev/addrow-templating

Add igxRowAddText directive for templating add row banner

Author: ChronosSF

CHANGELOG.md

@@ -7,8 +7,15 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
-
-
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    -  The `IgxRowAddTextDirective` allows to customize the text of the row adding overlay.
+        ```html
+             <igx-grid [rowEditable]="true">
+                <ng-template igxRowAddText>
+                    Adding Row
+                </ng-template>
+            </igx-grid>
+        ```
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.

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

@@ -66,6 +66,7 @@ import {
 import { IFilteringOperation } from '../data-operations/filtering-condition';
 import { Transaction, TransactionType, TransactionService, State } from '../services/public_api';
 import {
+    IgxRowAddTextDirective,
     IgxRowEditTemplateDirective,
     IgxRowEditTabStopDirective,
     IgxRowEditTextDirective,
@@ -1128,12 +1129,19 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @ContentChild(IgxRowEditTemplateDirective, { read: TemplateRef })
     public rowEditCustom: TemplateRef<any>;
+
     /**
      * @hidden @internal
      */
     @ContentChild(IgxRowEditTextDirective, { read: TemplateRef })
     public rowEditText: TemplateRef<any>;
 
+    /**
+     * @hidden @internal
+     */
+    @ContentChild(IgxRowAddTextDirective, { read: TemplateRef })
+    public rowAddText: TemplateRef<any>;
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/grid-common.module.ts

@@ -7,6 +7,7 @@ import {
 import { IgxGridTransaction } from './grid-base.directive';
 import { IgxBaseTransactionService } from '../services/transaction/base-transaction';
 import {
+    IgxRowAddTextDirective,
     IgxRowEditTemplateDirective,
     IgxRowEditActionsDirective,
     IgxRowEditTextDirective,
@@ -42,6 +43,7 @@ import {
     declarations: [
         IgxRowDirective,
         IgxGridCellComponent,
+        IgxRowAddTextDirective,
         IgxRowEditTemplateDirective,
         IgxRowEditActionsDirective,
         IgxRowEditTextDirective,
@@ -60,6 +62,7 @@ import {
     ],
     exports: [
         IgxGridCellComponent,
+        IgxRowAddTextDirective,
         IgxRowEditTemplateDirective,
         IgxRowEditActionsDirective,
         IgxRowEditTextDirective,

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

@@ -13,6 +13,12 @@ export class IgxRowEditTemplateDirective { }
 })
 export class IgxRowEditTextDirective { }
 
+/** @hidden @internal */
+@Directive({
+    selector: '[igxRowAddText]'
+})
+export class IgxRowAddTextDirective { }
+
 /** @hidden @internal */
 @Directive({
     selector: '[igxRowEditActions]'

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

@@ -310,6 +310,19 @@ describe('IgxGrid - Row Adding #grid', () => {
 
             expect(grid.addRowSnackbar.isVisible).toBe(false);
         });
+
+        it('Should set templated banner text when adding row', () => {
+            const rows = grid.rowList.toArray();
+            rows[0].beginAddRow();
+            fixture.detectChanges();
+
+            endTransition();
+
+            const addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
+
+            expect(GridFunctions.getRowEditingBannerText(fixture)).toEqual('Adding Row');
+        });
     });
 
     describe('Add row events tests:', () => {

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

@@ -315,10 +315,11 @@
 </ng-template>
 
 <ng-template #defaultRowEditTemplate>
-    <div class="igx-banner__message" *ngIf="!this.crudService.row?.isAddRow">
+    <div class="igx-banner__message">
         <span class="igx-banner__text">
             <ng-container
-                *ngTemplateOutlet="rowEditText ? rowEditText : defaultRowEditText; context: { $implicit: rowChangesCount }">
+                *ngTemplateOutlet="this.crudService.row?.isAddRow ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;
+                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }">
             </ng-container>
         </span>
     </div>

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

@@ -268,10 +268,11 @@
     <button igxButton igxRowEditTabStop (click)="endRowEdit(true, $event)">Done</button>
 </ng-template>
 <ng-template #defaultRowEditTemplate>
-    <div class="igx-banner__message" *ngIf="!this.crudService.row?.isAddRow">
+    <div class="igx-banner__message">
         <span class="igx-banner__text">
             <ng-container
-                *ngTemplateOutlet="rowEditText ? rowEditText : defaultRowEditText; context: { $implicit: rowChangesCount }">
+                *ngTemplateOutlet="this.crudService.row?.isAddRow ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;
+                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }">
             </ng-container>
         </span>
     </div>

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

@@ -230,10 +230,11 @@
 </ng-template>
 
 <ng-template #defaultRowEditTemplate>
-    <div class="igx-banner__message" *ngIf="!this.crudService.row?.isAddRow">
+    <div class="igx-banner__message">
         <span class="igx-banner__text">
             <ng-container
-                *ngTemplateOutlet="rowEditText ? rowEditText : defaultRowEditText; context: { $implicit: rowChangesCount }">
+                *ngTemplateOutlet="this.crudService.row?.isAddRow ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;
+                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }">
             </ng-container>
         </span>
     </div>

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

@@ -2311,6 +2311,9 @@ export class MRLTestComponent {
     <igx-action-strip #actionStrip>
         <igx-grid-editing-actions [addRow]='true'></igx-grid-editing-actions>
     </igx-action-strip>
+    <ng-template igxRowAddText>
+            Adding Row
+    </ng-template>
 </igx-grid>
 `
 })