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?

Answer 1

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.