Inline jqGrid editing "Request Error"

Question

This is a follow-up to this question I had earlier this week.

I was able to get the form edit features to work just fine. Now I wanted to take it a step further and see if I can get the inline editing working. I used the code from the examples that adds the 3 buttons; E S C. E)dit and C)ancel works just great. The S)ave row function does not. Is it possible to use the same code for the form edit to work with the inline edits? Or is it one or the other?

I seem to be in the same boat I was with my original question. I can see the data being sent and it's not in JSON format. It looks like: Id=823&Step_Number=1&Step_Description=xxx.&oper=edit&id=1. The error that I'm receiving goes like this:

The server encountered an error processing the request. Please see the service help page for constructing valid requests to the service. The exception message is 'The incoming message has an unexpected message format 'Raw'. The expected message formats for the operation are 'Xml', 'Json'. This can be because a WebContentTypeMapper has not been configured on the binding. See the documentation of WebContentTypeMapper for more details.'. See server logs for more details. The exception stack trace is:

I've looked into the ajaxRowOptions but that doesn't seem to change anything. Doesn't mean I had it in the right position.

[WebInvoke(Method = "POST", UriTemplate = "/Save/JSA", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateJSADetail(int Id, string Step_Number, string Step_Description, string oper, string id)

...
onclickSubmitLocal = function (options, postdata) {                    
},
editSettings = {
    recreateForm: true,
    width: 400,
    jqModal: false,
    reloadAfterSubmit: false,
    closeOnEscape: true,
    savekey: [true, 13],
    closeAfterEdit: true,
    onclickSubmit: onclickSubmitLocal
},
addSettings = {
    recreateForm: true,
    jqModal: false,
    reloadAfterSubmit: false,
    savekey: [true, 13],
    closeOnEscape: true,
    closeAfterAdd: true,
    onclickSubmit: onclickSubmitLocal
};

$("#list").jqGrid({
    url: 'FileServices/GetList/JSA',
    edit: {
        mtype: "POST"
    },
    editurl: 'FileServices/Save/JSA',
    datatype: 'local',
    gridComplete: function () {
        var ids = jQuery("#list").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />";
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
            jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
        }

        $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");
    },
    loadComplete: function (data) {
        var det = $("#details");
        $("#list").setGridWidth(det.width() - 18, true);
    },
    colNames: ['Actions', 'Id', 'Step Number', 'Step Description', 'Hazards', 'Controls', 'Sequence'],
    colModel: [
      { name: 'act', index: 'act', width: 75, sortable: false },
      { name: 'Id', editable: true, index: 'Id', width: 30, sortable: false, hidden: true },
      { name: 'Step_Number', editable: true, index: 'Step_Number', align: 'center', width: 50, fixed: true, resizable: false, sortable: false, title: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="font-weight: bold: true; white-space: normal; vertical-align: middle;' } },
      { name: 'Step_Description', editable: true, index: 'Step_Description', edittype: 'textarea', editoptions: { rows: '4', cols: '40' }, sortable: false, width: 400, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Hazards', index: 'Hazards', width: 200, sortable: false, formatter: JSAHazardFormatter, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Controls', index: 'Controls', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Sequence', index: 'Sequence', width: 0, sortable: false, hidden: true }
    ],
    pager: '#pager',
    rowNum: 5,
    rowList: [5, 10, 15, 20, 25, 30, 50],
    sortname: 'Id',
    height: 'auto',
    rownumbers: true,
    autowidth: true,
    forceFit: true,
    shrinkToFit: true,
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    hidegrid: false,
    caption: ''
}).navGrid("#pager", { add: false, edit: true, del: false, search: false }, editSettings, {}, {}, {}, {});

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: true,
    closeAfterEdit: true,
    closeOnEscape: true,
    serializeEditData: function (postData) {
        return JSON.stringify(postData);
    }
});

var thegrid = $("#list");

for (var i = 0; i < data.details.length; i++) {
    thegrid.addRowData(i + 1, data.details[i]);
}

Any help is greatly appreciated. Thank you so much.

Answer 1

You can share the same code on the server side for both inline editing and form editing. The usage of ajaxRowOptions is the correct way to solve your problem. It should has at least contentType: "application/json". Try to do following

$("#list").jqGrid({
    ... // you current parameters
    ajaxRowOptions: { contentType: "application/json" },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    }
});

or you can set some jqGrid defaults with

$.extend($.jgrid.defaults, {
    ajaxGridOptions: { contentType: "application/json" },
    ajaxRowOptions: { contentType: "application/json", type: "PUT", async: true },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    }
});

In the case you would not need to set the same settings in every grid which you use.

Of cause you should change the defaults before creating of the grid. Currently you use $.extend($.jgrid.edit, ... after creating of the grid which also not good, but can do work. The $.jgrid.defaults you should change in any way before creating of the grid. Typically you place the setting of all you default settings in a separate JavaScript file which you included on all you pages which use jqGrid.

I recommended you in the comment don't use addRowData which make you code working slowly. Simple replacing of the addRowData in a loop after the grid already created to the additional parameter data: data.details will improve the performance. The usage of getDataIDs and the for loop over all rows makes you code more slowly. I recommend you to read the old answer which describes how to fill jqGrid with the data provided by WCF service.

Instead of the usage 'E', 'S', 'C' buttons you can use formatter:'actions' (see this old answer or another one). One more old answer describe another approach to solve the problem.