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

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...

Answer 1

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.