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);
                }
            }
        } 
    ]
}

Answer 2

Ahoj!

To bind editable cell to your custom event handler there are common setting in jqGrid: dataEvents property of editoptions. Absolutely the same settings exist for the searching in jqGrid. You can find some code examples here, here and here. You will probably needed to use cell editing methods inside of the keyboard event handler to be able to end editing of one cell and to start editing of another one.

If you will have problem in the implementation you can append your question with the code example and then one can try to modify it.

Answer 3

I realize this is an old topic, but I recently wrestled with this and thought I would share the approach that worked for me:

jQuery('#grid').jqGrid({
  ...,  
  cellEdit: true,  // Make sure we are using cell edit
  afterEditCell: function(rowid, cellname, value, iRow, iCol) {

    // Get a handle to the actual input field
    var inputControl = jQuery('#' + (iRow) + '_' + cellname);

    // Listen for enter (and shift-enter)
    inputControl.bind("keydown",function(e) {

      if (e.keyCode === 13) {  // Enter key:
        var increment = e.shiftKey ? -1 : 1;

        // Do not go out of bounds
        var lastRowInd = jQuery("#grid").jqGrid("getGridParam","reccount")
        if ( iRow+increment == 0 || iRow+increment == lastRowInd+1)
          return;   // we could re-edit current cell or wrap
        else
          jQuery("#grid").jqGrid("editCell",iRow+increment,iCol,true);
      }
    }); // End keydown binding
  })
}); // End jqGrid initialization

I came up with this approach after reading how jqGrid's editCell function deals with tab and enter keys during an edit operation. jqGrid's keydown binding should fire first, followed by this one. This code simply tells it to start an edit in the next row after jqGrid's ENTER handler is processed. It works exactly like tab does now, keeping the edit control open.

I was never able to fully decipher the editoptions: { dataEvents:... } structure, so that might be a better approach. If so, feel free to explain how it is superior.

Answer 4

{
    type: 'keydown',
    fn: function(e) {
        var key = e.charCode || e.keyCode;
        //TAB
        if(key == jq.ui.keyCode.TAB) {
             setTimeout(function() { 
               jq('#' + currentRowId + '_nextColName').focus();
               jq('#' + currentRowId + '_nextColName').select(); 
             }, 500);
        }
        //ENTER
        else if (key == jq.ui.keyCode.ENTER) {
             var nextRow = parseInt(currentRowId) + 1;
             jq('#' + currentRowId + '_thisColName').blur();
             jq('#' + nextRow + '_firstColName').select();
        }
    }
}