JQGrid, Edit Url

Question

I am new to jQuery, and I need to use jqGrid in my project.

I have one problem with edit/delete/insert; I have only one URL, editurl, then in the controller I am using the oper property to decide whether it is an insert or delete operation.

But I want to have a separate URL for the edit, delete and insert operations in jqGrid. Could you please let me know how to achieve that?

Client side code:

$(document).ready(function () {
    var lastsel2;
    var grid = jQuery("#list5").jqGrid({
        url: '/home1/GetUserData',
        datatype: "json",
        mtype: "POST",
        colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate'],
        colModel: [
        // { name: 'act', index: 'act', width: 75, sortable: false },
                        {name: 'Code', index: 'Code', width: 55, editable: true },
                        { name: 'LoginID', index: 'LoginID', width: 90, editable: true },
                        { name: 'Emailid', index: 'Emailid', width: 100, editable: true },
                    { name: 'CreateDate', index: 'CreateDate', width: 100, editable: true }
                      ],
        rowNum: 10,
        width: 700,
        height: 300,
        rowList: 10,
        pager: $("#pager2"),
        editurl: "/home1/EditUserData",
        onSelectRow: function (id) {
            if (id && id !== lastsel2) {
                if (id == "new_row") {
                    grid.setGridParam({ editurl: "/home1/InsertUserData" });
                }
                else {
                    grid.setGridParam({ editurl: "/home1/EditUserData" });
                }
                jQuery('#list5').restoreRow(lastsel2);
                $("#list5_ilsave").addClass("ui-state-disabled");
                $("#list5_ilcancel").addClass("ui-state-disabled");
                $("#list5_iladd").removeClass("ui-state-disabled");
                $("#list5_iledit").removeClass("ui-state-disabled");
                lastsel2 = id;
            }
        },
        caption: "Simple data manipulation"
    });
    jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
    jQuery("#list5").jqGrid('inlineNav', "#pager2", { edit: true, add: true, del: true, search: false, refresh: false });
});

Answer 1

You can pass options for all the actions with navGrid method like this:

jQuery('#list5').jqGrid('navGrid', '#pager2', { edit: true, add: true, del: true },
    //edit options
    { url: '/home1/EditUserData' },
    //add options
    { url: '/home1/AddUserData' },
    //delete options
    { url: '/home1/DeleteUserData' }
);

Please read more here and here.

UPDATE

In case of inlineNav method jqGrid is always passing the same set of parameters (editParams) to saveRow method. As the effect the edit/add request will be made to the same URL. You are sticked with checking oper to distinguish edit for add.

In the subject of reloading the grid you can use editParams to set aftersavefunc to trigger realoadGrid like this:

jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {
   aftersavefunc: function(rowId, response) { jQuery('#list5').trigger('reloadGrid'); }
}});

But you should remember that it will also cause a refresh after edit (because of the same reason as described above) - you may try to use response parameter to distinguish those two. I have also removed del, search and refresh from the code as inlineNav doesn't have those options.