I have been trying to figure this out for some time. It seems lots of others have asked similar questions but I have not been able to find a specific solution yet. Anyway, I have a jqgrid that I am using on a large data set. I am only paging 100 records at a time out of several thousand records. What I want to do is add a new record. Send it to the server that returns the new record ID and then be able to fetch the sorted data section where my newly added record resides and position to that row in the grid.
Here is my grid definition:
$("#list1").jqGrid({
url: 'jqgrid.php?cmd=getrecs',
editurl: 'jqgrid.php?cmd=editrec',
datatype: 'json',
colNames:['Branch', 'Description', 'Type', 'Active' ],
colModel :[
{name:'rbranch',
index:'rbranch',
sortable:true,
editable:true
},
{name:'des',
index:'des',
sortable:true,
editable:true
},
{name:'type',
index:'type',
sortable:true,
editable:true
},
{name:'status',
index:'status',
sortable:false,
editable:true
}
],
pager: '#pager1',
sortname: 'rbranch',
sortorder: 'asc',
rowNum: 100, // Only fetch 100 at a time
viewrecords: true,
scroll: 1,
sortable: true,
caption: 'Scheduling Resources'
});
$("#list1).navGrid("#pager1",
// Turn on the icons
{edit:true,
add:true,
del:true,
search:true,
refresh:true,
refreshstate:'current',
view:true
},
// Edit dialog parameters
{reloadAfterSubmit: false,
closeAfterEdit: true
},
// Add dialog parameters
{reloadAfterSubmit: true,
afterSubmit: function (response) {
var x = $.parseJSON(response.responseText).userdata.newID;
alert(x);
return [true, '', "Saved"];
},
closeAfterAdd: true
},
// Delete dialog parameters
{reloadAfterSubmit: false},
// Search dialog parameters
{},
// View dialog parameters
{}
);
Using afterSubmit I can get the newly created ID value by returning it via JSON.
I already have a routine on the server that locates the proper record set and can return it. However, I am at a loss on how to pass this new ID I get back on add back to the server.
Examining how the Grid Add works if using “reloadAfterSubmit: true” (which I need to resort my new record) it appears it actually makes two calls to the server. The first call uses the “editurl:” from the grid which tells the server all the new fields and lets me create and send back the new ID. It then calls the server a second time to fetch the new set of records this time using “url:” from the grid which just fetches the first page.
I think I can do what I want if I could only pass the new ID I get from the first call as a parameter to the second call. Maybe there is a real easy way to do this but I am new to jquery and jqgrid so have not figured this out.
OK, I think I figured this out and will post my findings here. Maybe someone will find it helpful. (or maybe there is an even better way)
First of all I added a new hidden area in the DOM to store the returned ID of the newly added row.
Then in the navGrid definition under the add section I added these settings:
When the add first calls the server and sends the record data to be added I create the record and return the newID as part of the JSON response. Which looks something like this:
The afterSubmit function defined above will store this in the DOM. Because I have reloadAfterSubmit: true the add then does a second call to the server using the standard trigger(“reloadGrid”).
Here I had to modify my jqGrid with the following:
So what happens on the subsequent call to the server is that it sends the gotoID as part of the post data. I can then find what page, based on all my settings (like current sort/filter criteria, number of items per page, etc.) and send that back as part of my JSON response along with the grid data. So I get back the ID to position to, the page that is to be displayed, and all the grid data that is to be displayed on that page. Again, I include this additional data in the JSON response in the userdata something like this:
This same routine works for both adding new records or editing existing records where the sort order may change.
*Note: I found out that this won’t work unless you are using the standard paging model (so you can’t use scroll:1 feature of the jqgrid) *
So as a recap here is the final grid and navGrid settings: