jqGrid and search filter. Best way to repopulate data

Question

I've been playing with jqGrid for quite a long time now but never gone deeper into details about performance.
I don't use the built-in jqGrid search form cause I prefer to have my own toolbar where the user inputs some data he/she wants to filter.

I've always wrapped my grid in a function:

$(document).ready(function () {

    var myGrid = jQuery("#MyGrid");

    $("#cmdSearch").bind('click', function (e) {
        myGrid.GridUnload();
        LoadMyGrid($("#Filter1").val(), $("#Filter2").val())
    });

    function LoadMyGrid(param1, param2) {
        myGrid.jqGrid({
            url: 'myUrl',
            postData: { Param1: param1, Param2: param2 },
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Column1', 'Column2'],
            colModel: [
                       { name: 'colum1', index: 'colum1', sortable: true, width: 100 },
                       { name: 'colum2', index: 'colum2', sortable: true, width: 100 }
                      ],
            pager: $('#MyPager'),
            rowList: [10, 50, 100],
            rowNum: 10,
            viewrecords: false,
            shrinkToFit: false,
            rownumbers: true,
            hidegrid: false,
            emptyrecords: "No records."
        });
    }
});

and unloaded it (GridUnload) before recreating it. I was wondering if this is the best way to do it or there might be some performance/memory issues?

score 1 · Accepted Answer · edited May 23 '17 at 09:58

The usage of GridUnload() in the example is not the best way. I would rewrite you code as following

$(document).ready(function () {
    var myGrid = jQuery("#MyGrid");

    myGrid.jqGrid({
        url: 'myUrl',
        postData: {
            Param1: function() { return $("#Filter1").val(); },
            Param2: function() { return $("#Filter2").val(); }
        },
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Column1', 'Column2'],
        colModel: [
            { name: 'colum1', index: 'colum1', sortable: true, width: 100 },
            { name: 'colum2', index: 'colum2', sortable: true, width: 100 }
        ],
        pager: '#MyPager',
        rowList: [10, 50, 100],
        rowNum: 10,
        viewrecords: false,
        shrinkToFit: false,
        rownumbers: true,
        hidegrid: false,
        emptyrecords: "No records."
    });

    $("#cmdSearch").click(function() {
        myGrid.trigger('reloadGrid',[{page:1}]);
    });
});

In the code I use the idea of usage functions as the property of postData which I described here. One can reduce the 'click' handle to the myGrid.trigger('reloadGrid');. In the case at all grid reloading (for example at the sorting or paging) will be used the current values from the $("#Filter1") and $("#Filter2") controls. The grid itself will be not destroyed and recreated. instead of that only the grid data will be reloaded. About different additional parameters of reloadGrid see here.

Small change from pager: $('#MyPager') to pager: '#MyPager' I want a little comment. If you look at the jqGrid source code you will find

if(typeof ts.p.pager == "string") {if(ts.p.pager.substr(0,1) !="#") {
    ts.p.pager = "#"+ts.p.pager;}
} else { ts.p.pager = "#"+ $(ts.p.pager).attr("id");}

So if you use pager parameter in the form $('#MyPager') if will be "normalized" to '#MyPager'. After I read this I use only pager: '#MyPager' syntax.

Wonderful solution. Thanks Oleg. Always the best. – LeftyX Mar 13 '11 at 19:34 — LeftyX, Mar 13 '11 at 19:34

jqGrid and search filter. Best way to repopulate data

1 Answers1

Linked