jqGrid (Delete row) - How to send additional POST data?

Question

I'm having problem with jqGrid delete mechanism as it only send "oper" and "id" parameters in form of POST data (id is the primary key of the table).

The problem is, I need to delete a row based on the id and another column value, let's say user_id. How to add this user_id to the POST data?

I can summarize the issue as the following:

1. How to get the cell value (user_id) of the selected row?
2. AND, how to add that user_id to the POST data so it can be retrieved from the code behind where the actual delete process takes place.

Sample codes:

jQuery("#tags").jqGrid({
                url: "subgrid.process.php,
                editurl: "subgrid.process.php?,
                datatype: "json",
                mtype: "POST",
                colNames:['id','user_id','status_type_id'],
                colModel:[{name:'id', index:'id', width:100, editable:true},

                         {name:'user_id', index:'user_id', width:200, editable:true},

                        {name:'status_type_id', index:'status_type_id', width:200}
                ],
                pager: '#pagernav2',
                rowNum:10,
                rowList:[10,20,30,40,50,100],
                sortname: 'id',
                sortorder: "asc",
                caption: "Test",
                height: 200
        });
        jQuery("#tags").jqGrid('navGrid','#pagernav2',
            {add:true,edit:false,del:true,search:false},
        {},
             {mtype:"POST",closeAfterAdd:true,reloadAfterSubmit:true}, // add options
   {mtype:"POST",reloadAfterSubmit:true}, // del options
            {} // search options
        );

Answer 1

It is not a problem. There are different ways to do what you need. The most direct way is usage of serializeDelData function. The code of jqGrid which delete rows look like following

var ajaxOptions = $.extend({
    url: rp_ge.url ? rp_ge.url : $($t).jqGrid('getGridParam','editurl'),
    type: p.mtype,
    data: $.isFunction(p.serializeDelData) ? p.serializeDelData(postd) : postd,
    complete:function(data,Status){
        //...
    },
    error:function(xhr,st,err){
        //...
    }
}, $.jgrid.ajaxOptions, p.ajaxDelOptions);

$.ajax(ajaxOptions);

So you can just define your own serializeDelData function which do all what you need:

{mtype:"POST", reloadAfterSubmit:true, serializeDelData: function (postdata) {
      var rowdata = jQuery('#tags').getRowData(postdata.id);
      // append postdata with any information 
      return {id: postdata.id, oper: postdata.oper, user_id: rowdata.user_id};
 }}, // del options

By the way if you want produce yourself the data posted to the server, just return a string instead of an object. Then the data will be posted by jQuery.ajax without any changes.

If you prefer to place an additional information not in the data which are posted, but in the URL you can do this inside of onclickSubmit. I use for example a RESTfull service on the server side and to delete an item I use DELETE HTTP request with the empty body. All parameters are placed in the URL. The corresponding code looks like following:

{mtype:"DELETE", reloadAfterSubmit:true, serializeDelData: function (postdata) {
      return ""; // the body MUST be empty in DELETE HTTP requests
 }, onclickSubmit: function(rp_ge,postdata) {
      var rowdata = jQuery('#tags').getRowData(postdata.id);
       rp_ge.url = 'subgrid.process.php/' + encodeURIComponent(postdata.id) +
                   '?' + jQuery.param ({user_id: rowdata.user_id});
 }}, // del options

Answer 2

This is how I got to jqGrid to append more data to the POST on delete:

var grid = $("#grid").jqGrid(... //make your grid

$("#grid").jqGrid('navGrid', '#pager', {add:false, edit:false, del:true},
                  {},
                  {},
                  {delData: {
                             name: function() {
                                        var sel_id = grid.jqGrid('getGridParam', 'selrow');
                                        var value = grid.jqGrid('getCell', sel_id, 'colName');
                                        return value;
                                   }
                            }
                   },
                  {},
                  {});

This will return a post array {id:rowNumber, oper:del, name:someValue}. name is how you want to refer to your variable in the post array, someValue is whatever is in the cell from the selected row that interests you.

Hope this helps!