Question

I’ve read this QA jqGrid filtering on the client-side using "filterToolbar" and this one triggering client-side filtering at load time in a jqGrid before I posted. Is there any way to just use one text box to filter the data on the client side?

The data is loaded via the grids built in mechanizm to consume json, and I have set loadonce:true, now the question is how to implement.

Here is an example from another grid plug-in http://datatables.net/release-datatables/examples/basic_init/zero_config.html

Regards,
Stephen

Answer 1

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}]);
});

});