Flex Spark Datagrid - Scalable (font size) with No scroll Bars

Question

I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease. 
Is there a way to listen for the size change of the DataGrid? 
I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize. 
Any suggestions?

Answer 1

I've pasted as much code as I can legally can.  What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
Else, I tried:
protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5; 
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
== THIS IS All I can Post ==
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="components.*"
     viewSourceURL="srcview/index.html">
    <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.events.ResizeEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.xml.SimpleXMLDecoder;
        import mx.utils.ArrayUtil;
        import mx.utils.ObjectUtil;
        import spark.components.ResizeMode;
        import spark.effects.Resize;
        // Skin Colors
        private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
        private const ROLL_OVER_COLOR:int = 0x6D9960;
        private const SELECTION_COLOR:int = 0x668F59;
        private const TEXT_FONT_SIZE:int = 11;
        private const TEXT_COLOR:int = 0x080808;
        private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
        // First column width
        private var collectiveFirstColumnWidth:int = 160;
        private var collectiveValuesColumnWidth:int = 50;
        // XML data
        [Bindable] private var portfolioSummary1:XMLList;
        [Bindable] private var reconstructedAC:ArrayCollection;
        private function convertXmlToArrayCollection(file:String):ArrayCollection {
            var xml:XMLDocument = new XMLDocument(file);
            var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
            var data:Object = decoder.decodeXML(xml);
            var array:Array = ArrayUtil.toArray(data);
            return new ArrayCollection(array);
        private function convertToAC():void {
            var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
            trace(ObjectUtil.toString(ac1));
            //reStructureAC(ac1);
        private function restructureXMLIntoHierarchicalAC():void {
        private function addProperty(obj:Object, attribute:String, value:String):Object {
            var o:Object = obj;
            o[attribute] = value;
            return o;
        protected function httpservice1_resultHandler(event:ResultEvent):void
            portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
            trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
            trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy').Analytic.@value));
            //dg.dataProvider = new XMLListCollection(portfolioSummary1);
            //dg.requestedRowCount = dg.dataProviderLength;
        protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5; 
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
        protected function vgroup1_resizeHandler(event:ResizeEvent):void
            (event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
    ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
        <fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
        <fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
        <s:XMLListCollection id="headXMLListCol"
            source="{psr1.children()}" />
        <s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
            resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
    </fx:Declarations>
    <s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
        <!-- First DataGrid -->
        <components:ExpandableDataGrid5 id="dg"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            skinClass="skins.ResizableDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        headerRenderer="itemRenderers.HeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field4" dataField="dataField4" headerText="Total"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <components:dataProvider>
                <s:ArrayCollection>
                    <fx:Object dataField1="data1" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data3" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data5" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data7" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data9" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data11" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayCollection>
            </components:dataProvider>
        </components:ExpandableDataGrid5>
        <!-- Summary Totals -->
        <components:SummaryRow >
            <s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
            <s:Spacer width="100%" />
            <s:ButtonBar click="convertToAC()"> 
                <mx:ArrayCollection>
                    <fx:String>Convert to AC</fx:String>
                    <fx:String>CPS</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
            <s:ButtonBar click="restructureXMLIntoHierarchicalAC()"> 
                <mx:ArrayCollection>
                    <fx:String>Parse XML</fx:String>
                    <fx:String>15% POV</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
        </components:SummaryRow>
        <!-- Second Datagrid -->
        <components:ExpandableDataGrid5 id="dg2"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data16" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                <fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        <!-- Summary Totals - values -->
        <components:SummaryRow>
            <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
        </components:SummaryRow>
        <!-- Third Datagrid -->
        <components:ExpandableDataGrid5 id="dg3"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data18" dataField2="data2" dataField3="data3"  dataField4="data16"></fx:Object>
                <fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        <!-- Percent of Tops -->
        <components:SummaryRow>
            <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
        </components:SummaryRow>
        <!-- Fourth DataGrid -->
        <components:ExpandableDataGrid5 id="dg4"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"  />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
                <fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
                <fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
    </s:VGroup>
</s:Application>
ExpandableDataGrid5.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resizableColumns="false"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
            /*import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
            /* protected function datagrid1_addedToStageHandler(event:Event):void
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                /*                stage.align = StageAlign.TOP;
                 this.width = stage.stageWidth;
                this.height = stage.stageHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
You can Check other ExpandableDataGrids:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            editable="false"
            width="100%"
            >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                //event.stopImmediatePropagation();
                if (event.oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (event.oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                minWidth = measuredMinWidth;
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredMinHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
OR
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
             import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
        ]]>
    </fx:Script>
</s:DataGrid>