Skip to content

Commit d93177c

Browse files
ChronosSFChronosSF
authored
Merge pull request #8318 from IgniteUI/mkirova/empty-grid-add-row
feat(igxGrid): Include "Add Row" button to empty/filtered grid templa…
2 parents b06d97e + dfdafe5 commit d93177c

File tree

9 files changed

+80
-7
lines changed

9 files changed

+80
-7
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export interface IGridResourceStrings {
102102
igx_grid_snackbar_addrow_actiontext?: string;
103103
igx_grid_actions_edit_label?: string;
104104
igx_grid_actions_add_label?: string;
105+
igx_grid_add_row_label?: string;
105106
igx_grid_actions_add_child_label?: string;
106107
igx_grid_actions_delete_label?: string;
107108
igx_grid_actions_pin_label?: string;
@@ -214,6 +215,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
214215
igx_grid_snackbar_addrow_actiontext: 'SHOW',
215216
igx_grid_actions_edit_label: 'Edit',
216217
igx_grid_actions_add_label: 'Add',
218+
igx_grid_add_row_label: 'ADD ROW',
217219
igx_grid_actions_add_child_label: 'Add Child',
218220
igx_grid_actions_delete_label: 'Delete',
219221
igx_grid_actions_pin_label: 'Pin',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -942,6 +942,7 @@
942942
align-items: center;
943943
height: 100%;
944944
color: --var($theme, 'content-text-color');
945+
flex-direction: column;
945946
}
946947

947948
%igx-grid__loading {

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
273273
@Input()
274274
public emptyGridTemplate: TemplateRef<any>;
275275

276+
/**
277+
* Gets/Sets a custom template for adding row UI when grid is empty.
278+
* @example
279+
* ```html
280+
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
281+
* ```
282+
*/
283+
@Input()
284+
public addRowEmptyTemplate: TemplateRef<any>;
285+
276286
/**
277287
* Gets/Sets a custom template when loading.
278288
* @example
@@ -3923,6 +3933,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
39233933
return this.isRowSelectable && this.hasVisibleColumns && !this.hideRowSelectors;
39243934
}
39253935

3936+
/**
3937+
* @hidden
3938+
* @internal
3939+
*/
3940+
get showAddButton() {
3941+
return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
3942+
}
3943+
39263944
/**
39273945
* @hidden
39283946
* @internal

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,11 +252,27 @@
252252
</ng-template>
253253

254254
<ng-template #emptyFilteredGrid>
255-
<span class="igx-grid__tbody-message">{{emptyFilteredGridMessage}}</span>
255+
<span class="igx-grid__tbody-message">
256+
<span>{{emptyFilteredGridMessage}}</span>
257+
<span *ngIf='showAddButton'>
258+
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
259+
</span>
260+
</span>
256261
</ng-template>
257262

258263
<ng-template #defaultEmptyGrid>
259-
<span class="igx-grid__tbody-message">{{emptyGridMessage}}</span>
264+
<span class="igx-grid__tbody-message">
265+
<span>{{emptyGridMessage}}</span>
266+
<span *ngIf='showAddButton'>
267+
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
268+
</span>
269+
</span>
270+
</ng-template>
271+
272+
<ng-template #defaultAddRowEmptyTemplate>
273+
<button igxButton="raised" igxRipple (click)='beginAddRowByIndex(null, -1)'>
274+
{{resourceStrings.igx_grid_add_row_label}}
275+
</button>
260276
</ng-template>
261277

262278
<ng-template #defaultLoadingGrid>

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,11 +210,27 @@
210210
</ng-template>
211211

212212
<ng-template #emptyFilteredGrid>
213-
<span class="igx-grid__tbody-message">{{emptyFilteredGridMessage}}</span>
213+
<span class="igx-grid__tbody-message">
214+
<span>{{emptyFilteredGridMessage}}</span>
215+
<span *ngIf='showAddButton'>
216+
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
217+
</span>
218+
</span>
214219
</ng-template>
215220

216221
<ng-template #defaultEmptyGrid>
217-
<span class="igx-grid__tbody-message">{{emptyGridMessage}}</span>
222+
<span class="igx-grid__tbody-message">
223+
<span>{{emptyGridMessage}}</span>
224+
<span *ngIf='showAddButton'>
225+
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
226+
</span>
227+
</span>
228+
</ng-template>
229+
230+
<ng-template #defaultAddRowEmptyTemplate>
231+
<button igxButton="raised" igxRipple (click)='beginAddRowByIndex(null, -1)'>
232+
{{resourceStrings.igx_grid_add_row_label}}
233+
</button>
218234
</ng-template>
219235

220236
<ng-template #defaultLoadingGrid>

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,27 @@
184184
</ng-template>
185185

186186
<ng-template #emptyFilteredGrid>
187-
<span class="igx-grid__tbody-message">{{emptyFilteredGridMessage}}</span>
187+
<span class="igx-grid__tbody-message">
188+
<span>{{emptyFilteredGridMessage}}</span>
189+
<span *ngIf='showAddButton'>
190+
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
191+
</span>
192+
</span>
188193
</ng-template>
189194

190195
<ng-template #defaultEmptyGrid>
191-
<span class="igx-grid__tbody-message">{{emptyGridMessage}}</span>
196+
<span class="igx-grid__tbody-message">
197+
<span>{{emptyGridMessage}}</span>
198+
<span *ngIf='showAddButton'>
199+
<ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
200+
</span>
201+
</span>
202+
</ng-template>
203+
204+
<ng-template #defaultAddRowEmptyTemplate>
205+
<button igxButton="raised" igxRipple (click)='beginAddRowByIndex(null, -1)'>
206+
{{resourceStrings.igx_grid_add_row_label}}
207+
</button>
192208
</ng-template>
193209

194210
<ng-template #defaultLoadingGrid>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -645,7 +645,8 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
645645

646646
public getEmptyRecordObjectFor(rec) {
647647
const row = {...rec};
648-
row.data = {... rec.data};
648+
const data = rec || {};
649+
row.data = {... data};
649650
Object.keys(row.data).forEach(key => {
650651
// persist foreign key if one is set.
651652
if (this.foreignKey && key === this.foreignKey) {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
(mouseleave)="onMouseLeave(actionstrip)"
1010
(mouseover)="onMouseOver($event, grid, actionstrip)"
1111
[rowEditable]="true"
12+
[allowFiltering]="true"
1213
>
1314
<igx-column
1415
*ngFor="let c of columns"

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export class GridAddRowSampleComponent implements OnInit {
6565
{ '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' },
6666
{ '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' }
6767
];
68+
69+
this.data = [];
6870
// tslint:enable:max-line-length
6971
}
7072
}

0 commit comments

Comments
 (0)