jqgrid add data to grid without postback - jqgrid

Question

I need to have users add data to a grid without it posting back. I thought cellsubmit: 'clientArray' would accomplish that, but I still get the "No URL is set" error. The following code is a grid I 'borrowed' from Oleg, but with the cellsubmit set.
$(document).ready(function () {
'use strict';
var myData = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2011-07-30", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2011-07-30", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
myGrid = $("#list"),
lastSel = -1,
inEdit;
myGrid.jqGrid({
datatype: 'local',
data: myData,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', formatter: 'int', editable: true,
editoptions: {
//readonly: 'readonly',
disabled: 'disabled',
dataInit: function (elem) {
if (!inEdit) {
$(elem).val($.jgrid.randId());
}
}
}
},
{ name: 'invdate', index: 'invdate', width: 75, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y',
editable: true
},
{ name: 'name', index: 'name', width: 65, editable: true },
{ name: 'amount', index: 'amount', width: 75, sorttype: 'int', formatter: 'int', editable: true,
editoptions: {
dataInit: function (elem) {
$(elem).mask("99:99");
}
}
},
{ name: 'tax', index: 'tax', width: 52, sorttype: 'int', formatter: 'int', editable: true },
{ name: 'total', index: 'total', width: 60, sorttype: 'int', formatter: 'int', editable: true },
{ name: 'closed', index: 'closed', width: 67, align: 'center', formatter: 'checkbox', editable: true,
edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
},
{ name: 'ship_via', index: 'ship_via', width: 95, align: 'center', formatter: 'select', editable: true,
edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' }
},
{ name: 'note', index: 'note', width: 60, sortable: false, editable: true,
editoptions: {
dataInit: function (elem) {
$(elem).val(inEdit ? "in Edit" : "in Add");
}
}
}
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
ignoreCase: true,
rownumbers: true,
sortname: 'invdate',
viewrecords: true,
cellsubmit: 'clientArray',
sortorder: 'desc',
caption: 'Combining Advanced Searching and Toolbar Searching in one grid',
height: 'auto'
});
myGrid.jqGrid('navGrid', '#pager',
{ del: false, search: false },
{ // Edit
recreateForm: true,
beforeInitData: function () {
inEdit = true;
}
},
{ // Add
recreateForm: true,
beforeInitData: function () {
inEdit = false;
}
});
});

Answer 1

What you try to do is to use form editing to edit local data which is not supported by jqGrid currently. Nevertheless, how I described here, one do can implement this.
I get the demo from the answer and modified a little to use the current version of jqGrid. The corresponding demo. The demo do more as you need, for example context menu. You can remove features which you don't need.