JQGrid Column auto width

Question

I am just wondering how can we set a jqGrid column width to auto?

...
colModel: [
{ name: 'MyDescription', index: 'description', align: 'left', width: 150, sortable: false },
...

for the above statement how can I specify an auto width for the column so that it fits to the size of the maximum content in it.

Answer 1

There are no way to specify autowidth column in jqGrid. But you can use shrinkToFit option of a grid set to true and set some approximate width values (e.g. 20, 20, 20, 80) and width of columns will be scaled to width of a grid.

shrinkToFit:

This option describes the type of calculation of the initial width of each column against with the width of the grid. If the value is true and the value in width option is set then: Every column width is scaled according to the defined option width. Example: if we define two columns with a width of 80 and 120 pixels, but want the grid to have a 300 pixels - then the columns are recalculated as follow: 1- column = 300(new width)/200(sum of all width)*80(column width) = 120 and 2 column = 300/200*120 = 180. The grid width is 300px. If the value is false and the value in width option is set then: The width of the grid is the width set in option. The column width are not recalculated and have the values defined in colModel.

Answer 2

You can use the method setGridWidth.

Example:

$(window).on('resize', function() {
   $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');

DEMO

Answer 3

This is mostly working for me.

<div id="myjqgridwrapper" style="width:100%;">
    <table id="myjqgrid"></table>
    <div id="myjqgridfooter"></div>
</div>

<script type="text/javascript">
    //script to autosize grid
    //don't forget autowidth:true for initial size
    $(window).bind('resize', function(){
        //set to 0 so grid does not continually grow
        $('#myjqgrid').setGridWidth(0);
        //resize to our container's width
        $('#myjqgrid').setGridWidth($('#myjqgridwrapper').width());
    }).trigger('resize');
</script>

Answer 4

Try this. Worked For Me

.ui-common-table{
  width: 100% !important;
}

.ui-jqgrid .ui-jqgrid-hbox{
  padding-right: 0px !important;
}

Answer 5

You can try to use tableToGrid, as far as I remember it does preserve widths. If so, you can also look into its source code if its behaviour doesn't fully suit your needs.