View Full Version : [2.0.2] EditorGridPanel - afteredit event not firing when leaving cell unchanged.

8 Apr 2008, 12:33 PM
I need to know when a user has started to edit a cell, using beforeedit, and then when that user leaves the cell, afteredit. The beforeedit always fires as expected but the afteredit does not fire if the user leaves the cell without changing the value. Is this a bug or did I misunderstand the purpose of the afteredit event? I understand the value has not been modified but I need to know if the user is currently in edit mode but you will never know they left edit mode if you are waiting for the afteredit event.

14 Apr 2008, 11:18 AM
I guess nobody else has attempted this and thought I'd include a small example which should work on any EditorGridPanel. The beforeedit fires as expected when I double click the cell. The afteredit event only fires if the value was changed. I expected the afteredit event to fire every time the user leaves the edit mode for a cell regardless if the cell was modified or not.

newGrid=new Ext.grid.EditorGridPanel({
title:'Sample Grid',
selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),

beforeedit:function(e){ console.info('beforeedit';return true; },
afteredit:function(e){ console.info('afteredit');return true; }

I hope this is enough information for someone to help me.

14 Apr 2011, 7:29 AM
I am having the same problem. Did you find a solution?

14 Apr 2011, 7:49 AM
This is how I got around the problem. I'm currently using ExtJS 3.2.1. Placing this listener on your grid should work. Good luck.

* We always want validateedit and afteredit events to fire, so fix it so they do.
* This allows us to have a listener on the grid to know when the user has left
* a field after beginedit had fired. Normally the aferedit event only gets fired
* if the user actually made changes and clicked somewhere else on the grid.
* Now if fires if the user clicks somewhere else like another grid.
* @param ed
* @param value
* @param startValue
onEditComplete: function(ed, value, startValue){
this.editing = false;
this.activeEditor = null;
ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
var r = ed.record;
var field = this.colModel.getDataIndex(ed.col);
// Setup the object to be passed to the validateedit event.
var e = {
grid: this,
record: r,
field: field,
originalValue: startValue,
value: value,
row: ed.row,
column: ed.col,
if(this.fireEvent("validateedit", e) !== false && !e.cancel){
r.set(field, value);
delete e.cancel;
this.fireEvent("afteredit", e);
this.view.focusCell(ed.row, ed.col);

14 Apr 2011, 7:57 AM
Thank you!

14 Oct 2011, 1:39 PM
Placing this listener on your grid should work. Good luck.

Thanks for this. Can you be more specific about how to use this please? eg using your sample code in post #2 above.