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.

16 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. Awesome post. your article is really informative and helpful for me and other bloggers too
    Oracle Fusion SCM Online Training

    ReplyDelete
  5. Thank you for this post.This is very interesting information for me. research topic in economics.

    ReplyDelete
  6. A very good article. Thanks to the author. It is very important to support and help students. Who can do my homework for me ?

    ReplyDelete
  7. The article is very interesting and very understood to be read, may be useful for the people. I wanted to thank you for this great read!! I definitely enjoyed every little bit of it. I have to bookmarked to check out new stuff on your post. Thanks for sharing the information keep updating, looking forward for more posts..
    Kindly visit us @ Madurai Travels | Best Travels in Madurai | Cabs in Madurai
    Tours and Travels in Madurai

    ReplyDelete
  8. Very interesting blog 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.

    Workday HCM Online Training

    ReplyDelete
  9. Thank you for sharing such a nice and interesting blog with us. We are also providing the best services click on below links to visit our website.

    Oracle Fusion HCM Training
    Workday Training
    Okta Training
    Palo Alto Training
    Adobe Analytics Training

    ReplyDelete