jqGrid with Enabled Advanced Search different calls to the server
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: f开发者_Python百科unction (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?
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.
精彩评论