jqGrid client-side searching with filterToolbar

Question

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.