free-jqgrid Inline edit throws status 400 error

Question

The project is a .NET 6 C# MVC application. Free-JQgrid version is 4.15.5 and believe the issue is with the way the grid has the ajax post created. Here is the code for the grid.

var mainColModel = [
        {
            name: "act", template: "actions", label: "Edit / Delete", width: 80, align: 'center', sortable: false, formatter: 'actions', fixed: false, resizable: true,
            formatoptions: {
                keys: true, editformbutton: false, delOptions: {
                    afterSubmit: function (jqXhr) {
                        $('#notifications').html(jqXhr.responseText);
                    }
                },
                isDisplayButtons: function (options, rowData) {
                    if (rowData.newGroup) {
                        return { edit: { display: true }, del: { display: true }, formedit: { display: false } };
                    } else {
                        return { edit: { display: false }, del: { display: false } };
                    }
                }
            }
        },
        { name: 'id', key: true, sortable: false, hidden: true },
        { name: 'newGroup', sortable: false, hidden: true },
        {
            name: "name", label: "Item", autoResizable: true, width: 500, editoptions: { maxlength: "25" }, editable: true, editrules: { required: true }, edittype: 'text',
            searchoptions: { sopt: ["eq", "ne", 'bw', 'bn', 'ew', 'en', 'cn', 'nc'] },
        },
    ];
    $grid.jqGrid({
        autoencode: true,
        url: groupListURL,
        editurl: groupEditURL,
        datatype: 'json',
        //ajaxEditOptions: {
        //    type: "POST",
        //    contentType: 'application/json; charset=utf-8',
        //    headers: { headerName: headerToken },
        //    xhrFields: { withCredentials: true },
        //    cache: false
        //},
        //serializeEditData: function (postData) {
        //    return {
        //        functionName: "editGroup",
        //        functionParams: JSON.stringify(postData)
        //    }
        //},
        mtype: 'GET',
        jsonReader: { id: "id" },
        caption: "LookUp Group Maintenance",
        datatype: 'json',
        loadonce: true,
        colModel: mainColModel,
        emptyrecords: "No records found. Add a new Group.",
        height: '100%',
        shrinkToFit: true,
        rownumbers: false,
        autoresizeOnLoad: false,
        guiStyle: "jQueryUI",
        iconSet: "fontAwesomeSVG",
        rowNum: 20,
        autoResizing: { compact: true },
        cmTemplate: { editable: false, autoResizable: true },
        inlineEditing: {
            keys: true,
            aftersavefunc: function (rowid, jqXhr, postdata, options) {
                $('#notifications').html(jqXhr.responseText);
                $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
            }
        },
        rowList: [20, 40, 60, "10000:All"],
        viewrecords: true,
        pager: true,
        sortname: "LookUpGroup",
        sortorder: "asc",
        altRows: true,
        altclass: 'jqGridAltRow',
        ondblClickRow: function (id) { },
        forceClientSorting: true,
            });
            $subGrid.jqGrid('inlineNav', inLineOp);
            $subGrid.jqGrid('navGrid', { add: false, edit: false, del: false, search: false, refresh: false }, {}, {}, {});
        }
    });
    $grid.jqGrid('inlineNav', inLineOp);
    $grid.jqGrid('navGrid', { add: false, edit: false, del: false, search: false, refresh: false }, {}, {}, {});

Based upon searches here on SO, I have tried the commented out sections and it still threw the error. There are a couple places elsewhere in the code that execute an ajax post successfully. This is one of them.

$.ajax({
            url: '@Url.Action("PrintReports", "Reports")',
            type: "POST",
            headers: { '@tokenSet.HeaderName' : '@tokenSet.RequestToken' },
            data: $('form').serialize(),
            dataType: 'json',
            xhrFields: { withCredentials: true },
            cache: false,
            complete: function (data) {
                $("#main").html(data.responseText);
            }
        });

I suspect it is the options of xhrFields and headers. I attempted to add these in the grid in the commented code but was unsuccessful. Prior to upgrading to .NET 6 and implementing the authentication it worked without any errors. For completeness here is the action in the controller.

    [HttpPost]
    public IActionResult EditGroup(LookUpGroupViewModel model, IFormCollection formCollection)
    {
...
        return PartialView("_Notification", messages);
}

How do I resolve the Error 400 displayed inside the grid?

Answer 1

I was able to resolve the issue by adding the beforeSubmit option. Executing the ajax within that function allowed the addition of the authentication information. Although that was fixed another error arose and that was 405 error. I was able to determine that was an antiforgery token problem. For now I have removed this feature from the application but will be trying to implement it in the AJAX call.

This does seem a little hacky to me and hope that Oleg adds the ability to provide additional properties to the ajaxOptions for at least the posting.