JQGrid: Resize Grid Width After Column Resized

Question

I would like to resize the width of the grid after a column is resized (so the width of the grid will match the sum of the widths of the columns, including the new width of the resized column). This should prevent the horizontal scrollbar from appearing as well.

This is sort of similar to this question, where in addition to the grid resizing after hiding/showing columns, I would like it to resize when expanding/shrinking columns:

If you look at the the demo in the question provided by @Oleg, you can see that the grid does not resize upon the resize of a column.

There is a resizeStop event I could maybe use, and then use the method setGridWidth to set the grid to the width of the sum of the widths of the columns. I'm not sure how to sum the widths of the columns though...Maybe there is something built into JQGrid that I could use to do this easily?

Thank you so much for any advice!

Answer 1

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);
}

Answer 2

I make a function

var grid_setAutoWidth = function() {

    var columnas = $(this).jqGrid('getGridParam', 'colModel');

    var anchoTotal = 0;
    for (var i = 0; columnas[i]; i++) {
        anchoTotal += columnas[i].width;
    }

    anchoTotal += 50;
    $(this).jqGrid('setGridWidth', anchoTotal);

};

... and then, in the grid params

shrinkToFit: false,
loadComplete: grid_setAutoWidth,
resizeStop: grid_setAutoWidth,

I think that is the easyest way