Question

I would like to have a spark datagrid that wordwraps all rows where relevant. At the moment it appears like the width of a cell is dependent on the contents of the first row and then subsequent rows are word wrapped. For example:

---

1_
If column 1 has a first row of

abcde fghij

and a second row of
abcde fghij klmnop

this second row would be word wrapped.

---

2_
If column 1 has a first row of

abcde fghij klmnop

and a second row of
abcde fghij

there would be no word wrapping and column 1 would be the width of abcde fghij klmnop

---

What I want is to have a datagrid that fits a container and rows wordwrap where appropriate.

My code so far is

<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;

private function contentCreationCompleteHandler(event:FlexEvent):void {
    var dyna1:Object = { name: "John", description: "abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz "};
    var dyna2:Object = { name: "Richard", description: "abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz " };
    var dyna3:Object = { name: "Peter", description: "abcde fghij klmno pqrst uvwxyz " };
    grid.dataProvider = new ArrayCollection([dyna2, dyna1, dyna3]);
}
]]></fx:Script>

<s:DataGrid id="grid" width="100%" height="100%" variableRowHeight="true">
<s:columns>
    <s:ArrayList>
        <s:GridColumn headerText="name" width = "100" dataField="name"/>
        <s:GridColumn headerText="description" dataField="description"/>
    </s:ArrayList>
</s:columns>
</s:DataGrid>

I am specifying for the datagrid to have a width of 100% and the container to have a width of 400. The container can be resized so I want the description to fill the available space. When the application opens there is a scrollbar and the whole datagrid is wider than 400. I was hoping that the datagrid would stay at 400 and would wordwrap accordingly.

If I move the order the objects are added to the dataprovider I have different results. I am setting variableRowHeight to true to enable the word wrapping as detailed in this excellent article
http://hansmuller-flex.blogspot.com/2011/05/controlling-text-wrapping-in-datagrid.html

How can I get the datagrid to dynamically resize to 100% of the container width and for wordwrapping to happen on all rows? (not just rows after row 1)

Thanks in advance

Answer 1

I had the same problem with the first row width being messed up and after many hours of digging around finally stumbled across the answer to fix the first row width on a few blogs.

You basically have to set a ‘typicalItem’ on the datagrid or else the Spark Datagrid will automatically use the first row to determine the widths:

The DataGrid’s typicalItem is used to compute the initial width of
each GridColumn that doesn’t specify an explicit width.

Here’s an example of a DataGrid that specifies a typicalItem.

<s:DataGrid id="dataGrid" requestedRowCount="5" verticalCenter="0" horizontalCenter="0">
    <s:typicalItem>
        <s:DataItem key="99999" name="Typical Item" price="123.45" call="false"/>
    </s:typicalItem>

    <s:ArrayCollection id="items">
        <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
        <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
        ...
    </s:ArrayCollection>
</s:DataGrid>

For more info, check out these links:

• http://hansmuller-flex.blogspot.com/2011/05/using-datagrid-typicalitem-to-define.html
• http://butterfliesandbugs.wordpress.com/2011/03/08/its-a-best-practice-to-size-a-spark-datagrids-columns-with-a-typicalitem/