jquery - Spreadsheet-like inline editing in jqGrid

Question

I am using jQuery 1.4 and jqGrid 3.8 beta,

Here I have used jqgrid table in which I wanted to create interface like excel sheet / spread sheet, where number of blank rows will already be displayed and the user can enter record into table cells the why they used to enter in spread sheet.

well I have created empty editable rows by running loop of addRowData function of JQgrid. after that I made few fields editable by specifying editable:true

now the problem is when I edit something in a field and write something after that if I move on another row then old edited data on a previous row won't get store on table it gets vanish.

here, is the live example try to type in a editable field and then move to next row.

http://www.logicatrix.com/example/records.html

Answer 1

Your main problem is that you should change editurl: "#" to editurl: 'clientArray' (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow) if you want to use client side editing.

Moreover I recommend you remove

<script src="js/jquery.jqGrid.js" type="text/javascript"></script>

because you insert before all needed parts of jqGrid ("js/grid.base.js" and so on). You should also copy images subdirectory from the jQuery UI.Currently one recieve small errors because files like http://www.logicatrix.com/example/images/ui-bg_highlight-soft_100_eeeeee_1x100.png could not be loaded. I recommend you also use jQuery UI 1.8.4 instead of 1.8.2 till the release of jqGrid 3.8 because of some small known problems.

UPDATED: By the way a working example of client side editing you can see under http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm (use double-click and ENTER for row editing). I prepared it before for the answer How to disable auto update when jqGrid edited?. A simple change of the example will give you the code which you probably need.