How to add wordWrap on spark GridColumn - actionscript-3

Question

Today, I decided to test spark datagrid instead of mx:Datatagrid.
But a problem appear: I didn't found wordWrap option, do you know how to solve that?
<s:DataGrid id="scrollableDG" borderVisible="true" editable="true"
width="100%" height="{bgSuivi.height-90-90}">
//Setup columns for scrollable datagrid
var gridColumn:GridColumn = new GridColumn();
gridColumn.dataField="scRub2";
gridColumn.headerText = "Rub1";
gridColumn.width = 80;
gridColumn.editable = true;
columnLst.addItem(gridColumn);
var gridColumn:GridColumn = new GridColumn();
gridColumn.dataField="scRub3";
gridColumn.headerText = "Rub1";
gridColumn.width = 80;
gridColumn.editable = true;
columnLst.addItem(gridColumn);
var gridColumn:GridColumn = new GridColumn();
gridColumn.dataField="scRub4";
gridColumn.headerText = "Rub1";
gridColumn.width = 80;
gridColumn.editable = true;
columnLst.addItem(gridColumn);
scrollableDG.columns = columnLst;
Thanks

Answer 1

The original poster didn't select an answer I'm going to combine the previous two into one super answr! :P
You can enable word wrapping on all columns on the Spark DataGrid with variableRowHeight:
<s:DataGrid variableRowHeight="true">
</s:DataGrid>
Or you can enable word wrapping on an individual column by using the word wrap property on the default GridColumn item renderer:
<s:GridColumn dataField="fields.description" headerText="Description" >
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer wordWrap="true"/>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Furthermore, in the Grid Column example I'd recommend setting a width if you want to prevent horizontal scroll bars:
<s:GridColumn width="{dataGrid.width-column1.width-column3.width}" dataField="fields.description" headerText="Description" >
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer wordWrap="true"/>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
I'm finding I have to set both variable row height to true and set the column width to get the behavior I'm looking for.

Answer 2

[Edit]
Oops, my original answer was referring to the MX DataGridColumn component, not the Spark GridColumn. Revised answer...
The default item renderer for the grid is DataGridItemRenderer and it has a word wrap property that you need to set to true. Not sure, but you might also have to set the variableRowHeight property of the grid to true as well...
To do this in MXML, it would look something like this:
<s:DataGrid variableRowHeight="true">
<s:itemRenderer>
<fx:Component>
<s:DataGridItemRenderer wordWrap="true" />
</fx:Component>
</s:itemRenderer>
</s:DataGrid>

Answer 3

Until flex4.6, there is no s:DataGridItemRenderer, but there is mx:DataGridItemRenderer. So, the code would be:
<s:GridColumn headerText="foo" labelFunction="fooLabelFunction">
<s:itemRenderer>
<fx:Component>
<mx:DataGridItemRenderer wordWrap="true" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>