jqGrid send edited/delete inline information serialized JSON format

Question

I'm trying to do an inline edit with a column with formatter: 'actions' and want to send the information to the server in JSON format, but I cant. I already tried many things, but with no results. Still sending information without serializing.

Also tried $.extend($.jgrid.edit, (...)); at the initialization $(function(){...}); with no result.

My formatoptions looks like this:

formatoptions: {
    keys: true,
    editbutton: true,
    delbutton: true,
    //url: url,
    editOptions: {
        url: url,
        ajaxEditOptions: {
            //url: url,
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            datatype: 'json'
        }
    },
    delOptions: {
        url: url,
        ajaxDelOptions: {
            //url: url,
            contentType: 'application/json;charset=utf-8',
            type: 'POST',
            datatype: 'json'
        }
    }
}}

But still not working :S I dont know what im doing wrong. I'd appreciate if you help me.

PS: I writted too many url properties, becuase I was checking where I have to write it to do it work. For edit, only works if I put the url out of editOptions, only if I put it in formatoptions. But for delete, it don't cares if I put it in/out delOptions, including ajaxDelOptions. If you could help me with that too, I'd appreciate.


UPDATED

Delete works fine with this config, but inline editing save button still not working. I pasted the same config, changing options for editing and still not working.

delOptions: {
    url: url,
    mtype: 'POST',
    reloadAfterSubmit: true,
    ajaxDelOptions: {
        contentType: "application/json"
    },
    serializeDelData: function(postdata) {
        return JSON.stringify(postdata);
    }
}

UPDATED 2

Here is my JS.

$(function() {
    $.mask.definitions['2'] = '[0-2]';
    $.mask.definitions['5'] = '[0-5]';
    $.extend($.jgrid.defaults, {
        ajaxRowOptions: {
            contentType: "application/json",
            dataType: "json",
            success: function() {

            },
            error: null
        },
        serializeRowData: function(data) {
            delete data.oper;
            return JSON.stringify(data);
        }
    });
});
function loadGrid(identifier) {
    $("#list").jqGrid({
        url: 'foo.html?identifier=' + identifier,
        type: 'GET',
        datatype: 'json',
        repeatitems: false,
        autowidth: true,
        altRows: false,
        hidegrid: false,
        cmTemplate: {
            sortable: false,
            resizable: false
        },
        colNames: ["id", "column1", "column2", "column3", "column4", "column5", "column6", "column7", " "],
        colModel: [
            {name: "id", label: "id", hidden: true},
            {name: "columnData1", label: "columnData1", key: true, hidden: true},
            {name: "columnData2", label: "columnData2", edittype: "select", editable: true,
                editoptions: {
                    dataUrl: 'foo/bar.html'
                }},
            {name: "columnData3", label: "columnData3", width: 75, editable: true},
            {name: "columnData4", label: "columnData4", width: 100, edittype: "select", editable: true,
                editoptions: {
                    dataUrl: 'foo/bar.html'
                }},
            {name: "columnData5", align: "right", label: "columnData5", width: 55, formatter: 'number',
                formatOptions: {
                    decimalPlaces: 2
                }, editable: true},
            {name: "columnData6", align: "right", label: "columnData6", width: 55, formatter: 'number',
                formatOptions: {
                    decimalPlaces: 2
                }, editable: true},
            {name: "columnData7", align: "right", label: "columnData7", width: 55, formatter: 'number',
                formatOptions: {
                    decimalPlaces: 2
                }},
            {name: "actions", formatter: "actions", width: 35}
        ],
        pager: '#pager',
        rows: '',
        rowList: [],
        pgbuttons: false,
        pgtext: null,
        viewrecords: false,
        gridview: true,
        caption: 'MyCaption',
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + "_t";
            pager_id = "p_" + subgrid_table_id;
            $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
            $("#" + subgrid_table_id).jqGrid({
                url: 'foo/bar.html?identifier=' + identifier + '&rowId=' + row_id,
                type: 'GET',
                datatype: 'json',
                repeatitems: false,
                autowidth: true,
                altRows: false,
                hidegrid: false,
                cmTemplate: {
                    sortable: false,
                    resizable: false
                },
                colNames: ['column1', 'column2', 'column3', 'column4', 'column5', 'column6', ' '],
                colModel: [
                    {name: 'columnData1', hidden: true, key: true},
                    {name: 'columnData2', width: 75, formatter: 'date',
                        formatoptions: {
                            srcformat: 'Y-m-d',
                            newformat: 'd/m/Y'
                        },
                        editoptions: {
                            readonly: 'readonly',
                            dataInit: function(elem) {
                                $(elem).width("75%");
                                $(elem).datepicker({
                                    dateFormat: "dd/mm/yy",
                                    showOn: "button",
                                    buttonImage: "../css/images/calendar.gif",
                                    buttonText: "Muestra el calendario.",
                                    buttonImageOnly: true
                                });
                            }}
                        , editable: true},
                    {name: 'columnData3', width: 75,
                        formatter: function(cellval, opts) {
                            if (!/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(cellval)) {
                                var date = new Date(cellval);
                                opts = $.extend({}, $.jgrid.formatter.date, opts);
                                return $.fmatter.util.DateFormat("", date, 'H:i', opts);
                            } else {
                                var date = new Date();
                                var time = cellval.split(":");
                                date.setFullYear(1899);
                                date.setMonth(12);
                                date.setDate(30);
                                date.setHours(time[0]);
                                date.setMinutes(time[1]);
                                date.setSeconds(0);
                                opts = $.extend({}, $.jgrid.formatter.date, opts);
                                return $.fmatter.util.DateFormat("", date, 'H:i', opts);
                            }
                        },
                        editoptions: {dataInit: function(elem) {
                                $(elem).mask("29:59");
                            }},
                        editrules: {custom: true, custom_func: function(value) {
                                if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(value)) {
                                    return [true, ""];
                                } else {
                                    return [false, " no es un formato de hora v&aacute;lido.<br/>Por favor, introduzca una hora en un formato <b>hh:mm</b> v&aacute;lido."];
                                }
                            }}, editable: true},
                    {name: 'columnData4', width: 80, editable: true},
                    {name: 'columnData5', width: 200, editable: true},
                    {name: 'columnData6', align: 'right', width: 50, editable: true, formatter: 'number',
                        formatoptions: {
                            decimalPlaces: 2
                        }},
                    {name: 'actions', formatter: 'actions', width: 40,
                        formatoptions: {
                            //keys: false,
                            editbutton: true,
                            delbutton: true,
                            url: "foo/bar/edit.html?identifier=" + identifier + "&rowId=" + row_id,
                            editOptions: {
                                keys: true,
                                //url: "foo/bar/edit.html?identifier=" + identifier + "&rowId=" + row_id,
                                mtype: "POST"
                            },
                            delOptions: {
                                url: "foo/bar/delete.html?identifier=" + identifier + "&rowId=" + row_id,
                                mtype: 'POST',
                                reloadAfterSubmit: true,
                                ajaxDelOptions: {
                                    contentType: "application/json"
                                },
                                serializeDelData: function(postdata) {
                                    delete postdata.oper;
                                    return JSON.stringify(postdata);
                                }
                            }
                        }}
                ],
                height: 190,
                pager: pager_id,
                rows: '',
                rowList: [],
                pgbuttons: false,
                pgtext: null,
                viewrecords: false,
                gridview: true,
                loadError: function(xhr, status, error) {
                    alert(xhr + " : " + status + " : " + error);
                },
                jsonReader: {
                    repeatitems: false
                },
                gridComplete: function() {
                    $("div.ui-inline-save").click(function() {
                        var dlgDiv = $("#info_dialog");
                        dlgDiv.width(600);
                        var parentDiv = dlgDiv.parent();
                        var dlgWidth = dlgDiv.width();
                        var parentWidth = parentDiv.width();
                        var dlgHeight = dlgDiv.height();
                        var parentHeight = parentDiv.height();
                        dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                        dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                    });
                    $("div.ui-inline-del").click(function() {
                        var dlgDiv = $("#delmod" + subgrid_table_id);
                        dlgDiv.width(600);
                        var parentDiv = dlgDiv.parent();
                        var dlgWidth = dlgDiv.width();
                        var parentWidth = parentDiv.width();
                        var dlgHeight = dlgDiv.height();
                        var parentHeight = parentDiv.height();
                        dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                        dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                    });
                    $("#gbox_" + subgrid_id + "_t").removeClass('ui-corner-all');
                    $("#" + pager_id).removeClass('ui-corner-bottom');
                    disableSelection(document.getElementById(subgrid_table_id));
                }
            }).navGrid("#" + pager_id, {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
                    {afterShowForm: function(form) {
                            var dlgDiv = $("#editmod" + subgrid_table_id);
                            dlgDiv.width(600);
                            var parentDiv = dlgDiv.parent();
                            var dlgWidth = dlgDiv.width();
                            var parentWidth = parentDiv.width();
                            var dlgHeight = dlgDiv.height();
                            var parentHeight = parentDiv.height();
                            dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                            dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                        }
                    });
        },
        loadError: function(xhr, status, error) {
            alert(xhr + " : " + status + " : " + error);
        },
        jsonReader: {
            repeatitems: false
        },
        gridComplete: function() {
            $("div.ui-inline-save").click(function() {
                var dlgDiv = $("#info_dialog");
                dlgDiv.width(600);
                var parentDiv = dlgDiv.parent();
                var dlgWidth = dlgDiv.width();
                var parentWidth = parentDiv.width();
                var dlgHeight = dlgDiv.height();
                var parentHeight = parentDiv.height();
                dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
            });
            $("div.ui-inline-del").click(function() {
                var dlgDiv = $("#delmodlist");
                dlgDiv.width(600);
                var parentDiv = dlgDiv.parent();
                var dlgWidth = dlgDiv.width();
                var parentWidth = parentDiv.width();
                var dlgHeight = dlgDiv.height();
                var parentHeight = parentDiv.height();
                dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
            });
            disableSelection(document.getElementById("list"));
        }
    }).navGrid("#pager", {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
            {afterShowForm: function(form) {
                    var dlgDiv = $("#editmodlist");
                    dlgDiv.width(600);
                    var parentDiv = dlgDiv.parent();
                    var dlgWidth = dlgDiv.width();
                    var parentWidth = parentDiv.width();
                    var dlgHeight = dlgDiv.height();
                    var parentHeight = parentDiv.height();
                    dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                    dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                }
            });
    var height = $("body").height();
    $('.ui-jqgrid-bdiv').height(height);
}

Changed column names, etc. for security (obviusly). This is my JS. I had to use jqGrid in a function and getting identifier as parameter, because I have a JSP that is loaded into a Iframe and that JSP has another Iframe that loads this JS. I needed to send the identifier that I recieve in the JSP to build the grid. The best way I found is that. Thats the identifier value.

Also, I need that identifier and the row_id to update data, because I have as 3 primary keys to identify an specific item. I need identifier, parent row_id and actual row_id that I'm editing. Last one I get it from the JS Object in JSON format.

It's like it does not recognize editOptions property, because it does not get keys: true. It didn't let me accept the edit with Enter key.

If you still needing more information, just ask.

Answer 1

I think that the origin of your problem is misunderstanding about how formatter: 'actions' works.

There are tree main editing mode supported by jqGrid: inline editing, form editing and cell editing. If you don't use editformbutton: true option of formatter: 'actions' inside of formatoptions then Edit button will use inline editing. Delete button uses always form editing because there are no delete method in the inline editing module.

So if you includes some option inside of editOptions of formatoptions of formatter: 'actions' then it should be an option of editRow (see properties of editparameters object in the documentation). So you can specify for example

editOptions: {
    url: url,
    mtype: "POST", // is already default and can be removed
    keys: true
}

but the ajaxEditOptions will be ignored here. $.jgrid.edit can be used to change default values for editGridRow which is part of forme editing, but to change defaults of editRow you need use $.jgrid.inlineEdit instead.

delOptions allows you specify parameters of delGridRow. The UPDATED part of your question uses correct options. So Delete operation works correctly.

By the way you can use editurl option of jqGrid to specify URL used for both inline editing and form editing. So editurl: url on one place will be better as specifying url: url multiple times.

What you need to do for successful editing is adding ajaxRowOptions and serializeRowData as jqGrid options

ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) { return JSON.stringify(data); }

or to set it in $.jgrid.defaults.

UPDATED: You misunderstand the value of unique id. HTML standard don't allows to have two elements with the same id attribute on the page. The demo which you posed don't use idPrefix in subgrids. If you opens subgrids for who rows and examine HTML code of the page with respect of Developer Tools (press F12 in IE) you will see the following

So you have to use idPrefix for subgrids. I recommend you to use the value which depends on rowid of the parent grid (something like idPrefix: "s_" + row_id + "_"). Look at here for more my answer about the subject.

UPDATED 2: I looked in the code of formatter: "actions" one more time and I see that it uses url option of formatter for inline editing operations (see the documentation) and uses delOptions for delete and editOptions for form editing. So editOptions.url will be used only if you would use editformbutton: true option.