Databases
StackOverflow2013
Postsdbo
POHow to move cursor from Second Column to First Column in a new row in jqgrid
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to move cursor from Second Column to First Column in a new row in jqgrid
    text
    copied!<p>I am new to jqgrid. I have the following code to insert a new row when a tab key is pressed. It works for the most part of it. But when a new row is inserted, the focus is given to the second Column in that row instead of First column. </p> <p>How do I solve this problem??</p> <p>HTML:</p> <pre><code> &lt;table id="list11"&gt;&lt;/table&gt; &lt;!--&lt;div id="paddtree"&gt;&lt;/div&gt;--&gt; &lt;label&gt;press tab to add new row&lt;/label&gt; &lt;script&gt; var selIRow = 1; var lastsel2 jQuery("#list11").jqGrid({ // url:'d/${jobId}.htm', datatype: "json", colNames: ['First Name', 'Email ID', 'Phone Number'], colModel: [ // {name:'id',index:'id', width:75, search:true, stype:'text' , search:true, sortable:true}, {name: 'firstName', width: 180, search: true, stype: 'text', sortable: true, editable: true, }, {name: 'email', index: 'email', width: 250, editable: true}, {name: 'phoneNumber', index: 'phoneNumber', width: 100, align: "right", editable: true, editoptions: { dataInit: function(elem) { $(elem).focus(function() { this.select(); }) }, dataEvents: [ { type: 'keydown', fn: function(e) { var key = e.charCode || e.keyCode; if (key == 9 || key == 15)//tab { var grid = $('#list11'); //Save editing for current row grid.jqGrid('saveRow', selIRow, false, 'clientArray'); //If at bottom of grid, create new row // alert(grid.getDataIDs().length); if (selIRow++ == grid.getDataIDs().length) { grid.addRowData(selIRow, {}); } //Enter edit row for next row in grid grid.jqGrid('editRow', selIRow, true, 'clientArray'); } } } ] }, }, ], beforeRequest: function(data) { var grid = $('#list11'); grid.addRowData(grid.jqGrid('getGridParam', 'records') + 1, {}); grid.jqGrid('editRow', selIRow, false, 'clientArray'); }, onSelectRow: function(id) { if (id &amp;&amp; id !== lastsel2) { jQuery('#list11').jqGrid('restoreRow', lastsel2); jQuery('#list11').jqGrid('editRow', id, true); lastsel2 = id; } }, // editurl: "data/add.htm", sortname: 'id', viewrecords: true, sortorder: "desc", caption: "Candidates applied for &lt;bold&gt; ${job.getTitle()}&lt;/bold&gt;", // pager : "#paddtree", emptyrecords: "new", }); &lt;/script&gt; </code></pre> <p>Thanks.</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