Skip to content

Commit 03788aa

Browse files
hanastasovkdinevwnvkodobromirts
authored
Expose key argument in the edit,add,delete event (#12394)
* feat(grid): add key argument to row edit,add and delete event arguments * test(grid): fix tests to accomodate new key argument * chore(самплес): add event handlers for grid samples * test(grid): fix test to read key argument * fix(grid): safeguard agains invalid index when deleting through api * chore(*): rename key to primaryKey * chore(*): update test spec event args naming --------- Co-authored-by: Konstantin Dinev <[email protected]> Co-authored-by: Milko Venkov <[email protected]> Co-authored-by: dobromirts <[email protected]>
1 parent 0b248ce commit 03788aa

14 files changed

+93
-13
lines changed

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,7 @@ describe('igxGridEditingActions #grid ', () => {
326326

327327
const rowDeleteArgs = {
328328
rowID: row.key,
329+
primaryKey: row.key,
329330
cancel: false,
330331
rowData: treeGrid.getRowData(row.key),
331332
oldValue: null,
@@ -334,6 +335,7 @@ describe('igxGridEditingActions #grid ', () => {
334335

335336
const rowDeletedArgs = {
336337
data: treeGrid.getRowData(row.key),
338+
primaryKey: row.key,
337339
owner: treeGrid
338340
};
339341

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,8 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
350350
}
351351

352352
const record = data[index];
353-
grid.rowDeletedNotifier.next({ data: data[index], owner: grid });
353+
const key = record ? record[grid.primaryKey] : undefined;
354+
grid.rowDeletedNotifier.next({ data: record, owner: grid, primaryKey: key });
354355

355356
this.deleteRowFromData(rowId, index);
356357

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export class IgxEditRow {
2020
public createEditEventArgs(includeNewValue = true, event?: Event): IGridEditEventArgs {
2121
const args: IGridEditEventArgs = {
2222
rowID: this.id,
23+
primaryKey: this.id,
2324
rowData: this.data,
2425
oldValue: this.data,
2526
cancel: false,
@@ -40,6 +41,7 @@ export class IgxEditRow {
4041
const rowData = updatedData ?? this.grid.gridAPI.getRowData(this.id);
4142
const args: IGridEditDoneEventArgs = {
4243
rowID: this.id,
44+
primaryKey: this.id,
4345
rowData,
4446
oldValue: cachedRowData,
4547
newValue: updatedData,
@@ -136,6 +138,7 @@ export class IgxCell {
136138
const formControl = this.grid.validation.getFormControl(this.id.rowID, this.column.field);
137139
const args: IGridEditEventArgs = {
138140
rowID: this.id.rowID,
141+
primaryKey: this.id.rowID,
139142
cellID: this.id,
140143
rowData: this.rowData,
141144
oldValue: this.value,
@@ -158,6 +161,7 @@ export class IgxCell {
158161
const formControl = this.grid.validation.getFormControl(this.id.rowID, this.column.field);
159162
const args: IGridEditDoneEventArgs = {
160163
rowID: this.id.rowID,
164+
primaryKey: this.id.rowID,
161165
cellID: this.id,
162166
// rowData - should be the updated/committed rowData - this effectively should be the newValue
163167
// the only case we use this.rowData directly, is when there is no rowEditing or transactions enabled
@@ -538,8 +542,11 @@ export class IgxRowAddCrudState extends IgxRowCrudState {
538542
if (isAddRow) {
539543
this.endAddRow();
540544
if (commit) {
541-
this.grid.rowAddedNotifier.next({ data: args.newValue, owner: this.grid });
542-
this.grid.rowAdded.emit({ data: args.newValue, owner: this.grid });
545+
// this.grid.rowAddedNotifier.next({ data: args.newValue, owner: this.grid });
546+
// this.grid.rowAdded.emit({ data: args.newValue, owner: this.grid });
547+
const rowAddedEventArgs: IRowDataEventArgs = { data: args.newValue, owner: this.grid, primaryKey: args.newValue[this.grid.primaryKey] }
548+
this.grid.rowAddedNotifier.next(rowAddedEventArgs);
549+
this.grid.rowAdded.emit(rowAddedEventArgs);
543550
}
544551
}
545552

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ export interface IGridCellEventArgs extends IBaseEventArgs {
1818
}
1919

2020
export interface IGridEditDoneEventArgs extends IBaseEventArgs {
21-
rowID: any;
21+
rowID: any; // deprecated
22+
primaryKey: any // in a major version, remove the deprecated `rowID` and migrate to `key`
2223
cellID?: {
2324
rowID: any;
2425
columnID: any;
@@ -67,6 +68,7 @@ export interface IPinColumnCancellableEventArgs extends IPinColumnEventArgs, Can
6768
}
6869
export interface IRowDataEventArgs extends IBaseEventArgs {
6970
data: any;
71+
primaryKey: any; // available if primaryKey exists
7072
owner: GridType;
7173
}
7274

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4759,7 +4759,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
47594759
this.gridAPI.addRowToData(data);
47604760

47614761
this.pipeTrigger++;
4762-
this.rowAddedNotifier.next({ data: data, owner: this });
4762+
this.rowAddedNotifier.next({ data: data, owner: this, primaryKey: data[this.primaryKey] });
47634763
this.notifyChanges();
47644764
}
47654765

@@ -4785,6 +4785,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
47854785
public deleteRowById(rowId: any): any {
47864786
const args = {
47874787
rowID: rowId,
4788+
primaryKey: rowId,
47884789
cancel: false,
47894790
rowData: this.getRowData(rowId),
47904791
oldValue: null,
@@ -4797,7 +4798,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
47974798

47984799
const record = this.gridAPI.deleteRowById(rowId);
47994800
if (record !== null && record !== undefined) {
4800-
this.rowDeleted.emit({ data: record, owner: this });
4801+
const rowDeletedEventArgs: IRowDataEventArgs = { data: record, owner: this, primaryKey: record[this.primaryKey] };
4802+
this.rowDeleted.emit(rowDeletedEventArgs);
48014803
}
48024804
return record;
48034805
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
592592

593593
let cellArgs: IGridEditEventArgs = {
594594
rowID: cell.row.key,
595+
primaryKey: cell.row.key,
595596
cellID: cell.cellID,
596597
rowData: initialRowData,
597598
oldValue: 'John Brown',
@@ -615,6 +616,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
615616
cellArgs = {
616617
cellID: cell2.id,
617618
rowID: cell2.row.key,
619+
primaryKey: cell2.row.key,
618620
rowData: initialRowData,
619621
oldValue: 20,
620622
valid: true,
@@ -642,6 +644,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
642644

643645
let cellArgs: IGridEditEventArgs = {
644646
cellID: cell.cellID,
647+
primaryKey: cell.row.key,
645648
rowID: cell.row.key,
646649
rowData: initialRowData,
647650
oldValue: 'John Brown',
@@ -666,6 +669,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
666669

667670
cellArgs = {
668671
cellID: cell.cellID,
672+
primaryKey: cell.row.key,
669673
rowID: cell.row.key,
670674
rowData: initialRowData,
671675
oldValue: 20,
@@ -695,6 +699,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
695699

696700
let cellArgs: IGridEditDoneEventArgs = {
697701
rowID: cell.row.key,
702+
primaryKey: cell.row.key,
698703
cellID: cell.cellID,
699704
rowData: initialRowData,
700705
newValue: 'John Brown',
@@ -717,6 +722,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
717722
initialRowData = {...cell.row.data};
718723
cellArgs = {
719724
cellID: cell.cellID,
725+
primaryKey: cell.row.key,
720726
rowID: cell.row.key,
721727
rowData: initialRowData,
722728
newValue: 20,
@@ -750,6 +756,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
750756
// TODO: cellEdit should emit updated rowData - issue #7304
751757
cellArgs = {
752758
cellID: cell.cellID,
759+
primaryKey: cell.row.key,
753760
rowID: cell.row.key,
754761
rowData: cell.row.data,
755762
oldValue: 'John Brown',
@@ -776,6 +783,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
776783
// TODO: cellEdit should emit updated rowData - issue #7304
777784
cellArgs = {
778785
cellID: cell.cellID,
786+
primaryKey: cell.row.key,
779787
rowID: cell.row.key,
780788
rowData: cell.row.data,
781789
oldValue: 20,
@@ -815,6 +823,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
815823

816824
const cellArgs: IGridEditEventArgs = {
817825
rowID: cell.row.key,
826+
primaryKey: cell.row.key,
818827
cellID: cell.cellID,
819828
rowData: initialRowData,
820829
oldValue: cellValue,
@@ -958,6 +967,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
958967
const cellArgs: IGridEditDoneEventArgs = {
959968
cellID: cell.id,
960969
rowID: cell.row.key,
970+
primaryKey: cell.row.key,
961971
rowData: updatedRowData, // fixture is with transactions & without rowEditing
962972
oldValue: initialValue,
963973
newValue,
@@ -989,6 +999,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
989999
const cellArgs: IGridEditDoneEventArgs = {
9901000
cellID: cell.cellID,
9911001
rowID: cell.row.key,
1002+
primaryKey: cell.row.key,
9921003
rowData: initialRowData,
9931004
oldValue: 'John Brown',
9941005
newValue: 'New Name',
@@ -1025,6 +1036,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
10251036
fixture.detectChanges();
10261037

10271038
cellArgs = {
1039+
primaryKey: cell.row.key,
10281040
cellID: cell.id,
10291041
rowID: cell.row.key,
10301042
rowData: updatedRowData, // fixture is without rowEditing and without transactions
@@ -1051,6 +1063,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
10511063
updatedRowData = Object.assign({}, cell.row.data, { age: secondNewValue });
10521064
cellArgs = {
10531065
cellID: cell.id,
1066+
primaryKey: cell.row.key,
10541067
rowID: cell.row.key,
10551068
rowData: cell.row.data, // fixture is without rowEditing and without transactions
10561069
oldValue: 20,

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ describe('IgxGrid - Row Editing #grid', () => {
164164
fix.detectChanges();
165165
expect(row.inEditMode).toBe(true);
166166
const cellEditArgs: IGridEditEventArgs = {
167+
primaryKey: cell.row.key,
167168
cellID: cell.id,
168169
rowID: cell.row.key,
169170
rowData: cell.row.data,
@@ -176,6 +177,7 @@ describe('IgxGrid - Row Editing #grid', () => {
176177
};
177178
let rowEditArgs: IGridEditEventArgs = {
178179
rowID: row.key,
180+
primaryKey: cell.row.key,
179181
rowData: initialRowData,
180182
oldValue: row.data,
181183
cancel: false,
@@ -195,6 +197,7 @@ describe('IgxGrid - Row Editing #grid', () => {
195197
let cellEditExitArgs: IGridEditDoneEventArgs = {
196198
cellID: cell.id,
197199
rowID: cell.row.key,
200+
primaryKey: cell.row.key,
198201
rowData: cell.row.data,
199202
oldValue: cell.value,
200203
valid: true,
@@ -206,6 +209,7 @@ describe('IgxGrid - Row Editing #grid', () => {
206209

207210
const rowEditExitArgs: IGridEditDoneEventArgs = {
208211
rowID: row.key,
212+
primaryKey: row.key,
209213
rowData: initialRowData,
210214
newValue: initialRowData,
211215
oldValue: row.data,
@@ -228,6 +232,7 @@ describe('IgxGrid - Row Editing #grid', () => {
228232

229233
cellEditExitArgs = {
230234
cellID: cell.id,
235+
primaryKey: cell.row.key,
231236
rowID: cell.row.key,
232237
rowData: Object.assign({}, row.data, { ProductName: newCellValue }),
233238
oldValue: cell.value,
@@ -243,6 +248,7 @@ describe('IgxGrid - Row Editing #grid', () => {
243248

244249
rowEditArgs = {
245250
rowID: row.key,
251+
primaryKey: cell.row.key,
246252
rowData: initialRowData,
247253
newValue: Object.assign({}, row.data, { ProductName: newCellValue }),
248254
oldValue: row.data,
@@ -255,6 +261,7 @@ describe('IgxGrid - Row Editing #grid', () => {
255261

256262
const cellDoneArgs: IGridEditDoneEventArgs = {
257263
rowID: cell.row.key,
264+
primaryKey: row.key,
258265
cellID: cell.id,
259266
rowData: updatedRowData, // with rowEditable - IgxGridRowEditingComponent
260267
oldValue: cell.value,
@@ -267,6 +274,7 @@ describe('IgxGrid - Row Editing #grid', () => {
267274

268275
const rowDoneArgs: IGridEditDoneEventArgs = {
269276
rowID: row.key,
277+
primaryKey: row.key,
270278
rowData: updatedRowData, // with rowEditable - IgxGridRowEditingComponent
271279
oldValue: row.data,
272280
newValue: Object.assign({}, row.data, { ProductName: newCellValue }),
@@ -1779,6 +1787,7 @@ describe('IgxGrid - Row Editing #grid', () => {
17791787
// TODO: rowEdit should emit updated rowData - issue #7304
17801788
expect(grid.rowEdit.emit).toHaveBeenCalledWith({
17811789
rowID: 1,
1790+
primaryKey: 1,
17821791
rowData: initialData,
17831792
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
17841793
oldValue: initialData,
@@ -1819,6 +1828,7 @@ describe('IgxGrid - Row Editing #grid', () => {
18191828
expect(grid.rowEdit.emit).toHaveBeenCalledTimes(1);
18201829
expect(grid.rowEdit.emit).toHaveBeenCalledWith({
18211830
rowID: 1,
1831+
primaryKey: 1,
18221832
rowData: initialData,
18231833
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
18241834
oldValue: initialData,
@@ -1844,6 +1854,7 @@ describe('IgxGrid - Row Editing #grid', () => {
18441854
expect(grid.rowEdit.emit).toHaveBeenCalledTimes(2);
18451855
expect(grid.rowEdit.emit).toHaveBeenCalledWith({
18461856
rowID: 1,
1857+
primaryKey: 1,
18471858
rowData: initialData,
18481859
newValue: Object.assign({}, initialData, { ProductName: 'New Name' }),
18491860
oldValue: initialData,
@@ -1875,6 +1886,7 @@ describe('IgxGrid - Row Editing #grid', () => {
18751886
expect(grid.rowEditExit.emit).toHaveBeenCalled();
18761887
expect(grid.rowEditExit.emit).toHaveBeenCalledWith({
18771888
rowID: 1,
1889+
primaryKey: 1,
18781890
rowData: initialData,
18791891
newValue: initialData,
18801892
oldValue: initialData,
@@ -1902,6 +1914,7 @@ describe('IgxGrid - Row Editing #grid', () => {
19021914
expect(grid.rowEditEnter.emit).toHaveBeenCalled();
19031915
expect(grid.rowEditEnter.emit).toHaveBeenCalledWith({
19041916
rowID: 1,
1917+
primaryKey: 1,
19051918
rowData: initialData,
19061919
oldValue: initialData,
19071920
cancel: false,
@@ -1933,6 +1946,7 @@ describe('IgxGrid - Row Editing #grid', () => {
19331946
expect(grid.rowEditEnter.emit).toHaveBeenCalledTimes(1);
19341947
expect(grid.rowEditEnter.emit).toHaveBeenCalledWith({
19351948
rowID: 1,
1949+
primaryKey: 1,
19361950
rowData: initialData,
19371951
oldValue: initialData,
19381952
cancel: true,
@@ -1966,6 +1980,7 @@ describe('IgxGrid - Row Editing #grid', () => {
19661980
expect(grid.rowEditExit.emit).toHaveBeenCalledTimes(1);
19671981
expect(grid.rowEditExit.emit).toHaveBeenCalledWith({
19681982
rowID: 1,
1983+
primaryKey: 1,
19691984
rowData: initialData,
19701985
newValue: initialData,
19711986
oldValue: initialData,
@@ -1997,6 +2012,7 @@ describe('IgxGrid - Row Editing #grid', () => {
19972012
expect(grid.rowEditExit.emit).toHaveBeenCalledTimes(1);
19982013
expect(grid.rowEditExit.emit).toHaveBeenCalledWith({
19992014
rowID: 1,
2015+
primaryKey: 1,
20002016
rowData: initialData,
20012017
newValue: initialData,
20022018
oldValue: initialData,
@@ -2015,6 +2031,7 @@ describe('IgxGrid - Row Editing #grid', () => {
20152031
const cellArgs = {
20162032
cellID: cell.id,
20172033
rowID: cell.row.key,
2034+
primaryKey: cell.row.key,
20182035
rowData: cell.row.data,
20192036
oldValue: 'Chai',
20202037
newValue: 'New Value',
@@ -2246,6 +2263,7 @@ describe('IgxGrid - Row Editing #grid', () => {
22462263

22472264
const cellDoneArgs: IGridEditDoneEventArgs = {
22482265
rowID: cell.row.key,
2266+
primaryKey: cell.row.key,
22492267
cellID: cell.id,
22502268
rowData: updatedRowData, // with rowEditable&Transactions - IgxGridRowEditingTransactionComponent
22512269
oldValue: cell.value,
@@ -2258,6 +2276,7 @@ describe('IgxGrid - Row Editing #grid', () => {
22582276

22592277
const rowDoneArgs: IGridEditDoneEventArgs = {
22602278
rowID: row.key,
2279+
primaryKey: row.key,
22612280
rowData: updatedRowData, // with rowEditable&Transactions - IgxGridRowEditingTransactionComponent
22622281
oldValue: row.data,
22632282
newValue: Object.assign({}, row.data, { ProductName: newCellValue }),

0 commit comments

Comments
 (0)