Flex DataGrid w/ Image - Image Not Fully Displayed

Question

Here's my problem. I have an mx:Image within an mx:DataGrid column. If I do not specifically set the width and height of the image, when the image loads into the grid, only a portion of the image is being displayed.

Recreation Steps:

1. Create new Flex Project (Desktop)
2. Configure project to use Halo Theme.

3. Add the following code in their respective locations *Note: Make sure the creationComplete event for the windowedApplication is assigned. Also may need some tweaking for any import statements, etc. Sorry.*

4. This is a quick example of the issue I'm having. When you launch the program, you will see a portion of the image. When you click Rebind, the full image will occur.

I'm trying to get the full image to be displayed on the first bind, not the second without setting the dimensions in the MXML. I have not been successful in having the full image display via ActionScript without some sort of user interaction to occur.

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
        {
            BindData();
        }

        private function BindData():void
        {
            var objOrderItem:Object = new Object();
            var items:ArrayCollection = new ArrayCollection(new Array(objOrderItem));
            dgMain.dataProvider = new ArrayCollection(items.source);
        }   
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:VBox width="100%">
    <mx:Button label="Rebind" click="BindData()" />

    <mx:DataGrid id="dgMain" resizableColumns="false" draggableColumns="false"
                 sortableColumns="false" rowCount="1">
        <mx:columns>
            <mx:DataGridColumn headerText="Thumb" sortable="false" width="60">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%">
                            <mx:Image source="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTTuc9n_oweh-dv4LUljzh0Lxzn1AvZchODUoSAeGePaDwPqUuw"
                                      width="60" maintainAspectRatio="true" />  
                        </mx:HBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>                
        </mx:columns>
    </mx:DataGrid>
    <mx:Label text="Text After Grid" />
</mx:VBox>

Thanks in advance!

Answer 1

Just a guess since this has worked for me before with DataGrids, have you tried to call invalidateList() on the data grid. Just checked that method sets a itemsSizeChanged flag and then calls invalidateDisplayList at the definition of the flag it says:

/**
 *  A flag that indicates that the size of the renderers may have changed.
 *  The component usually responds by re-applying the data items to all of
 *  the renderers on the next <code>updateDisplayList()</code> call.
 *  There is an assumption that re-applying the items will invalidate the
 *  item renderers and cause them to re-measure.
 */

Answer 2

Try Using setTimeout function with a small delay maybe 100 ,instead of callLater(). Works for me in some cases when callLater() fails.

Answer 3

Problem Solved

Hello everyone, I was able to solve my problem by adjusting the row height of the DataGrid where my data is being bound to by checking the row height to see if it's less than the image's height. Here's how I did it:

I attached a listener for the image's complete event. The listener then fires a function that checks the DataGrid's rowHeight to see if it's less than the image's content's height. If it is, it updates the rowHeight to the image's content's height.

I just was not successful using any of the methods suggested here, as well as any other methods I attempted to use.

Full code example below:

Please keep in mind, this is a quick, and simple implementation of the fix. And more elaborate implementation, IE the one I used in my project, works just as well.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       creationComplete="windowedapplication1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import controls.Photo.PhotoComponentForDataGrid;

            import flash.utils.setTimeout;

            import mx.collections.ArrayCollection;
            import mx.controls.Image;
            import mx.events.FlexEvent;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                BindData();
            }

            public function doImageDownloaded(imgLoaded:Image):void
            {   
                if (dgMain.rowHeight < imgLoaded.content.height)
                {
                    dgMain.rowHeight = imgLoaded.content.height;
                }
            }

            private function BindData():void
            {
                var objOrderItem:Object = new Object();
                objOrderItem.photoUrl = "http://c10008669.r69.cf2.rackcdn.com/9770258a-6ac1-4db5-956a-ada08beb7ae5/SK-000713/001/thumb_350/gallery.jpg";

                var items:ArrayCollection = new ArrayCollection(new Array(objOrderItem));
                dgMain.dataProvider = new ArrayCollection(items.source);
            }   
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:VBox width="100%">
        <mx:HBox>
            <mx:Button label="Rebind" click="BindData()" />
        </mx:HBox>

        <!-- Items for Distribution Order -->
        <mx:DataGrid id="dgMain" resizableColumns="false" draggableColumns="false"
                     sortableColumns="false" rowCount="1" variableRowHeight="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Thumb" sortable="false" width="60">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%">

                                <fx:Script>
                                    <![CDATA[
                                        protected function image1_completeHandler(event:Event):void
                                        {
                                            outerDocument.doImageDownloaded(imgThumb);
                                        }
                                    ]]>
                                </fx:Script>

                                <mx:Image id="imgThumb" source="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTTuc9n_oweh-dv4LUljzh0Lxzn1AvZchODUoSAeGePaDwPqUuw"
                                          complete="image1_completeHandler(event)"/>    
                            </mx:HBox>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Text After Grid" />
    </mx:VBox>
</s:WindowedApplication>