Flex Examples
One of my favorite Flex components is the the trusty DataGrid. It seems whenever I build some sort of application or sample, I need a DataGrid to show all sorts of debug data or what have you. Here is a simple little example of a DataGrid with multi-line content and a variable row height.
Full code after the jump.
The following example demonstrates how to set up a DataGrid control to word wrap certain data grid columns, and allow each row to have a variable row height, depending on the amount of text in each row:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/23/creating-multi-line-data-grid-rows-with-variable-row-heights/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="vertical">
<mx:Array id="arr">
<mx:Object articleName="Finding out a characters Unicode character code" data="15" />
<mx:Object articleName="Setting an icon in an Alert control" data="14" />
<mx:Object articleName="Setting an icon in a Button control" data="13" />
<mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
<mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
<mx:Object articleName="Using the Alert control" data="8" />
<mx:Object articleName="Formatting data tips in a Slider" data="7" />
<mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" />
</mx:Array>
<mx:ArrayCollection id="arrColl" source="{arr}" />
<mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" wordWrap="true" />
<mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Is this possible in Flash ?
Simon,
Unfortunately I don’t think the Flash ActionScript 2.0 or ActionScript 3.0 components allow for variable row height by default. You may be able to create custom renderers that allow this, or there may be 3rd party components that support this, but I’ve never investigated it. Or perhaps
Peter
Hi,
Unfortunaly it seem that if you are in edit mode (ie datagrid.editable = true)
and you clic into cell then it is put all in a single line.
Do you know how to edit like textarea?
Thanks
Fred
Fred,
Not sure if you’re still reading, but I posted a/the solution as a new entry. You can check it out at: “Using a Flex TextArea control as a drop-in item editor”.
Hope that helps,
Peter
Can I take a similar action by plugging in some sort of break tag (like an HTML )? I want to control where my text wraps to the next line.
___________________________________
p m o l a r o
Quote :
Can I take a similar action by plugging in some sort of break tag (like an HTML )? I want to control where my text wraps to the next line.
Yup, i need this too
pmolaro/Harry Saputra,
You could probably make a custom item renderer which renders HTML text and then use the
tag.
I’ve never tried it, but it should probably work.
Peter
Hey guys,
I ran into this post searching for an answer to a problem using this technique. If you have this exact setup, using variableRowHeight=”true” and a column that “wraps”, and put only one row in the data grid, which exceeds the height of the datagrid, the scroll bar will not appear, and trying to force the scroll bar to appear basing it off the measureHeightOfItems and the height of grid can produce a scroll bar, but it’s greyed out.
I’ve seen there are a few bugs related to variableRowHeight, but hadn’t seen a solution to my issue.
To recreate just setup your grid say with a height of 200 pixels and set variableRowHeight=”true” and a column with wordWrap=”true”. Then push one row of data to it that has enough data to force the row height beyond 200 pixels or use carriage returns in the data, etc and the grid will not render the scrollbar.
Peter can you confirm this to be a bug, is there a work around?
One additional note.
You can sort of work around this by adding a blank row to the grid, so it thinks there are at least 2 rows and the scrollbar will render, however, even when you do get a scroll bar, if the text block is large enough, it still doesn’t scroll properly to let you see everything, it just jumps to the blank row instead and you miss the rest of the data in the larger row.
Nice post. I have been messing around with datagrids for a while now and one thing I cannot understand is how flex insists that your rows are padded. I want rows to be only high enough so that the text is not cut off so that one row’s text appears to be on top of the following row’s text. Does anyone know how to do this? Changing the rowheight property does not work, and turning horizontal grid lines off does not either.
Hi Tony,
I had the same problem and I used paddingTop = 0 and paddingBottom= 0. It worked fine for me. Hope it helps.
Oh, and you could also try variableRowHeigh property and set it to “true “. This will make force the dataGrid to have variable height and then you don’t need to use the rowHeight property. If you do not use the paddings (top and bottom) I guess that flex will try to put a small padding between rows (that’s why I set them both to 0).
Hi, all.
Tony – Ihave the same problem. Also, I don’t understand how it does rowCount – if I try to useuse {dp.length} where dp is the dataProvider, half the time it’s OK, half the time I get those blasted scrollbars. Sometimes I use dp.length+1 or +2 (thinking perhaps the headers are being included) and sometimes that works, but it’s not reliable.
rowCount is the only mechanism I’ve been able to think of to display the entire datagrid without scrollbars (trying to do it via height is a crapshoot). Ideally I would like the entire Application to render itself outwards so that the height of every component is the sum of the heights of its children.
Sorry… off on a tangent.
Cheers
GT
France
Can this method also be used when you load an image in an itemRenderer of a column and thus need to force the selected row to be resized to the image’s new height? Thanks.
Did anyone find a workaround to the behaviour mentioned by Brixel in his additional note? I have this problem of not being able to read all text in high rows because of the scrollbar jumping to the next rows beginning instead of scrolling smoothly over the rows.
additional note:
mentioned also in bug-reports #SDK-14990 and #SDK-16004 on JIRA (https://bugs.adobe.com/jira)
great,
you solve my problem
Muchas Gracias !!
I am using mx:DataGrid and have given variableRowheight=’true’ and using a TextArea itemrenderer in it. When my text size is small (100-200 charcters) then the variableRowHeight works fine but if i give the text more than 3000 characters then it fails and show all the rows of same height.
DataGrid code :
Thanks in advance
Hi peter,
If I want to control my data grid column height in case my data is exceeds and i want to control it.
Thanks
Dear Peter,
I have the same problem as Brixel. I have a custom item renderer which draws complex data. and in the case of a very small screen and just 1 row I cannot see any grid scroll bar, even if the renderer is much bigger in height than the datagrid.
Please suggest a solution for this.