Flex 4 - There is no scrollbar on Spark DataGrid

Question

I have to display a lot of controls in my application. And I have done it using Group .

    <s:Group clipAndEnableScrolling="true" >
    <s:Scroller horizontalScrollPolicy="auto" verticalScrollPolicy="auto" top="0" bottom="0" right="0" left="0">
        <s:Group clipAndEnableScrolling="true" >

            <s:layout>
                <s:VerticalLayout paddingTop="30" paddingLeft="20" paddingRight="20"/>
            </s:layout>

            <s:HGroup horizontalAlign="left" verticalAlign="top">
                <s:Button id="clearButton" label="Clear"/>      
                <s:Button id="addEmployee" label="Add"/>
            </s:HGroup>

            <s:HGroup horizontalAlign="left" verticalAlign="top">
                <s:Label id="mainLabel" text="Employee Details"/>
            </s:HGroup>

            <s:HGroup horizontalAlign="left" verticalAlign="top">
                       // some more components 
            </s:HGroup>
            <s:HGroup horizontalAlign="left" verticalAlign="top">
                <s:DataGrid id="grid">
                       // Grid column
                </s:DataGrid>
            </s:HGroup>
            <s:HGroup horizontalAlign="left" verticalAlign="top">
                <s:DataGrid id="dataGrid">
                       // Grid column
                </s:DataGrid>
            </s:HGroup>
        </s:Group>
    </s:Scroller>
</s:Group>

For this code, there is no scrollbar for both Grop and DataGrid. I don't have any idea about this scroller. How to add scrollbar in it? or How can I arrange my components?

Answer 1

First, you have to set height and width property for the Group container scroller. Than you have to set

verticalScrollPolicy="on" horizontalScrollPolicy="on"

for both DataGrid

And here, there is no need of Group before the scroller.

Answer 2

It seems like your group doesn't have a width or height set, but instead the top, right, bottom and left. I'd assume its not triggering the scroller to be necessary based on the contents.

Restrict the dimensions of the scroller component (width and height) and make sure the group's contents are larger than the scroller.

also, you can specify "viewport" on the scroller and pass in the id of the group inside. the default value for viewport is null.

reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Scroller.html

-AJ