4 Replies Latest reply on Feb 23, 2010 10:48 AM by jjrosen1126

    datagrid renderers (possible classfactory?)


      I'm still relatively new to Flex, but I think this should be possible, but I can't figure it out.


      I posted this question earlier, but I think I was looking at it wrong.  Here's an example of an XML giving baseball player stats :  (I'm not actually doing something based on baseball, but I can't divulge the actual data, but this is a good comparison)



        <column dataName="HR">Home Runs</column>

        <column dataName="BatAvg">Batting Average</column>




          <Name team="Pirates">Bob Smith</Name>

          <HR rank="1">35</HR>

          <BatAvg rank="46">.245</BatAvg>



            <Name team="Cardinals">Frank Sinatra</Name>

            <HR rank="2">34</HR>

            <BatAvg rank="23">.300</BatAvg>




      What I want is to have a datagrid.  Each row will be two rows high.  The first column is for the Name of each player with their team underneath.  Then there should be a column for each other stat.  Each column would have the stat with the second row saying "Rank : " and the given ranking.  When you click on the headers it should sort by the Rank, if it needs to be the stat, that's fine too.


      Using the above data.


      PlayerHome RunsBatting Average

      Bob Smith



      Ranked 1


      Ranked 46

      Frank Sinatra



      Ranked 2


      Ranked 23



      I don't know how many columns there will be.  It could be 3, it could be over 20 (which makes a very unreadable datagrid, I know, but there it is).  This makes hard coding each column and renderer problematic, especially because I don't know what stats there will be (remember, it's not actually about baseball ). 


      I can hard code the first column with no problem.  The other columns are the problem.  I had no problem adding columns when it was just the stat. 

      It looked something like :

      var columnsList:XMLList = event.result.columns.column;

      var tempCol:DataGridColumn;


      var tempColArray:Array = playersGrid.columns; //playersGrid is the datagrid

      for each (var currColumn:XML in columnsList)


      tempCol = new DataGridColumn();

      tempCol.headerText = currColumn.text();

      tempCol.dataField = currColumn.attribute('dataColumn');



      ligandsGrid.columns = tempColArray;


      But now there's another piece being added to each column.  I was looking at ClassFactory , but I haven't used them, and couldn't figure out how to do this with them, but I'm pretty sure the answer lies there.



        • 1. Re: datagrid renderers (possible classfactory?)
          Flex harUI Adobe Employee

          See the doc on custom item renderers.


          The easiest way to code it would be in MXML, but if you have lots of visible cells you may need to optimize a bit more.  And it will be more work if you want to create one renderer that can be used in any column.  To just hardwire one for the first column it might look something like


          <mx:VBox verticalScrollPolicy="off" horizontalScrollPolicy="off" >

               <mx:Label text="{XML(data).Name.toString()}" />

               <mx:Label text="{XML(data).Name.@team.toString()}" />



          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: datagrid renderers (possible classfactory?)
            jjrosen1126 Level 1

            Alex, thanks for the quick reply.  I'm sorry for taking so much time getting back.  Here's where the problem lies.  While the structure of the XML is known, the exact format is not.  In other words, I don't know what other stats there will be (remember, not actually baseball ).  For one logged in user, there could be 5 stats.. another could have 10.  The names of the stats will be mostly unknown as well.  So I need to, in actionscript, be able to add new columns on the fly.  These columns will have to be rendered specially (to have both the statistic and the ranking), and be sorted by the ranking (as the nature of the stat may not be sorted logically either).  The sorting is easy if I just make the dataField that ranking, but how can I make the renderer on the fly?


            I know I can do this :

            var tempCol:DataGridColumn();

            for each (var currColumn:XML in columnsList) //columnsList being created from the beginning part with the names of the columns


            tempCol = new DataGridColumn();


            tempCol.headerText = currColumn.text();

            tempCol.dataField = currColumn.attribute('dataName');







            This will get me a list of all of the columns, but just show the rankings.  I need it to show the stat and the rankings, which would need a custom itemRenderer, but I don't know how to make that dynamically in actionScript.



            • 3. Re: datagrid renderers (possible classfactory?)
              Flex harUI Adobe Employee

              You can't create new classes at runtime.  You can have a set of renderers

              you can choose between and/or have renderers that reconfigure their children

              based on the data

              • 4. Re: datagrid renderers (possible classfactory?)
                jjrosen1126 Level 1

                That sucks.. but thanks!  I guess I'll have to figure out a workaround.