Column Styling
FlexGrid columns have a few properties that affect styling:
- cssClass: Specifies a class name to be added to cells in the column. The class name can be used in CSS rules to modify the style of cells in the column.
- align: Specifies the horizontal alignment of text in the cells. This property is set to null by default, which causes the grid to select the alignment based on the column's dataType (numbers are right-aligned, Boolean values are centered, and other types are left-aligned). If you want to override the default alignment, set this property to 'left' 'right', or 'center'.
- wordWrap: Specifies whether text in the cells should be allowed to wrap within the cell. Note that the grid will not adjust the row heights to fit the cell content unless you call the autoSizeRows method.
The cssClass is the most powerful and flexible of the three properties, but align and wordWrap are simple and convenient. Also, align and wordWrap apply to all cells, including headers, while cssClass applies only to the scrollable cells.
The grid below shows the effect of these properties.
Formatting cells
The cssClass property is useful for formatting entire columns. If you have to format specific cells, perhaps based on their content or some other criteria, use the formatItem event instead.
The grid below uses formatItem to add class names to numeric cells so that their style depends on their values.