Question

I am using the latest version of jqGrid: 3.6.4

This seems like a simple problem (or at least it did before I spent a few hours on it):

When the grid sends a request to the server (to a controller action), its content-type is always:

application/x-www-form-urlencoded; charset=UTF-8

and I would like it to be:

application/json; charset=utf-8

but I can find no way of setting the content-type (there is no contentType option as you would find on a $.ajax call for example).

So just to clarify, I am not asking how to set the content-type on a jQuery server request, but specifically using jqGrid, which does not provide an obvious option for doing this.

Thanks, Nigel.

Update:
Oleg’s response fixed solved it.

Here are the option settings for the grid:

jQuery("#ContactGridList").jqGrid({
        url: '/ContactSelect/GridData/',
        datatype: 'json',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        mtype: 'POST',
        ...

Answer 1

How you can find in the code of grid.base.js the $.ajax call filling the grid contain looks like following:

$.ajax($.extend({
    url: ts.p.url,
    type: ts.p.mtype,
    dataType: dt,
    data: $.isFunction(ts.p.serializeGridData) ?
             ts.p.serializeGridData.call(ts, ts.p.postData) : ts.p.postData,
    complete: function (req, st) {
       ...
    }
    ...
}, $.jgrid.ajaxOptions, ts.p.ajaxGridOptions));

So you can use ajaxGridOptions option of jqGrid to set or override any parameter of $.ajax request. Because I use only JSON requests to my server, I set general setting of contentType like

$.extend($.jgrid.defaults, {
    datatype: 'json',
    {ajaxGridOptions: { contentType: "application/json" },
    {ajaxRowOptions: { contentType: "application/json", type: "PUT" },
    ...
});

The ajaxRowOptions are used in grid.inlinedit.js for row editing. For the form edit there are other parameters, which I set also as global setting:

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    ...
});

$.extend($.jgrid.del, {
    ajaxDelOptions: { contentType: "application/json" },
    mtype: "DELETE",
    ...
});

How you can see my server is a RESTfull service (developed mainly in WFC and the rest in ASP.NET MVC). Because $.jgrid.edit is a setting for both “add” and “modify” items, I could not change mtype: "PUT" for “edit” only, so I do this in parameters of navGrid().

The last ajax parameter which you could find also interesting to set is ajaxSelectOptions. You can set it on the same way as ajaxGridOptions. Parameters of ajaxSelectOptions are useful if you use dataUrl parameter inside of editoptions or searchoptions. I use, for example, dataUrl inside of colModel for defining columns of the type edittype: 'select'. The possible values of select option will be loaded from server for inline or form editing or inside of search dialog. Because for such data loading are used ajax, there is corresponding ajaxSelectOptions option.

Best regards.