First of all you can get all local data from the jqGrid with respect of
var localGridData = $("#list").jqGrid('getGridParam','data');
If you will need to send only subset of rows of the grid, like the selected rows only, you can need to get _index
:
var idsToDataIndex = $("#list").jqGrid('getGridParam','_index');
To send the data to the server you can use the following function for example
var sendData = function(data) {
var dataToSend = JSON.stringify(data);
alert("The following data are sending to the server:\n" + dataToSend);
$.ajax({
type: "POST",
url: "yourServerUrl",
dataType:"json",
data: dataToSend,
contentType: "application/json; charset=utf-8",
success: function(response, textStatus, jqXHR) {
// display an success message if needed
alert("success");
},
error: function(jqXHR, textStatus, errorThrown) {
// display an error message in any way
alert("error");
}
});
};
In the demo you will find a little more sophisticated example having two buttons: "Send all grid contain", "Send selected rows". The corresponding code is below
$("#sendAll").click(function(){
var localGridData = grid.jqGrid('getGridParam','data');
sendData(localGridData);
});
$("#sendSelected").click(function(){
var localGridData = grid.jqGrid('getGridParam','data'),
idsToDataIndex = grid.jqGrid('getGridParam','_index'),
selRows = grid.jqGrid('getGridParam','selarrrow'),
dataToSend = [], i, l=selRows.length;
for (i=0; i<l; i++) {
dataToSend.push(localGridData[idsToDataIndex[selRows[i]]]);
}
sendData(dataToSend);
});
where
var grid = $("#list"),
decodeErrorMessage = function(jqXHR, textStatus, errorThrown) {
var html, errorInfo, i, errorText = textStatus + '\n<br />' + errorThrown;
if (jqXHR.responseText.charAt(0) === '[') {
try {
errorInfo = $.parseJSON(jqXHR.responseText);
errorText = "";
for (i=0; i<errorInfo.length; i++) {
if (errorText.length !== 0) {
errorText += "<hr/>";
}
errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
}
}
catch (e) { }
} else {
html = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
if (html !== null && html.length > 1) {
errorText = html[1];
}
}
return errorText;
},
sendData = function(data) {
var dataToSend = JSON.stringify(data);
alert("The following data are sending to the server:\n"+dataToSend);
$.ajax({
type: "POST",
url: "yourServerUrl",
dataType:"json",
data: dataToSend,
contentType: "application/json; charset=utf-8",
success: function(response, textStatus, jqXHR) {
// remove error div if exist
$('#' + grid[0].id + '_err').remove();
alert("success");
},
error: function(jqXHR, textStatus, errorThrown) {
// remove error div if exist
$('#' + grid[0].id + '_err').remove();
// insert div with the error description before the grid
grid.closest('div.ui-jqgrid').before(
'<div id="' + grid[0].id + '_err" style="max-width:' + grid[0].style.width +
';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" ' +
'style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>');
}
});
};
I think, that more difficult and more complex problem you will become on the server. In case of concurrency errors, but I wrote you about the problems before. Exactly because of the problems I personally would never implement saving of multiple rows on the server.
UPDATED: To get data from the form you can use jQuery.serialize. You should use name
attribute for all fields in the form which you want to serialize. All data which you need to send are
var allData = {
localGridData: grid.jqGrid('getGridParam','data'),
formData: $("#formid").serialize()
};
You can send the data exactly like I described before: sendData(allData)
.
Correct is datatype:'xml'
and not datatype:xml
. So the code like
$("#userList").jqGrid('setGridParam', {datatype:'xml'})
.trigger('reloadGrid', [{page:1}]);
should work. See here for description of additional parameters of reloadGrid
.
UPDATED: From your comments I hope that I know where you have problem with the implementation. If I understand you correct now you want that "Reload Grid" button from the navigator bar reloads the grid from the server. To do so you should redefine the standard "Reload Grid" button with your implementation which do the code which I included in my answer (see above). So you should use refresh: false
as the navGrid option to remove the standard "Reload Grid" button and then use navButtonAdd to add new button which looks exactly like the standard button and have your custom implementation or the onClickButton
event:
var myGrid = $('#userList');
myGrid.jqGrid({
datatype: 'xml',
loadonce: true,
pager: '#pager1',
// ... other parameters which you use
});
myGrid.jqGrid('navGrid', '#pager1', {refresh: false});
myGrid.jqGrid(
'navButtonAdd',
'#pager1',
{
caption: "",
buttonicon: "ui-icon-refresh",
title: $.jgrid.nav.refreshtitle,
onClickButton: function () {
$(this).jqGrid('setGridParam', {datatype:'xml'});
$(this).trigger('reloadGrid', [{page:1}]);
}
}
);
UPDATED 2: To force reloading of the grid after Add and Edit operations you can use afterSubmit
event which will be called after the receiving successful server response, but before reloadGrid
made by the jqGrid.
myGrid.jqGrid('navGrid', '#pager1', {refresh: false},
{ // Edit options
afterSubmit: function () {
$(this).jqGrid('setGridParam', {datatype:'xml'});
return [true,'']; // no error
}
},
{ // Add options
afterSubmit: function () {
$(this).jqGrid('setGridParam', {datatype:'xml'});
return [true,'',false]; // no error and no new rowid
}
},
{ // Delete options
afterSubmit: function () {
$(this).jqGrid('setGridParam', {datatype:'xml'});
return [true,'']; // no error
}
}
);
I am not sure that reloading of the grid from the server is really required after Edit and Delete operations in general, but reloading after the Add operation could be needed if the server not returns the new id in the server response. You can set reloadAfterSubmit: false
and return the new id in the server response. See this and this answers for details.
Best Answer
You can use delRowData method do delete any local row.
You can do use delGridRow from the form editing if you need it. I described the way here and used for formatter:'actions' (see here, here and originally here).
and then use
UPDATED: In case of
multiselect: true
themyDelOptions
can be modified to the following:UPDATED 2: To have keyboard support on the Delete operation and to set "Delete" button as default you can add in the
delSettings
additional option