Auto adjustment of the width of column

Introduction

In jqGrid 4.7 and earlier, the column width is set by the value of width property of colModel items. jqGrid doesn't contain any method which allows the adjustment of the width later to another value. There is no built-in function to calculate the width of the column based on the width of contents in the cells of the column and the width of the content in the column header.

Some time ago I suggested setColWidth method which I posted here and described in the answer. The method together with autoWidthColumns was the base of the solution implemented in free jqGrid 4.8.

Auto-resizing in free jqGrid 4.8

The method setColWidth is now a core part of free jqGrid 4.8. It provides the ability to change the width of columns. The method autoWidthColumns has been completely rewritten. A new autoResizable property of colModel has been introduced. One can use for example cmTemplate: { autoResizable: true } to set the property in all columns of colModel. If the property is defined, the content of every cell and every column header will be wrapped in additional <span class="ui-jqgrid-cell-wrapper"></span> element. All predefined formatters and unformatters of jqGrid are modified to support the wrapping. The unformatters unwrap the <span> automatically. Auto-resizing of columns is now a core feature of free-jqGrid 4.8.

The method setColWidth has three parameters:

• iCol - integer index of column in colModel or the column name.
• newWidth - the number, which specifies the new value of the width of the column
• adjustGridWidth - Boolean, which specifies whether the grid width needs to be adjusted by the difference of the width of the column.

Another new method getAutoResizableWidth, with iCol as the only parameters, allows you to set the maximal width of the content of all cells in the specified column. The returned value takes into consideration the column header too. The result of the calculation depends on properties of the autoResizing object which can be defined in column of colModel or as the parameter of jqGrid with the same name. The column should have autoResizable: true property.

The following properties can be defined in autoResizing of colModel:

• minColWidth - the number value which defined the minimal width allowed for the column
• maxColWidth - the number value which defined the maximal width allowed for the column
• compact - Boolean value. It specifies whether one should use "compact" calculation of width of the column header. The "compact" calculation means that the width of sorting icons will be added to the width of the text only if the grid is currently sorted by the column. The value of widthOfVisiblePartOfSortIcon property of autoResizing option of jqGrid will be used to get the width of the sorted icon. It's 12 in case of usage the default iconSet: "jQueryUI" option and 13 in case of usage iconSet: "fontAwesome".

The method autoResizeColumn which has the only parameter iCol which is an integer number of the column which needs to be resized. The method autoResizeColumn calls getAutoResizableWidth internally and then it changes the column width to new value by using setColWidth method. The column should also have autoResizable: true property.

Auto-resizing on double-click

A common and intuitive use of auto-resizing in free jqGrid 4.8 is double clicking on the column resizer. If the column has the autoResizable: true property and the user moves the cursor between the columns then the cursor form will be changed. It also shows that one is in the area of resizer - the special div from the right part of every column (from the left part for RTL locales) which can be used to resize the column width.

In this new feature of free jqGrid: the user can double-click on the resizer to force autoresizing of the column. The method autoResizeColumn will be automatically called for the corresponding column. The column width will then be adjusted to the optimal width based on the column content (including the content of the column header), the width of the visible part of the sorting icon and the alignment of the column header. The results are shown on the animated GIF below:

If the grid uses compact: true style of resizing then the width of the columns will/can be smaller, as no sorting icon will be added. free-jqGrid also takes this into account. If columns are autoresized with the compact style, then the column properties saves this information. On sorting by another column the width of previous resized column will be recalculated once more after sorting. This way the width of two columns can be changed: the previously sorted column and the currently sorted column. One can see the results on the next animated GIF:

Auto-resizing of columns on grid load

One more feature is the Boolean option autoresizeOnLoad. The option autoresizeOnLoad: true follows to resizing of all autoResizable columns on every grid load (after loadComplete). If they exist the method autoResizeAllColumns which do the resizing. The method will be called internally by jqGrid.