feat(igxGrid): Include "Add Row" button to empty/filtered grid templates.

Author: MKirova

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -102,6 +102,7 @@ export interface IGridResourceStrings {
     igx_grid_snackbar_addrow_actiontext?: string;
     igx_grid_actions_edit_label?: string;
     igx_grid_actions_add_label?: string;
+    igx_grid_add_row_label?: string;
     igx_grid_actions_add_child_label?: string;
     igx_grid_actions_delete_label?: string;
     igx_grid_actions_pin_label?: string;
@@ -214,6 +215,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_snackbar_addrow_actiontext: 'SHOW',
     igx_grid_actions_edit_label: 'Edit',
     igx_grid_actions_add_label: 'Add',
+    igx_grid_add_row_label: 'ADD ROW',
     igx_grid_actions_add_child_label: 'Add Child',
     igx_grid_actions_delete_label: 'Delete',
     igx_grid_actions_pin_label: 'Pin',

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -942,6 +942,7 @@
         align-items: center;
         height: 100%;
         color: --var($theme, 'content-text-color');
+        flex-direction: column;
     }
 
     %igx-grid__loading {

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

@@ -271,6 +271,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Input()
     public emptyGridTemplate: TemplateRef<any>;
 
+    /**
+     * Gets/Sets a custom template for adding row UI when grid is empty.
+     * @example
+     * ```html
+     * <igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+    @Input()
+    public addRowEmptyGridTemplate: TemplateRef<any>;
+
     /**
      * Gets/Sets a custom template when loading.
      * @example

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

@@ -251,11 +251,27 @@
 </ng-template>
 
 <ng-template #emptyFilteredGrid>
-    <span class="igx-grid__tbody-message">{{emptyFilteredGridMessage}}</span>
+    <span class="igx-grid__tbody-message">
+        <span>{{emptyFilteredGridMessage}}</span>
+        <span *ngIf='rowEditable && dataView.length === 0'>
+            <ng-container *ngTemplateOutlet='addRowEmptyTemplate'></ng-container>
+        </span>
+    </span>
 </ng-template>
 
 <ng-template #defaultEmptyGrid>
-    <span class="igx-grid__tbody-message">{{emptyGridMessage}}</span>
+    <span class="igx-grid__tbody-message">
+        <span>{{emptyGridMessage}}</span>
+        <span *ngIf='rowEditable && dataView.length === 0'>
+            <ng-container *ngTemplateOutlet='addRowEmptyGridTemplate || defaultAddRowEmptyTemplate'></ng-container>
+        </span>
+    </span>
+</ng-template>
+
+<ng-template #defaultAddRowEmptyTemplate>
+    <button igxButton="raised" igxRipple (click)='beginAddRowByIndex(null, -1)'>
+        {{resourceStrings.igx_grid_add_row_label}}
+    </button>
 </ng-template>
 
 <ng-template #defaultLoadingGrid>

src/app/grid-add-row/grid-add-row.sample.html

@@ -9,6 +9,7 @@
         (mouseleave)="onMouseLeave(actionstrip)"
         (mouseover)="onMouseOver($event, grid, actionstrip)"
         [rowEditable]="true"
+        [allowFiltering]="true"
     >
         <igx-column
             *ngFor="let c of columns"

src/app/grid-add-row/grid-add-row.sample.ts

@@ -65,6 +65,8 @@ export class GridAddRowSampleComponent implements OnInit {
             { 'ID': 'FRANR', 'CompanyName': 'France restauration', 'ContactName': 'Carine Schmitt', 'ContactTitle': 'Marketing Manager', 'Address': '54, rue Royale', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.32.21.21', 'Fax': '40.32.21.20' },
             { 'ID': 'FRANS', 'CompanyName': 'Franchi S.p.A.', 'ContactName': 'Paolo Accorti', 'ContactTitle': 'Sales Representative', 'Address': 'Via Monte Bianco 34', 'City': 'Torino', 'Region': null, 'PostalCode': '10100', 'Country': 'Italy', 'Phone': '011-4988260', 'Fax': '011-4988261' }
         ];
+
+        this.data = [];
         // tslint:enable:max-line-length
     }
 }