jqGrid's sizing behavior changes when scrolling through a large set of records

Question

I recently upgraded my jqGrid from an older version (4.4.5) up to (4.13.4-pre)

"autowidth": false,
"shrinkToFit": true,
"loadonce": true,
"scroll": 1,

FWIW - I'm using it inside a paneled layout (acheived via jQuery UI Layout )

Everything works great, both versions initially load up my data and display nicely - no need to change my startup grid options or colModel etc..

However, if I hover my mouse over the data region and use the wheel to start scrolling through the data, eventually the 4.13.4 version of the jqGrid will flicker or refresh to build up the next page of data and that's when it introduced the undesired scrollbar state shown here:

I have some resizing logic already in place so that when the parent panel is resized, the grid snaps into correct position - same for when the user resized the window. All of that functions just as well on both versions of jqGrid -

Just wondering if there was something I missed in the meantime - I feel like I've uncovered a bug, however.

UPDATE

I've been able to isolate the jqGrid control from the aforementioned jquery UI Layout scripts. The bad behavior persists.

When the page is finished loading, I call a script like this to "patch up" the width and size of my jqGrid so it fits inside a desired parent DIV:

function patchUpJQGrid_FitInParentDiv() {
    var newWidth, newHeight, myGridCtrl;

    myGridCtrl = $("#mainGridControl");

    newWidth = $("#parentMainGridDiv").width() - 50;
    newHeight = $("#parentMainGridDiv").height() - 50;

    myGridCtrl.jqGrid('setGridWidth', newWidth, false);
    myGridCtrl.jqGrid('setGridHeight', newHeight);
}

window.setTimeout(patchUpJQGrid_FitInParentDiv, 5000);//ensure jqGrid correctly sized

Thus, after the above script runs, the UI is all set and sized correctly.. but then you begin scrolling (either with mouse wheel or using scroll bar) and eventually the grid width disregards what was initially instructed via 'setGridWidth' and now the parent DIV is essentially masking or eclipsing the vertical scrollbar that you need if you want to continue scrolling..

SOLUTION

See the accepted answer below for more details. I'd like to mention that these add'l options (copied from another Oleg answer) are helping me acheive what I want in my jqGrid instances (see updated jsfiddle demo)

    cmTemplate: { autoResizable: true },
    autoResizing: { compact: true },
    autoresizeOnLoad: true

Answer 1

Some jqGrid options, which you use in jqGrid are wrong in case of usage scroll: 1. You fixed the problems in old jqGrid by usage patchUpJQGrid_FitInParentDiv. To make the code working in free jqGrid you need just fix the original options of jqGrid.

The main problem in the options is the usage of height: 'auto' and specifying of no width options. It's wrong if you use scroll: 1. One should specify any fixed values for height and width options. You can modify the values later, but the initial values are very important and there modifies the behavior of resizing.

What you need to do is to change the options

    ...
    pager: '#pager1',
    altRows: true,
    altclass: 'myAltRowClass',
    rownumbers: true,
    gridview: true,
    rowNum: 50,
    rowList: [50, 100, 250],
    height: 'auto',
    caption: "Test Queue",
    scrollOffset: 2,
    viewrecords: true,
    sortorder: 'desc',
}

to

    pager: '#pager1',
    altRows: true,
    altclass: 'myAltRowClass',
    rownumbers: true,
    gridview: true,
    //rowNum: 50,
    //rowList: [50, 100, 250],
    //height: 'auto',
    width: 450,
    height: 404,
    caption: "Test Queue",
    //scrollOffset: 2,
    viewrecords: true
    //sortorder: 'desc',
}

After the changes one can remove the call of patchUpJQGrid_FitInParentDiv because it's no more required.

I want to stress that the above changes are strictly recommended event for the old jqGrid versions. The changes are required for free jqGrid.