Jqgrid custom form and custom function

Question

I have the following problem. I m using a custom form for Jqgrid, the problem is that I can t figure it out how can I use different functions for submit button in add/edit/delete. Can you help me? I can use delfunc with succes. How can I add delfunc to the button submit from del form, and the function addfunc to submit button from the form of add.

$('#jqGrid').navGrid("#jqGridPager", {
    edit: true, 
    add: true,
    del: true, 
    refresh: true, 
    view: false,
    addfunc : function(){
       var angajat = new Object();
       angajat.id = null;
       angajat.firstName = "andrei"  //jQuery("#jqGrid").jqGrid('getRowData');
       angajat.lastName = " chivu " //jQuery("#jqGrid").jqGrid('getRowData');
    console.log(angajat);

     $.ajax({
         type: "POST",
         url: "rest/user/add",
         data: JSON.stringify(angajat),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         contentType: "application/json",
         success: function (data) {
         $("#response").html(JSON.stringify(data));
         }

     });

    },
    delfunc : function (id){

        $.ajax({
            type:"DELETE",
            url:"rest/user/delete",
            data:JSON.stringify(id),
            dataType: "json",
            contentType: "application/json",

        }).done(function( msg ) {
            alert("Content Deleted: " + id);},
            jQuery("#jqGrid").trigger("reloadGrid"));
         },

          editCaption: "Update Employee",
            template: template,
            //onClick: alert("alaaaaa"),
             errorTextFormat: function (data) {
                 return 'Error: ' + data.responseText
             }
         },
         // options for the Add Dialog
         {
            addCaption: "Add new Employee",
            template: template,
            sData: alert("alaaaaa"),
            errorTextFormat: function (data) {
                 return 'Error: ' + data.responseText
             }
         },
         // options for the Delete Dialog

{    
             caption: "Delete the Employee",
             msg: "Are you sure ? ",
             beforeSubmit: alert("alaaaaa"),

             errorTextFormat: function (data) {
                 return 'Error: ' + data.responseText
             },

         });

});

Answer 1

One don't need to use delfunc, addfunc, editfunc or viewfunc in the most cases. The function are replacements for delGridRow, editGridRow and viewGridRow, but to replace the methods which code is not so small one have to understand the code in details.

I try to explain your problem how I understand it. I'll start with the usage of delfunc. What you try to do is calling of URL rest/user/delete using HTTP DELETE. Thus I suppose that you have RESTful services on the backend. To use HTTP DELETE you need to append the id of deleted item to the URL, use DELETE operation and be sure that no other information (like oper parameter) are placed in HTTP body. Thus you can use existing options of delGridRow.

It's important to understand that navGrid just add some buttons in the navigator bar and it calls the methods delGridRow, editGridRow and viewGridRow if the user clicks on the corresponding buttons. The options of navGrid looks like

$("#gridid").jqGrid('navGrid','#gridpager', {parameters},
    prmEdit, prmAdd, prmDel, prmSearch, prmView);

(see the documentation). The parameters parts are real options of navGrid and it informs navGrid for example which buttons should be included on the navigator bar. The other options are the options of delGridRow, editGridRow, searchGrid and viewGridRow methods which shoule be used if the user clicks on the corresponding button of navigator bar. To configure the behavior of Delete button we need to specify prmDel parameter. The value of the parameter should be object with the properties and callbacks of delGridRow method. See the documentation.

In the same way if one uses formatter: "actions" or inlineNav then another buttons will be added and one have to use the corresponding options to specify, which options of delGridRow should be used. I find that the options of navGrid is difficult to understand. Because of that I introduced in free jqGrid alternative way of specify default options used in jqGrid by delGridRow inside of formDeleting of jqGrid options. Thus the most free jqGrid looks like the demo. It uses formEditing, formViewing, searching options of jqGrid and the call of navGrid is either without any parameters or with the small set of options. Now back to your main problems. See the wiki for more information.

If the main logic is clear then it will be clear how one configure jqGrid to do on Delete exactly what you need. To do this you should specify mtype: "DELETE" option and ajaxDelOptions: {...} to specify other options of Ajax call. To append the id to the URL you can use onclickSubmit or beforeSubmit callbacks (see the answer), but in free jqGrid and can use url defined as function (see the answer) and have more readable code. Thus I suggest you to use formDeleting option with the value

{
    mtype: "DELETE",
    url: function (rowid) {
        return "/rest/user/delete/" + rowid;
    },
    ajaxDelOptions: { contentType: "application/json" },
    serializeDelData: function () {
        return "";
    },
    reloadGridOptions: { fromServer: true },
}

The grid will be reloaded automatically on successful deleting because reloadAfterSubmit: true is default option of delGridRow (see here). The last option reloadGridOptions is helpful in case of usage loadonce: true option of jqGrid. It will force reloading of grid from the server.

In the same way to configure Add and Edit buttons you can use formEditing option of jqGrid with the value

{
    url: function (id, editOrAdd) {
        return "/rest/user/" + (editOrAdd === "add" ? "add" : "edit");
    },
    mtype: function (editOrAdd) {
        return editOrAdd === "add" ? "POST" : "PUT";
    }, 
    serializeEditData: function (postData) {     
        return JSON.stringify(postData);
    },
    serializeEditData: function (postData) {
        var dataToSend = $.extend({}, postData); // make copy of data
        // don't send any id in case of creating new row or to send `0`:
        if (dataToSend.id === "_empty") {
            delete dataToSend.id; // or dataToSend.id = 0; 
        }
        return JSON.stringify(dataToSend);
    },
    ajaxEditOptions: { contentType: "application/json" },
    reloadGridOptions: { fromServer: true }
}