1 Reply Latest reply on Dec 16, 2009 9:33 PM by Gregory Lafrance

    DataGrid itemrenderer with switch statement

    twitskull Level 1

      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.

        • 1. Re: DataGrid itemrenderer with switch statement
          Gregory Lafrance Level 6

          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>