I'm answering my own question but the credit goes to Oleg (The Doctor, as he in called in my office) since it was his with guidance and deep knowledge of jqGrid that I was able to complete this.
The keys to this are two fold, you must set multipleSearch: true in the grid and then construct the proper filter based on your requirements. See the button code at the end for the filter creation. One thing to note is that I don't perform a search until at least 2 chars have been entered into the text box.
Side note to this is that I am going to remove the button and handle the key down event of the text box to perform the search.
$(document).ready(function () {
var grid = $('#favoriteGrid'),
decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
if (jqXHR.responseText.charAt(0) === '[') {
try {
errorInfo = $.parseJSON(jqXHR.responseText);
errorText = "";
for (i = 0; i < errorInfo.length; i++) {
if (errorText.length !== 0) {
errorText += "<hr/>";
}
errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
}
}
catch (e) { }
} else {
html = /<body.*?>([\s\S]*)<\/body>/.exec(jqXHR.responseText);
if (html !== null && html.length > 1) {
errorText = html[1];
}
}
return errorText;
};
grid.jqGrid({
url: myAjaxUrl,
datatype: 'json',
ajaxGridOptions: { contentType: "application/json" },
jsonReader: { repeatitems: false },
colNames: ['Qty', 'Features', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case Pack', 'Remarks', 'Ave Weight', 'Par', 'Sort', 'Last Purchase', 'GLCode', 'ProductId', 'OldProductId', 'CategoryName'],
colModel: [
{ name: 'Quantity', index: 'Quantity', width: 20, sorttype: "number", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
{ name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
{ name: 'ItemNum', index: 'ItemNum', width: 60, align: "right" },
{ name: 'BrandName', index: 'BrandName', width: 100 },
{ name: 'ProducName', index: 'ProducName', width: 150 },
{ name: 'SupplierName', index: 'SupplierName', width: 100 },
{ name: 'Price', index: 'Price', width: 80, sorttype: "number", align: "right" },
{ name: 'UOM', index: 'UOM', width: 80 },
{ name: 'CasePack', index: 'CasePack', width: 80 },
{ name: 'PackageRemarks', index: 'PackageRemarks', width: 80 },
{ name: 'AveWeight', index: 'AveWeight', width: 80, align: "right" },
{ name: 'Par', index: 'Par', width: 80, align: "right" },
{ name: 'SortPriority', index: 'SortPriority', hidden: true },
{ name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 80, align: "right" },
{ name: 'GLCode', index: 'GLCode', hidden: true },
{ name: 'ProductId', index: 'ProductId', hidden: true },
{ name: 'OldProductId', index: 'OldProductId', hidden: true },
{ name: 'CategoryName', index: 'CategoryName', hidden: true }
],
pager: $('#favoritePager'),
pginput: false,
rowNum: 1000,
viewrecords: true,
multiselect: true, // enable multiselct
gridview: true,
loadonce: true, // one ajax call per
caption: "Products List",
loadError: function (jqXHR, textStatus, errorThrown) {
// remove error div if exist
$('#' + this.id + '_err').remove();
// insert div with the error description before the grid
grid.closest('div.ui-jqgrid').before(
'<div id="' + this.id + '_err" style="max-width:' + this.style.width +
';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>')
},
loadComplete: function () {
// remove error div if exist
$('#' + this.id + '_err').remove();
// resize the grid both Heigh and Width
//$("#grid").jqGrid('setGridHeight', Math.min(400, parseInt(jQuery(".ui-jqgrid-btable").css('height')))); // works
//$(".ui-jqgrid-bdiv").css('height', jQuery("#favoriteGrid").css('height'));
var gr = jQuery('#favoriteGrid');
fixGridHeight(gr);
},
ondblClickRow: function (rowid, ri, ci) {
// Popup modal dialog for details view
}
}).jqGrid('navGrid', '#favoritePager',
{ add: false, edit: false, del: false, search: true, refresh: false },
{},
{},
{},
{ multipleSearch: true },
{});
// Add Search
$("#mySearch").button().click(function () {
var text = $("#searchText").val();
var postdata = grid.jqGrid('getGridParam', 'postData');
// build up the filter
// ['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
// ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
var myfilter = { groupOp: "OR", rules: [] };
myfilter.rules.push({ field: "ItemNum", op: "cn", data: text });
myfilter.rules.push({ field: "BrandName", op: "cn", data: text });
myfilter.rules.push({ field: "ProducName", op: "cn", data: text });
$.extend(postdata, { filters: JSON.stringify(myfilter) });
grid.jqGrid('setGridParam', { search: text.length > 2, postData: postdata });
grid.trigger("reloadGrid", [{ page: 1}]);
});
});
