CODEWITHSUNDEEP
jqueryjqgrid
user1666648
user1666648

Reputation: 79

Auto adjust jqgrid column width according to table grid width

I have a grid with 2 columns. The following is the column model:

colModel.append("{name:\"group_id\",index:\"GOID\",width:80,sortable:true,align:\"left\", formatter:linkFormat, unformat:unformatLink}\n")
        .append(",{name:\"group_name\",index:\"GNAME\",width:350,sortable:true,align:\"left\", formatter:formatHtml, unformat:unformatHtml}");

The table grid width is 95% and changes according to the window size.

Now I need to auto adjust two of the columns widths to fill the entire grid. I dont want to show empty space at the end of the grid.

Upvotes: 3

Views: 14223

Answers (1)

Chad Ferguson
Chad Ferguson

Reputation: 3091

Since what was mentioned in the comments worked, I will add this answer for completeness. According to the wiki for jqGrid for auto adjustment of columns you can use the option shrinktofit:true.

According to the wiki ShrinkToFit does the following:

This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width. For example, if we define two columns with widths 80 and 120 pixels, but want the grid to have a width of 300 pixels, then the columns will stretch to fit the entire grid, and the extra width assigned to them will depend on the width of the columns themselves and the extra width available. The re-calculation is done as follows: the first column gets the width (300(new width)/200(sum of all widths))*80(first column width) = 120 pixels, and the second column gets the width (300(new width)/200(sum of all widths))*120(second column width) = 180 pixels. Now the widths of the columns sum up to 300 pixels, which is the width of the grid. If the value is false and the value in width option is set, then no re-sizing happens whatsoever. So in this example, if shrinkToFit is set to false, column one will have a width of 80 pixels, column two will have a width of 120 pixels and the grid will retain the width of 300 pixels. If the value of shrinkToFit is an integer, the width is calculated according to it. - The effect of using an integer can be elaborated.

Upvotes: 5

Related Questions