Question

I am using jqGrid with LOAD ONCE and then paging on the client side. When I add in a filter toolbar, paging becomes very slow after any sort of filter is applied.

$(gridElement).jqGrid({
        postData: post,
        loadComplete: function (data) {
            onLoadComplete(data); 
        },
        gridComplete: function () {
            onGridComplete(); 
        },
        datatype: function (pdata) {
            dataSource(pdata);
        },
        colNames: columnNames,
        colModel: columnModel,
        rowNum: 10, 
        rowList: [10, 20, 30],
        viewrecords: true,
        pagination: true,
        pager: pagerElement,
        loadonce: true,
        sortorder: "desc",
        sortname: 'id',
        cellEdit: false,
        search: true,
        gridview: true,
        //rownumbers: true
    });


    $("#jqGrid").jqGrid('filterToolbar',{ 
        stringResult : true, 
        searchOnEnter : false });

Any idea why this occurs? There is a delay when clicking the paging button, before any of the common events fire (like onPaging, onGridComplete, etc.).

Note that once the grid is complete, datatype property is set to ‘local’.

My guess is that it tries to filter every time you page (or it only filters one page at a time? not sure). But can that be disabled?

Thanks.

Answer 1

If you’re open to alternative grid libraries, I suggest you take a look at SlickGrid.

I’ve been using it for a while now. Seems to be the best in class JavaScript grid library.
Once you get a hang of it, its easy to customize & also has quite a number of plugins already.