Disabling Tab And Enter In EditorGrid

[gensisns]

How can the default behavior of tab and enter keys be disabled with using an editor grid. Instead of tab or enter moving to an adjacent cell, I'd like to just complete the edit and stay in the same cell.

I tried overriding onEditComplete in EditorGrid and onEditorKey in CellSelectionModel to change the behavior, but neither worked.

Thanks in advance,
Michael

[gensisns]

Anyone have any ideas?

[sj137]

Hi I was just wondering if you had any luck trying to disable the Enter and Tab keys, fyi i read something on another post about swallowing key events and i think there is a function like that somewhere that may help you out.

I'm try to also alter the events that happen after a Tab and Enter key are pressed during edit of a grid cell, but instead to moving across/down respectively as is the default, i want the edit field to move across/up...

i tried over riding the onEditComplete and was about to try overriding the onEditorKey when i saw your post...

i've gotta try but please let me know asap if i'm barking up the wrong tree. many thanks.

SJ

[xphilius]

I am trying to get a handle on this same problem. I have added a listener to the grid for the keydown and keypress events, and they work as expected, but I cannot seem to use "stopEvent" method of the Ext.EventObject to keep the grid from moving to the next cell when tab is pressed.

When I hit the tab key, I see the alert, but the grid still moves to the next cell. What is the right way to do this?

// hoping to use this to enhance the keyboard navigation
function handleKeyDown(passedEventObject) {
    if (passedEventObject.getKey() == passedEventObject.TAB) {
         dummy = passedEventObject.stopEvent();
        alert('huh??');
    }
}

// this works
taskGrid.addListener('keydown', handleKeyDown); 

Thanks in advance! Having too damn much fun with this library!

Jason

[para]

I played with it for a little while, with no real gain.
I think that it's the browser moving the focus at this point. I don't think any amount of overriding will fix that. However, you may be able to move it back to the cell you want. (let the browser move it forward, then you move it back).
Let me know...

[sj137]

hey guys i've found a solution that works for me and may help you out too...

basically i first override the onEditComplete method of the EditorGrid (find in EditorGrid.js) becuase by default it only fires the validateedit and afteredit events if the 'value' of the cell is different from the 'startValue'... this is becuase in my requirements: if the user doesn't enter a value and leaves the cell blank i want the grid to delete the row, so here's a look at my code:

in myjs.js:

    grid.onEditComplete = function(ed, value, startValue){
        grid.editing = false;
        grid.activeEditor = null;
        ed.un("specialkey", grid.selModel.onEditorKey, grid.selModel);
    if(String(value) != String(startValue)){
            var r = ed.record;
            var field = grid.colModel.getDataIndex(ed.col);
            var e = {
                grid: grid,
                record: r,
                field: field,
                originalValue: startValue,
                value: value,
                row: ed.row,
                column: ed.col,
                cancel:false
            };
            if(grid.fireEvent("validateedit", e) !== false && !e.cancel){
                r.set(field, value);
                delete e.cancel;
                grid.fireEvent("afteredit", e);
            }
        }else if(String(value) == String('')){
            var r = ed.record;
            var field = grid.colModel.getDataIndex(ed.col);
            var e = {
                grid: grid,
                record: r,
                field: field,
                originalValue: startValue,
                value: value,
                row: ed.row,
                column: ed.col,
                cancel:false
            };
            if(grid.fireEvent("validateedit", e) !== false && !e.cancel){
                r.set(field, value);
                delete e.cancel;
                grid.fireEvent("afteredit", e);
            }
    }
        grid.view.focusCell(ed.row, ed.col);
    } 

then i declare:
grid.on('afteredit', AddOrRemove);

    function AddOrRemove(cell){
        if (cell.column == 2){
            addNewRow.defer(100);
        }
        if (cell.value == cell.originalValue){
            ds.remove.defer(150, ds, [cell.record]);
                grid.un('afteredit', AddOrRemove);
            grid.activeEditor.cancelEdit.defer(300);
        }
    } 

basically if the cell cell value is "" (ie originalValue) then the row is removed from the datastore, then the listener and then the editing is cancelled, however if the focus has been moved to the right (ie cell.column == 2) then i create a new record and insert it at the top of the grid and startediting

function addNewRow(){
var newRecord = new myRecord({
myvalue1:-1,
myValue2:'',
myValue3:''
});
grid.stopEditing();
ds.insert(0, newRecord);
grid.startEditing(0,1);
} 

but the really cool bit making the editor's focus move immediately to the right instead of moving down when the user hit's the return key

to achieve that i override the 'onEditorKey' function of the SelectionModel which in my case is the RowSelectionModel
so when i create my grid :

var grid = new Ext.grid.EditorGrid('mygrid', {
...
selModel: new Ext.grid.RowSelectionModel(),
...
});

then i get the model by:

var sm = grid.getSelectionModel();

and then override the method to 'walk' the editor's focus, ie to the right instead of down:
(you find the original function in RowSelectionModel.js)

myjs.js:

    sm.onEditorKey = function(field, e){
        var k = e.getKey(), newCell, g = sm.grid, ed = g.activeEditor;
        if(k == e.TAB){
            e.stopEvent();
            ed.completeEdit();
            if(e.shiftKey){
                newCell = g.walkCells(ed.row, ed.col-1, -1, sm.acceptsNav, sm);
            }else{
                newCell = g.walkCells(ed.row, ed.col+1, 1, sm.acceptsNav, sm);
            }
        }else if(k == e.ENTER && !e.ctrlKey){
            e.stopEvent();
            ed.completeEdit();
        if (ed.col==1){
            if(e.shiftKey){
            newCell = g.walkCells(ed.row, ed.col+1, -1, sm.acceptsNav, sm);
            }else{
            newCell = g.walkCells(ed.row, ed.col+1, 1, sm.acceptsNav, sm);
            }
        }
        }else if(k == e.ESC){
            ed.cancelEdit();
        }
        if(newCell){
            g.startEditing(newCell[0], newCell[1]);
        }
    } 

the only change i made was on the 'walkCells' lines in the if k==e.ENTER block,
i.e. instead of ed.row+1 & ed.col, i changed it to ed.row & ed.col+1

and that's it!

ok i think i over elaborated, (just in case any newbies like me ar trying to do the same)
...the main bit to play around with is the onEditorKey function, override that to move the curser wherever you want, and it happens instantly (ie no need to let it move down and then move it back up etc... HAve FUn!!! ;-)

ciao

SJ

[evankstone]

var grid = new Ext.grid.EditorGrid('mygrid', {
...
selModel: new Ext.grid.RowSelectionModel(),
...
});

then i get the model by:

var sm = grid.getSelectionModel();

i didn't know we could replace the selection model in an editor grid. i thought it was cell selection by default and that was that... this alone could save me some headaches, since i really want to commit changes to the datastore (and database) on (a) switching to a new row, and (b) when the focus goes away from the grid.

Would switching to RowSelectionModel help me there?

[GreenEyed]

After reading what sj137 had done, I just had to do this to prevent the ENTER key to move to the next row and start editing:

    var theSelectionModel = grid.getSelectionModel();
    theSelectionModel.onEditorKey = function(field, e)
    {
      var k = e.getKey(), newCell, g = theSelectionModel.grid, ed = g.activeEditor;
      if(k == e.ENTER && !e.ctrlKey){
            e.stopEvent();
            ed.completeEdit();
      }
    };

And so far, it works fine.

I hope it helps someone
D.

[paulharv]

It helped me nearly 3 years later! Thanks!

[yinqiaol]

Thank you very much! I can sort of hear the final i on chiisai, though it's very faint. Having the romaji makes memorizing so much easier.