Jqgrid frozen columns - can't get them to freeze unless I manually resize the grid
<p>I have read every post I can find on Frozen columns in jqgrid.  And have implemented the following code.<br>
The result... when I go to my spreadsheet grid in my app the 3 cols are NOT frozen.  BUt if I drag the little resize icon in the lower left ever so slightly then POP they 3 columns are now frozen.</p>

<p>Why doesn't it work when the spreadsheet is first drawn?
Here's the code:</p>

<pre><code>           var $grid = $("#list4");
            var resizeColumnHeader = function () {
                var rowHight, resizeSpanHeight,
                    // get the header row which contains
                    headerRow = $(this).closest("div.ui-jqgrid-view")
                        .find("table.ui-jqgrid-htable&gt;thead&gt;tr.ui-jqgrid-labels");

                // reset column height
                headerRow.find("span.ui-jqgrid-resize").each(function () {
                    this.style.height = '';
                });

                // increase the height of the resizing span
                resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
                headerRow.find("span.ui-jqgrid-resize").each(function () {
                    this.style.cssText = resizeSpanHeight;
                });

                // set position of the dive with the column header text to the middle
                rowHight = headerRow.height();
                headerRow.find("div.ui-jqgrid-sortable").each(function () {
                    var $div = $(this);
                    $div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
                });
            };
        var fixPositionsOfFrozenDivs = function () {
                var $rows;
                if (this.grid === undefined) {
                    return;
                }
                if (this.grid.fbDiv !== undefined) {
                    $rows = $('&gt;div&gt;table.ui-jqgrid-btable&gt;tbody&gt;tr', this.grid.bDiv);
                    $('&gt;table.ui-jqgrid-btable&gt;tbody&gt;tr', this.grid.fbDiv).each(function (i) {
                        var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                        if ($(this).hasClass("jqgrow")) {
                            $(this).height(rowHight);
                            rowHightFrozen = $(this).height();
                            if (rowHight !== rowHightFrozen) {
                                $(this).height(rowHight + (rowHight - rowHightFrozen));
                            }
                        }
                    });
                    $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight+1);
                    $(this.grid.fbDiv).css($(this.grid.bDiv).position());
                }
                if (this.grid.fhDiv !== undefined) {
                    $rows = $('&gt;div&gt;table.ui-jqgrid-htable&gt;thead&gt;tr', this.grid.hDiv);
                    $('&gt;table.ui-jqgrid-htable&gt;thead&gt;tr', this.grid.fhDiv).each(function (i) {
                        var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                        $(this).height(rowHight);
                        rowHightFrozen = $(this).height();
                        if (rowHight !== rowHightFrozen) {
                            $(this).height(rowHight + (rowHight - rowHightFrozen));
                        }
                    });
                    $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
                    $(this.grid.fhDiv).css($(this.grid.hDiv).position());
                }
            };
            var fixGboxHeight = function () {
                var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
                    pagerHeight = $(this.p.pager).outerHeight();

                $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
                gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
                pagerHeight = $(this.p.pager).outerHeight();
                $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
            };



            $grid.jqGrid({
                datatype: "local",
                shrinkToFit:false,
                autowidth:true,
                height: 450,
                hoverrows: true,
                sortable: false,
                colNames:[' &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt;Year',
                          ' &lt;br&gt; &lt;br&gt; &lt;br&gt;Your&lt;br&gt;Age',
                          ' &lt;br&gt; &lt;br&gt; &lt;br&gt;Spouse&lt;br&gt;Age',
                          'Your Annual&lt;br&gt;Job&lt;br&gt;Income',
                          'Spouse Annual&lt;br&gt;Job&lt;br&gt;Income'
                colModel:[
                    {name:'year',index:'year', width:50, align:"center",sortable:false, sorttype:"int",classes:'spreadsheet_cell0', frozen:true},
                    {name:'age0',index:'age0', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
                    {name:'age1',index:'age1', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
                    {name:'salary0',index:'salary0',  width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}},
                    {name:'salary1',index:'salary1',  width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}}

                ],
                multiselect: false,
                rowNum:20,
                rowList:[10,20],
                altRows:false,
                onSelectRow: function (id) {
                    if (id &amp;&amp; id!=previous_row) {
                        previous_row=id;
                        }
                    },
                loadComplete: function () {

                                fixPositionsOfFrozenDivs.call(this);
                        }
            });


        // ADD DATA TO THE GRID
            addData();

        $grid.jqGrid('gridResize', {
            minWidth: 450,
            stop: function () {
                fixPositionsOfFrozenDivs.call(this);
                fixGboxHeight.call(this);
            }
        });
        $grid.bind("jqGridResizeStop", function () {
            resizeColumnHeader.call(this);
            fixPositionsOfFrozenDivs.call(this);
            fixGboxHeight.call(this);
        });


        $(window).on("resize", function () {
            // apply the fix an all grids on the page on resizing of the page
            $("table.ui-jqgrid-btable").each(function () {
                fixPositionsOfFrozenDivs.call(this);
                //fixGboxHeight.call(this);
            });
        });

        // after all that freeze the cols and fix the divs
        resizeColumnHeader.call($grid[0]);
        $grid.jqGrid('setFrozenColumns');
        $grid.triggerHandler("jqGridAfterGridComplete");
        fixPositionsOfFrozenDivs.call($grid[0]);
</code></pre>