delete on multiple jqGrids in singe page MVC

Question

I have two jqGrids in a single view. I got no problem in loading those grids, but when I am trying to delete records from grid1, it was posting to the URL set in grid2 delete method.

I was using below code to delete rows in two jqGrids.

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    onclickSubmit: function (params, postdata) {
        params.url = 'url' + postdata;
    },
    afterComplete: function (response, postdata, formid) {
    }
});

I wrote two separate methods to delete from respective grids and both methods are like above.

Please tell me how to perform delete operations on both jqgrids.

I think extend method to delete rows in grid1 is over loaded by the grid2 extend method.

Please include in all questions about jqGrid the information, which version you use and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7) — Oleg, Feb 17 '16 at 12:47

score 0 · Accepted Answer · edited May 23 '17 at 11:45

$.jgrid.del defined defaults used by all jqGrids on the page. $.extend just combines the properties of the parameter (mtype, serializeDelData, onclickSubmit and afterComplete) with the properties with the same name which could exist in $.jgrid.del. Thus jqGrid uses the object $.jgrid.del not during creating the grid, but during executing Delete operation then the code like

$.extend($.jgrid.del, {...}); // first settings
$("#grid1").jqGrid({
    ...
}).jqGrid("navGrid");
$.extend($.jgrid.del, {...}); // the second settings
$("#grid2").jqGrid({
    ...
}).jqGrid("navGrid");

will use only the second settings of $.jgrid.del.

Thus you should to use $.extend($.jgrid.del, {...}); to set common defaults on the page and to set other parameters separately:

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    }
});
$("#grid1").jqGrid({
    ...
}).jqGrid("navGrid", ....., { /*Del options*/
    onclickSubmit: function (params, postdata) {
        params.url = 'url1' + postdata;
    }
});
$("#grid2").jqGrid({
    ...
}).jqGrid("navGrid", ....., { /*Del options*/
    onclickSubmit: function (params, postdata) {
        params.url = 'url2' + postdata;
    }
});

If you use free jqGrid fork, which I develop, then you can specify Delete parameters inside of formDeleting option of jqGrid. Additionally, free jqGrid supports functions as the value of url (see the answer for more details) and you can rewrite the above code as following

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    }
});
$("#grid1").jqGrid({
    ...
    formDeleting: {
        url: function (rowid) {
            return "url1/" + rowid;
        }
    }
}).jqGrid("navGrid");
$("#grid2").jqGrid({
    ...
    formDeleting: {
        url: function (rowid) {
            return "url2/" + rowid;
        }
    }
}).jqGrid("navGrid");

Of cause if you set editurl to the base URL in every grid then you could access it from url function and rewrite the code as below

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    url: function (rowid, postData, options) {
        return options.url + rowid;
    }
});
$("#grid1").jqGrid({
    ...
    editurl: "url1/"
}).jqGrid("navGrid");
$("#grid2").jqGrid({
    ...
    editurl: "url2/"
}).jqGrid("navGrid");

in-line editing and deleting not working for me. I should follow same procedure or any other?? — Markandeyulu, Mar 03 '16 at 12:04

delete on multiple jqGrids in singe page MVC

1 Answers1