Question

I have a jqGrid on a page wrapped inside an ASP.NET web part. Here is it’s definition:

$("#referent_grid").jqGrid({
    url: '<%= SPContext.Current.Site.Url %>' + wsBaseUrl + 'ReferentService.asmx/ListReferents',
    colNames: ['Full Name', 'Phone Number', 'Email', 'Department'],
    colModel: [
        { name: 'FullName', index: 'FullName', width: 240, align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
        { name: 'PhoneNumber', index: 'PhoneNumber', width: 120, align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
        { name: 'Email', index: 'Email', width: 180, align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
        { name: 'Department', index: 'Department', width: 180, align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
    ],
    jsonReader: {
        id: "ReferentID"
    },
    pager: $('#referent_grid_pager'),
    sortname: 'FullName',
    sortorder: "asc",
    height: '300',
    shrinkToFit: false,
    caption: 'Referent List'
});
$("#referent_grid").jqGrid('navGrid', '#referent_grid_pager',
    { add: true, addtitle: 'Add Referent', edit: true, edittitle: 'Edit Referent',
      del: true, deltitle: 'Delete Referent', 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: '<%= SPContext.Current.Site.Url %>' + wsBaseUrl + 'ReferentService.asmx/DeleteReferent',
        resize: false,
        serializeDelData: function (postdata) {
            return JSON.stringify({ referentID: postdata.id });
        },
        afterSubmit: function (data, postdata) {
            var result = $.parseJSON(data.responseText);
            return [true, ''];
        }
    },
    { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
    {}
);

As you can see I have Advanced Search enabled. The problem I am facing to is that the first time the page is called the jqGrid calls the ListReferents method without passing the filters parameter as you can see in the following screenshot from Fiddler

When I click on the refresh button of the jqGrid it calls the ListReferents method passing the filters parameter as you can see in the following screenshot from Fiddler

To arrange this I have defined two methods inside my web service but the first method does never get called while the second is.

[WebMethod]
public JQGridData ListReferents(string _search, string nd, string rows, string page, string sidx, string sord) {
    return ListReferents(_search, nd, rows, page, sidx, sord, string.Empty);
}

[WebMethod]
public JQGridData ListReferents(string _search, string nd, string rows, string page, string sidx, string sord, string filters) {
    // method code here
}

Where am I doing wrong?

Answer 1

The problem is that all parameters of the web service should be defined. Only 5 standard parameters :_search, rows, page, sidx, sord are always defined in the request to the server. So you have to test inside of serializeGridData whether the filter property is defined in the postData. If not defined you should set it to null or to the empty string "":

serializeGridData: function (postData) {
    if (postData.filters === undefined) postData.filters = null;
    return JSON.stringify(postData);
}

(See here an example). It should solve your problem.

Additionally you should remove traling commas in the colModel definition (camma before ‘]’).

One more small suggestion. You can simplify the column definition in the colModel. First of all you can remove align: 'left', search: true, stype: 'text' properties which are default (see the documentation). Moreover is you have some common settings in the most of columns you can redefines the default values for colModel of the grid with respect cmTemplate parameters:

colModel: [
    { name: 'FullName', index: 'FullName', width: 240 },
    { name: 'PhoneNumber', index: 'PhoneNumber', width: 120 },
    { name: 'Email', index: 'Email', width: 180 },
    { name: 'Department', index: 'Department', width: 180 }
],
cmTemplate: { searchoptions: { sopt: ['eq', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} }

see more about the column templates here.