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
        );

Gantline

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

Coy

Thanks. jQuery('#tags').getRowData(postdata.id); is just what I was looking for. – Farlay

I tried this approach when putting a delete button on each row of my grid -- it worked the first time you'd click delete, but then each subsequent deletion kept using the same url as the first click. I modified the code to get rid of the "onclickSubmit" override and instead I passed in the appropriate url directly into the delGridRow method (instead of setting rp_ge.url), and it worked. – Casady

@jrnail23: Probably it's depend on the usage of recreateForm option. I have recreateForm:true as my default setting. You can try to add this option together to mtype:"DELETE", reloadAfterSubmit:true, .... – Coy

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!

Monstrous

Answer 3

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.

Georgenegeorges

By setting key: true , it only send the value as _id. You cannot send other field data with it. – Citrange

Answer 4

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!

Shakespeare

Sorry, but the problem was not in getting the data, but in posting additional information during deleting of a row from jqGrid. One need have not one userid, but two ids: id and user_id. – Coy

Answer 5

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.

Hanako

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 () {
        }
    });

Lui