4 Replies Latest reply on Dec 1, 2009 7:48 AM by ric_bia

    Show images in AdvancedDataGrid

    ric_bia Level 1

      What is the lighter method for inserting a image in a AdvancedDataGridColumn based on the field value?

       

      I have a AdvancedDataGrid with a big amount of data in it and in various columns I have a boolean value.

      In that columns instead of a true/false text I would insert a image rappresenting the boolean value.

        • 1. Re: Show images in AdvancedDataGrid
          Matt Le Fevre Level 4

          currently i have an advanced datagrid with a custom item renderer. It has a label component (for text information) and an Image component for showing a tick/cross depending on a boolean value.

           

          All i've done is bind the image source to the true/false value each object within the grid has with a .png extension on the end. I have true.png/false.png images within my project src that are displayed in correspondence to their values.

           

          simple and works good enough for me.

          • 2. Re: Show images in AdvancedDataGrid
            ric_bia Level 1

            I was trying to a custom itemRenderer called like this

             

            <mx:AdvancedDataGridColumn dataField="FIELD_ONE">
                 <mx:itemRenderer>
                      <mx:Component>
                           <renderers:myItemRenderer field="{true}" />
                      </mx:Component>
                 </mx:itemRenderer>
            </mx:AdvancedDataGridColumn>
            

             

            And the itemrenderer like this

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
                 <mx:Script>
                      <![CDATA[
                      [Bindable]
                      public var field:Boolean;
                      ]]>
                 </mx:Script>
                
                 <mx:Image source="@Embed(source='true.png')" visible="{field}" includeInLayout="{field}" />
                 <mx:Image source="@Embed(source='false.png')" visible="{!field}" includeInLayout="{!field}" />
            </mx:Box>
            

             

            But I don't know how to pass down to the itemRenderer the "field" value filled with the dataField value, any suggestion?

            • 3. Re: Show images in AdvancedDataGrid
              Matt Le Fevre Level 4

              rough example where it reads the corresponding information from XML;

               

              example XML;

               

              <Object>
                   <Name>Example1</Name>
                   <Icon>true.png</Icon>
              </Object>
              <Object>
                   <Name>Example3</Name>
                   <Icon>false.png</Icon>
              </Object>
              <Object>
                   <Name>Example3</Name>
                   <Icon>false.png</Icon>
              </Object>
              

               

              example renderer would be something like this;

               

              <mx:AdvancedDataGrid dataProvider="{ExampleService.lastResult.Object}">
              <mx:itemRenderer>
              <mx:Component>
                   <mx:VBox width="180" height="180" horizontalScrollPolicy="off" verticalScrollPolicy="off"
                                                      horizontalAlign="center" cornerRadius="5" borderStyle="solid" borderThickness="1" backgroundColor="#d5d5d5"
                                                      paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" >
                         <mx:Image scaleContent="true" source="{data.Icon}"/>
                         <mx:Label fontWeight="bold" text="{data.Name}" width="100%" />
                    </mx:VBox>
              </mx:Component>
              </mx:itemRenderer>
              </mx:AdvancedDataGrid    

               

              each Object is loaded through the renderer, and the image is changed automatically depending on the value of the Icon node.

              • 4. Re: Show images in AdvancedDataGrid
                ric_bia Level 1

                Thank you

                "data" was the magic word that was missing!