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:

How to get the cell value (user_id) of the selected row?
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
        );

score 18 · Answer 1 · answered May 14 '10 at 12:29

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

Thanks. jQuery('#tags').getRowData(postdata.id); is just what I was looking for. — Robert Claypool, Jun 04 '10 at 06:34
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. — James Nail, Oct 18 '10 at 14:58
@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, ...`. — Oleg, Oct 18 '10 at 15:36

score 7 · Answer 2 · answered Sep 05 '11 at 20:40

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!

score 1 · Answer 3 · answered May 13 '16 at 14:24

1

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.

answered May 13 '16 at 14:24

Power Engineering

713
14
26

By setting key: true , it only send the value as _id. You cannot send other field data with it. – Sanjay SP Mar 08 '18 at 20:03

score 0 · Answer 4 · answered Nov 19 '14 at 09:48

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

score 0 · Answer 5 · answered May 14 '10 at 12:16

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!

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. — Oleg, May 14 '10 at 12:32

score 0 · Answer 6 · answered Jan 18 '11 at 09:06

0

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.

answered Jan 18 '11 at 09:06

Wolf

17
1
1
6

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

6 Answers6

Linked