Resize DataGrid When Shown - apache-flex

Question

I'm trying to write my flex application so that it restores the user's settings when it starts up. The application has 3 data grids (only one is visible [on screen] at any time) and I simply save the state of the grids if the user ever does any resize events.
Saving the state works perfectly, the problem comes when restoring. It seems that only the visible data grid gets restored properly. On all the other grids, the widths are all wrong and do not match the settings I restored from.
The problem is that, when the application starts, the data grids are not sized correctly. Each data grid takes up the full screen, but initially they are only given a very small size (ie. 200 width)
Is there some way to force the data grid to resize properly when it is created? Or is it possible to know when the data grid is "maximized" I don't want to hook up to the resize event - if possible - because I would get that quite frequently, and I only want to restore the settings once.
Here's the code I'm using to restore the column widths:
var grid:DataGrid = ...;
... for each column ...
... parse width into width (ie. width is now "320")
// If it's in the config, it's visible
col.visible = true;
col.width = width;
... After loop ...
grid.invalidateSize();
grid.invalidateDisplayList();
Edit:
Here's the info you guys requested:
The settings are saved into a database (the flex proejct is connected to JBoss). I simply save a CSV type thing with the column's name and it's width. I know this works because the one data grid that is visible when the application starts gets sized correctly.
Yes, the grids use relative sizes (ie. 100%) -- I can't really change that because I want the grid to take up all available space in its container -- and I want the user to be able to resize their browser and still have it look right.
Each grid is contained in its own Hbox
The data grids are created when the application starts -- you can only see one of them though. They are in a tab navigator type thing, but it's creation policy is set to "all" so they can be populated with data (the population takes some time, and typically the user sits on the front grid for a little while.)
I can't put my resize stuff in the creationComplete handler because I end up with the same problem. The grid's size is like 50 right after it's created (it should be like 1000, 100% of the page width) -- and then I go to set the sizes of the columns (which are obviously > 50) and the resize does nothing

Answer 1

A couple thoughts:
Resize during CreationComplete(): When are your datagrids being created? Can you declare a method like resizeDataGrid() when the creationComplete() event fires for the datagrid? If you are using datagrids in, say, a TabNavigator, the default creation policy is to delay component creation until the user uses the component (e.g. makes the tab active).
Fixed Sizes: Are your datagrids using a fixed size, or a relative size? Relative sizing (e.g. width='50%') of a datagrid or datagrid columns is buggy in Flex, and the best workaround is to set a pixel width of both the datagrid and the datagrid columns
Storing User Preferences: How are you storing your user preferences? Using a SharedObject to store datagrid widths is probably the best option.
Spark Containers: How are the datagrids contained? For example, do they each sit within a VGroup, or are they not contained at all? I've found that using Spark layout tools (like a VGroup) to contain your datagrids improves datagrid layout issues.

Answer 2

What we did was saved off the column width on initialization and then reset the widths on rerender of the grid, this will occur on the first draw of the grid and subsequent resizes.
the only problem with this was that it requires columns to be resizable but does not allow the user to resize
// saves column width - this is intended to save width percent which
// will only be available on initialization, after that I beleive widths
// will be fixed size
private function saveOffColumnWidths(columns:ArrayCollection):void
{
for each(var column:TDMSEDataGridColumn in columns)
{
originalColWidths.push(column.width);
}
}
// resets the column widths - the saved widths are assumed to be width percentages
private function resetColumnWidths():void
{
dataGrid.columns[0].width=20; // set the check col seperately
for (var pos:int=0; pos<dataGrid.columnCount-1;pos++ )
{
dataGrid.columns[pos+1].width = (dataGrid.width - 20) * originalColWidths[pos];
}
}
protected function dataGrid_renderHandler(event:Event):void
{
resetColumnWidths();
}