4 Replies Latest reply on Sep 10, 2009 6:23 AM by Xavi Colomer

    Image in a DataGrid

    zakabalt

      Hello, I want to introduce a image in one datagrid column but I don't know why. I'm trying doing that:

       

      private var columns:ArrayCollection = new ArrayCollection([
                                  {headerText: 'Image', dataField: 'column1', itemRenderer:'xxxxx', width: '5' },

       

      private var date:ArrayCollection = new ArrayCollection([
                     {column1:'../img/clip.png',

                     {column1:'../img/clip2.png,}])

       

      What I have to put in itemRenderer? Or I'm doing totaly wrong

       

      It's better if I do

       

      [Embed(source="img/clip.png")] public var buzonIcon:Class;

      and then use buzenIcon in column1:.....

       

      What is the solution?

       

      Thanks!

        • 1. Re: Image in a DataGrid
          flexprad09 Level 2

          IMO you can use the second option.

           

          cheers.

          • 2. Re: Image in a DataGrid
            ShardulSingh Level 3

            Hi, Pls find the solution of the your problem.

             

             

             

             

            MainApplication.mxml

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

            layout="vertical">

            <mx:Script>

            <![CDATA[

            import mx.collections.ArrayCollection;

             

            [Bindable]

            private var dgArrayCollection:ArrayCollection=

            new ArrayCollection([

            {imgPath:'assets/img1.png', names:'John'},

            {imgPath:'assets/img2.png', names:'Alex'},

            {imgPath:'assets/img3.png', names:'Peter'},

            {imgPath:'assets/img1.png', names:'Sam'},

            {imgPath:'assets/img2.png', names:'Alis'},

            {imgPath:'assets/img3.png', names:'Robin'},

            {imgPath:'assets/img1.png', names:'Mark'},

            {imgPath:'assets/img2.png', names:'Steave'},

            {imgPath:'assets/img3.png', names:'Fill'},

            {imgPath:'assets/img1.png', names:'Abraham'},

            {imgPath:'assets/img2.png', names:'Hennery'},

            {imgPath:'assets/img3.png', names:'Luis'},

            {imgPath:'assets/img1.png', names:'Herry'},

            {imgPath:'assets/img2.png', names:'Markus'},

            {imgPath:'assets/img3.png', names:'Flip'},

            {imgPath:'assets/img1.png', names:'John_1'},

            {imgPath:'assets/img2.png', names:'Alex_1'},

            {imgPath:'assets/img3.png', names:'Peter_1'},

            {imgPath:'assets/img1.png', names:'Sam_1'},

            {imgPath:'assets/img2.png', names:'Alis_1'},

            {imgPath:'assets/img3.png', names:'Robin_1'},

             

            ]);

             

            ]]>

             

            </mx:Script>

             

            <mx:VBox width="300" height="100%"

            horizontalAlign="center"

            verticalAlign="middle">

            <mx:DataGrid id="dg" width="50%"

            height="100%"

            borderStyle="none"

            dataProvider="{dgArrayCollection}"

            >

             

            <mx:columns>

            <mx:DataGridColumn dataField="color" itemRenderer="DatagridItemRenderer"/>

            <mx:DataGridColumn dataField="names" headerText="Names"/>

            </mx:columns>

             

            </mx:DataGrid>

             

            </mx:VBox>

             

            </mx:Application>

             

             

             

             

            DatagridItemRenderer.mxml

            <?xml version="1.0" encoding="utf-8"?>

            <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"

            width="100" height="30" horizontalGap="5"

            horizontalAlign="center"

            horizontalScrollPolicy="off" verticalScrollPolicy="off"

            >

            <mx:Script>

            <![CDATA[

            override public function set data(value:Object):void

            {

            super.data = value;

            }

            ]]>

            </mx:Script>

            <mx:Image width="75" height="30" source="{data.imgPath}"/>

            </mx:HBox>

             

             

             

             

             

            Let me know if you have any issue with this.

             

             

             

            With Regards,

             

            Shardul Singh Bartwal

             

             

             

             

            • 3. Re: Image in a DataGrid
              zakabalt Level 1

              Edited

               

              Message was edited by: zakabalt I haven't seen the last answer

              • 4. Re: Image in a DataGrid
                Xavi Colomer Level 1

                You should look at this:

                 

                http://www.adobe.com/devnet/flex/quickstart/using_item_renderers/

                 

                If you are using Flex 4, the information may not be right.