DataGrid itemrenderer with switch statement

Question

Hi,
I have datagrid control with this columns
<mx:DataGrid id="dgvParagraphs" >
    <mx:columns>
        <mx:DataGridColumn dataField="type" headerText="Type"/>
        <mx:DataGridColumn dataField="title" headerText="Title"/>
        <mx:DataGridColumn dataField="content" visible="false"/>
    </mx:columns>
</mx:DataGrid>
Under type column I have values from 1 to 6. Each number presents type of content. I have icons for each type. I would like to show icon instead of just number. I know this can be done using itemrenderes but I don't know how to accomplish this.

Answer 1

If this post answers your question or helps, please mark it as such.
Greg Lafrance
www.ChikaraDev.com
Flex Development and Support Services
You might see issues with this code during scrolling, as DataGrid recycles itemRenderers, but in that case the icon information must be in the data.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      public function getImageSource(item:Object):String{
        var retVal:String;
        switch(uint(item.type)){
          case 1:
            retVal = "black.png";
            break;
          case 2:
            retVal = "blue.png";
            break;
          case 3:
            retVal = "gray.png";
            break;
          case 4:
            retVal = "green.png";
            break;
          case 5:
            retVal = "purple.png";
            break;
          case 6:
            retVal = "red.png";
            break;
        trace(retVal);
        return retVal;
    ]]>
  </mx:Script>
  <mx:DataGrid id="dgvParagraphs" dataProvider="{dataXML..item}">
    <mx:columns>
      <mx:DataGridColumn dataField="type" headerText="Type" width="50">
        <mx:itemRenderer>
          <mx:Component>
            <mx:Image source="{outerDocument.getImageSource(data)}" horizontalAlign="center"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
      <mx:DataGridColumn dataField="title" headerText="Title" width="100"/>
      <mx:DataGridColumn dataField="content" visible="false"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:XML id="dataXML" xmlns="">
    <data>
      <item>
        <type>2</type>
        <title>My Title 1</title>
        <content>Content 1</content>       
      </item>
      <item>
        <type>5</type>
        <title>My Title 2</title>
        <content>Content 2</content>
      </item>
      <item>
        <type>3</type>
        <title>My Title 3</title>
        <content>Content 3</content>
      </item>
      <item>
        <type>1</type>
        <title>My Title 4</title>
        <content>Content 4</content>
      </item>
      <item>
        <type>4</type>
        <title>My Title 5</title>
        <content>Content 5</content>
      </item>
      <item>
        <type>6</type>
        <title>My Title 6</title>
        <content>Content 6</content>
      </item>
      <item>
        <type>2</type>
        <title>My Title 7</title>
        <content>Content 7</content>
      </item>
      <item>
        <type>1</type>
        <title>My Title 8</title>
        <content>Content 8</content>
      </item>
      <item>
        <type>4</type>
        <title>My Title 9</title>
        <content>Content 9</content>
      </item>
      <item>
        <type>5</type>
        <title>My Title 10</title>
        <content>Content 10</content>
      </item>
      <item>
        <type>2</type>
        <title>My Title 11</title>
        <content>Content 11</content>
      </item>
    </data>
  </mx:XML>
</mx:Application>