JqGrid Basic Grid example error when saving a new row - jqgrid

Question

I am using the Basic Grid example from jqGrid Demos:
jQuery("#rowed1").jqGrid(
{
url : 'clientArray',
datatype : "local",
colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
'Total', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 55,
editable : true,
key: true
}, {
name : 'invdate',
index : 'invdate',
width : 90,
editable : true
}, {
name : 'name',
index : 'name',
width : 100,
editable : true
}, {
name : 'amount',
index : 'amount',
width : 80,
align : "right",
editable : true
}, {
name : 'tax',
index : 'tax',
width : 80,
align : "right",
editable : true
}, {
name : 'total',
index : 'total',
width : 80,
align : "right",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false,
editable : true
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : '#prowed1',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
editurl : "clientArray",
caption : "Basic Example"
});
jQuery("#rowed1").jqGrid('navGrid', "#prowed1", {
edit : false,
add : false,
del : false
});
The following events to handle the user clicks on edit, save, and cancel buttons:
jQuery("#ed1").click(function() {
var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
jQuery("#rowed1").jqGrid('editRow', id);
this.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled", false);
});
jQuery("#sved1").click(function() {
var rowid = jQuery('#rowed1').jqGrid('getGridParam','selrow');
alert('id: ' + rowid);
jQuery("#rowed1").jqGrid('saveRow', rowid , false );
jQuery("#sved1,#cned1").attr("disabled", true);
jQuery("#ed1").attr("disabled", false);
jQuery("#aded1").attr("disabled", false);
});
jQuery("#cned1").click(function() {
var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
jQuery("#rowed1").jqGrid('restoreRow', id);
jQuery("#sved1,#cned1").attr("disabled", true);
jQuery("#ed1").attr("disabled", false);
jQuery("#aded1").attr("disabled", false);
});
jQuery("#aded1").click(function() {
jQuery("#rowed1").jqGrid('addRow', 'new');
this.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled", false);
});
And the html of the buttons:
<input type="BUTTON" id="aded1" value="Add Row" />
<input type="BUTTON" id="ed1" value="Edit row 3" />
<input type="BUTTON" id="sved1" disabled='true' value="Save row 3" />
<input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />
But the grid is not working properly because:
After saving a new row it keeps selected and I can't select others.
When I cancel the editing of a row, it deletes a few other rows.
When I click for second time
the add new row button, google chrome debugger console displays the error: Uncaught TypeError: Cannot read property 'name' of undefined
I am almost sure that it has something to do with the new row id, but after 2 days of trying I would appreciate a little help, thanks in advance

Answer 1

You are passing the wrong parameters to addRow. From the jqGrid documentation for addRow:
Calling convention:
jQuery("#grid_id").jqGrid('addRow',parameters);
where parameters is a object and has the following default values:
parameters =
{
rowID : "new_row",
initdata : {},
position :"first",
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
}
Also, you will want to set rowID equal to a new value each time. You can either do this explicitly or you can set it to undefined to let jqGrid assign a random ID to each new row.
For example:
jQuery("#aded1").click(function() {
var parameters = {
rowid : undefined,
initdata : {},
position :"first",
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
};
jQuery("#rowed1").jqGrid('addRow', parameters);
});