Flex Pasta » mx:DataGrid wordWrap Wrangling

mx:DataGrid wordWrap Wrangling

mx:DataGrid and mx:DataGridColumn can sometimes pack powerfully picky precision.  Anyone who has ever tried using the word wrap feature knows just the pain.  Take a look at the following code and resulting output.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”cc()”>

<mx:Script>

<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]public var arrayColl:ArrayCollection = new ArrayCollection();
private function cc():void
{
arrayColl.addItem([“Poem 1″, “Sally sells seashells by the seashore.  She sells seashells on the seashell shore.  The seashells she sells are seashore shells, Of that I’m sure. She hopes she will sell all her seashells soon. If neither he sells seashells Nor she sells seashells, Who shall sell seashells? Shall seashells be sold?”]);
arrayColl.addItem([“Poem 2″, “Shelly sells seashells by the seashore.  She sells seashells on the seashell shore.  The seashells she sells are seashore shells”
]);
}
]]>

</mx:Script>
<mx:DataGrid dataProvider=”{arrayColl}” width=”500″ height=”200″ wordWrap=”true” fontFamily=”Verdana” fontSize=”12″/>

</mx:Application>

Despite specifying wordWrap=”true”, my text doesn’t wrap!  After searching through the mx:DataGrid and mx:DataGridColumn properties, I came across
variableRowHeight=true.  Within seconds, text was wrapping nicely.  How great would it be if this was mentioned in the wordWrap asdoc?  Here is the resulting output:

8 Comments

  • 1. Mike replies at 13th May 2009, 3:17 pm :

    You can also word wrap individual columns using these properties in the data column: wordWrap and resizable.

  • 2. bug11 replies at 20th August 2009, 5:54 pm :

    thanks! i needed that, too.

  • 3. serg replies at 4th December 2009, 2:43 am :

    Thank you!!!

  • 4. Alok B replies at 11th December 2009, 4:00 am :

    Can you please post your entire code clearly? I am not able to get my advanced data grid to scroll. Here is my code:

  • 5. Brian Telintelo replies at 14th December 2009, 12:11 pm :

    That is all of the code. AdvancedDataGrid is a horse of a different color. Good luck.

  • 6. Uma shankar replies at 27th January 2010, 9:46 am :

    Hi, Thanks for your nice information. Its really helps to fix the bug in my application.

  • 7. Ram replies at 1st April 2010, 7:33 am :

    Nice example; but i could not get it to work on my project as I’m using itemRenderer for the columns.For some reason the word wrap does not work if we use column itemRenderer.The moment i turn of the itemRenderer the word wrap works.May be a bug

  • 8. Ram replies at 1st April 2010, 7:33 am :

    Nice example; but i could not get it to work on my project as I’m using itemRenderer for the columns.For some reason the word wrap does not work if we use column itemRenderer.The moment i turn of the itemRenderer the word wrap works.May be a bug

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>