jqGrid Delete a Row

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…

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0