Fixing a datagrid width with dynamic columns

Question

I have a datagrid contained in a vbox, this datagrid acts as a spreadsheet it contains 70 columns, initially 10 are visible and the rest are hidden and the user selects which other colums to show dynamically. I need this datagrid to use the maximum screen width available, so I have set the application's width to 100% as well as the vbox and the datagrid, I also set the horizontalscrollpolicy of the datagrid to "auto" so as that the more the columns the user selects he can use the grid's horizontal scroll bar to view the rest of the added columns. This ofcourse will vary according to the size of the monitor if the user has a huge one he won't have a very long scroll bar like users with small or medium sized monitors.

The problem is the more the columns I show, the datagrid reszies itself causing the application's horizontal scroll bar to appear leaving me with 2 adjacent horizonal scroll bars the one of the datagrid and below it the one of the application. This is both confusing and irritating for the user, now I have to use both scrollbars to see the new columns added plus other controls above the datagrid are not completely visible, I have to scroll the application's bar to the right to see them.

I don't understand, why does the datagrid stretches itself after a certain number of columns. Testing it at a resoluion of 1280x800 initially when the datagrid is with 10 columns and I start showing the other columns the datagrid's horizontal scroll bar automatically show's and it keeps getting longer while am adding more columns once i reach the column number 50 the datagrid stretches itself and the application's horizontal scroll bar appears (the number 50 will be different ofcourse with another resolution).

How can I stop this behavior? I only want the datagrid to fill the maximum screen width available and when there are more columns then there will only be the datagrid's horizontal scroll bar to use for scrolling left & right through the grid only and not the whole application.

Thanks in advance

Answer 1

I think you may want to change your approach. Turn the Horizontal scroll policy of the dataGrid off, and use the scrollbar for the container object. Then as each column is shown you can add to the width of the datagrid. In my experience this is going to give you a much more consistent result than trying to force the scrollbar on the datagrid.

Answer 2

According to me I don't think VBox is necessary; maybe you have to manage the scrollPolicy and the max/min height/width values. Try this example, changing the VALUE AAAA/BBBB with your values. Hope to be useful

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
minWidth="VALUE AAAA" 
minHeight="VALUE BBBB" verticalScrollPolicy="off" 
horizontalScrollPolicy="off" 
xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <mx:DataGrid resizableColumns="false" 
        horizontalScrollPolicy="on" 
        verticalScrollPolicy="on" 
        width="VALUE AAAA" 
        height="VALUE BBBB">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
        </mx:columns>
    </mx:DataGrid>
</mx:WindowedApplication>

Answer 3

I found 2 solutions either set the datagrid's property minColumnWidth to a small value like 5 for example and this will fix the width of the datagrid and prevent the application's scrollbar from showing or you can use this solution found here