1 Reply Latest reply on Jul 1, 2011 10:23 AM by Flex harUI

    States and datagrids mx vs spark


      I have a problem with states and datagrids.  If I enable a state that contains a datagrid in spark it doesnt display all of the columns of data that my datagrid contains. This works with mx:VBox and other mx containers but not with spark containers.  In spark after the component(DataGrid) and parent are drawn I have tried to:





      with no success.


      I created a test application so you can see and run my exact problem.

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:mx="library://ns.adobe.com/flex/mx" height="100%" width="100%">
                <s:HorizontalLayout />
                <s:State name="default"/>
                <s:State name="mx"/>
                <s:State name="spark"/>
           <mx:Button label="show MX" click="currentState = 'mx';"/>
           <s:Button label="show Spark" click="currentState = 'spark';"/>
           <s:BorderContainer height="400" width="400" borderStyle="solid">
                     <s:VerticalLayout />
                <mx:Label text="MX" includeIn="mx"/>
                <mx:Button label="show mx dg" click="showMXDG()" includeIn="mx"/>
                <mx:VBox id="mxVB" width="100%" height="0" includeIn="mx">
                     <mx:DataGrid id="dgmx" height="100%" width="100%" dataProvider="{expensesAC}"/>
                <s:Label text="Spark" includeIn="spark"/>
                <s:Button label="show s dg" click="showSDG()" includeIn="spark"/>
                <s:VGroup id="sVG" width="100%" height="0" includeIn="spark" >
                     <mx:DataGrid id="dgs" height="100%" width="100%" dataProvider="{expensesAC}">
                               <mx:DataGridColumn dataField="Month"/>
                               <mx:DataGridColumn dataField="Profit"/>
                               <mx:DataGridColumn dataField="Expenses"/>
                               <mx:DataGridColumn dataField="Amount"/>
                     import mx.collections.ArrayCollection;
                     import mx.effects.Resize;
                     private var expensesAC:ArrayCollection = new ArrayCollection( [
                          { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
                          { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
                          { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
                          { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
                          { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
                     private function showMXDG():void{
                          var rs:Resize = new Resize(mxVB);
                          rs.heightTo = 400;
                     private function showSDG():void{
                          var rs:Resize = new Resize(sVG);
                          rs.heightTo = 400;



      I have tested this same idea using "includeInLayout" and "visible" properties instead of using "states" and I found that if you create a datagrid in a VGroup with "includeInLayout" and "visible" to false and then change them to true after the parent is drawn then you get the same result as the code above.  I later found that if I dont set the "includeInLayout" property to false ever then it works perfectly just like it should.  Im assuming that states utilize a similar "includeInLayout/visible" property setup.  Anyone know a work around where I can get the expected behavior with states?


      Thanks for any and all help!

        • 1. Re: States and datagrids mx vs spark
          Flex harUI Adobe Employee

          This worked for me:


                      private function showSDG():void{

                          var cols:Array = [ new DataGridColumn("Month"), new

          DataGridColumn("Profit"), new DataGridColumn("Expenses"), new

          DataGridColumn("Amount") ];

                          dgs.columns = cols;

                          dgs.width = sVG.width;

                          var rs:Resize = new Resize(sVG);

                          rs.heightTo = 400;