9 Replies Latest reply on Jan 2, 2011 1:54 PM by Gregory Lafrance

    Datagrid graphic display

    DrClohite

      Here is my working datagrid code... this is how far I got:

      <mx:DataGridColumn dataField="colour" headerText="iMA Colour"  labelFunction="colourColumnLabeler"  width="80" />

       

      private function colourColumnLabeler(item:Object, column:DataGridColumn):String {

           if (item.colour == 'iMA High Yellow') {

                return 'High Yellow';

           } else {

                return '';

           }

      }

       

      it works too.

       

      I want to return icons rather than text. So instead of returning 'High Yellow' I want to return 'assets/highyellowicon.png' what happens is I get the text of the path. I think I need a renderer. I am not certain about how to integrate into this code. Perhaps I am taking the wrong approach. The data is taken from an Air/SQL table, not an array, so I have to wait till the data is presented and then try to work out what it is - hence the if statement, then deliver the correct graphic.

        • 1. Re: Datagrid graphic display
          Gregory Lafrance Level 6

          This should answer your question:

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                import mx.collections.ArrayCollection;
                
                [Embed(source="images/red.png")]
                [Bindable] public var highRed:Class;
                [Embed(source="images/green.png")]
                [Bindable] public var highGreen:Class;
                [Embed(source="images/blue.png")]
                [Bindable] public var highBlue:Class;
                
                [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                  {name: "iMA High Red", colorIcon: "red"},
                  {name: "iMA High Green", colorIcon: "green"},
                  {name: "iMA High Blue", colorIcon: "blue"}
                ]);
                
                public function colourColumnLabeler(data:Object):Class{
                  var retVal:Class = null;
                  switch(data.colorIcon){
                    case "red":
                      retVal = highRed;
                      break;
                    case "green":
                      retVal = highGreen;
                      break;
                    case "blue":
                      retVal = highBlue;
                      break;
                  }
                  return retVal;
                }
              ]]>
            </mx:Script>
            <mx:DataGrid dataProvider="{ac}">
              <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="colorIcon" headerText="Color">
                  <mx:itemRenderer>
                    <mx:Component>
                      <mx:Image source="{outerDocument.colourColumnLabeler(data)}"/>
                    </mx:Component>
                  </mx:itemRenderer>
                </mx:DataGridColumn>
              </mx:columns>
            </mx:DataGrid>
          </mx:Application>
          


          If this post answers your question or helps, please mark it as such. Thanks!

          http://www.chikaradev.com
          Adobe Flex Development and Support Services

          1 person found this helpful
          • 2. Re: Datagrid graphic display
            DrClohite Level 1

            Hi Gregory

             

            You certainly know your stuff, and by the looks of it - my stuff! I responded with an almost right, but really it is about 95% as I am not able to work out the remaining errors, the (nearly finished - highly polished - wow!) code you sent through is great, the type of which I have not seen before.

             

            Here is the error:

            <mx:Component>

            so I researched it and changed it as recommended to <fx:Component>

            the error reads

            I initializer for 'itemRenderer', mulitple initializer values for target type mx.core.IFactory.

             

            same for </fx:Component>

            • 3. Re: Datagrid graphic display
              Gregory Lafrance Level 6

              My app is flex 3, yours is Flex 4. Here is Flex 4 code.

               

              <?xml version="1.0"?>
              <!-- containers\layouts\PanelCBarDynamicAdd.mxml -->
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:mx="library://ns.adobe.com/flex/mx"
                             xmlns:s="library://ns.adobe.com/flex/spark">
                <fx:Script>
                  <![CDATA[
                  import mx.collections.ArrayCollection;
                  
                  [Embed(source="images/red.png")]
                  [Bindable] public var highRed:Class;
                  [Embed(source="images/green.png")]
                  [Bindable] public var highGreen:Class;
                  [Embed(source="images/blue.png")]
                  [Bindable] public var highBlue:Class;
                  
                  [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                  {name: "iMA High Red", colorIcon: "red"},
                  {name: "iMA High Green", colorIcon: "green"},
                  {name: "iMA High Blue", colorIcon: "blue"}
                  ]);
                  
                  public function colourColumnLabeler(data:Object):Class{
                  var retVal:Class = null;
                  switch(data.colorIcon){
                  case "red":
                  retVal = highRed;
                  break;
                  case "green":
                  retVal = highGreen;
                  break;
                  case "blue":
                  retVal = highBlue;
                  break;
                  }
                  return retVal;
                  }
                  ]]>
                </fx:Script>
                  <mx:DataGrid dataProvider="{ac}">
                    <mx:columns>
                      <mx:DataGridColumn dataField="name" headerText="Name"/>
                      <mx:DataGridColumn dataField="colorIcon" headerText="Color">
                        <mx:itemRenderer>
                          <fx:Component>
                            <mx:Image source="{outerDocument.colourColumnLabeler(data)}"/>
                          </fx:Component>
                        </mx:itemRenderer>
                      </mx:DataGridColumn>
                    </mx:columns>
                  </mx:DataGrid>
              </s:Application>
              


              If this post answers your question or helps, please mark it as such. Thanks!

              http://www.chikaradev.com
              Adobe Flex Development and Support Services

              1 person found this helpful
              • 4. Re: Datagrid graphic display
                DrClohite Level 1

                Thanks again Gregory I have read a lot on rendering now! Still 'wowed' by your code! Thanks for your help.

                 

                I am now getting this text where I am hoping for a graphic:

                [Class iMA_ContactsList_highRed]

                 

                This is what the datagrid item looks like dataField is colour, not colorIcon:

                 

                <mx:DataGridColumn headerText="iMA Colour" dataField="colour">

                 

                 

                This looks great:

                [Embed(source="images/IMASRED.png")]

                [Bindable] public var highRed:Class;

                 

                I don't see this code doing anything useful:

                 

                (I have tried this in reverse and with the text colorIcon changed to colour.)

                [Bindable] private var ac:ArrayCollection = new ArrayCollection([

                     {name: "iMA High Red", colorIcon: "red"}

                 

                 

                ]);

                 

                 

                I changed the switch and 'case' to this to deliver something:

                public function colourColumnLabeler(data:Object):Class {

                     var retVal:Class = null;

                     switch(data.colour){

                          case "iMA High Red":

                                retVal = highRed;

                                break;

                 

                Then I get

                [Class iMA_ContactsList_highRed]

                delivered to the screen.

                 

                I suspect the binding needs attention, but I cannot see it...

                 

                David

                • 5. Re: Datagrid graphic display
                  Gregory Lafrance Level 6

                  Hard to say what's wrong. In this type of situation I usually try to make a copy of the file and boil it down to the minimal code that still has the problem. Then you might see the issue, or then you can post more complete code here, then it is easy for us to solve the issue.

                  • 6. Re: Datagrid graphic display
                    DrClohite Level 1

                    Hi Gregory

                     

                    Great suggestion, thanks.

                    I put it all in a file and boiled. The result we get is a class reference to the image:

                    [class DatagridTest_highRed]

                     

                    This is the boiled down code:

                     

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

                    <s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"

                    xmlns:s="library://ns.adobe.com/flex/spark"

                    xmlns:mx="library://ns.adobe.com/flex/mx"

                    label="DataGrid Test"

                    xmlns:screens="screens.*"

                    creationComplete="initDatabase()"

                    >

                    <fx:Script>

                         <![CDATA[

                              import mx.collections.ArrayCollection;

                              import mx.controls.*;

                     

                              protected var employeeDB:SQLConnection;

                     

                              [Bindable]

                              protected var employees:ArrayCollection;

                     

                     

                              // Initialize the database and create table

                              protected function initDatabase():void

                              {

                                   var dbFile:File = File.applicationStorageDirectory.resolvePath("employees.db");

                                   employeeDB = new SQLConnection();

                                   employeeDB.open(dbFile);

                     

                                   var stmt:SQLStatement = new SQLStatement();

                                   stmt.sqlConnection = employeeDB;

                                   stmt.text = "CREATE TABLE IF NOT EXISTS employees ( id INTEGER PRIMARY KEY " +

                                   "AUTOINCREMENT, firstname TEXT, lastname TEXT, position TEXT, telephone1 TEXT," +

                                   " telephone2 TEXT, email TEXT, twitter TEXT, category TEXT, colour TEXT, deleted TEXT  )";

                                   stmt.execute();

                                   getEmployees();

                         }

                     

                     

                         protected function getEmployees():void

                         {

                              var stmt:SQLStatement = new SQLStatement();

                              stmt.itemClass = database;

                              stmt.sqlConnection = employeeDB;

                              stmt.text = "SELECT * from employees";

                              stmt.execute();

                              employees = new ArrayCollection(stmt.getResult().data);

                         }

                         [Embed(source="images/IMASRED.png")]

                         [Bindable] public var highRed:Class;

                         [Bindable] private var ac:ArrayCollection = new ArrayCollection([

                              {name: "iMA High Red", colorIcon: "red"}]);

                     

                     

                         public function colourColumnLabeler(data:Object):Class {

                              var retVal:Class = null;

                              switch(data.colour){

                              case "iMA High Red":

                                   retVal = highRed;

                                   break;

                              }

                              return retVal;

                          }

                    ]]>

                    </fx:Script>

                     

                    <s:Panel width="95%" height="98%" horizontalCenter="0" title="DataGrid Test>

                         <s:layout>

                              <s:VerticalLayout paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8"/>

                         </s:layout>

                         <s:VGroup width="100%">

                              <mx:DataGrid id="dg" dataProvider="{employees}" width="100%" rowCount="10">

                              <mx:columns>

                                   <mx:DataGridColumn dataField="firstname" headerText="Name" width="100"/>

                                   <mx:DataGridColumn headerText="iMA Colour" dataField="colour">

                                        <mx:itemRenderer>

                                             <fx:Component>

                                                  <mx:Label text="{outerDocument.colourColumnLabeler(data)}" />

                                             </fx:Component>

                                        </mx:itemRenderer>

                                   </mx:DataGridColumn>

                              </mx:columns>

                              </mx:DataGrid>

                         </s:VGroup>

                    </s:Panel>

                    </s:NavigatorContent>

                    • 7. Re: Datagrid graphic display
                      Gregory Lafrance Level 6

                      You need an Image, not a Label, in the itemRenderer:

                       

                      --------------- myComponents/TestComp1.mxml -------------

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                          xmlns:s="library://ns.adobe.com/flex/spark" 
                                          xmlns:mx="library://ns.adobe.com/flex/mx"
                                          label="DataGrid Test" 
                                          xmlns:screens="screens.*"
                                          creationComplete="initDatabase()"
                                          >
                        <fx:Script>
                          <![CDATA[
                            import mx.collections.ArrayCollection;
                            import mx.controls.*;
                            
                            protected var employeeDB:SQLConnection;
                            
                            [Bindable]
                            protected var employees:ArrayCollection;
                            
                            
                            // Initialize the database and create table
                            protected function initDatabase():void
                            {
                      /*        var dbFile:File = File.applicationStorageDirectory.resolvePath("employees.db");
                              employeeDB = new SQLConnection();
                              employeeDB.open(dbFile);
                              
                              var stmt:SQLStatement = new SQLStatement();
                              stmt.sqlConnection = employeeDB;
                              stmt.text = "CREATE TABLE IF NOT EXISTS employees ( id INTEGER PRIMARY KEY " +
                                "AUTOINCREMENT, firstname TEXT, lastname TEXT, position TEXT, telephone1 TEXT," +
                                " telephone2 TEXT, email TEXT, twitter TEXT, category TEXT, colour TEXT, deleted TEXT  )";
                              stmt.execute();*/
                              getEmployees();
                            }
                            
                            
                            protected function getEmployees():void
                            {
                      /*        var stmt:SQLStatement = new SQLStatement();
                              stmt.itemClass = database;
                              stmt.sqlConnection = employeeDB;
                              stmt.text = "SELECT * from employees";
                              stmt.execute();
                              employees = new ArrayCollection(stmt.getResult().data);*/
                              employees = new ArrayCollection([
                                {firstname: "Tim", colour: "iMA High Red"}
                              ]);
                            }
                            [Embed(source="images/IMASRED.png")]
                            [Bindable] public var highRed:Class;
                            [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                              {name: "iMA High Red", colorIcon: "red"}]);
                            
                            
                            public function colourColumnLabeler(data:Object):Class {
                              var retVal:Class = null;
                              switch(data.colour){
                                case "iMA High Red":
                                  retVal = highRed;
                                  break;
                              }
                              return retVal;
                            } 
                          ]]>
                        </fx:Script>
                        
                        <s:Panel width="95%" height="98%" horizontalCenter="0" title="DataGrid Test"  >
                          <s:layout>
                            <s:VerticalLayout paddingTop="8" paddingLeft="8" paddingRight="8" paddingBottom="8"/>
                          </s:layout>
                          <s:VGroup width="100%">
                            <mx:DataGrid id="dg" dataProvider="{employees}" width="100%" rowCount="10">
                              <mx:columns>
                                <mx:DataGridColumn dataField="firstname" headerText="Name" width="100"/>
                                <mx:DataGridColumn headerText="iMA Colour" dataField="colour">
                                  <mx:itemRenderer>
                                    <fx:Component>
                                      <mx:Canvas>
                                        <mx:Image source="{outerDocument.colourColumnLabeler(data)}"
                                                  width="12" height="12" horizontalCenter="0"
                                                  verticalCenter="0"/>
                                      </mx:Canvas>
                                    </fx:Component>
                                  </mx:itemRenderer>
                                </mx:DataGridColumn>
                              </mx:columns>
                            </mx:DataGrid>
                          </s:VGroup>
                        </s:Panel>
                      </s:NavigatorContent>
                      

                       

                      ---------- testAIR.mxml --------

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:WindowedApplication 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:myComponents="myComponents.*">
                          <mx:ViewStack>
                            <myComponents:TestComp1/>
                          </mx:ViewStack>
                        </s:WindowedApplication>
                      


                      If this post answers your question or helps, please mark it as such. Thanks!

                      http://www.chikaradev.com
                      Adobe Flex Development and Support Services

                      • 8. Re: Datagrid graphic display
                        DrClohite Level 1

                        Hi Gregory

                         

                        Thanks very much, I would never have got there!

                         

                        What would you recommend I check out to get this depth of knowledge on the graphics?

                         


                        Thanks again

                         

                         

                        David

                        • 9. Re: Datagrid graphic display
                          Gregory Lafrance Level 6

                          I always recommend going through the Flash Builder help system. Its the best comprehensive learning tool.