Databases
StackOverflow2013
Postsdbo
POFlex spark datagrid and word wrapping
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlex spark datagrid and word wrapping
    text
    copied!<p>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:</p> <hr> <p>1_ If column 1 has a first row of </p> <p>abcde fghij</p> <p>and a second row of abcde fghij klmnop </p> <p>this second row would be word wrapped.</p> <hr> <p>2_ If column 1 has a first row of </p> <p>abcde fghij klmnop</p> <p>and a second row of abcde fghij </p> <p>there would be no word wrapping and column 1 would be the width of abcde fghij klmnop</p> <hr> <p>What I want is to have a datagrid that fits a container and rows wordwrap where appropriate.</p> <p>My code so far is </p> <pre><code>&lt;fx:Script&gt;&lt;![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]); } ]]&gt;&lt;/fx:Script&gt; &lt;s:DataGrid id="grid" width="100%" height="100%" variableRowHeight="true"&gt; &lt;s:columns&gt; &lt;s:ArrayList&gt; &lt;s:GridColumn headerText="name" width = "100" dataField="name"/&gt; &lt;s:GridColumn headerText="description" dataField="description"/&gt; &lt;/s:ArrayList&gt; &lt;/s:columns&gt; &lt;/s:DataGrid&gt; </code></pre> <p>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.</p> <p>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 <a href="http://hansmuller-flex.blogspot.com/2011/05/controlling-text-wrapping-in-datagrid.html" rel="nofollow">http://hansmuller-flex.blogspot.com/2011/05/controlling-text-wrapping-in-datagrid.html</a></p> <p>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) </p> <p>Thanks in advance</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload