How to serialize delete data with jqGrid, multiselection, and Spring?

Question

Currently, I have an overridden delGridRow call that looks like this (credit to Krams and his Spring tutorial):

var row = $('#grid').jqGrid('getGridParam','selrow');

$('#grid').jqGrid( 'delGridRow', row, 
        {   url:'deleteRequirement.html', 
            recreateForm: true,
            beforeShowForm: function(form) {
                //Change title
                $(".delmsg").replaceWith('<span style="white-space: pre;">' +
                        'Delete selected record?' + '</span>');
                //hide arrows
                $('#pData').hide();  
                $('#nData').hide();
            },
            reloadAfterSubmit:true,
            closeAfterDelete: true,
            serializeDelData: function (postdata) {
                var rowdata = $('#grid').getRowData(postdata.id);
                // append postdata with any information 
                return {id: postdata.id, oper: postdata.oper, reqID: rowdata.reqID};
            },
            afterSubmit : function(response, postdata) 
            { 
                var result = eval('(' + response.responseText + ')');
                var errors = "";
                    if (result.success == false) {
                    for (var i = 0; i < result.message.length; i++) {
                        errors +=  result.message[i] + "<br/>";
                    }
                }  else {
                    $('#msgbox').text('Entry has been deleted successfully');
                    $('#msgbox').dialog( 
                    {   title: 'Success',
                        modal: true,
                        buttons: {"Ok": function()  {
                            $(this).dialog("close");
                        } 
                    }
                });
            }
        // only used for adding new records
        var newId = null;
        return [result.success, errors, newId];
    }
});
else {
    $('#msgbox').text('You must select a record first!');
    $('#msgbox').dialog( 
            {   title: 'Error',
                modal: true,
                buttons: {"Ok": function()  {
                    $(this).dialog("close");} 
                }
            });
}

In order to add support for multiselection deletes, I changed the "selrow" first line to this:

var rowList = jQuery("#grid").getGridParam('selarrrow');

After this, things start getting sketchy fast. The spec says that the default delGridRow can accept an array of inputs records to delete. I made the following change to attempt to get the new 'rowList' variable to get used:

$('#grid').jqGrid( 'delGridRow', rowList, ...

I'm still hitting my deleteRequirement.html URL in my Spring controller, but only the last records appears to make it. I'm guessing the problem is in the postdata preparation in the serializeDelData section, but I haven't found the correct way to prepare this postdata with the list of records instead of the single record.

Any suggestions/insight would be appreciated.

Thanks all.

score 2 · Accepted Answer · answered Apr 26 '12 at 19:33

2

I don't use Spring myself, but some parts of your code seams be strange for me.

First of all the you can use two forms of the first parameter of delGridRow (row in your code). It can be either the comma-separated list of ids or an array of ids. If you use array of ids then jqGrid convert it to the comma-separated format by rowids = rowids.join();. As the result the format of postdata.id inside of serializeDelData can be also the comma-separated list of ids.

So if you need to support delete of multiple rows you should

modify the code of serializeDelData to send in reqID property also the list of the reqID. The corresponding code can be

serializeDelData: function (postdata) {
    var ids = postdata.id.split(','), i, l = ids.length, reqIDList = [];
    for (i = 0; i < l; i++) {
        reqIDList.push($(this).jqGrid("getCell", ids[i], "reqID"));
    }
    return {id: postdata.id, oper: postdata.oper, reqID: reqIDList.join()};
}

modify your server code to support both id and reqID in comma-separated form.

Inside of afterSubmit callback you you the lines

// only used for adding new records
var newId = null;
return [result.success, errors, newId];

You can modify the lines to the following

return [result.success, errors];

because only the first two elements of the array returned by afterSubmit callback will be used.

answered Apr 26 '12 at 19:33

Oleg

220,925
34
403
798

My server is getting the postdata as "false,false" instead of the record IDs I'm trying to delete, strangely. Would be easier, instead, to perhaps use the default jqGrid delRowData call and then separately (or perhaps through the onClickSubmit call invoke an AJAX call to send the selected rows to the server? – Raevik Apr 26 '12 at 19:54
@Brent: You should debug the problem. First of all you should include `alert(postdata.id);` and `alert(reqIDList.join());` in the `serializeDelData` before return. By the way, do you use **the last** version of jqGrid? If not you should replace `$(this).jqGrid("getCell", ids[i], "reqID")` to `$("#grid").jqGrid("getCell", ids[i], "reqID")`. – Oleg Apr 26 '12 at 20:02
So it looks like the postdata.id call is getting the paginated jqGrid model id instead of the reqID value from the record itself. Perhaps a getRowData call is required to get the appropriate value... As you can imagine, passing row 58 to the server is less useful for executing a DB delete rather than the actual UID of the data record (reqID in this case). My alerts produced: (58,59) and (false,false) on the join. I am using the latest version, but doing $("#grid") anyway. I'm curious about that false false coming from the push call. The spec says it takes rowID and column. – Raevik Apr 26 '12 at 20:28
@Brent: It would very helpful if you append the text of your question with the code of your jqGrid. The problem with wrong ids is very easy: I am almost sure that you fill the grid in the wrong way. The input data of jqGrid received from the server should contain `id` information. It's important only that the id must be **unique on the whole page**. If you have only one grid then probably adding `key: true` property to the definition of `reqID` in `colModel` will solve the problem. Then you can just reduce the code of `serializeDelData` to `return {reqID: postdata.id, oper: postdata.oper}`. – Oleg Apr 26 '12 at 20:40
@Brent: probably you can then return the `serializeDelData` at all or add `prmNames: {id:"reqID"}` to the list of jqGrid options. In the case the name of the `id` parameters which will be sent to the server on Add/Edit/Delete will be `reqID`. – Oleg Apr 26 '12 at 20:42
Nah, you nailed it a minute ago and I just didn't see it. Changing from $(this) to $("#grid") on the getCell call correctly retrieved the UID I wanted and it works. Once again, Oleg saves the day. I may be looking you up for some consulting work soon ;-) – Raevik Apr 26 '12 at 20:55
@Brent: I'm glad to hear that the problem is solved! Congratulation! I think the best would be to fill jqGrid so that `rowid` (`id` of the `` elements) will be the ids from the database. The trick with `key: true` should work. Then you can remove `serializeDelData` or add `prmNames: {id: "reqID"}` to change the property name sent to the server from `id` to `reqID`. If will make the code more clean. If you would have many grids on the page you can use `idPrefix` option additionally. Then the rowids will be constructed from the value of `idPrefix` and the id returned from the server. – Oleg Apr 26 '12 at 20:58

How to serialize delete data with jqGrid, multiselection, and Spring?

1 Answers1