1 Reply Latest reply on Feb 22, 2010 4:08 PM by Flex harUI

    Rotate / Invert DataGrid - i.e. columns as rows

    stickamw Level 1

      Hi All,

       

          Ok, I've been fighting with this one and  haven't been able to find much out there.  I have a requirement to  create a datagrid who's data is listed as a row instead of a column with  the headers being the first column of the DG and the data returns being  the 2...n columns. For example:

       

      HostCluster A
      Cluster B
      Date2010-01-022010-01-02
      Devices28623114
      Consumed1124212355
      Available43083195
      Total15550

      15

       

      I've gotten close to the solution with this:

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp();">

       

          <mx:Script>

       

              <![CDATA[

       

                   var rotated

                   var clusterArray ;

       

                   private function initApp()  {

                      rotated = new Array();

                      clusterArray = new Array();

       

                        var objOne:Object = new Object();

       

                        objOne = {Host:"Cluster A", Date:"2010-02-09", Devices:2862, Consumed:11242, Available:4308, Total:15550};

       

                        clusterArray[0]=objOne;

       

       

       

                        var objTwo:Object = new Object();

       

                        objTwo = {Host:"Cluster B", Date:"2010-02-09", Devices:3114, Consumed:12355, Available:3195, Total:15550};

       

                        clusterArray[1]=objTwo;

       

                        var j =  0;

       

       

       

                        for (var col in objOne) {

       

                             rotated[j] = new Object();

       

                             for (var i =  clusterArray.length - 1; i >=0; i--)

       

                              rotated[j]["col" + i] = clusterArray[i][col];

       

                                 rotated[j]["abc"] = col;

       

                                 j++;

       

                        }

       

                      

       

                        dg1.dataProvider=clusterArray;

       

                        dg2.dataProvider=rotated;

       

                   }

       

                 

       

              ]]>

       

          </mx:Script>

       

          <mx:DataGrid id="dg1" />

       

          <mx:DataGrid id="dg2" showHeaders="false"/>

       

      </mx:Application>

       

       

      However, the problem I am running into is that this is arbitrarily ordering the data for me, which I don't want it to do...i.e. the table headers (down the first column) and associated data are ordered:

       

      Available

      Consumed

      Date

      Devices

      Host

      Total

       


      So question #1 is what do I need to do to stop the alphabetizing that is happening?

       

      And question #2 is how can I programmatically invoke a renderer on that first column (using this setup) to shade the "headers"?

       

      Many thanks in advance!!

       

      Adrian