chore(*): Add template to other grids as well.

Author: MKirova

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

@@ -3915,6 +3915,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.isRowSelectable && this.hasVisibleColumns && !this.hideRowSelectors;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    get showAddButton() {
+        return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
+     }
+
     /**
      * @hidden
      * @internal

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

@@ -253,16 +253,16 @@
 <ng-template #emptyFilteredGrid>
     <span class="igx-grid__tbody-message">
         <span>{{emptyFilteredGridMessage}}</span>
-        <span *ngIf='rowEditable && dataView.length === 0'>
-            <ng-container *ngTemplateOutlet='addRowEmptyTemplate'></ng-container>
+        <span *ngIf='showAddButton'>
+            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
         </span>
     </span>
 </ng-template>
 
 <ng-template #defaultEmptyGrid>
     <span class="igx-grid__tbody-message">
         <span>{{emptyGridMessage}}</span>
-        <span *ngIf='rowEditable && dataView.length === 0'>
+        <span *ngIf='showAddButton'>
             <ng-container *ngTemplateOutlet='addRowEmptyGridTemplate || defaultAddRowEmptyTemplate'></ng-container>
         </span>
     </span>

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

@@ -209,11 +209,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='showAddButton'>
+            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></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='showAddButton'>
+            <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>

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

@@ -183,11 +183,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='showAddButton'>
+            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></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='showAddButton'>
+            <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>

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

@@ -628,7 +628,8 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
 
     public getEmptyRecordObjectFor(rec) {
         const row = {...rec};
-        row.data = {... rec.data};
+        const data = rec || {};
+        row.data = {... data};
         Object.keys(row.data).forEach(key => {
             // persist foreign key if one is set.
             if (this.foreignKey && key === this.foreignKey) {