How to Edit or Add a New Row in jqGrid
My jqGrid that does a great job of pulling data from my database, but I'm having trouble understanding how the Add New Row functionality works.
Right now, I'm able to edit inline data, but I'm not able to create a new row using the Modal Box. I'm missing that extra logic that says, "If this is a new row, post this to the server side URL" instead of modifying existing data. (Right now, hitting Submit only clears the form and reloads the grid data.)
The documentation states that Add New Row is:
jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
but I'm not sure how to use that correctly. I've spent alot of time studying the Demos, but they seem to all use an external button to fire the new row command, rather than using the Modal Form, which I want to do.
My complete code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid</title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll c1"></div>
<script type="text/javascript">
var lastSelectedId;
jQuery('#list').jqGrid({
url:'grid.php',
datatype: 'json',
mtype: 'POST',
colNames:['ID','Name', 'Price', 'Promotion'],
colModel:[
{name:'product_id',index:'product_id', width:25,editable:false},
{name:'name',index:'name', width:50,editable:true, edittype:'text',editoptions:{size:30,maxlength:50}},
{name:'price',index:'price', width:50, align:'right',formatter:'currency', editable:true},
{name:'on_promotion',index:'on_promotion', width:50, formatter:'checkbox',editable:true, edittype:'checkbox'}],
rowNum:10,
rowList:[5,10,20,30],
pager: $('#pager'),
sortname: 'product_id',
viewrecords: true,
sortorder: "desc",
caption:"Database",
width:500,
height:150,
onSelectRow: function(id){
if(id && id!==lastSelectedId){
$('#list').restoreRow(lastSelectedId);
$('#list').editRow(id,true,null,onSaveSuccess);
lastSelectedId=id; }},
editurl:'grid.php?action=save'})
.jqGrid('navGrid','#pager',
{refreshicon: 'ui-icon-refresh',view:true},
{height:280,reloadAfterSubmit:true},
{height:280,reloadAfterSubmit:true},
{reloadAfterSubmit:true})
.jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
function onSaveSuccess(xhr)
{response = xhr.responseText; if(response == 1) return true; return false;}
</script></body></html>
If it makes it easier, I'd be willing to scrap the inline editing functionality and do editing and posting via modal boxes.
Any help would be greatly appreciated.
Answer
First of all, you shouldn't call jqGrid('editGridRow',"new"...) in most cases. Instead of that you should have the user click an Add Record button. Then a dialog will appear with all fields which have editable=true in colModel.
After they click the Submit button, jqGrid will POST data to the URL defined by url parameter or editurl parameter (if it exists). Because you use parameter mtype='POST' for the data filling, you have to define additional editurl parameter. You can overwrite POST HTTP code to PUT or any other which you like.
It is important to understand that the id for new records has an _empty value. The Edit dialog works in the same way as the Add dialog, but includes the id of the modified record. As an additional important parameter which will be sent to the server in the case of add new record is additional parameter oper=add.
For more information read section What is posted to the server on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing.
I recommend that you also read about different parameters sent by jqGrid in the description of
prmNames parameter on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options