Data Scrolling Issue

Question

I have an application that shows a thumbnail image inside of a cell in a DataGrid.  Not every row must have a thumbnail but can.  If you have few enough items in the datagrid so that scrolling isn't necessary then you add 2 thumbnails at the top of the datagrid which forces the use of the scroll bar in the datagrid then if you try to scroll it jumps back to the top.  As far as I can tell what happens is when those first two rows are no longer visible in the datagrid the image is no longer rendered which allows the row height to go back to normal which in turn makes the rows visible again which in turn requires the use of the scroll bar. Video of the problem occuring can be seen below.  When the images are flashing and the mouse cursor is hovering over the datagrid I am usign the scroll wheel.
You can find the project here: day2daydevelopment.com/code/ImageInDataGrid.fxp
Any ideas on what is happening and how to fix it?

Answer 1

Chris,
Thanks for the reply!  That resolved the issue for me.  Basically I changed the thumbnail column to look like this
          <mx:DataGridColumn headerText="Thumbnail Image"
                                   dataField="thumbnailUrl"
                                   editorUsesEnterKey="false"
                                   editable="false">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Canvas width="100%"
                                       height="100%"                                                  
                                       horizontalScrollPolicy="off">
                                <mx:Script>
                                    <![CDATA[
                                        override public function set data(value:Object):void {
                                            super.data = value;
                                            if (data.thumbnailUrl != "") {
                                                this.explicitHeight = 200;
                                            else {
                                                this.explicitHeight = 20;
                                    ]]>
                                </mx:Script>
                                <mx:Image id="viewImage" source="{data.thumbnailUrl}"/>
                                <mx:LinkButton id="uploadImage"
                                               icon="@Embed('/assets/tick.png')"
                                               toolTip="Attach an image to this object."
                                               click="{outerDocument.uploadImage()}"/>
                            </mx:Canvas>
                        </mx:Component>
                    </mx:itemRenderer>                               
                </mx:DataGridColumn>
The fixed project file can be downloaded from day2daydevelopment.com/code/ImageInDataGrid-Fixed.fxp