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:

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 http://livedocs.macromedia.com/flex/2/langref/mx/controls/dataGridClasses/DataGridColumn.html 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 http://livedocs.macromedia.com/flex/2/langref/mx/controls/DataGrid.html 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.