Datagrid scolling issue - Flex

Question

I have a DataGrid,

<mx:DataGrid styleName="alternateColor" 
    verticalScrollBarStyleName="verticalScrollStyle" 
    headerSeparatorSkin="uiExtensions.DataGridHeaderSeparators"  
    width="100%" height="100%" editable="false" color="#000000" 
    verticalGridLines="false" variableRowHeight="true" 
    itemEditEnd="processData(event);" sortableColumns="false">

    <mx:columns>
        <mx:DataGridColumn wordWrap="true" dataField="Name">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Box>
                        <mx:Text id="tbName" selectable="false" 
                            width="100%" fontSize="12" text="{data.Name}"/>   
                        <mx:Text id="tbcontact" selectable="false" 
                            width="100%" text="{data.Contact}"/>   
                    </mx:Box>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

The datagrid does not scroll down after i've added 2 text components in a datagridcolumn.

The scrollbar scrolls back up on pulling it down.

Appreciate any help.

Thanks.

Answer 1

Scrolling is enabled in a DataGrid when the height of the grid is not enough to display all the items in its data provider; not when you add more controls to its columns. You have just defined a data grid with a single column that has two Text controls. Assign a big enough data to the dataProvider of the grid and it will work.

Btw, why are you using the Box control instead of HBox or VBox?

Answer 2

Issue Solved,

I used a VBox and Label instead of the Box and Text tags in the code posted above.

My code now looks like this...

                    <mx:Component>
                    <mx:VBox horizontalGap="0" verticalGap="0">
                        <mx:Label id="tbclassified" selectable="true" width="100%" fontSize="11" text="{data.Classified}"/>   
                        <mx:HBox horizontalGap="0" verticalGap="0">
                         <mx:Label id="tbcategory" textAlign="left" selectable="true" width="100%" fontStyle="italic" color="#9F2200"  text="{data.ClassifiedCategory}"/>   
                      <mx:Label id="tbcontact" textAlign="right" selectable="true" width="100%" text="{data.Name} - {data.Contact}"/>   
                        </mx:HBox>
                    </mx:VBox>
                </mx:Component>