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.

11 comments:

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

    ReplyDelete
  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?

    ReplyDelete
  3. Thanks for posting this blog. This was very interesting blog, I felt comfortable while reading this post, thank you........................Please Click here to know more about Oracle Fusion Financials Training details

    ReplyDelete
  4. Thank you for providing useful information and this is the best article blog for the students.learn Oracle Fusion Financials Online Training.

    Oracle Fusion Financials Online Training

    ReplyDelete
  5. Thank you for sharing such a valuable article with good information containing in this blog.learn Oracle Fusion Technical Online Training.

    Oracle Fusion Technical Online Training

    ReplyDelete
  6. Thanks for sharing valuable information in the article.students can make a good career by learning Oracle Fusion SCM Online Training.

    Oracle Fusion SCM Online Training

    ReplyDelete
  7. Thanks for providing such a great information in the blog and also very helpful to all.learn best Oracle Fusion HCM Online Training.

    Oracle Fusion HCM Online Training

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Thank you for sharing such a nice and interesting blog with us. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information.
    Oracle Fusion Financials Online Training

    ReplyDelete
  10. Very interesting blog Awesome post. your article is really informative and helpful for me and other bloggers too
    Oracle Fusion HCM Online Training

    ReplyDelete
  11. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well.
    Oracle Fusion Technical Online Training

    ReplyDelete