Question

Is there a way to get the columns to resize to the width of the new Datagrid instead of overflowing and showing the scrollbar? I’ve tried on the skin, setting all relevant properties and ran out of options. I just want it to behave like the previous Datagrid where the columns would resize to the width of the datagrid.

Thanks in Advance

Answer 1

Here is a solution that worked for me.

I defined a creation complete handler that sets the columns widths for a percentage of the data grid width so that only when it has finished being built the correct width can be set.

I made the first column 40%, second 30% and the third should occupy the remaining 30%.

MXML data grid code:

<s:DataGrid id="MainGrid" width="100%" creationComplete="Grid_creationCompleteHandler(event)">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn id="GridCol1" />
            <s:GridColumn id="GridCol2"/>
            <s:GridColumn id="GridCol3"/>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

Action Script code:

protected function Grid_creationCompleteHandler(event:Event):void
{
    GridCol1.width = MainGrid.width * 0.4;
    GridCol2.width = MainGrid.width * 0.3;
}