Excel-like keyboard input and tab in cell editing

Question

one question for all advanced in jqgrid.

I need to code this function:

JqGrid has two editable columns. I have to use cell editing. The user clicks on one editable cell, and when he presses the 'Enter' key, I select the next editable UNDER cell.

Otherwise, when he presses the tab key, I select the next edited cell

• If the actual cell is the last, I set the closest editable cell in the next line or
• If not, I select the next editable cell in the actual row.

to summarize - I need the exact behavior, as in excel.

If I had the best reputation, I could upload an image to demonstrate the desired situation.

Many thanks.

Answer 1

Ahoj!

To associate an editable cell with your custom event handler, jqGrid has common settings: dataEvents property of editoptions . The exact same settings exist for searching in jqGrid. Here you can find code examples here , here and here . You may need to use cell editing methods inside the keyboard event handler to be able to finish editing one cell and start editing another one.

If you run into problems with the implementation, you can add your question with sample code, and then try to change it.

Answer 2

your answer helps me a lot and directs me to the right solution, although I spent more than 3 hours writing the correct code, but I succeeded :)

Many thanks.

summarize:

i defined 2 variables:

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

i set them to beforeEditCell events:

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

and then in editoptions for both editable cells that I set:

first editable cell in a row (Inventúrny stav in the picture), tab behavior, click to select the next editable cell, by 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 the row (Sklad. cena in the picture) - I manually set iCol for the 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 3

I understand that this is an old topic, but I recently struggled with this and thought that 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 by reading how the jqGrid editCell function works with a tab and enters keys during an edit operation. First you need to run jqGrid key binding, and then this one. This code simply tells him to start editing on the next line after processing the jqGrid ENTER handler. It works just like a tab, while maintaining open edit control.

I could not completely decrypt the editoptions: {dataEvents: ...} structure, so this might be a better approach. If so, feel free to explain how he excels.

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