How can i change the default behaviour to cancel the edit event if a user clicks on another row after initiating a change to some cells on a row?
Hello,
I have modified the previously attached sample in order to demonstrate the order of the events. You can observe the events order in the console.
The events cycle when you do not have a row in edit mode is : onCellClickEvent is fired twice -> onCellEditEnter -> and last onRowEditEnter event.
Having this in mind, you could see that every time the onCellEditEnter is executed before onRowEditEnter and after that depending on the performed action onRowEdit. In order to achieve the desired behavior, we need an event where the newly selected row is currently not in edit mode so you can cancel the editing of the previous. When the onRowEditEnter event is triggered changes are already saved and the row in edit mode is the new one. Since the onRowEdit event is executed after the onRowEditEnter this event is not the suitable. Another reason why I do not recommend using this event is that if there you cancel the changes this would mean that the Done button will not be able to save them. The reason is that Done button`s click event is raised after the onRowEdit event, so if it is canceled the Done button click would be canceled as well.
I suggested using the onCellEditEnter event since by design when you have row editing, the cell enters edit mode first, and after that its row enters edit mode. Due to this fact in onCellEditEnter event, you can get the cell's rowID and this row will not be in edit mode yet, so if editing is canceled it would be canceled for the previous row.
The igxGrid's endEdit event is actually the event executed be Done/Cancel buttons. If we pass false as event argument, the behavior would be as you clicked on the Cancel button and if we pass true, the behavior would be like we clicked on the Done button (the default behavior).
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
Just to make sure we are on the same page, We are only wanting the row save to occur when the end user clicks on the "Done" button/icon on the row that is currently being edited. All we are looking for is way to capture that event occurred and being able to pass into the "EndEdit" event.
Currently there is only one property "Cancel" that gets passed on in that event parameters (IGridEditEventArgs).
Regards,
Ramireddy
Thank you for getting back to me with a suggestion.
What i was more interested in was not a celledit but for a RowEdit ( [rowEditable]="true" ). Will you be able to give me any suggestions on that?
My suggestion is to handle the igxGrid's onCellEditEnter event and check whether the selected cell's row is currently in edit mode and if it is not to call the grid's endEdit method. This method finishes the row transactions on the current row and if we pass false as argument, the new value would not be committed.
cellEditEnter(event:any){ const row = this.grid1.getRowByIndex(event.cellID.rowIndex); if (!row.inEditMode) { this.grid1.endEdit(false); } }
Here could be found a simple sample that demonstrates this approach.
Please test it on your side and let me know if I may be of any further assistance.