How to Edit or Add a New Row in jqGrid

Question

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.

paul - any chance of posting your new code. I have managed to edit an existing row but am unable to add new row. I have tried reading the demos but am getting totally confused Thanks — user1150262, Feb 16 '12 at 15:41
@Paul, could you pleae tell me how to add and edit rows? I am new to it :( — Jasmine, Jul 02 '14 at 11:33

score 20 · Accepted Answer · edited Sep 12 '13 at 22:28

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

Oleg, thank you very much for the reply. This is the best explanation I've seen anywhere. Just to further clarify for anybody else reading this post: calling jqGrid('editGridRow',"new") in the way I did above fires up the modal form without the user requesting it. Not what I intended. Also, I didn't previously understand about the additional parameter being sent to the server side file for new records. You need to use that extra parameter on the server side to determine the operation being requested by your grid. Again, thanks. — Annatar, Apr 17 '10 at 23:37
Hello Paul. I am glad to hear, that I could help you. By the way, you can mark the answer as accepted. — Oleg, Apr 19 '10 at 00:59
In my case I can get Addi Record Dialog but can not edit fields even if I set fields editable — nermiiine, Aug 11 '17 at 12:10

How to Edit or Add a New Row in jqGrid

1 Answers1

Linked