How to pass multi rows edited in jqgrid to server controller? - jqgrid

Question

I'm new in jqgrid.
I want to pass multi rows edited in jqgrid to pass MVC server controller.
controller expects json string type of data.
how my jsp pass all rows to controller?
jQuery("#save").click( function(){
alert("enter save fn");
var gridData=jQuery("#gridList").jqGrid('getGridParam','data');
jQuery.ajax({
url : '/uip/web/p2/saveEmployeeList.dev'
,type : 'POST'
,cache : false
,data : JSON.stringify(gridData)
,contentType : 'application/json; charset=utf-8'
,dataType : 'json'
})
});
I print out HttpServletRequest in controller. there is one row exist.
even little clue would be helpful.

Answer 1

If I understand you correctly you want to save all edited rows by one Ajax action instead of a Ajax request after any row is edited?
If so, this might be the solution. Instead of Ajax you use the 'clientArray' option in your configuration as your URL parameter. This causes jqGrid to save every edited row internally in JavaScript and post nothing to your server.
With a onclick on a save button you could do something as follows:
var changedRows = [];
//changedRows is a global array
if($('#save-rows').length) {
$('#save-rows').click(function() {
var postData = {}
$.each(changedRows, function(key) {
postData[key] = $('#paymentsgrid').jqGrid('getRowData', this);
});
$.post(baseUrl + '/controller/action', {
'data' : postData
}, function(response) {
$('<div></div>').html(response.content).dialog({
'title' : 'Message',
'modal' : true,
'width' : 800,
'height' : 400,
'buttons' : {
'OK' : function() {
$(this).dialog('close');
}
}
});
if(response.reload) {
$('#grid').trigger('reloadGrid');
}
}, 'json');
});
}
Also important is to specify a save event in your grid:
$('#paymentsgrid').jqGrid('saveRow', paymentController.lastsel, null, 'clientArray', null, function(rowId) {
changedRows.push(rowId);
});
You might should modify or optimize some things but in the basic, this should work or give you an idea how to accomplish what you want.