Setting Column Widths

Miscellaneous ››
Parent Previous Next

Usually, you can set column width="xx" and the column will take that many pixels of width. However, there are certain features and some nuances that make column widths a rather intriguing topic. The key here is the columnWidthMode property and how it interacts with the horizontalScrollPolicy property.

The columnWidthMode property on the column specifies how the column widths are applied. This property defaults to "none". The Grid provides a rich mechanism to control column widths. Column widths are a complicated topic because there are a number of scenarios and rules that we need to account for

Finally, there are the below calculations once the column widths are allocated:

Left and right locked columns do not support column width mode, it is ignored for these.
Finally, with multi level grids, if the hierarchy's columns width in the top level is smaller than the next level's width (and the horizontal scroll policy of the grid is "on"/"auto"), the horizontal scroller will be calculated only by the top level's width, making some columns in the next level unreachable. The recommendation is to give a large column width to the last top level column, which is large enough so that sum of column widths at top level is larger than the sum of column widths at the bottom level.
Values : none,fixed,percent,fitToContent