How To Get Text To Wrap Correctly In A Flex DataGrid Column

Today I ran across a frustrating problem with the Flex 2.0 DataGrid component. The text in my columns would not wrap, even though I had set the wordWrap attribute to true for the columns. I had used the wordWrap attribute in my other DataGrid components to force the text to wrap to the next line if the text was too long to fit on one line given the width of the column.

I coded my DataGrid as below:

<mx:DataGrid width="100%" height="100%" id="submissionsDG" dataProvider="{submissionsViewAryCol}"
fontFamily="Verdana" fontSize="10">

<mx:DataGridColumn dataField="submissionid" width="80" headerText="Sub #"/>

<mx:DataGridColumn dataField="presenter" width="100" headerText="Main Presenter" />

<mx:DataGridColumn dataField="title" width="220" headerText="Title" wordWrap="true"/>

But after careful inspection I noticed that sometimes the text in my "Title" column would wrap correctly and sometimes the text would not wrap, the title would just be cut off. After some trial and error, it appears that if the first row's title needs to be wrapped given the width of the column then all the titles will wrap correctly. But if the first row's title doesn't need to wrap given the width of the column, then none of the other titles will wrap.

To demonstrate this go to: /flex/pagingdatagrid/bin/PagingDataGrid.html. If your browser window is wide enough so that the first title can display itself fully then all the titles in the datagrid do not wrap, even though some of the titles should wrap.

If you consult and review the wordWrap attribute, the reference states:

"A flag that indicates whether the text in a row of this column is word wrapped if it doesn't fit on one line If undefined, the DataGrid control's wordWrap property is used."

So I was initially stumped as to why my titles were not wrapping correctly. I did some trial and error with the column widths, but that did not fix the problem.

My next step was to consult the Flex 2.0 documentation. The attribute wordWrap is not even mentioned in the Flex 2.0 Developer's Guide where it discusses the DataGrid component. However, in the part of the Developer's Guide that describes the general List control (page 383) the reference states:

You can use the variableRowHeight property to make the height of List control rows variable based on their content. The default value is false. If you set the variableRowHeight property to true, the rowHeight property is ignored and the rowCount property is read-only...You can use the wordWrap property in combination with the variableRowHeight property to wrap text to multiple lines when it exceeds the width of a List row.

I assumed that the DataGrid control was a specific type of List control, so I added the variableRowHeight attribute equals true to my DataGrid component and that solved my problem. Now each title wraps correctly. If you consult you will see that variableRowHeight is an inherited property. You can also set a wordWrap attribute for the DataGrid so that all columns will wrap their text. But again, you need to also set variableRowHeight to true for that to work.

I spent about 90 minutes trying to get the my text to wrap correctly before finding this solution. If the Flex 2.0 Developer's Guide had provided a better example in the DataGrid section of the text, I could have solved my problem in 5 minutes. Unfortunately, none of the examples in the DataGrid section use wordWrap, discuss wordWrap, or give an example of how to have text wrap in a column. Wrapping the text in a column is a common thing developers need to do and the documentation should provide an example of this. Additionally in the Flex 2.0 Language Reference's discussion of the wordWrap attribute, there should be note about "see the DataGrid's variableRowHeight attribute" and that the two work together.

I've posted comments to the Flex 2.0 Live Docs to address the lack of clear documentation on how to get text to wrap correctly in a DataGrid column.


Very good, I think, too, that this example of the wrap, going to help a lot to us.

One point. you link to the the Demo is not correct, you have the link itself to livedoc macromedia.


# Posted By Ramon Helena | 12/12/06 1:20 AM

Thanks for letting me know there was a problem with the link to the demo. I've fixed it.
# Posted By Bruce | 12/12/06 5:16 AM
Hi Bruce,
Thanks for the tip, I just ran into that and found your post during my research. On the same type of issue, I have been looking for information on dynamically changing column width based upon the cell contents rather than wrapping. Do you have any leads on this approach?
# Posted By doug | 1/17/07 11:53 PM

I don't have any information on how to dynamically change a datagrid's column width. I recommend you search through the Yahoo FlexCoders group and perhaps post a question there.
# Posted By Bruce | 1/18/07 8:16 AM
Thanks, I will. I was on the Flex Forum for an hour and found a couple of similar questions. I did find this but have not tested yet:
# Posted By doug | 1/18/07 9:56 AM
I followed the link here from your comment in the Flex documentation. Must have been a bear to figure this one out. Your sacrifice is vastly appreciated. Thanks,
# Posted By Pete O'Bryan | 3/16/07 2:25 PM
This really helped alot!!!! Thanks for doing the leg work!!
# Posted By TY | 5/18/07 11:05 AM
Wonderful explaination, and excellent work!

Thanks a ton dude, u saved me a lot of time.

I was looking for another thing... To be able to force a data (column header) into two lines (My column header is "Experience (in months)" I want "(in months): to always appear on second line, can u provide me some lead on that?

Thanks dude!
# Posted By Abhishek Agrawal | 5/23/07 11:11 PM
Abhishek - Good question. I don't know how to force the text to wrap in the column heading at a specific position. Try posting your question on FlexCoders Yahoo! group.
# Posted By Bruce | 5/25/07 8:20 AM
Abhishek - try adding &#13; at the point you want the link break to occur in your column heading. Let us know if that works.
# Posted By Bruce | 5/27/07 9:43 AM
I tried, the '&#13;' doesn't give a line break in the datagrid header. '\n' -this works!
# Posted By Ganesh | 9/4/07 1:20 AM
I was hunting same onee.....
good job Bruce
# Posted By Pritesh | 10/4/07 4:20 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.