How to make an Ajax call when doing an inline edit

Question

I am using the free jqgrid to edit a list of descriptions. This works as I want it to but I cannot find how to persist these changes with an Ajax call to the server.

<div id="divLoading" class="has-error">Loading ...</div>
<table id="grid"></table>
<div id="pager"></div>

---

$(function () {
    var data = GetHiddenField("sir-standard-faults-for-category");
    populateGrid(data.FaultCategoryDetails);
});

var populateGrid = function (data) {
    var grid = $("#grid");
    var lastSel = 0;
    grid.jqGrid({
        data: data,
        colNames: ["FaultCategoryDetailId", "Fault"],
        colModel: [
            { name: "FaultCategoryDetailId", index: "FaultCategoryDetailId", width: 65, align: "center", hidden: true, key: true },
            { name: "Description", label: "Description", width: 500, align: "center", editable: true }
        ],
        cmTemplate: { autoResizable: true, align: "center" },
        rowNum: 20,
        pager: "#pager",
        shrinkToFit: true,
        rownumbers: true,
        sortname: "Description",
        viewrecords: true,
        onSelectRow: function (FaultCategoryDetailId) {
            if (FaultCategoryDetailId && FaultCategoryDetailId !== lastSel) {
                jQuery("#grid").restoreRow(lastSel);
                lastSel = FaultCategoryDetailId;
            }
            jQuery("#grid").editRow(FaultCategoryDetailId, true);
        },
        oneditfunc: function() { alert("put ajax call here?"); }
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
    $("#divLoading").hide();
}

EDIT 2: This is a correction from the last edit, although this one did not work either; I put oneditfunc: function() { alert("editsave"); } in the code with the intention of capturing the "enter" event after the row is edited. I do not know if this is in the free version of jqGrid as it does not work. Or more likely it is wrong anyway.

Answer 1

jqGrid contains already build-in possibility to save the data on the server with respect of Ajax request. You need just add editurl option to the grid. You don't need to create hidden column with the id. Instead of that you can inform jqGrid about the name of property, which hold the information. You can remove FaultCategoryDetailId column from colModel and add the following options instead:

prmNames: { id: "FaultCategoryDetailId" },
localReader: { id: "FaultCategoryDetailId" },

See https://jsfiddle.net/OlegKi/neg0e0o2/ as an example. You can see in Developer Tools, that on press Enter jqGrid POST to editurl the data like

Description=Modified text
oper=edit
FaultCategoryDetailId=20