jqGrid client-side searching with filterToolbar

jqGrid client-side searching with filterToolbar

I am trying to enable the client-side searching feature of the jqGrid
through the filterToolbar method, yet I am unable to make it work. The
grid is loading data correctly through JSON that is being returned from an
asmx service on page load (document.ready), yet when I try to search
through any of the columns using the search toolbar, the grid only
refreshes without searching.
I have already checked other similar questions and their answers, but none
of them helped me solve my issue. Maybe someone can check my jqGrid script
below and tell me what is wrong with it or what is there missing. For the
reference, I am using the version "4.5.2" of jqGrid.
$('#tblTargetDetails').jqGrid({
url: 'PostHandlers/CommonHandler.asmx/GetTargetDetails',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
ajaxRowOptions: { contentType: "application/json; charset=utf-8",
dataType: "json" },
postData: "{'TargetID': '" + TargetID + "'}",
mtype: 'POST',
colNames: ['Team ID', 'Member UserID', 'Measure', 'Product', 'Month1',
'Month2'],
colModel: [
{ name: 'TeamID', index: 'TeamID', width: 55, search: true,
sorttype: 'int' },
{ name: 'MemberUserID', index: 'MemberUserID', width: 90, search:
true, stype: 'text' },
{ name: 'Measure', index: 'Measure', width: 90, search: true,
searchoptions: {} },
{ name: 'Product', index: 'Product', width: 90, search: true },
{ name: 'Month1', index: 'Month1', width: 80, editable: true,
search: true },
{ name: 'Month2', index: 'Month2', width: 80, editable: true,
search: false }],
jsonReader: {
root: "d.TargetDetails",
records: "d.RecordsCount",
id: "ID",
cell: "",
page: function () { return 1; },
total: function () { return 1; },
},
pager: '#pnlTargetDetails',
rowNum: 50,
rowTotal: 2000,
rowList: [20, 30, 50],
loadonce: true,
viewrecords: true,
gridview: true,
ignoreCase: true,
rownumbers: true,
caption: 'Target Details',
editurl: 'PostHandlers/CommonHandler.asmx/EditTargetDetail',
serializeRowData: function (postData) {
return JSON.stringify({ 'content': JSON.stringify(postData),
'UserID': UserID });
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
$('#tblTargetDetails').restoreRow(lastSel);
lastSel = id;
}
$('#tblTargetDetails').jqGrid('editRow', id, true);
}
});
$('#tblTargetDetails').jqGrid('navGrid', '#pnlTargetDetails', { search:
true, edit: false, add: false, del: false });
$('#tblTargetDetails').jqGrid('filterToolbar', { stringResult: true,
searchOnEnter: false });
Appreciate your kind help in advance.
Thanks.