How to configure jqGrid (4.x) to be an Uber Grid

Question

I'm struggling on how to configure a jqGrid past the simple paged examples given in demo code.

My needs are such:

1) don't need paging, I want the grid to be a viewport and scroll all the items (which are limited already to under 400 rows)

2) use the response from a ajax call load the json data.

3) google like single text box that I can use to filter the data.

All of the samples that I come across are always using paging, and I know that that is the most common use case.

Regards, Stephen

BTW

jqGrid is the most documented grid I've come across, it rocks in my book, and the fact that Oleg and Co. are very aggressive in getting responses back to questions makes the learning curve and hence adoption quite smooth.

EDIT 1

 var myGrid = $('#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;
            };


    myGrid.jqGrid({
        url: '/Buyer/Favorite/ProductGroupService/2976171424',
        datatype: 'json',
        mtype: 'GET',
        height: '100%',
        colNames: ['Row No', 'Qty', 'Features', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case Pack', 'Remarks', 'Ave Weight', 'Par', 'Last Purchase', 'Sort'],
        colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'Quantity', index: 'Quantity', width: 20, 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, align: "left" },
            { name: 'ProducName', index: 'ProducName', width: 150, align: "left" },
            { name: 'SupplierName', index: 'SupplierName', width: 100, align: "left" },
            { name: 'Price', index: 'Price', width: 80, align: "right" },
            { name: 'UOM', index: 'UOM', width: 80, align: "left" },
            { name: 'CasePack', index: 'CasePack', width: 80, align: "left" },
            { name: 'PackageRemarks', index: 'PackageRemarks', width: 80, align: "left" },
            { name: 'AveWeight', index: 'AveWeight', width: 80, align: "right" },
            { name: 'Par', index: 'Par', width: 80, align: "right" },
            { name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 80, align: "right" },
            { name: 'SortPriority', index: 'SortPriority', hidden: true }
        ],
        multiselect: true,
        //          cellEdit : true,
        //          cellsubmit : 'remote',
        pager: '#favoritePager',
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Id',
        sortorder: 'desc',
        rownumbers: true,
        viewrecords: true,
        altRows: true,
        altclass: 'myAltRowClass',
        height: '100%',
        gridview: true,
        jsonReader: { cell: "" },
        loadonce: true,
        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
            myGrid.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();
        },
        ondblClickRow: function (rowid, ri, ci) {
            // 
        },
        gridComplete: function () { 
            $("#favoriteGrid").addClass("nodrag nodrop");
            $("#favoriteGrid").tableDnDUpdate();
        }
    });

EDIT 2 Implemented recommendations from Oleg re: json url and removal of drag n drop

EDIT 3 Added JSON response from server

{
"total":321,
"page":1,
"records":1000,
"rows":[
{"Id":0,"Selected":false,"Quantity":1,"ProductAttributes":null,"ItemNum":"6199335","BrandName":"KELLOGG","ProducName":"CEREAL ASST FAMILY PACK","SupplierName":"SYSCO","Price":33.89,"UOM":"CA","CasePack":"72 PK","PackageRemarks":"INDIV","AveWeight":"4.59 LB","Par":null,"SortPriority":19,"LastPurchaseDate":null,"GLCode":"7115-10","OldProductId":null,"CategoryName":"Food-Canned Goods","ProductID":2285668889,"ImageInfo":null},
{"Id":1,"Selected":false,"Quantity":1,"ProductAttributes":null,"ItemNum":"6199335","BrandName":"KELLOGG","ProducName":"CEREAL ASST FAMILY PACK","SupplierName":"SYSCO","Price":34.19,"UOM":"CA","CasePack":"72 PK","PackageRemarks":"INDIV","AveWeight":"4.59 LB","Par":null,"SortPriority":19,"LastPurchaseDate":null,"GLCode":"7115-10","OldProductId":null,"CategoryName":"Food-Canned Goods","ProductID":2285668889,"ImageInfo":null}
]}

Answer 1

It you would use loadonce: true you can and should return all the data at once (but correct sorted data). After the first load of the grid the datatype will be automatically changed from 'json' to 'local', so no Ajax requests will be more done. You can additionally use local paging of data, sorting or filtering with respect of either searching filter or advanced searching dialog or ever both (see the demo from the answer). All will work without need to write any server code.