Skip to content

Commit 1b2f4b0

Browse files
teodosiahteodosiah
authored
Merge pull request #3058 from IgniteUI/rivanova/fix-3014
Refactor row actions samples
2 parents 7c2fb71 + ea5a831 commit 1b2f4b0

9 files changed

Lines changed: 157 additions & 185 deletions

‎src/app/grid/grid-action-strip/grid-action-strip-sample.html‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
11
<div class="grid__wrapper">
2-
<igx-grid igxPreventDocumentScroll #gridRowEditTransaction [batchEditing]="true" [data]="data" width="100%"
3-
height="500px" [rowEditable]="true" [allowFiltering]="true" (onDataPreLoad)="actionstrip.hide()">
2+
<igx-grid igxPreventDocumentScroll #grid [data]="data" [primaryKey]="'ProductID'" width="100%"
3+
height="500px" [rowEditable]="true" [batchEditing]="true" [allowFiltering]="true">
44
<igx-column field="ProductID" header="Product ID" [pinned]="true" [hidden]='true' [filterable]="false">
55
</igx-column>
6-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [sortable]="true"></igx-column>
7-
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'string'" [sortable]="true"></igx-column>
6+
<igx-column field="ProductName" header="Product Name" dataType="string" [sortable]="true"></igx-column>
7+
<igx-column field="UnitPrice" header="Unit Price" dataType="currency" [sortable]="true"></igx-column>
88
<igx-column field="UnitsOnOrder" header="Units On Order" dataType="number" [editable]="false"
99
[filterable]="false"></igx-column>
10-
<igx-column field="UnitsInStock" header="Units In Stock" dataType="number" [sortable]="true">
11-
<ng-template igxCellEditor let-cell="cell">
12-
<input name="units" [igxFocus]="true" [(ngModel)]="cell.editValue"
13-
style="color: black; width: 30px;" />
14-
</ng-template>
15-
</igx-column>
16-
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'" [filterable]="false">
10+
<igx-column field="UnitsInStock" header="Units In Stock" dataType="number" [sortable]="true"></igx-column>
11+
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" dataType="string" [filterable]="false">
1712
</igx-column>
1813
<igx-column field="ReorderLevel" header="Reorder Level" dataType="number" [filterable]="false"></igx-column>
19-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filterable]="false">
14+
<igx-column field="Discontinued" header="Discontinued" dataType="boolean" [filterable]="false">
2015
</igx-column>
2116
<igx-action-strip #actionstrip>
2217
<igx-grid-pinning-actions></igx-grid-pinning-actions>
23-
<button title="Edit" igxButton="icon" igxRipple
24-
(click)='startEdit(actionstrip.context)'>
25-
<igx-icon>edit</igx-icon>
26-
</button>
27-
<button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
28-
(click)='undo(actionstrip.context)'>
29-
<igx-icon>undo</igx-icon>
30-
</button>
31-
<button title="Redo All" igxButton="icon" igxRipple
32-
*ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
33-
(click)='redo(actionstrip.context)'>
34-
<igx-icon>redo</igx-icon>
35-
</button>
36-
<button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
37-
(click)='commit(actionstrip.context)'>
38-
<igx-icon>save</igx-icon>
39-
</button>
40-
<button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
41-
(click)='actionstrip.context.delete()'>
42-
<igx-icon>delete</igx-icon>
43-
</button>
18+
<ng-container *ngIf="!inEditMode(actionstrip.context)">
19+
<button title="Edit" igxButton="icon" igxRipple
20+
(click)='startEdit(actionstrip.context)'>
21+
<igx-icon>edit</igx-icon>
22+
</button>
23+
<button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
24+
(click)='undo(actionstrip.context)'>
25+
<igx-icon>undo</igx-icon>
26+
</button>
27+
<button title="Redo All" igxButton="icon" igxRipple
28+
*ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
29+
(click)='redo(actionstrip.context)'>
30+
<igx-icon>redo</igx-icon>
31+
</button>
32+
<button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
33+
(click)='commit(actionstrip.context)'>
34+
<igx-icon>save</igx-icon>
35+
</button>
36+
<button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
37+
(click)='actionstrip.context.delete()'>
38+
<igx-icon>delete</igx-icon>
39+
</button>
40+
</ng-container>
4441
</igx-action-strip>
4542
</igx-grid>
4643
</div>

‎src/app/grid/grid-action-strip/grid-action-strip-sample.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
11
.grid__wrapper {
22
margin: 15px;
33
}
4-
5-
h4 {
6-
text-align: center;
7-
padding-top: 2%;
8-
padding-bottom: 2%;
9-
}

‎src/app/grid/grid-action-strip/grid-action-strip-sample.ts‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import { DATA } from '../../data/nwindData';
88
templateUrl: 'grid-action-strip-sample.html'
99
})
1010
export class GridActionStripSampleComponent {
11-
@ViewChild('gridRowEditTransaction', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
12-
13-
public currentActiveGrid: { id: string; transactions: any[] } = { id: '', transactions: [] };
11+
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
1412

1513
public data: any[];
1614
public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>();
@@ -19,31 +17,27 @@ export class GridActionStripSampleComponent {
1917
this.data = DATA;
2018
}
2119

22-
public stateFormatter(value: string) {
23-
return JSON.stringify(value);
24-
}
25-
26-
public typeFormatter(value: string) {
27-
return value.toUpperCase();
28-
}
29-
3020
public isDirty(rowContext: RowType) {
31-
return rowContext && rowContext.deleted;
21+
const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key);
22+
return rowContext && (rowContext.deleted || isRowEdited);
3223
}
3324

3425
public isDeleted(rowContext: RowType) {
3526
return rowContext && rowContext.deleted;
3627
}
3728

38-
public startEdit(row?): void {
39-
const firstEditable = row.cells.filter(cell => cell.editable)[0];
40-
const grid = row.grid;
29+
public inEditMode(rowContext: RowType) {
30+
return rowContext && rowContext.inEditMode;
31+
}
32+
33+
public startEdit(rowContext: RowType): void {
34+
const firstEditable = rowContext.cells.filter(cell => cell.editable)[0];
35+
const grid = rowContext.grid;
4136

42-
if (grid.rowList.filter(r => r === row).length !== 0) {
43-
grid.gridAPI.crudService.enterEditMode(firstEditable, event);
44-
firstEditable.activate();
37+
if (grid.rowList.filter(r => r === rowContext).length !== 0) {
38+
grid.gridAPI.crudService.enterEditMode(firstEditable);
39+
firstEditable.activate(null);
4540
}
46-
row.hide();
4741
}
4842

4943
public commit(rowContext: RowType) {

‎src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.html‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="grid__wrapper">
2-
<igx-hierarchical-grid igxPreventDocumentScroll class="hgrid" [data]="data"
3-
[height]="'500px'" [width]="'100%'" [rowEditable]="true" [allowFiltering]="true" #hierarchicalGrid>
2+
<igx-hierarchical-grid igxPreventDocumentScroll #hierarchicalGrid [data]="data" [primaryKey]="'ID'"
3+
[height]="'500px'" [width]="'100%'" [rowEditable]="true" [batchEditing]="true" [allowFiltering]="true">
44
<igx-column field="Artist" [sortable]="true" [disableHiding]="true" [width]="'200px'"></igx-column>
55
<igx-column field="Photo" [width]="'200px'">
66
<ng-template igxCell let-cell="cell">
@@ -9,52 +9,54 @@
99
</div>
1010
</ng-template>
1111
</igx-column>
12-
<igx-column field="Debut" [sortable]="true" [width]="'200px'" [formatter]="formatter"></igx-column>
13-
<igx-column field="GrammyNominations" header="Grammy Nominations" [sortable]="true" dataType="number" [width]="'200px'"></igx-column>
14-
<igx-column field="GrammyAwards" header="Grammy Awards" [sortable]="true" dataType="number" [width]="'200px'"></igx-column>
12+
<igx-column field="Debut" dataType="number" [sortable]="true" [width]="'200px'" [formatter]="formatter"></igx-column>
13+
<igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number" [sortable]="true" [width]="'200px'"></igx-column>
14+
<igx-column field="GrammyAwards" header="Grammy Awards" dataType="number" [sortable]="true" [width]="'200px'"></igx-column>
1515

1616
<igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="false">
17-
<igx-column field="Album" [sortable]="true"></igx-column>
18-
<igx-column field="LaunchDate" header="Launch Date" [sortable]="true" [dataType]="'date'"></igx-column>
19-
<igx-column field="BillboardReview" header="Billboard Review" [sortable]="true"></igx-column>
20-
<igx-column field="USBillboard200" header="US Billboard 200" [sortable]="true"></igx-column>
17+
<igx-column field="Album" dataType="string" [sortable]="true"></igx-column>
18+
<igx-column field="LaunchDate" header="Launch Date" dataType="date" [sortable]="true"></igx-column>
19+
<igx-column field="BillboardReview" header="Billboard Review" dataType="number" [sortable]="true"></igx-column>
20+
<igx-column field="USBillboard200" header="US Billboard 200" dataType="number" [sortable]="true"></igx-column>
2121
<igx-row-island [height]="null" [key]="'Songs'" [autoGenerate]="false">
22-
<igx-column field="Number" header="No."></igx-column>
23-
<igx-column field="Title"></igx-column>
22+
<igx-column field="Number" header="No." dataType="number"></igx-column>
23+
<igx-column field="Title" dataType="string"></igx-column>
2424
<igx-column field="Released" dataType="date"></igx-column>
25-
<igx-column field="Genre"></igx-column>
25+
<igx-column field="Genre" dataType="string"></igx-column>
2626
</igx-row-island>
2727
</igx-row-island>
2828

2929
<igx-row-island [height]="null" [key]="'Tours'" [autoGenerate]="false">
30-
<igx-column field="Tour"></igx-column>
31-
<igx-column field="StartedOn" header="Started on"></igx-column>
32-
<igx-column field="Location"></igx-column>
33-
<igx-column field="Headliner"></igx-column>
30+
<igx-column field="Tour" dataType="string"></igx-column>
31+
<igx-column field="StartedOn" header="Started on" dataType="string"></igx-column>
32+
<igx-column field="Location" dataType="string"></igx-column>
33+
<igx-column field="Headliner" dataType="string"></igx-column>
3434
</igx-row-island>
3535
<igx-action-strip #actionstrip>
3636
<igx-grid-pinning-actions></igx-grid-pinning-actions>
37-
<button title="Edit" igxButton="icon" igxRipple
38-
(click)='startEdit(actionstrip.context)'>
39-
<igx-icon>edit</igx-icon>
40-
</button>
41-
<button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
42-
(click)='undo(actionstrip.context)'>
43-
<igx-icon>undo</igx-icon>
44-
</button>
45-
<button title="Redo All" igxButton="icon" igxRipple
46-
*ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
47-
(click)='redo(actionstrip.context)'>
48-
<igx-icon>redo</igx-icon>
49-
</button>
50-
<button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
51-
(click)='commit(actionstrip.context)'>
52-
<igx-icon>save</igx-icon>
53-
</button>
54-
<button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
55-
(click)='actionstrip.context.delete()'>
56-
<igx-icon>delete</igx-icon>
57-
</button>
37+
<ng-container *ngIf="!inEditMode(actionstrip.context)">
38+
<button title="Edit" igxButton="icon" igxRipple
39+
(click)='startEdit(actionstrip.context)'>
40+
<igx-icon>edit</igx-icon>
41+
</button>
42+
<button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
43+
(click)='undo(actionstrip.context)'>
44+
<igx-icon>undo</igx-icon>
45+
</button>
46+
<button title="Redo All" igxButton="icon" igxRipple
47+
*ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
48+
(click)='redo(actionstrip.context)'>
49+
<igx-icon>redo</igx-icon>
50+
</button>
51+
<button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
52+
(click)='commit(actionstrip.context)'>
53+
<igx-icon>save</igx-icon>
54+
</button>
55+
<button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
56+
(click)='actionstrip.context.delete()'>
57+
<igx-icon>delete</igx-icon>
58+
</button>
59+
</ng-container>
5860
</igx-action-strip>
59-
</igx-hierarchical-grid>
60-
</div>
61+
</igx-hierarchical-grid>
62+
</div>

‎src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
margin: 15px;
33
}
44

5-
h4 {
6-
text-align: center;
7-
padding-top: 2%;
8-
padding-bottom: 2%;
9-
}
5+
.photo {
6+
vertical-align: middle;
7+
max-height: 62px;
8+
}
9+
10+
.cell__inner_2 {
11+
margin: 1px
12+
}

‎src/app/hierarchical-grid/hierarchical-grid-action-strip/hierarchical-grid-action-strip-sample.ts‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@ import { SINGERS } from '../../data/singersData';
88
templateUrl: 'hierarchical-grid-action-strip-sample.html'
99
})
1010
export class HGridActionStripSampleComponent implements AfterViewInit{
11-
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
11+
@ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
1212
public grid: IgxHierarchicalGridComponent;
1313

1414
@ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
1515
public columns: QueryList<IgxColumnComponent>;
1616

17-
public currentActiveGrid: { id: string; transactions: any[] } = { id: '', transactions: [] };
18-
1917
public data: any[];
2018
public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>();
2119

@@ -30,31 +28,27 @@ export class HGridActionStripSampleComponent implements AfterViewInit{
3028

3129
public formatter = (a) => a;
3230

33-
public stateFormatter(value: string) {
34-
return JSON.stringify(value);
35-
}
36-
37-
public typeFormatter(value: string) {
38-
return value.toUpperCase();
39-
}
40-
4131
public isDirty(rowContext: RowType) {
42-
return rowContext && rowContext.deleted;
32+
const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key);
33+
return rowContext && (rowContext.deleted || isRowEdited);
4334
}
4435

4536
public isDeleted(rowContext: RowType) {
4637
return rowContext && rowContext.deleted;
4738
}
4839

49-
public startEdit(row?): void {
50-
const firstEditable = row.cells.filter(cell => cell.editable)[0];
51-
const grid = row.grid;
40+
public inEditMode(rowContext: RowType) {
41+
return rowContext && rowContext.inEditMode;
42+
}
43+
44+
public startEdit(rowContext: RowType): void {
45+
const firstEditable = rowContext.cells.filter(cell => cell.editable)[0];
46+
const grid = rowContext.grid;
5247

53-
if (grid.rowList.filter(r => r === row).length !== 0) {
54-
grid.gridAPI.crudService.enterEditMode(firstEditable, event);
55-
firstEditable.activate();
48+
if (grid.rowList.filter(r => r === rowContext).length !== 0) {
49+
grid.gridAPI.crudService.enterEditMode(firstEditable);
50+
firstEditable.activate(null);
5651
}
57-
row.hide();
5852
}
5953

6054
public commit(rowContext: RowType) {

0 commit comments

Comments
 (0)