datagrid and horizontalScrollPolicy

Question

look at this code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" horizontalScrollPolicy="off">
    <mx:VBox horizontalScrollPolicy="on" width="100%">
     <mx:DataGrid>
      <mx:columns>
       <mx:DataGridColumn width="5000" />

      </mx:columns>
     </mx:DataGrid>
    </mx:VBox>
</mx:Application>

The datagrid is outside the limits of my screen, but the scrollbar is useless.. To show you what I mean, look at the compiled output here: http://dl.dropbox.com/u/1663633/prova.swf

Any Idea? Of course this is a simple example, my real life file is much more complex and the scrollbar MUST be just around the dataGrid, not on the whole application.

Answer 1

The problem is the VBox is bigger than the Application, even when you set width="100%". It's not clear to me why it (mis)behaves like that, but you can force it to be the same size as the Application by using width="{width}" on the VBox.

Answer 2

The layout engine for the datagrid is not able to handle a column wider than the datagrid itself. You will not have this problem with columns smaller than the datagrid.

For example, if the datagrid is 500 pixels wide and you have multiple columns of 250 pixels, you can get the scrolling policy you were looking for like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" layout="absolute" horizontalScrollPolicy="off">
    <mx:VBox >
        <mx:DataGrid width="500" horizontalScrollPolicy="on" >
            <mx:columns>
                    <mx:DataGridColumn headerText="a" width="250" />
                    <mx:DataGridColumn headerText="b" width="250" />
                    <mx:DataGridColumn headerText="c" width="250" />
                    <mx:DataGridColumn headerText="d" width="250" />
                    <mx:DataGridColumn headerText="e" width="250" />
                    <mx:DataGridColumn headerText="f" width="250" />

            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
</mx:Application>

This will work even if the total width of the columns is larger than the datagrid.