jqGrid + POST + default parameters + serializedGridData

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!

You should post the solution as **an answer** on your own question. It helps to organize the answer correctly. I would recommend you additionally use **always** `gridview: true` option and prefer to use `$(this)` inside of callbacks as the reference to the grid. For example you can rewrite `beforeRequest` to the following using `jQuery.param`: `beforeRequest: function () { var p = $(this).jqGrid("getGridParam"); p.url = `ADC_Idl.buildQueryURL()` + "+" + $.param({page: p.page, rows: p.rowNum});}` Probably `id: "_id"` property need be added in `jsonReader` too. Consider `autoencode: true` too. — Oleg, Dec 07 '14 at 13:08
Man I was hoping you'd comment Oleg, you're like the Oracle of jqGrid on StackOverflow! I will update my question by posting my solution as an answer. I will first try your recommendations first and test before I do. Thanks a million! — RobertDeRose, Dec 07 '14 at 16:16
You are welcome! I'm glad if you could help you. I'll look on the answer and could post my comments. Please include the information about the choice of `id` (rowid). Is `_id` property in the input data corresponds the native id from the database? `columnModel` value could be interesting to know. It's not related to your current question, but it could help you too. — Oleg, Dec 07 '14 at 16:41

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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.

jqGrid + POST + default parameters + serializedGridData

1 Answers1