Flex 3: How to add images to advancedDataGrid column

Question

I need to modify an old flex 3 project and I need to create an advancedDataGrid that looks like this:

example1

I need to add more than one image in each line of that column. I have an array that has the information about the images that I need to add. At this point, my grid looks something like this:

example2

where the letters "C" "W" "R" "A" "F" represent the icon that I need to add. I guess I need to do a render, where I can pick each letter and replace it with the respective image. But all the examples that I find are from Flex 4 and doesn't work in here. The best I got was this:

 <mx:AdvancedDataGrid id="myADG" dataProvider = "{gridData}" width="200" height="500" x="800" y="50" >       

        <mx:columns>

            <mx:AdvancedDataGridColumn id="lineColumn" dataField="line">

                  <mx:itemRenderer>
                    <mx:Component>

                    <mx:Image source='{ iconData.line == 'C' ?
                              'resources/icon2312.png' : 'resources/icon2314.png'}' x="200" y="200" visible="true" />
                    </mx:Component>
                </mx:itemRenderer>

            </mx:AdvancedDataGridColumn>

        </mx:columns>

    </mx:AdvancedDataGrid>

This let me insert and image in each line but I don't know how can I add more than one image. Shoud I parse the string and put each letter in a separate column? or is there an easier way?

Answer 1

If there are few icons exist in the same time, you may do like this,add images with max images number.Here is 2, you may add more.

     <mx:itemRenderer>
          <mx:HBox>

                <mx:Image source='{ iconData.line1 == 'C' ?
                          'resources/icon2312.png' : 'resources/1.png'}' x="200" y="200" visible={ iconData.line1 == 'C'} includeInLayout={iconData.line1 == 'C'}/>

                <mx:Image source='{ iconData.line2 == 'W' ?
                          'resources/icon2312.png' : 'resources/2.png'}' x="200" y="200" visible="{ iconData.line2 == 'W'}" includeInLayout={iconData.line2 == 'W'}/>
          </mx:HBox>
      </mx:itemRenderer>

Use includeLayout to hide or show image

I used iconData.line1 == 'C' to check if need show one image, You can use bit xor to check like this

//Use iconData.t to save the show info. If include 'A', iconData.t = 0x1, 
//if include 'W', iconData.t = 0x10. And if inluce 'A' and 'W', iconData.t = 0x11

<mx:Image visible={iconData.t ^ 0x1 == 0}/> //image 'A'
<mx:Image visible={iconData.t ^ 0x10 == 0}/> //image 'W'