I am using a asmx service to return data to display in jqGrid. I can see the json data is returned in complete callback. This is what json data in the complete callback look like {"d":[{"__type":"HHSC.CTF.Business.BatchReceiptModel","BReceiptId"..... I am not sure why it preceded by d: and also the type name for the data.
This is my jqGrid setup look like
$("#list").jqGrid({
url: "../../WebServices/BatchReceiptsWebService.asmx/BatchReceiptsTable",
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8',
success: function (data, status) {
},
complete: function (xhr) {
},
error: function (jqXHR, textStatus, errorThrown) {
}
},
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
repeatitems: false,
id: "BReceiptId",
page: function (obj) { return 1; },
total: function (obj) { return 1; },
root: function (obj) { return obj; },
records: function (obj) {
return obj.d.length;
}
},
colNames: ['BReceiptId', 'ReceiptNumber', 'ReceiptAmount'],
colModel: [
{ name: 'BReceiptId', index: 'BReceiptIdnId', width: 100 },
{ name: 'ReceiptNumber', index: 'ReceiptNumber', width: 150 },
{ name: 'ReceiptAmount', index: 'ReceiptAmount', align: 'right', width: 100 }
],
rowNum: 10,
loadonce: true,
gridview: true,
rownumbers: true,
rowList: [10, 20, 30],
viewrecords: true
});
You can't overwrite success and error callbacks of jQuery.ajax by usage the corresponding properties in ajaxGridOptions. If you examine the source code of jqGrid you will see that jqGrid uses the callbackes. Inside success callbacks jqGrid process the server response and fill the grid, then it hide "Loading..." div. By defining success and error callbacks inside ajaxGridOptions you beak Ajax processing used by jqGrid.