View Full Version : tab-out from cell on editable grid

27 Aug 2010, 9:16 AM
on the editable grid, after i typed data in the last editable column and Tabbed Out, how do i trigger button Add click event (this is to add a new row)?

thank you

27 Aug 2010, 9:19 AM
You can listen to the Events.AfterEdit event of the EditorGrid for this. If the event fires and the colindex is the last column and the row index is the last row, than add a new model the store.

27 Aug 2010, 9:37 AM
Thanks Sven, but this will not work, because i also have Save button, so if AfterEdit event will trigger new row insert when i didn't tab-out but clicked button Save, then it will stop me from saving.
In other words, i don't want a new row when i clicked Save button. Besides Save i have several other buttons and links there and i don't want new row inserted when those are clicked.


27 Aug 2010, 9:49 AM
You can also listen to the SpecialKey event of the CellEditor. If the key is the tab key, and you are currently editing/editited the last row, you need to add a new model. You can check the row/column on the CellEditor instance directly.

I have not tested this, but from just thinking about it, it can work

27 Aug 2010, 10:00 AM
Works without any problems:
final CellEditor checkBoxEditor = new CellEditor(new CheckBox());
checkBoxEditor.addListener(Events.SpecialKey, new Listener<FieldEvent>() {

public void handleEvent(FieldEvent be) {
if (be.getKeyCode() == KeyCodes.KEY_TAB && checkBoxEditor.row == store.getCount() - 1) {
Plant plant = new Plant();
plant.setName("New Plant 1");
plant.setLight("Mostly Shady");
plant.setAvailable(new DateWrapper().clearTime().asDate());




27 Aug 2010, 10:04 AM
thank you Sven very much!

27 Aug 2010, 10:07 AM
The code is for this example: http://www.sencha.com/examples/explorer.html#editablegrid

But you should be able to easily adopt it for everything else.

27 Aug 2010, 11:43 AM
yes, it's working, thanks a lot Sven, here is my code

import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DeferredCommand;

paymentEditor.addListener(Events.SpecialKey, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
if (be.getKeyCode() == KeyCodes.KEY_TAB && row == paymentGrid.getStore().getCount() - 1) {
DeferredCommand.addCommand(new Command() {
public void execute() {