Editing jqGrid cells locally

Question

I am trying to implement jqGrid with editable cells:

var myGrid = $("#mygrid").jqGrid({ datatype: 'local', data: mydata, colModel: [ { name: 'Serial', width: 1040, editable: true, edittype: 'text' } ], rowNum: 10, rowList: [10, 20, 30], pager: '#mypager', sortname: 'Serial', cellEdit: true, viewrecords: true, sortorder: "desc", onSelectRow: function(id){ if(id && id!==lastSel){ jQuery('#mygrid').restoreRow(lastSel); lastSel=id; } jQuery('#mygrid').editRow(id, true); } }); myGrid.jqGrid('navGrid', '#mypager', { edit: true, add: false, del: false, search: true }); 

However, every time I try to edit a cell, it allows me to write on it, but as soon as I click on another line or even outside the grid, the text disappears.

Another thing, every time I press enter, he tries to send something, because he shows me the following message: "There is no URL."

And of course I want to use this grid locally. After editing the grid, the user will have to click the "Submit" button, which is included in the .html, and then I will manage the data inserted into the grid.

thanks.

Answer 1

To use cell editing locally (you use cellEdit:true ), you must use the cellsubmit: property clientArray .

On the other hand, you also use the editRow function, so you want to use Inline Editing . To be able to use Inline Editing locally, you must define editurl:'clientArray' (see the documentation here ).

Moreover, you also use myGrid.jqGrid('navGrid', '#mypager', { edit: true, ...}) , which allow editing a form that does not have full support for local editing.

I recommend that you use only Inline Editing and include editurl:'clientArray' in the parameters of your jqGrid. Editing a cell ( cellEdit: true ) and Editing a form should be deleted.