9 Replies Latest reply on Nov 15, 2011 8:49 AM by Yozef0

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

    Yozef0 Level 1

      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?

        • 1. Re: Flex Spark Datagrid - Scalable (font size) with No scroll Bars
          Yozef0 Level 1

          import mx.events.ResizeEvent;

                     

                      protected function thisDatagrid_resizeHandler(event:ResizeEvent):void

                      {

                          if (event.oldWidth < this.width) {

                              this.setStyle('fontSize', this.getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt

                          } else if (event.oldWidth > this.width) {

                              this.setStyle('fontSize', this.getStyle('fontSize') - 0.5);

                          }

                          this.requestedMaxRowCount = this.dataProviderLength;

                          this.minHeight = this.measuredMinHeight;

                      }

           

          This solution though, does not force all the rows to stay in view, as the rows as they increase in size, can go beyond the viewport of the visible area. Also not, this system cannot be scaled by Height as you cannot set a height while using the RequestedRowHeight.

          • 2. Re: Flex Spark Datagrid - Scalable (font size) with No scroll Bars
            Yozef0 Level 1

            I am trying to find a way to Scale a DataGrid (with requestedMinRowCount = requestedMaxRowCount = requestedRowCount = dataProviderLength), so that it would Always show all the Rows (so no scrollers).

            A Solution I came up with for Scaling is:

            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
            {
              
            if (event.oldWidth < this.width) {
                
            this.setStyle('fontSize', this.getStyle('fontSize') + 0.5);
              
            } else if (event.oldWidth > this.width) {
                 
            this.setStyle('fontSize', this.getStyle('fontSize') - 0.5);
              
            }
              
            this.minWidth = this.measuredMinWidth;
            }

            While the code above actually does scale the text (hence the cell, column and grid) on Resize, the problem I am getting is when the rescale happens vertically.

            For the requestedRowCount to work, there should not be a fixed height set on the Datagrid. So I am wondering what is the way to get the grid to constantly show all it's rows, even if resized vertically?

            • 3. Re: Flex Spark Datagrid - Scalable (font size) with No scroll Bars
              Yozef0 Level 1

              Anybody? This has been bugging me for a full Week! It's cales on resize horizontally... cannot set height on DG cause I'm using requestedRowCount.

              How to Scale a DataGrid as it resizes? This is what I have.

               

              Any Help?

               

              <?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;

                         

                          [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 = measuredMinHeight;

                          }

                         

                      ]]>

                  </fx:Script>

                 

              </s:DataGrid>

              • 5. Re: Flex Spark Datagrid - Scalable (font size) with No scroll Bars
                Yozef0 Level 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>

                • 8. Re: Flex Spark Datagrid - Scalable (font size) with No scroll Bars
                  robglobal Level 1

                  If you cannot use height, can you use minHeight?

                   

                  minHeight = dataprovider.length * rowheight ?

                  • 9. Re: Flex Spark Datagrid - Scalable (font size) with No scroll Bars
                    Yozef0 Level 1

                    Thanks RobGlobal for your reply, 

                     

                    Having the Datagrid show with the correct rows is not the problem I'm facing, it's scaling it. 

                     

                    Meaning:

                    1- Create a Datagrid (with the requestedRowCount = requestedMinRowCount = requestedMaxRowCount = dataProviderLength) with a width of 100%

                    2- Run the Grid

                    3- Grab the bottom right to rescale the window 

                     

                    The Grid scales on the width, if I scale on the height: either is starts eating into the Datagrid (if scaling in) or creates white space (if scaled out). 

                     

                    The Objective is to have it really scale, so all the rows & columns stay in view (always without scrollers) once I resize the window.

                    The Datagrid would scale with the window (if I scale bigger) the Grid would scale with it showing everything, possibly the grid would get bigger (font as well), and the same is true is I scale smaller.