Height

The height of the grid can be controlled via the height property.

The height property can be set in pixels, a percent or any valid height measure. The default setting is pixels (px); the default value for height is 150, i.e. 150px. To set the grid height in 200 pixels we need to set only the number - i.e.

height: 200

It is important to note that this setting controls only the height of the Body layer. The height of whole grid is

• the height of the Caption layer (if present),
  
• plus the height of the Header layer
  
• plus the height of the Body layer (as set in this option)
  
• plus the height of the pager (if set as a part of grid).
  

Setting the height to 100% or auto means that the Body layer will be set to contain all of the returned rows without scrolling. Any other setting will fix the height of the Body layer and show the scroll bar as needed.

Width

The width of the grid is set only in pixels.

By default, the width property of the grid is not set, and the width of the grid is calculated as sum of the width properties of the individual columns set in the colModel. (If the width property in colModel is not set for a column, the width of that column defaults to 150px).

However, setting the width based on the colModel can be somewhat misleading. The true width of a grid defined this way will be

• the sum of the widths defined in the colModel
  
• plus padding and border settings for the cells (set in the CSS).
  

Suppose we have 5 columns with width settings that sum to 500 and in the CSS we have the following definition for the table data:

table.scroll tbody td  {
    padding: 2px;
    text-align: left;
    border-bottom: 1px solid #D4D0C8;
    border-left: 1px solid #D4D0C8; 
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

The width of this grid will be 500 (the settings in colModel) plus 5*5 (2 padding pixels * 2 sides + 1 border pixel left ) for a total of 525px.

If this somewhat larger width is not a problem for you, then you need do nothing more. However, in some cases it is needed to have the width of the grid fixed and independent of the widths set for the columns in colModel. To accomplish this, we can play with two other options in the grid's options array: width and shrinkToFit.

The default value of shrinkToFit is true which means that if we set the width parameter of the grid, the widths of all the columns are recalculated as:

new colModel.width = colModel.width * width / swidth

where:

• colModel.width is the width set for this column in the colModel
  
• width is width set for the grid
  
• swidth is the sum of all widths set in the colModel
  

If the value of shrinkToFit is false then jqGrid does not make any recalculation of the initial column width and the grid will have the width set in options array, with a horizontal scroll bar.