DataGrid Row Heights

This article demonstrates using the DataGrid rowHeight and variableRowHeights property to the height of grid rows.

By default all of the rows in a DataGrid have the same height.  The rows' heights are defined by the rowHeight property and if its value is not specified, the computed "preferred" height of the first row is used.   If the variableRowHeight property is set to true, then the height of each row is the maximum measured height of each cell that's been exposed, so far.  That means that when the DataGrid's columns aren't all visible and variableRowHeight="true",  scrolling new columns into view can cause a row's height to grow.   Similarly, the DataGrid uses the first row's height (or the rendered height of the "typcalItem", if it was specified) as an estimate for the heights of rows that haven't been scrolled into view yet.   This means that the DataGrid Grid's contentHeight, i.e. total height of all of the rows, can grow or even  shrink as it's scrolled, when variableRowHeight=true.  Since the scrollbar's thumb size reflects the content size, you may see its height change a little as you scroll, although as the number of rows gets large, this effect usually isn't noticeable.

Here's a simple example and the source code.  When variableRowHeight="false" (the default) use the slider to change the row height of all the DataGrid's rows. When variableRowHeight="true", each row's height is computed.   With the variableRowHeight checkbox checked, try adding enough text to a string in the  "name" column to cause the renderer to wrap, or resize the column's width by dragging  the header's column separators.

DataGridRowHeightExample.mxml

Note that if there's additional vertical space left over after all the rows have been displayed, DataGrid displays row and column separators that indicate empty or "padding" rows at the bottom of the grid.  The padding rows do not contain item renderers and the DataGrid doesn't provide any feedback or support selection for padding rows.   They just exist to show the user the limits of the grid.  The padding rows' height is always the most recent value of rowHeight.

The runtime support for variable height rows requires quite a bit more bookeeping than the  variableRowHeight="false" case and there's a commensurate impact on performance and footprint. That's why by default the DataGrid is configured for fixed height rows.   That said, item renderer complexity tends have a much bigger impact on display/scrolling performance, so developers need not shy away from specifying variableRowHeight=true, even when optimizing for performance.

If you take a look at the source code for this example, you'll see that the slider and label are not bound to the DataGrid's rowHeight property, but to "dataGrid.grid.rowHeight".  The grid is an instance of Grid that's responsible for displaying the cells' item renderers,  and all of the other grid visuals, like the selection and hover indicators.  Many DataGrid properties, like rowHeight, are just "covers" that expose the corresponding Grid property. Generally speaking there's no need to be aware of this however in this case the DataGrid cover property doesn't dispatch binding change events when the corresponding Grid property changes.   This limitation should be corrected in a future release.