Flex solution - using wordwrap in datagrid, show long text inside datagrid columns

While showing long text inside datagrid columns, the text for the width of the column will be shown and remaining will be hided.

Actually it will be shown like this.After inlcuding wordwrap in the coding, it will be shown like this

The source coding for the above result is

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="100%" height="100%" xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundColor="black" backgroundAlpha="0">

<mx:HBox width="900" height="700" horizontalAlign="center" paddingTop="30" paddingLeft="30">
<mx:VBox width="100%" height="50%" >
<mx:Label text="Here long text will not been shown inside the datagrid" color="white"/>
<mx:AdvancedDataGrid dataProvider="{data}" rowCount="3">
<mx:columns>
<mx:AdvancedDataGridColumn width="100" headerText="Product" dataField="product"/>
<mx:AdvancedDataGridColumn width="250" headerText="Description" dataField="description"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:VBox>
<mx:VBox width="100%" height="50%" >
<mx:Label text="Here you can view all message" color="white"/>
<mx:AdvancedDataGrid dataProvider="{data}" wordWrap="true" rowCount="3">
<mx:columns>
<mx:AdvancedDataGridColumn width="100" headerText="Product" dataField="product"/>
<mx:AdvancedDataGridColumn width="250" headerText="Description" dataField="description"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:VBox>
</mx:HBox>
<mx:ArrayCollection id="data">
<mx:Object product="Soap Model 1"
description="This is well prepared product for the human skin and there will be no side effects on using this soap. The company gives guarantee

for this."/>
<mx:Object product="Soap Model 2"
description="This is well prepared product for the human skin and there will be no side effects on using this soap. The company gives guarantee

for this, and a special thing is in this product, where there is a gift coupon within every soap."/>
</mx:ArrayCollection>
</mx:Application>