Skip to content

Commit 0dea46d

Browse files
mddragnevmddragnev
committed
feat(addRow): Assign 'fake' id to the newly added row
1 parent c2cbfa4 commit 0dea46d

File tree

7 files changed

+73
-20
lines changed

7 files changed

+73
-20
lines changed

‎projects/igniteui-angular/src/lib/grids/api.service.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,11 +148,21 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
148148
public update_add_cell(cell: IgxCell, value: any) {
149149
cell.editValue = value;
150150

151+
const args = cell.createEditEventArgs();
152+
this.grid.onCellEdit.emit(args);
153+
154+
if (args.cancel) {
155+
return args;
156+
}
157+
151158
if (isEqual(cell.value, cell.editValue)) {
152-
return;
159+
return args;
153160
}
154161
const data = cell.rowData;
155-
this.updateData(this.grid, cell.id.rowID, data, cell.rowData, reverseMapper(cell.column.field, cell.editValue));
162+
mergeObjects(data, reverseMapper(cell.column.field, cell.editValue));
163+
const doneArgs = cell.createDoneEditEventArgs(args.newValue);
164+
doneArgs.rowData = data;
165+
this.grid.cellEditDone.emit(doneArgs);
156166
}
157167

158168
update_cell(cell: IgxCell, value: any) {

‎projects/igniteui-angular/src/lib/grids/common/events.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface IGridEditDoneEventArgs extends IBaseEventArgs {
3333
event?: Event;
3434
column?: ColumnType;
3535
owner?: IgxGridBaseDirective & GridType;
36+
isAddRow?: boolean;
3637
}
3738

3839
export interface IGridEditEventArgs extends CancelableEventArgs, IGridEditDoneEventArgs {

‎projects/igniteui-angular/src/lib/grids/common/pipes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,7 @@ export class IgxGridAddRowPipe implements PipeTransform {
374374

375375
const row = {...collection[parentIndex]};
376376
Object.keys(row).forEach(key => row[key] = undefined);
377+
row[grid.primaryKey] = grid.generateRowID();
377378
const rec = {
378379
recordRef: row,
379380
addRow: true

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,9 @@ import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
150150
import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
151151
import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
152152
import { IgxSnackbarComponent } from '../snackbar/snackbar.component';
153+
import { v4 as uuidv4 } from 'uuid';
154+
155+
let FAKE_ROW_ID = -1;
153156

154157
const MINIMUM_COLUMN_WIDTH = 136;
155158
const FILTER_ROW_HEIGHT = 50;
@@ -3103,6 +3106,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
31033106
this.columnList.forEach(column => column.resetCaches());
31043107
}
31053108

3109+
/**
3110+
* @hidden @internal
3111+
*/
3112+
public generateRowID(): string | number {
3113+
const primaryColumn = this.columnList.find(col => col.field === this.primaryKey);
3114+
const idType = primaryColumn ? primaryColumn.dataType : this.data.length ? typeof(this.data[0][this.primaryKey]) : 'string';
3115+
return idType === 'string' ? uuidv4() : FAKE_ROW_ID--;
3116+
}
3117+
31063118
/**
31073119
* @hidden
31083120
* @internal
@@ -6527,7 +6539,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65276539
if (commit) {
65286540
this.onRowAdded.subscribe(rowData => {
65296541
// A check whether the row is in the current view
6530-
const index = this.dataView.findIndex(data => data === rowData);
6542+
const index = this.dataView.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
65316543
const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
65326544
const showIndex = shouldScroll ? index : -1;
65336545
this.showSnackbarFor(showIndex);

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

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,8 @@ describe('IgxGrid - Row Editing #grid', () => {
156156
rowData: initialRowData,
157157
oldValue: row.rowData,
158158
cancel: false,
159-
owner: grid
159+
owner: grid,
160+
isAddRow: row.addRow
160161
};
161162
expect(grid.onCellEditEnter.emit).toHaveBeenCalledWith(cellArgs);
162163
expect(grid.onRowEditEnter.emit).toHaveBeenCalledWith(rowArgs);
@@ -183,7 +184,8 @@ describe('IgxGrid - Row Editing #grid', () => {
183184
newValue: null,
184185
oldValue: row.rowData,
185186
cancel: false,
186-
owner: grid
187+
owner: grid,
188+
isAddRow: row.addRow
187189
};
188190
expect(grid.onCellEditCancel.emit).toHaveBeenCalledWith(cellArgs);
189191
expect(grid.onRowEditCancel.emit).toHaveBeenCalledWith(rowArgs);
@@ -213,7 +215,8 @@ describe('IgxGrid - Row Editing #grid', () => {
213215
newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
214216
oldValue: row.rowData,
215217
cancel: false,
216-
owner: grid
218+
owner: grid,
219+
isAddRow: row.addRow
217220
};
218221

219222
const cellDoneArgs: IGridEditDoneEventArgs = {
@@ -231,7 +234,8 @@ describe('IgxGrid - Row Editing #grid', () => {
231234
rowData: updatedRowData, // with rowEditable - IgxGridRowEditingComponent
232235
oldValue: row.rowData,
233236
newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
234-
owner: grid
237+
owner: grid,
238+
isAddRow: row.addRow
235239
};
236240
UIInteractions.triggerEventHandlerKeyDown('enter', gridContent);
237241

@@ -1604,7 +1608,8 @@ describe('IgxGrid - Row Editing #grid', () => {
16041608
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
16051609
oldValue: initialData,
16061610
cancel: false,
1607-
owner: grid
1611+
owner: grid,
1612+
isAddRow: false
16081613
});
16091614
});
16101615

@@ -1641,7 +1646,8 @@ describe('IgxGrid - Row Editing #grid', () => {
16411646
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
16421647
oldValue: initialData,
16431648
cancel: true,
1644-
owner: grid
1649+
owner: grid,
1650+
isAddRow: false
16451651
});
16461652

16471653
// Enter cell edit mode again
@@ -1663,7 +1669,8 @@ describe('IgxGrid - Row Editing #grid', () => {
16631669
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
16641670
oldValue: initialData,
16651671
cancel: true,
1666-
owner: grid
1672+
owner: grid,
1673+
isAddRow: false
16671674
});
16681675
});
16691676

@@ -1692,7 +1699,8 @@ describe('IgxGrid - Row Editing #grid', () => {
16921699
newValue: null,
16931700
oldValue: initialData,
16941701
cancel: false,
1695-
owner: grid
1702+
owner: grid,
1703+
isAddRow: false
16961704
});
16971705
});
16981706

@@ -1730,7 +1738,8 @@ describe('IgxGrid - Row Editing #grid', () => {
17301738
newValue: null,
17311739
oldValue: initialData,
17321740
cancel: true,
1733-
owner: grid
1741+
owner: grid,
1742+
isAddRow: false
17341743
});
17351744

17361745
// Enter cell edit mode again
@@ -1753,7 +1762,8 @@ describe('IgxGrid - Row Editing #grid', () => {
17531762
newValue: null,
17541763
oldValue: initialData,
17551764
cancel: true,
1756-
owner: grid
1765+
owner: grid,
1766+
isAddRow: false
17571767
});
17581768
});
17591769

@@ -1834,7 +1844,8 @@ describe('IgxGrid - Row Editing #grid', () => {
18341844
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
18351845
oldValue: initialData,
18361846
cancel: false,
1837-
owner: grid
1847+
owner: grid,
1848+
isAddRow: false
18381849
});
18391850
});
18401851

@@ -1863,7 +1874,8 @@ describe('IgxGrid - Row Editing #grid', () => {
18631874
newValue: null,
18641875
oldValue: initialData,
18651876
cancel: false,
1866-
owner: grid
1877+
owner: grid,
1878+
isAddRow: false
18671879
});
18681880
});
18691881

@@ -2087,7 +2099,8 @@ describe('IgxGrid - Row Editing #grid', () => {
20872099
rowData: updatedRowData, // with rowEditable&Transactions - IgxGridRowEditingTransactionComponent
20882100
oldValue: row.rowData,
20892101
newValue: Object.assign({}, row.rowData, { ProductName: newCellValue }),
2090-
owner: grid
2102+
owner: grid,
2103+
isAddRow: row.addRow
20912104
};
20922105

20932106
UIInteractions.triggerEventHandlerKeyDown('enter', gridContent);

‎projects/igniteui-angular/src/lib/grids/grid/grid.crud.spec.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,8 @@ describe('IgxGrid - CRUD operations #grid', () => {
162162
rowData: { index: 200, value: 200 },
163163
oldValue: { index: 1, value: 1 },
164164
newValue: { index: 200, value: 200 },
165-
owner: grid
165+
owner: grid,
166+
isAddRow: false
166167
};
167168

168169
(grid as IgxGridComponent).onRowEdit.pipe(first()).subscribe(e => {
@@ -210,7 +211,8 @@ describe('IgxGrid - CRUD operations #grid', () => {
210211
rowData: { index: 777, value: 777 },
211212
oldValue: { index: 1, value: 1 },
212213
newValue: { index: 777, value: 777 },
213-
owner: grid
214+
owner: grid,
215+
isAddRow: false
214216
};
215217

216218
// Update an existing cell - changing the new value in the event

‎projects/igniteui-angular/src/lib/grids/selection/selection.service.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ export class IgxRow {
6363
rowData: this.data,
6464
oldValue: this.data,
6565
cancel: false,
66-
owner: this.grid
66+
owner: this.grid,
67+
isAddRow: this.isAddRow || false
6768
};
6869
if (includeNewValue) {
6970
args.newValue = this.newData;
@@ -79,7 +80,8 @@ export class IgxRow {
7980
rowData: updatedData,
8081
oldValue: cachedRowData,
8182
newValue: updatedData,
82-
owner: this.grid
83+
owner: this.grid,
84+
isAddRow: this.isAddRow || false
8385
};
8486
return args;
8587
}
@@ -199,10 +201,22 @@ export class IgxGridCRUDService {
199201
beginAddRow(cell) {
200202
const newCell = this.createCell(cell);
201203
newCell.primaryKey = this.primaryKey;
204+
const args = newCell.createEditEventArgs(false);
205+
this.grid.onCellEditEnter.emit(args);
206+
if (args.cancel) {
207+
this.end();
208+
return;
209+
}
202210
cell.enterAddMode = true;
203211
this.cell = newCell;
204212
this.row = this.createRow(this.cell);
205213
this.row.isAddRow = true;
214+
const rowArgs = this.row.createEditEventArgs(false);
215+
this.grid.onRowEditEnter.emit(rowArgs);
216+
if (rowArgs.cancel) {
217+
this.endRowEdit();
218+
return;
219+
}
206220
this.grid.openRowOverlay(this.row.id);
207221
}
208222

0 commit comments

Comments
 (0)