jqGrid (Delete row) - How to send additional POST

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

I am not sure how to post additional data, but you can try sending additional data as query string parameters as part of the delete-url.

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!

Answer 3

I had the same problem. The way that i fixed it, was to put the user_id as first column in my jsondata. and with the jsonreader settings of the jqgrid you can accomplish it that will work.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

look at the jsonreader settings for jsondata.

i use:

jsonReader: { cell: "", id: "0" }

and my data is like

{ totalpages: "xxx",  currpage: "yyy",  totalrecords: "zzz",
  invdata : [
   {"userid","cell12", "cell13", "cell14"},
   {"userid","cell22", "cell23", "cell24"},
    ...
   ]
}

and now if i update a row or delete a row i'll get the userid. Hope this can work for you!

Answer 4

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 5

This can be easy achieved if you set key:true in colModel like this:

colModel: [ {name: 'childId', index: 'childId', align: 'center', sorttype: 'string', key:true},

doing that will cause automatically to send this field during POST.

The intent of key:true in colModel is just to allow the command processor to operate properly on a indexed record set.

Answer 6

Yes you can add additional data to the postdata using onclickSubmit event under del parameters of navgrid, In your case if you want to send user_id including id, than do something like this

$("#gridId").jqGrid({
    }).hideCol(['']).navGrid('#pagerId', {
        edit: false, add: false, del: true, search: true, refresh: true, beforeRefresh: function () {
        }, afterRefresh: function () {
        }
    }, {}, {}, {
        afterComplete: function () {
        }, onclickSubmit: function (params) {
            var extraParameters = [];  var arraySelected = $("#gridId").jqGrid('getGridParam', 'selarrrow');
            for (var i = 0; i < arraySelected.length; i++) {
                 extraParameters.push($('#gridId').getRowData(arraySelected[i]).user_id)
            } 
            return { extraParams: extraParameters.join(',') };
        }
    },
    {
        sopt: ['cn', 'nc'], onSearch: function () {
        },
        onReset: function () {
        }
    });