jqGrid + POST + default parameters + serializedGridData - json

Question

I need to load my grid from a server that expect a URL + parameters + a serialized payload, i.e. the message body. I am using a POST method and the server expects this along with JSON payload.
The serialized payload is a JSON string for MongoDB that instructs mongo how to find the data we care about. I designed the RESTful interface to respond back in the JSON format that jqGrid expects, however, to use pagination, I expected jqGrid to append the values for "page", "rows", etc, etc as a query string: baseURL?rows=10&page=1
Here is my grid setup
grid.jqGrid({
ajaxGridOptions: {
contentType: "application/json",
},
altRows: true,
autoWidth: true,
caption: "Results for " + ADC_Idl.buildQueryTitle(),
colNames: displayNames,
colModel: columnModel,
datatype: "json",
height: "auto",
mtype: "POST",
pager: '#pager5',
//postData: ADC_Idl.buildQueryPayload(),
serializeGridData: function (postData) {
grid.jqGrid("setGridParam", "url", ADC_Idl.buildQueryURL() + "?" + jQuery.param(postData));
return ADC_Idl.buildQueryPayload();
},
beforeRequest: function() {
grid.jqGrid("setGridParam", "url", ADC_Idl.buildQueryURL() + "?page=" +
grid.jqGrid("getGridParam", "page") + "&rows=" +
grid.jqGrid("getGridParam", "rowNum") );
},
rowList: [10, 20, 30],
rowNum: 10,
url: ADC_Idl.buildQueryURL(),
viewrecords: true,
jsonReader: {
repeatitems: false
}
I've left a few things in there to show what I have tried. I tried having the serializedGridData function update the URL, with no luck, for whatever reason it seems to be ignored.
I tried updating the URL before the request, still no luck.
Originally I just set postData = serialized data, assuming the default pagination parameters would still be appended. This was not the case.
The documentation for postData just says "See API methods for manipulation" with no link (NO LINK IN A WIKI??!!! come on!!)
I've read every Oleg answer I could find here, nothing seems to address this scenario, which I find hard to understand, this must be a pretty common usecase.
This is how my server responds to the initial request for data (no pagination needed)
page: 1
records: 500
rows: [{_id: 1, REALM: "example.com", ACCOUNT: "8561000000",…},…]
total: 50
truncated for brevity.
After three days of trying everything I can think of, I'm pleading for some jqGrid experts to help!!
Thanks!
UPDATE
Figured it out and comments from Oleg made it even better. Posted as Answer!

Answer 1

Almost immediately after I posted this question I noticed something in another post from StackOverflow,
jqGrid("setGridParam"...
format is different for setting then getting, it excepts a hash for the update vs a parameter list for the get... UGH.
Once I fixed that, it worked!
Using some of the recommendations from Oleg's (thanks!) I have an even better solution as the code is cleaner and feels less hacky.
grid.jqGrid({
ajaxGridOptions: {
contentType: "application/json",
},
altRows: true,
autoWidth: true,
caption: "Results for " + ADC_Idl.buildQueryTitle(),
colNames: displayNames,
colModel: columnModel,
datatype: "json",
height: "auto",
gridview: true,
mtype: "POST",
pager: '#pager5',
postData: ADC_Idl.buildQueryPayload(),
beforeRequest: function() {
var gridParameters = jQuery(this).jqGrid("getGridParam");
var baseURL = gridParameters.url.split("?").shift();
var queryString = {
page: gridParameters.page,
rows: gridParameters.rowNum
};
gridParameters.url = baseURL + "?" + jQuery.param( queryString );
},
rowList: [10, 20, 30],
rowNum: 10,
url: ADC_Idl.buildQueryURL(),
viewrecords: true,
jsonReader: {
repeatitems: false,
id: "_id"
}
});
The relevant parts are:
postData: I use this to have jqGrid call my payload builder which returns JSON.stringify(payload object)
beforeRequest: Causes jqGrid to take the url used to define the grid with and remove any params already attached then update them with the newest values for page and rows.
jasonReader: added "id: "_id" as this is the key mongodb uses for the id.
gridview: true - This apparently speeds of the display of the grid? Oleg recommended, I did it, he's got a very detailed write up about it here: Oleg's explaination of gridview: true
It was also recommended that I provide my colModel, but I can't, this code is designed to build a jqGrid dynamically once the user submits a query that is directed at mongodb. The grid is built as a response to the users input, thus it is not something I have to share.