CODEWITHSUNDEEP
jqgridwidth
SARAVAN
SARAVAN

Reputation: 15031

JQGrid Column auto width

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.

Upvotes: 18

Views: 61766

Answers (5)

user330606
user330606

Reputation:

You can use the method setGridWidth.

Example:

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

DEMO

Upvotes: 8

AceJordan
AceJordan

Reputation: 249

Try this. Worked For Me

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

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

Upvotes: 1

Biff MaGriff
Biff MaGriff

Reputation: 8231

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>

Upvotes: 2

queen3
queen3

Reputation: 15501

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.

Upvotes: 0

zihotki
zihotki

Reputation: 5191

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.

Upvotes: 28

Related Questions