jqGrid Delete a Row

Question

I have created my grid and would like to use default behaviour of the grid to delete a row.

This is my grid setup code:

$("#grid").jqGrid('navGrid', '#grid_pager',
    { add: true, addtitle: 'Add Customer', 
      edit: true, edittitle: 'Edit Customer',
      del: true, deltitle: 'Delete Customer', 
      refresh: true, refreshtitle: 'Refresh data',
      search: true, searchtitle: 'Advanced search filters', 
      addfunc: addReferent, editfunc: editReferent
    },
    {}, // default settings for edit
    {}, // default settings for add
    { // define settings for Delete 
        mtype: "post", 
        reloadAfterSubmit: true,
        url: wsBaseUrl + 'CustomerService.asmx/DeleteCustomer',
        resize: false,
        serializeDelData: function(postdata) {
            return JSON.stringify({ customerID: postdata.id });
        }
    },
    { // define settings for search
        closeOnEscape: true, multipleSearch: true, closeAfterSearch: true 
    }, 
    {}
);

and this is the web service method defined on the server

[WebMethod]
public OperationResult Deletecustomer(string customerID)
{
}

but unfortunately when I click the delete button and click ok on the confirm window I get an error saying 404. as in the following picture

Error screenshot

What am I doing wrong?

EDIT:

I have added the following code to my jqGrid Initialization

// Set defaults value for jqGrid
$.jgrid.defaults = $.extend($.jgrid.defaults, {
    mtype: 'post',
    datatype: 'json',
    jsonReader: {
        root: "d.Rows",
        page: "d.Page",
        total: "d.Total",
        records: "d.Records",
        repeatitems: false,
        userdata: "d.UserData",
        id: "Id"
    },
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    ajaxDelOptions: { contentType: 'application/json; charset=utf-8' },
    serializeDelData: function (postData) {
        return JSON.stringify(postData);
    },
    loadui: "block",
    multiboxonly: true,
    rowNum: 25,
    rowList: [25, 50, 100],
    altRows: true,
    altclass: 'ui-priority-secondary',
    autoencode: true,
    autowidth: true,
    rownumbers: true,
    rownumWidth: 30,
    gridview: true,
    hoverrows: true,
    viewrecords: true
});

but I still get the same error...

You should additionally verify the URL which you use because HTTP code 404 is "Not Found" in the most cases. — Oleg, May 25 '11 at 10:09

score 4 · Accepted Answer · edited May 23 '17 at 12:12

4

Probably you should just use JSON.stringify (from json2.js) inside of serializeDelData. You don't posted the prototype of your web method DeleteCustomer which you need to delete, but probably your problem could be fixed with the following code:

serializeDelData: function(postdata) {
    return JSON.stringify({customerID: postdata.id});
}

One more common problem in case of the usage of ASMX services. It can be need to define all parameters of the web method called (see here an example).

The usage of ajaxDelOptions: { contentType: "application/json" } parameter is also required mostly.

It can be helpful to use Fiddler or Firebug to capture and analyse the HTTP traffic.

edited May 23 '17 at 12:12

Community

1
1

answered May 25 '11 at 10:02

Oleg

220,925
34
403
798

@Oleg: thanks for your answer. I was just editing my question while you were answering to it and adding all the things you said. Where should I add the ajaxDelOptions parameter? – Lorenzo May 25 '11 at 10:24
@Lorenzo: You can use `ajaxDelOptions: { contentType: "application/json" }` either as an additional option of "Del" (on the same level as `reloadAfterSubmit: true`) or to extend `$.jgrid.del` and not `$.jgrid.defaults` (see [the link](http://stackoverflow.com/questions/3917102/jqgrid-add-row-and-send-data-to-webservice-for-insert/3918615#3918615) which I previously posted). I find very strange the error code 404 which you has. So I recommend you to use Fiddler/Firebug to see what be send, use everywhere `DeleteCustomer` or `Deletecustomer` and examine `web.config` – Oleg May 25 '11 at 10:43
@Oleg: sometimes I read too fast... and so I did not realize the difference between `$.jgrid.del` and `$.jgrid.defaults`. Now everything works. Thanks so much! – Lorenzo May 25 '11 at 13:20
@Oleg: sorry to be back on the argument. I just would like to ask you if there's a way to catch the result of the delete call. My `DeleteCustomer` method return back a json object that contains details on the operation. How can I retrieve that result with this setup? Thanks again – Lorenzo May 25 '11 at 15:58
1

@Lorenzo: If you want just read additional information returned by your `DeleteCustomer` method you can use it inside of `afterSubmit` event handler defined of the same level as other "Del" parameter or in the `$.jgrid.del`. The `afterSubmit` has two parameters: `data` as text returned by the server (you should call `jQuery.parseJSON` manually) and the same `postdata` which received by `serializeDelData`. – Oleg May 25 '11 at 16:28
@Oleg: Great!!! Anyway when using `afterSubmit` the dialog that ask for `Are you sure to delete?` does not hide automatically anymore. Should I call any function to hide it? – Lorenzo May 25 '11 at 17:15
@Lorenzo: What you return from the `afterSubmit`? It should be array like `[true,'']` (see [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events2)). – Oleg May 25 '11 at 17:28
@Oleg: Perfect! You are an invaluable help on the jqGrid :) Thanks! – Lorenzo May 25 '11 at 19:44

jqGrid Delete a Row

1 Answers1

Linked