Skip to content

Commit 88bf397

Browse files
zdrawkuzdrawku
authored
Merge pull request #7986 from IgniteUI/expose-celleditexit-evt
feat(grid): expose cellEditExit evt
2 parents d4c3aed + aeb37a4 commit 88bf397

28 files changed

+955
-550
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ All notable changes for each version of this project will be documented in this
99
- `IgxInputGroup`
1010
- **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property.
1111
- **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
12+
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
13+
- **Rename outputs**
14+
`onRowEditEnter` to `rowEditEnter`
15+
`onCellEditEnter` to `cellEditEnter`
16+
`onCellEdit` to `cellEdit`
17+
`onRowEdit` to `rowEdit`
18+
- **Breaking Change** - The `onCellEditCancel` event is replaced by the new `cellEditExit` event that emits every time the editable cell exits edit mode.
19+
- **Breaking Change** - The `onRowEditCancel` event is replaced by the new `rowEditExit` event that emits every time the editable row exits edit mode.
1220
- `IgxOverlay`
1321
- **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
1422
- `IgxToggleDirective`
@@ -26,10 +34,11 @@ All notable changes for each version of this project will be documented in this
2634
- `IgxExpansionPanel`
2735
- `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel.
2836

29-
3037
### New Features
3138
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
3239
- When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
40+
- `cellEditExit` is a new event that fires when cell exits edit mode
41+
- `rowEditExit` is a new event that fires when row exits edit mode
3342
- Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
3443
- Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
3544
- `beginAddRow` method which starts the adding row UI.

‎projects/igniteui-angular/migrations/update-10_2_0/changes/outputs.json‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "onCellEditCancel",
6+
"replaceWith": "cellEditExit",
7+
"owner": {
8+
"selector": "igx-grid",
9+
"type": "component"
10+
}
11+
},
12+
{
13+
"name": "onCellEditCancel",
14+
"replaceWith": "cellEditExit",
15+
"owner": {
16+
"selector": "igx-tree-grid",
17+
"type": "component"
18+
}
19+
},
20+
{
21+
"name": "onCellEditCancel",
22+
"replaceWith": "cellEditExit",
23+
"owner": {
24+
"selector": "igx-hierarchical-grid",
25+
"type": "component"
26+
}
27+
},
28+
{
29+
"name": "onRowEditCancel",
30+
"replaceWith": "rowEditExit",
31+
"owner": {
32+
"selector": "igx-grid",
33+
"type": "component"
34+
}
35+
},
36+
{
37+
"name": "onRowEditCancel",
38+
"replaceWith": "rowEditExit",
39+
"owner": {
40+
"selector": "igx-tree-grid",
41+
"type": "component"
42+
}
43+
},
44+
{
45+
"name": "onRowEditCancel",
46+
"replaceWith": "rowEditExit",
47+
"owner": {
48+
"selector": "igx-hierarchical-grid",
49+
"type": "component"
50+
}
51+
},
52+
{
53+
"name": "onRowEditEnter",
54+
"replaceWith": "rowEditEnter",
55+
"owner": {
56+
"selector": "igx-grid",
57+
"type": "component"
58+
}
59+
},
60+
{
61+
"name": "onRowEditEnter",
62+
"replaceWith": "rowEditEnter",
63+
"owner": {
64+
"selector": "igx-hierarchical-grid",
65+
"type": "component"
66+
}
67+
},
68+
{
69+
"name": "onRowEditEnter",
70+
"replaceWith": "rowEditEnter",
71+
"owner": {
72+
"selector": "igx-tree-grid",
73+
"type": "component"
74+
}
75+
},
76+
{
77+
"name": "onCellEditEnter",
78+
"replaceWith": "cellEditEnter",
79+
"owner": {
80+
"selector": "igx-grid",
81+
"type": "component"
82+
}
83+
},
84+
{
85+
"name": "onCellEditEnter",
86+
"replaceWith": "cellEditEnter",
87+
"owner": {
88+
"selector": "igx-tree-grid",
89+
"type": "component"
90+
}
91+
},
92+
{
93+
"name": "onCellEditEnter",
94+
"replaceWith": "cellEditEnter",
95+
"owner": {
96+
"selector": "igx-hierarchical-grid",
97+
"type": "component"
98+
}
99+
},
100+
{
101+
"name": "onCellEdit",
102+
"replaceWith": "cellEdit",
103+
"owner": {
104+
"selector": "igx-grid",
105+
"type": "component"
106+
}
107+
},
108+
{
109+
"name": "onCellEdit",
110+
"replaceWith": "cellEdit",
111+
"owner": {
112+
"selector": "igx-tree-grid",
113+
"type": "component"
114+
}
115+
},
116+
{
117+
"name": "onCellEdit",
118+
"replaceWith": "cellEdit",
119+
"owner": {
120+
"selector": "igx-hierarchical-grid",
121+
"type": "component"
122+
}
123+
},
124+
{
125+
"name": "onRowEdit",
126+
"replaceWith": "rowEdit",
127+
"owner": {
128+
"selector": "igx-grid",
129+
"type": "component"
130+
}
131+
},
132+
{
133+
"name": "onRowEdit",
134+
"replaceWith": "rowEdit",
135+
"owner": {
136+
"selector": "igx-hierarchical-grid",
137+
"type": "component"
138+
}
139+
},
140+
{
141+
"name": "onRowEdit",
142+
"replaceWith": "rowEdit",
143+
"owner": {
144+
"selector": "igx-tree-grid",
145+
"type": "component"
146+
}
147+
}
148+
]
149+
}

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

Lines changed: 1 addition & 1 deletion
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.begin(firstEditable);
72+
grid.crudService.enterEditMode(firstEditable);
7373
}
7474
this.strip.hide();
7575
}

‎projects/igniteui-angular/src/lib/grids/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -221,14 +221,14 @@ A list of the events emitted by the **igx-grid**:
221221
|Name|Description|
222222
|--- |--- |
223223
|_Event emitters_|_Notify for a change_|
224-
|`onCellEditEnter`|Emitted when cell enters edit mode.|
225-
|`onCellEdit`|Emitted just before a cell's value is committed (e.g. by pressing Enter).|
224+
|`cellEditEnter`|Emitted when cell enters edit mode.|
225+
|`cellEdit`|Emitted just before a cell's value is committed (e.g. by pressing Enter).|
226226
|`cellEditDone`|Emitted after a cell has been edited and editing has been committed.|
227-
|`onCellEditCancel`|Emitted when a cell exits edit mode without committing its value (e.g. by pressing Escape).|
228-
|`onRowEditEnter`|If `[rowEditing]` is enabled, emitted when a row enters edit mode (after onCellEditEnter).|
229-
|`onRowEdit`|Emitted just before a row in edit mode's value is committed (e.g. by clicking the Done button on the Row Editing Overlay).|
227+
|`cellEditExit`|Emitted when a cell exits edit mode.|
228+
|`rowEditEnter`|If `[rowEditing]` is enabled, emitted when a row enters edit mode (before cellEditEnter).|
229+
|`rowEdit`|Emitted just before a row in edit mode's value is committed (e.g. by clicking the Done button on the Row Editing Overlay).|
230230
|`rowEditDone`|Emitted after exiting edit mode for a row and editing has been committed.|
231-
|`onRowEditCancel`|Emitted when a row exits edit mode without committing its values (e.g. by clicking the Cancel button on the Row Editing Overlay).|
231+
|`rowEditExit`|Emitted when a row exits edit mode without committing its values (e.g. by clicking the Cancel button on the Row Editing Overlay).|
232232
|`onCellClick`|Emitted when a cell is clicked. Returns the cell object.|
233233
|`onColumnMoving`|Emitted when a column is moved. Returns the source and target columns objects. This event is cancelable.|
234234
|`onColumnMovingEnd`|Emitted when a column moving ends. Returns the source and target columns objects. This event is cancelable.|

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

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -69,16 +69,6 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
6969
return data[index];
7070
}
7171

72-
// TODO: Refactor
73-
public escape_editMode() {
74-
this.grid.crudService.end();
75-
}
76-
77-
// TODO: Refactor
78-
public get_cell_inEditMode(): IgxCell {
79-
return this.grid.crudService.cell;
80-
}
81-
8272
public get_row_index_in_data(rowID: any, dataCollection?: any[]): number {
8373
const grid = this.grid as IgxGridBaseDirective;
8474
if (!grid) {
@@ -130,34 +120,37 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
130120
const cell = this.grid.crudService.cell;
131121
if (cell) {
132122
const args = this.update_cell(cell, cell.editValue);
123+
this.grid.crudService.cellEditingBlocked = args.cancel;
133124
if (args.cancel) {
134-
return;
125+
return args.cancel;
135126
}
136-
this.escape_editMode();
127+
this.grid.crudService.exitCellEdit();
137128
}
138129
}
139130

140131
public submit_add_value() {
141132
const cell = this.grid.crudService.cell;
142133
if (cell) {
143134
this.update_add_cell(cell, cell.editValue);
144-
this.escape_editMode();
135+
this.grid.crudService.exitCellEdit();
145136
}
146137
}
147138

148139
public update_add_cell(cell: IgxCell, value: any) {
149140
cell.editValue = value;
150141

151142
const args = cell.createEditEventArgs();
152-
this.grid.onCellEdit.emit(args);
153143

154-
if (args.cancel) {
144+
if (isEqual(args.oldValue, args.newValue)) {
155145
return args;
156146
}
157147

158-
if (isEqual(args.oldValue, args.newValue)) {
148+
this.grid.cellEdit.emit(args);
149+
this.grid.crudService.cellEditingBlocked = args.cancel;
150+
if (args.cancel) {
159151
return args;
160152
}
153+
161154
const data = cell.rowData;
162155
mergeObjects(data, reverseMapper(cell.column.field, args.newValue));
163156
const doneArgs = cell.createDoneEditEventArgs(args.newValue);
@@ -168,17 +161,18 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
168161
update_cell(cell: IgxCell, value: any) {
169162
cell.editValue = value;
170163
const args = cell.createEditEventArgs();
171-
this.grid.onCellEdit.emit(args);
172-
// TODO Implement cellEditExit event end emit if isEqual(args.oldValue, args.newValue)
173-
// TODO do not emit onCellEdit & cellEditDone if isEqual(args.oldValue, args.newValue)
174-
if (args.cancel) {
164+
165+
if (isEqual(args.oldValue, args.newValue)) {
175166
return args;
176167
}
177168

178-
if (isEqual(args.oldValue, args.newValue)) {
169+
this.grid.cellEdit.emit(args);
170+
this.grid.crudService.cellEditingBlocked = args.cancel;
171+
if (args.cancel) {
179172
return args;
180173
}
181174

175+
182176
this.grid.summaryService.clearSummaryCache(args);
183177
const data = this.getRowData(cell.id.rowID);
184178
this.updateData(this.grid, cell.id.rowID, data, cell.rowData, reverseMapper(cell.column.field, args.newValue));
@@ -199,7 +193,6 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
199193

200194
const doneArgs = cell.createDoneEditEventArgs(args.newValue);
201195
this.grid.cellEditDone.emit(doneArgs);
202-
203196
return args;
204197
}
205198

@@ -256,7 +249,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
256249
return args;
257250
}
258251

259-
grid.onRowEdit.emit(args);
252+
grid.rowEdit.emit(args);
260253

261254
if (args.cancel) {
262255
return args;
@@ -329,7 +322,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
329322
ignoreCase: boolean) {
330323
const grid = this.grid;
331324
const filteringTree = grid.filteringExpressionsTree;
332-
grid.endEdit(false);
325+
this.grid.endEdit(false);
333326

334327
if (grid.paging) {
335328
grid.page = 0;

0 commit comments

Comments
 (0)