add extra parameter in edit url using form dialog

Question

I have create a gird uing jqgrid and in that i am using form dialog to add , edit and delete record.

but in Edit Record i want to pass the id of a record along with the url even though form data will contain that , as i am using RESTful url so to update a record i have to pass the respective ID. as follow

www.example.com/eventInfo/10 , Method is PUT 

so far i have tried

jQuery("#eventGrid").jqGrid('navGrid','#pager', {}, //options 

        {
                height:280,
                reloadAfterSubmit:false , 

               // How can i add Event id over here from grid 

                url:'http://www.eample.com/evenInfo',
                mtype:'PUT'


        }, // edit options 
        {
                height:280,
                reloadAfterSubmit:false
        }, // add options 
        {
                reloadAfterSubmit:false
        }, // del options
        {

        } // search options 


    ); 

Moreover i want to send data to server in a JSON format rather then as form data

Answer 1

I described here detailed what you should do in case of working with RESTful services. The callback onclickSubmit is the best place to modify URL dynamically and append the id to it.

The current code of jqGrid which are on the github set the DOM element of the grid as this. So you will be able to use the following

onclickSubmit: function (options, postdata) {
    options.url += '/' + encodeURIComponent(postdata.[this.id + "_id"]);
}

in the next (after 4.3.1) version of jqGrid. In the current version of jqGrid the code will be about the following

var $grid = $("#eventGrid");

// set defaults for Delete form
$.extend($.jgrid.del, {
    mtype: "DELETE",
    reloadAfterSubmit: false
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    onclickSubmit: function (options, postdata) {
        options.url += '/' + encodeURIComponent(postdata);
    }
});

// set defaults for Edit and Add forms
$.extend($.jgrid.edit, {
    height: 280,
    reloadAfterSubmit: false,
    onclickSubmit: function (options, postdata) {
        // options.gbox will be like "#gbox_eventGrid"
        var gridId = options.gbox.substr(6), // cut id from the gbox selector
            id = postdata.[gridId + "_id"];
        if (id !== "_empty") {
            options.url += '/' + encodeURIComponent(id);
        }
    },
    afterSubmit: function (responseData) {
        // in case of usage reloadAfterSubmit: false it's important
        // that the server returns id of the new added row
        // in the simplest form the server response should just contain
        // the id. In more complex response one should modify the next line
        // to extract the id only from the response
        return [true, '', responseData];
    }
});

// create jqGrid
$grid.jqGrid({
    // all other parameters
    editurl: "/eventInfo" // you should use relative paths
});

// create navigator layer
$grid.jqGrid('navGrid', '#pager', {/*navGrid options*/}, { mtype: 'PUT'}); 

In the above code I added the afterSubmit which is important because you use reloadAfterSubmit: false option.

Remark: I typed mostly the code above or used cut & paste to copy some parts from another old answers. So you should test the above code in your application.