StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The code which you posted should work. Probably you use it on the wrong place.</p> <p>The only thing which you should take in the consideration that after the end of the row editing the focus is lost and you can't use arrows to move th the next row. You should use <code>aftersavefunc</code> parameter of the <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow" rel="nofollow noreferrer">editRow</a> method to restore the grid focus:</p> <pre><code>var grid = $('#grid'); grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){ setTimeout(function(){ grid.focus(); },100); }); </code></pre> <p><a href="http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithInlineEditingOnEnter.htm" rel="nofollow noreferrer">The demo</a> is the small modification of the demo from <a href="https://stackoverflow.com/questions/5988767/highlight-error-cell-or-input-when-validation-fails-in-jqgrid/6162086#6162086">the answer</a>. You can use keyboard to move the row selection and enter to start inline editing and to save the row.</p> <p><strong>UPDATED</strong>: I ask you always <strong>to append</strong> your original question with additional information instead of full rewriting of the question. Your original question don't contained anything about the usage of <code>multiselect: true</code>. This case (<code>multiselect: false</code>) and my first demo could be interesting for other users. So the general practice is <strong>to append</strong> the original question with "UPDATED:" part or just ask a new question. Currently if somebody will read your question and my answer he/she will wonder: "what a queer answer? Probably the answer not carefully read the question.".</p> <p>Now about your current problem in case of <code>multiselect: true</code>. How you know jqGrid 4.0.0 is the first version which has <a href="http://www.trirand.com/blog/?page_id=393/discussion/jqgrid-treegrid-subgrid-rewrite-code-cleanup-keyboard-navigation-jquery-1-5-x-tests/#p22203" rel="nofollow noreferrer">support of keyboard navigation</a> in the grid and treegrid and which has <code>bindKeys</code> method. The solution is far from be perfect. Many actions can't be done with the keyboard. For example the buttons in the navigation toolbar ("Add", "Edit", "Delete" etc) could be not clicked with respect of keyboard. To use keyboard navigation in the jqGrid many places of jqGrid code are extended with the setting of <code>tabindex</code> attribute. For example in <a href="https://github.com/tonytomov/jqGrid/blob/v4.0.0/js/grid.base.js#L2484" rel="nofollow noreferrer">the line</a> the selected row (<code><tr></code> element) receive the attribute <code>tabindex="0"</code>, but the line works only in case of <code>multiselect: false</code>. In <a href="https://github.com/tonytomov/jqGrid/blob/v4.0.0/js/grid.base.js#L3173" rel="nofollow noreferrer">the line</a> of <a href="https://github.com/tonytomov/jqGrid/blob/v4.0.0/js/grid.base.js#L3160" rel="nofollow noreferrer">bindKeys</a> code will be search (and not found) the attribute <code>tabindex="0"</code>. So the current implementation of <code>bindKeys</code> <strong>don't work</strong> in the <code>multiselect: true</code> mode.</p> <p>As I wrote before the full support of <code>multiselect: true</code> mode can be implemented only with many changes in the jqGrid code. As a workaround I could suggest the following: we can <em>overwrite</em> the code of <code>bindKeys</code> method only with the changed implementation.</p> <p>The corresponding demo you can find <a href="http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithInlineEditingOnEnterMultiselect.htm" rel="nofollow noreferrer">here</a>. The JavaScript code form the demo is:</p> <pre><code>$.extend($.fn.jqGrid,{ bindKeys : function( settings ){ 'use strict'; var o = $.extend({ onEnter: null, onSpace: null, onLeftKey: null, onRightKey: null, scrollingRows : true },settings || {}); return this.each(function(){ var $t = this; if( !$('body').is('[role]') ){$('body').attr('role','application');} $t.p.scrollrows = o.scrollingRows; $($t).keydown(function(event){ var target = $($t).find('tr[tabindex=0]')[0], id, mind, r, expanded = $t.p.treeReader.expanded_field; if (!target && $t.p.selrow !== null) { target = $t.rows.namedItem($t.p.selrow); } //check for arrow keys if(target) { mind = $t.p._index[target.id]; if(event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40){ // up key if(event.keyCode === 38 ){ r = target.previousSibling; id = ""; if(r) { if($(r).is(":hidden")) { while(r) { r = r.previousSibling; if(!$(r).is(":hidden") && $(r).hasClass('jqgrow')) {id = r.id;break;} } } else { id = r.id; } } if ($.inArray(id,$t.p.selarrrow) === -1) { $($t).jqGrid('setSelection', id); } else { $t.p.selrow = id; } } //if key is down arrow if(event.keyCode === 40){ r = target.nextSibling; id =""; if(r) { if($(r).is(":hidden")) { while(r) { r = r.nextSibling; if(!$(r).is(":hidden") && $(r).hasClass('jqgrow') ) {id = r.id;break;} } } else { id = r.id; } } if ($.inArray(id,$t.p.selarrrow) === -1) { $($t).jqGrid('setSelection', id); } else { $t.p.selrow = id; } } // left if(event.keyCode === 37 ){ if($t.p.treeGrid && $t.p.data[mind][expanded]) { $(target).find("div.treeclick").trigger('click'); } if($.isFunction(o.onLeftKey)) { o.onLeftKey.call($t, $t.p.selrow); } } // right if(event.keyCode === 39 ){ if($t.p.treeGrid && !$t.p.data[mind][expanded]) { $(target).find("div.treeclick").trigger('click'); } if($.isFunction(o.onRightKey)) { o.onRightKey.call($t, $t.p.selrow); } } return false; } //check if enter was pressed on a grid or treegrid node else if( event.keyCode === 13 ){ if($.isFunction(o.onEnter)) { o.onEnter.call($t, $t.p.selrow); } return false; } else if(event.keyCode === 32) { if($.isFunction(o.onSpace)) { o.onSpace.call($t, $t.p.selrow); } return false; } } }); }); } }); </code></pre> <p>and</p> <pre><code>var grid = $("#list"); ... grid.jqGrid('bindKeys', { onEnter: function(rowid) { //alert("You enter a row with id: " + rowid); editingRowId = rowid; // probably cab be replaced to grid[0].p.selrow // we use aftersavefunc to restore focus grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){ setTimeout(function(){ grid.focus(); },100); }); }, onSpace: function(rowid) { grid.jqGrid('setSelection', rowid); } }); // select one row at the begining and set the focus grid.jqGrid('setSelection',"1"); grid.focus(); </code></pre> <p>I repeat one more time that I find the code which I posted not perfect. One should make visible which line have focus and make much more things. I wanted only to show which kind of changes and where should be done to allow keyboard navigation for the musliselect grids.</p> <p>Edit</p> <p>If multikey:"ctrlKey" is added bindKeys. Code in answer does not work. Also using setFocus in answer code causes focus to jump to another row after editing, so this should removed. There is no way to set focus after editing to current row, mouse clik is always required, jqGrid does not support inline edit using keyboard only.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload