Tuesday, May 17, 2011

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.
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.


  1. I know this is an old post but it brings up some questions related to variableRowHeight and any layout.

    With large variances in individual row heights for a VerticalLayout, how could one correct incorrect setting of the verticalScrollPosition so that items in the view don't jump on the user when rows are added or deleted in a virtualized list?

    This is a highly tricky thing and if one were to use a list to display anything complex (say a facebook feed with large varying heights), they would run into it immediately.

    I think this is related to the indices in view being changed on the layout. When new itemRenderers are added to the view, the position of itemRenderers that are still in view jump and are incorrectly positioned.

    I imagine that the layout needs to consider when that change happens and reset the verticalScrollPosition to where it should be so that items don't appear to move.

    Any thoughts on that? After scouring the bug database it seems you were the person in the know there, even though evtim (?) did the layout work. :)

  2. I came across this post as well in a search. I'm noticing that if I set variable row height to true, have one row, and if that row's data exceeds the height of the datagrid, I don't get to scroll. Any ideas for that?