Variable height for rows of dataGrid in flex

Question

Hi guys i am creating a popup of a textarea though which i am storing my notes in a data grid. The Code for the data grid is given below.

Now when i add the note IT fits in one of the rows. Now all the rows have same size. I want to make the size variable so that the text fits in each row. For big text notes the height of rows should be greater so that no scroll needed. similarly when the data is small then the height should be small

<mx:AdvancedDataGrid x="0" y="231" width="872" height="273" fontSize="12" id="dgRecentNotes" horizontalGridLineColor="#01030B" dataProvider="{patientProfile.notes}" horizontalGridLines="true"   variableRowHeight="true">
                        <mx:columns>
                            <mx:AdvancedDataGridColumn headerText="Recent Notes" dataField="noteText" sortCompareFunction="date_sortCompareFunc" resizable="true">
                                    <mx:itemRenderer>
                                        <fx:Component>
                                            <mx:HBox>
                                                <mx:Text width="100%"  height="100%" text="{(data.createdOn.getMonth()+1)+'/'+data.createdOn.getDate()+'/'+data.createdOn.getFullYear()+' ('+((data.createdOn.getHours()+1) >9 ? (data.createdOn.getHours()+1) : '0' + (data.createdOn.getHours()+1) )+' : ' + ((data.createdOn.getMinutes()+1) >9 ? (data.createdOn.getMinutes()+1) : '0' + (data.createdOn.getMinutes()+1) ) +')' +'\n'+data.noteText}"/>
                                            </mx:HBox>
                                        </fx:Component>
                                    </mx:itemRenderer>
                            </mx:AdvancedDataGridColumn>
                        </mx:columns>
                    </mx:AdvancedDataGrid>

Answer 1

Set property variableRowHeight="true" for your datagrid and set property wordWrap="true" for your datagrid column. Refer this blogpost