Skip to content

Commit 611365e

Browse files
zdrawkuzdrawku
authored
Merge pull request #8528 from IgniteUI/row-edit-temp-emit-evt-btns-args
feat(grid): passing the dom event through editing events Closes #8354
2 parents 80b0393 + 1ff2f4b commit 611365e

20 files changed

+209
-154
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
# Ignite UI for Angular Change Log
22

33
All notable changes for each version of this project will be documented in this file.
4-
## 11.0.0
54

5+
## 11.0.4
6+
7+
### General
8+
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
9+
- a new property `event` has been introduced to `IGridEditEventArgs` and `IGridEditDoneEventArgs`; the property represents the original DOM event that triggers any of Grid editing events like `rowEditEnter`, `cellEditEnter`, `cellEdit`, `cellEditDone`, `cellEditExit`, `rowEdit`, `rowEditDone`, `rowEditExit`
10+
11+
## 11.0.0
612

713
### General
814
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
6969
}
7070
// be sure row is in view
7171
if (grid.rowList.filter(r => r === row).length !== 0) {
72-
grid.crudService.enterEditMode(firstEditable);
72+
grid.crudService.enterEditMode(firstEditable, event);
7373
}
7474
this.strip.hide();
7575
}
@@ -107,7 +107,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
107107
console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
108108
return;
109109
}
110-
grid.beginAddRowByIndex(context.rowID, context.index, asChild);
110+
grid.beginAddRowByIndex(context.rowID, context.index, asChild, event);
111111
this.strip.hide();
112112
}
113113

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -116,34 +116,34 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
116116
}
117117
}
118118

119-
public submit_value() {
119+
public submit_value(event?: Event) {
120120
const cell = this.grid.crudService.cell;
121121
if (cell) {
122-
const args = this.update_cell(cell, cell.editValue);
122+
const args = this.update_cell(cell, cell.editValue, event);
123123
this.grid.crudService.cellEditingBlocked = args.cancel;
124124
if (args.cancel) {
125125
return args.cancel;
126126
}
127-
this.grid.crudService.exitCellEdit();
127+
this.grid.crudService.exitCellEdit(event);
128128
}
129129
}
130130

131-
public submit_add_value() {
131+
public submit_add_value(event?: Event) {
132132
const cell = this.grid.crudService.cell;
133133
if (cell) {
134-
const args = this.update_add_cell(cell, cell.editValue);
134+
const args = this.update_add_cell(cell, cell.editValue, event);
135135
if (args.cancel) {
136136
this.grid.endAddRow();
137137
return args.cancel;
138138
}
139-
return this.grid.crudService.exitCellEdit();
139+
return this.grid.crudService.exitCellEdit(event);
140140
}
141141
}
142142

143-
public update_add_cell(cell: IgxCell, value: any): IGridEditEventArgs {
143+
public update_add_cell(cell: IgxCell, value: any, event?: Event): IGridEditEventArgs {
144144
cell.editValue = value;
145145

146-
const args = cell.createEditEventArgs();
146+
const args = cell.createEditEventArgs(true, event);
147147

148148
if (isEqual(args.oldValue, args.newValue)) {
149149
return args;
@@ -158,15 +158,15 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
158158
const data = cell.rowData;
159159
mergeObjects(data, reverseMapper(cell.column.field, args.newValue));
160160
this.grid.crudService.row.data = data;
161-
const doneArgs = cell.createDoneEditEventArgs(args.newValue);
161+
const doneArgs = cell.createDoneEditEventArgs(args.newValue, event);
162162
doneArgs.rowData = data;
163163
this.grid.cellEditDone.emit(doneArgs);
164164
return args;
165165
}
166166

167-
update_cell(cell: IgxCell, value: any) {
167+
update_cell(cell: IgxCell, value: any, event?: Event) {
168168
cell.editValue = value;
169-
const args = cell.createEditEventArgs();
169+
const args = cell.createEditEventArgs(true, event);
170170

171171
if (isEqual(args.oldValue, args.newValue)) {
172172
return args;
@@ -197,7 +197,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
197197
(this.grid as any)._pipeTrigger++;
198198
}
199199

200-
const doneArgs = cell.createDoneEditEventArgs(args.newValue);
200+
const doneArgs = cell.createDoneEditEventArgs(args.newValue, event);
201201
this.grid.cellEditDone.emit(doneArgs);
202202
return args;
203203
}
@@ -239,7 +239,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
239239
}
240240
}
241241

242-
update_row(row: IgxRow, value: any) {
242+
update_row(row: IgxRow, value: any, event?: Event) {
243243
const grid = this.grid;
244244
const selected = grid.selectionService.isRowSelected(row.id);
245245
const rowInEditMode = grid.crudService.row;
@@ -248,7 +248,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
248248
const hasSummarized = grid.hasSummarizedColumns;
249249
this._update_row(row, value);
250250

251-
const args = row.createEditEventArgs();
251+
const args = row.createEditEventArgs(true, event);
252252

253253
// If no valid row is found
254254
if (index === -1) {
@@ -291,7 +291,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
291291
}
292292
(grid as any)._pipeTrigger++;
293293

294-
const doneArgs = row.createDoneEditEventArgs(cachedRowData);
294+
const doneArgs = row.createDoneEditEventArgs(cachedRowData, event);
295295
grid.rowEditDone.emit(doneArgs);
296296
return args;
297297
}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
634634
* @hidden
635635
* @internal
636636
*/
637-
_updateCRUDStatus() {
637+
_updateCRUDStatus(event?: Event) {
638638
if (this.editMode) {
639639
return;
640640
}
@@ -646,10 +646,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
646646
if (this.editable && editMode && !this.row.deleted) {
647647
if (editableCell) {
648648
if (this.row.addRow) {
649-
this.gridAPI.update_add_cell(editableCell, editableCell.editValue);
649+
this.gridAPI.update_add_cell(editableCell, editableCell.editValue, event);
650650
this.row.rowData = editableCell.rowData;
651651
} else {
652-
this.gridAPI.update_cell(editableCell, editableCell.editValue);
652+
this.gridAPI.update_cell(editableCell, editableCell.editValue, event);
653653
}
654654
/* This check is related with the following issue #6517:
655655
* when edit cell that belongs to a column which is sorted and press tab,
@@ -666,23 +666,23 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
666666
return true;
667667
}
668668

669-
crud.exitCellEdit();
669+
crud.exitCellEdit(event);
670670
}
671671
this.grid.tbody.nativeElement.focus({ preventScroll: true });
672672
this.grid.notifyChanges();
673-
crud.enterEditMode(this);
673+
crud.enterEditMode(this, event);
674674
return false;
675675
}
676676

677677
if (editableCell && crud.sameRow(this.cellID.rowID)) {
678678
if (this.row.addRow) {
679-
this.gridAPI.submit_add_value();
679+
this.gridAPI.submit_add_value(event);
680680
this.row.rowData = editableCell.rowData;
681681
} else {
682-
this.gridAPI.submit_value();
682+
this.gridAPI.submit_value(event);
683683
}
684684
} else if (editMode && !crud.sameRow(this.cellID.rowID)) {
685-
this.grid.endEdit(true);
685+
this.grid.endEdit(true, event);
686686
}
687687
}
688688

@@ -774,7 +774,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
774774
this.selectionService.primaryButton = false;
775775
// Ensure RMB Click on edited cell does not end cell editing
776776
if (!this.selected) {
777-
this.gridAPI.submit_value();
777+
this.gridAPI.submit_value(event);
778778
}
779779
return;
780780
}
@@ -824,10 +824,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
824824
(event as HammerInput).preventDefault();
825825
}
826826
if (this.grid.rowEditable && this.row.addRow) {
827-
this.crudService.enterEditMode(this);
827+
this.crudService.enterEditMode(this, event as Event);
828828
}
829829
if (this.editable && !this.editMode && !this.row.deleted && !this.crudService.rowEditingBlocked) {
830-
this.crudService.enterEditMode(this);
830+
this.crudService.enterEditMode(this, event as Event);
831831
}
832832

833833
this.grid.onDoubleClick.emit({
@@ -869,7 +869,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
869869
const shouldEmitSelection = !this.selectionService.isActiveNode(node);
870870

871871
if (this.selectionService.primaryButton) {
872-
this._updateCRUDStatus();
872+
this._updateCRUDStatus(event);
873873

874874
const activeElement = this.selectionService.activeElement;
875875
const row = activeElement ? this.gridAPI.get_row_by_index(activeElement.row) : null;
@@ -882,7 +882,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
882882
} else {
883883
this.selectionService.activeElement = null;
884884
if (this.crudService.cellInEditMode && !this.editMode) {
885-
this.gridAPI.submit_value();
885+
this.gridAPI.submit_value(event);
886886
}
887887
}
888888

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,11 +336,11 @@ <h6 class="igx-filter-empty__title">
336336
</article>
337337

338338
<footer class="igx-excel-filter__secondary-footer">
339-
<button igxButton [displayDensity]="displayDensity" (click)="onClearButtonClick()">{{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}</button>
339+
<button igxButton [displayDensity]="displayDensity" (click)="onClearButtonClick($event)">{{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}</button>
340340

341341
<div>
342342
<button igxButton [displayDensity]="displayDensity" (click)="cancelChanges()">{{ grid.resourceStrings.igx_grid_excel_cancel }}</button>
343-
<button igxButton="raised" [displayDensity]="displayDensity" (click)="onApplyButtonClick()">
343+
<button igxButton="raised" [displayDensity]="displayDensity" (click)="onApplyButtonClick($event)">
344344
{{ grid.resourceStrings.igx_grid_excel_apply }}
345345
</button>
346346
</div>

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,8 +1084,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
10841084
/**
10851085
* @hidden @internal
10861086
*/
1087-
public onClearButtonClick() {
1088-
this.grid.endEdit(false);
1087+
public onClearButtonClick(event?: Event) {
1088+
this.grid.endEdit(false, event);
10891089
this.grid.advancedFilteringExpressionsTree = null;
10901090
}
10911091

@@ -1105,8 +1105,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
11051105
/**
11061106
* @hidden @internal
11071107
*/
1108-
public applyChanges() {
1109-
this.grid.endEdit(false);
1108+
public applyChanges(event?: Event) {
1109+
this.grid.endEdit(false, event);
11101110
this.exitOperandEdit();
11111111
this.grid.advancedFilteringExpressionsTree = this.createExpressionsTreeFromGroupItem(this.rootGroup);
11121112
}
@@ -1124,8 +1124,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
11241124
/**
11251125
* @hidden @internal
11261126
*/
1127-
public onApplyButtonClick() {
1128-
this.applyChanges();
1127+
public onApplyButtonClick(event?: Event) {
1128+
this.applyChanges(event);
11291129
this.closeDialog();
11301130
}
11311131

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

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4158,12 +4158,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
41584158
/**
41594159
* @hidden @internal
41604160
*/
4161-
public beginAddRowByIndex(rowID: any, index: number, asChild?: boolean) {
4161+
public beginAddRowByIndex(rowID: any, index: number, asChild?: boolean, event?: Event) {
41624162
if (!this.rowEditable) {
41634163
console.warn('The grid must use row edit mode to perform row adding! Please set rowEditable to true.');
41644164
return;
41654165
}
4166-
this.endEdit(true);
4166+
this.endEdit(true, event);
41674167
this.cancelAddMode = false;
41684168
const isInPinnedArea = this.isRecordPinnedByViewIndex(index);
41694169
const pinIndex = this.pinnedRecords.findIndex(x => x[this.primaryKey] === rowID);
@@ -4196,7 +4196,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
41964196
row.animateAdd = false;
41974197
const cell = row.cells.find(c => c.editable);
41984198
if (cell) {
4199-
cell.setEditMode(true);
4199+
this.gridAPI.submit_value(event);
4200+
this.crudService.enterEditMode(cell, event);
42004201
cell.activate();
42014202
}
42024203
});
@@ -6581,22 +6582,22 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65816582
/**
65826583
* @hidden @internal
65836584
*/
6584-
endRowTransaction(commit: boolean, row: IgxRow) {
6585+
endRowTransaction(commit: boolean, row: IgxRow, event?: Event) {
65856586
row.newData = this.transactions.getAggregatedValue(row.id, true);
6586-
let rowEditArgs = row.createEditEventArgs();
6587+
let rowEditArgs = row.createEditEventArgs(true, event);
65876588

65886589
if (!commit) {
65896590
this.transactions.endPending(false);
65906591
} else {
6591-
rowEditArgs = this.gridAPI.update_row(row, row.newData);
6592+
rowEditArgs = this.gridAPI.update_row(row, row.newData, event);
65926593
if (rowEditArgs?.cancel) {
65936594
return true;
65946595
}
65956596
}
65966597

65976598
this.crudService.endRowEdit();
65986599

6599-
const nonCancelableArgs = row.createDoneEditEventArgs(rowEditArgs.oldValue);
6600+
const nonCancelableArgs = row.createDoneEditEventArgs(rowEditArgs.oldValue, event);
66006601
this.rowEditExit.emit(nonCancelableArgs);
66016602
this.closeRowEditingOverlay();
66026603
}
@@ -6625,15 +6626,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66256626
}
66266627

66276628
if (commit) {
6628-
canceled = this.gridAPI.submit_value();
6629+
canceled = this.gridAPI.submit_value(event);
66296630
if (canceled) {
66306631
return true;
66316632
}
66326633
} else {
6633-
this.crudService.exitCellEdit();
6634+
this.crudService.exitCellEdit(event);
66346635
}
66356636

6636-
canceled = this.crudService.exitRowEdit(commit);
6637+
canceled = this.crudService.exitRowEdit(commit, event);
66376638
this.crudService.rowEditingBlocked = canceled;
66386639
if (canceled) {
66396640
return true;
@@ -6643,11 +6644,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66436644
if (event && activeCell) {
66446645
const rowIndex = activeCell.row;
66456646
const visibleColIndex = activeCell.layout ? activeCell.layout.columnVisibleIndex : activeCell.column;
6646-
this.navigateTo(rowIndex, visibleColIndex, (c) => {
6647-
if (c.targetType === 'dataCell' && c.target) {
6648-
c.target.activate(event);
6649-
}
6650-
});
6647+
this.navigateTo(rowIndex, visibleColIndex);
66516648
}
66526649

66536650
return false;
@@ -6672,16 +6669,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66726669
const showIndex = isInView ? -1 : dataIndex;
66736670
this.showSnackbarFor(showIndex);
66746671
});
6675-
cancelable = this.gridAPI.submit_add_value();
6672+
cancelable = this.gridAPI.submit_add_value(event);
66766673
if (!cancelable) {
6677-
const args = row.createEditEventArgs();
6674+
const args = row.createEditEventArgs(true, event);
66786675
this.rowEdit.emit(args);
66796676
if (args.cancel) {
66806677
return args.cancel;
66816678
}
66826679
const parentId = this._getParentRecordId();
66836680
this.gridAPI.addRowToData(row.data, parentId);
6684-
const doneArgs = row.createDoneEditEventArgs(cachedRowData);
6681+
const doneArgs = row.createDoneEditEventArgs(cachedRowData, event);
66856682
this.rowEditDone.emit(doneArgs);
66866683
this.crudService.endRowEdit();
66876684
if (this.addRowParent.isPinned) {
@@ -6691,7 +6688,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66916688
this.addRowParent = null;
66926689
this.cancelAddMode = cancelable;
66936690
} else {
6694-
this.crudService.exitCellEdit();
6691+
this.crudService.exitCellEdit(event);
66956692
this.cancelAddMode = true;
66966693
}
66976694
this.crudService.endRowEdit();
@@ -6701,7 +6698,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
67016698
this.cdr.detectChanges();
67026699
this.onRowAdded.emit({ data: row.data });
67036700
}
6704-
const nonCancelableArgs = row.createDoneEditEventArgs(cachedRowData);
6701+
const nonCancelableArgs = row.createDoneEditEventArgs(cachedRowData, event);
67056702
this.rowEditExit.emit(nonCancelableArgs);
67066703
return this.cancelAddMode;
67076704
}

0 commit comments

Comments
 (0)