JQGrid: Resize Grid Width After Column Resized

I personally find the question very good. I make many suggestions how to improve the algorithm of calculation of the grid width. Twice I included the behavior like you want in my suggestions, but Tony (the developer of jqGrid) removed the part of the changes.

To implement your requirements in the current version of jqGrid is very easy, but the code uses some internal grid structures. So you should verify whether the same trick will work in the next versions too. The code of the resizeStop callback can be the following:

resizeStop: function () {
    $(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first')
                .jqGrid('setGridWidth', this.newWidth);
}

The demo shows live how it works.

The complexity of the common solution for the jqGrid is higher because one needs sometimes to hold specified width of the grid. My point of view here is the following: if the user specify the width option during the grid initialization (creating) then he want to hold the width. On the other side if no width option are specified during creating of the grid one wish (like you as wish) the calculation of the total width of the grid based on the sum of the widths of all columns. In the case if some column width will be changed, the grid width should be adjusted (recalculated) too. The problem is only that the original empty width option will be overwritten during the grid creating. My suggestion would be to save the original value of width option in the widthOrg option during the grid creating. So one will be able to test the original value of width option and to choose the best behavior of the grid resizing after the column resizing.

UPDATED: After some discussion with you in comments and debugging of jqGrid code I hope that I found the solution which works correctly independent from the value of shrinkToFit parameter. The solution consists from changing the code of resizeStop to the following

resizeStop: function () {
    var $grid = $(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first'),
        shrinkToFit = $grid.jqGrid('getGridParam', 'shrinkToFit');

    $grid.jqGrid('setGridWidth', this.newWidth, shrinkToFit);
}

and changing of two lines of internal showHideCol method of jqGrid. It’s first changing of the line

cw = this.widthOrg? this.widthOrg: parseInt(this.width,10);

to

cw = this.widthOrg && $t.p.shrinkToFit ? this.widthOrg: parseInt(this.width,10);

and changing of another line

$($t).jqGrid("setGridWidth",$t.p.shrinkToFit === true ? $t.p.tblwidth : $t.p.width );

to

$($t).jqGrid("setGridWidth", $t.p.tblwidth);

You can get modified version of jqGrid here. The first demo uses the code with shrinkToFit: true and the second demo uses the same code, but without the option shrinkToFit: true.

I though in the next day how to make the fix working also in case of the usage fixed width option of jqGrid at the creating time and will post my suggestion to the trirand forum.

If you want uses minimized version of jqGrid you can either minimize it yourself or use the original jqGrid minimized version and overwrite only the showHideCol method with respect of $.jgrid.extend. See the demo.

UPDATED: After changes of the value of this in later versions of jqGrid one should change the above code of resizeStop callback to about the following:

resizeStop: function () {
    var $self = $(this),
        shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit");

    $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
}