Excel-like enter and tab key navigation in cell editing

Question

one question for all advanced in jqgrid.

i have to code this usecase:

In jqGrid there are two editable columns. I have to use cell editing. User click to one editable cell and when he presses 'Enter' key, i select next editable cell UNDER actual one.

Otherwise, when he hits 'tab' key, i select next editable cell

• if actual cell is last, i set the nearest editable cell in the next line or
• if not, i select next editable cell in the actual row.

to sum up – i need exact behaviour like in excel.

if i had better reputation, I could have uploaded an image to demonstrate desired situation.

thanks a lot.

Answer 1

your answer helps me a lot and directs me to right solution, although i spent longer than 3 hours to write right code, but i managed this :)

thanks a lot.

to sum up:

i defined 2 variables:

var selICol; //iCol of selected cell
var selIRow; //iRow of selected cell

i set them in beforeEditCell events:

beforeEditCell : function(rowid, cellname, value, iRow, iCol)
{
    selICol = iCol;
    selIRow = iRow;
},

and then in editoptions for both editable cells i set:

first editable cell in row (Inventúrny stav in the picture), behaviour on press tab to select next editable cell is default

editoptions: {
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },
    dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if (key == 13)//enter
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);
                }
            }
        } 
    ]
}

second editable cell in row (Sklad. cena in the picture) - i manually set iCol for next editable cell in the next row

editoptions: {
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },
    dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if(key == 9)   // tab
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, 4, true);", 100);
                }
                else if (key == 13)//enter
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);
                }
            }
        } 
    ]
}