5 Replies Latest reply on Dec 8, 2010 3:38 AM by jfb00

    Display image

    jfb00 Level 3

      Hi all,

      how can I display an image in a datagrid column base on the value of my data?

      The value of my data column could be 0 or 1. If it is one I want to display an image, I try to use label function but I cannot display the image.

      Here is what I have:

      [Bindable]
      [Embed(source="assets/images/lock.png")]
      public var lockImage:Class;
      
      
      private function checkLocked(item:Object, dc:DataGridColumn):Image{
         if (item!=null){
            if (item.ISLOCKED == 1)
               var img:Image=new Image();
               img.source = "assets/images/lock.png";
               return img;
         }
         return null;
      }
      

       

      Thanks

       

      Johnny

        • 1. Re: Display image
          saisri2k2 Level 4

          you have to use customitem renderers in that case

           

          something similar http://www.roseindia.net/tutorial/flex/flex4/components/viewstatewithcustomitemrenderer.ht ml

          1 person found this helpful
          • 2. Re: Display image
            jfb00 Level 3

            Thanks for you reply and help.

            I started like that but I got stuck, now I got the solution if anyone need this later.

            Regards

             

            Johnny

             

            <mx:DataGridColumn headerText="LOCK" dataField="ISLOCKED" width="100">
                                <mx:itemRenderer>
                                    <mx:Component>
                                        <mx:VBox>
                                        <mx:Script>
                                            <![CDATA[
                                                import mx.core.BitmapAsset;
                                                
                                                [Embed(source="assets/images/lock.png")]
                                                [Bindable]
                                                public var lockImage:Class;
                                                
                                                private function checkLocked():void{
                                                    if (data.ISLOCKED == 1){
                                                        var asset:BitmapAsset = new lockImage() as BitmapAsset;
                                                        img.source = asset;
                                                    }else{
                                                        img.source = "";
                                                    }
                                                }
                                            ]]>
                                        </mx:Script>
                                        <mx:Image id="img" creationComplete="checkLocked()" />
                                        </mx:VBox>
                                    </mx:Component>
                                </mx:itemRenderer>
                            </mx:DataGridColumn>
            
            • 3. Re: Display image
              jfb00 Level 3

              Forgot to close this.

              • 4. Re: Display image
                Flex harUI Adobe Employee

                Don't forget to all addChild(img)

                • 5. Re: Display image
                  jfb00 Level 3

                  Got that Alex,

                  I have an issue with this, first time the images display correctly in the corresponding row, if I move to a different screen and come back the image display in a different row that the info is not correct. What is the issue here?

                  Looks like the index counter of the rows increase every time I leave and come back to the screen.

                  Thanks

                   

                  Johnny