Flex: Error on Scrolling Vertically in a DataGrid

Question

i have this code

<mx:DataGrid id="tempListDG" itemDoubleClick="doubleClickHandler(event)" width="100%" height="100%" rowHeight="110" 
            draggableColumns="false" sortableColumns="false" allowMultipleSelection="false">
            <mx:columns>
                <mx:DataGridColumn  id="chkSel" headerText=" " width="15" sortable="false">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingLeft="3">
                                <mx:Script>
                                    <![CDATA[

                                    ]]>
                                </mx:Script>
                                <mx:CheckBox name="chkSel" selected="false" />
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn id="sum" dataField="@summary" headerText="Summary Description" width="280" >
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox name="thumbs" creationComplete="setThumbnailImage(event)" verticalAlign="top" verticalScrollPolicy="off">
                                <mx:Script>
                                    <![CDATA[
                                        import mx.controls.Text;
                                        import com.azaaza.containers.HBox;
                                        import com.azaaza.controls.Image;
                                        import com.hwakin.tavi.model.ModelLocator;
                                        import mx.controls.DataGrid;

                                        private function setThumbnailImage(e:Event):void{
                                            var dg:DataGrid = DataGrid(e.target.parent.parent);
                                            var dCounter:int = TemplateOpenPanel(dg.parent.parent).dCount;
                                            if (dCounter+1 > XMLList(dg.dataProvider).length()){
                                                dg.validateDisplayList();
                                                return;
                                            }
                                            img.load(ModelLocator.getInstance().StringToBitmap(XMLList(dg.dataProvider)[dCounter].@thumbStr));
                                            img.width = 80;
                                            img.height = 110;
                                            txt.htmlText = XMLList(dg.dataProvider)[dCounter].@summary;
                                            txt.maxHeight = 110;
                                            dCounter++;         
                                            TemplateOpenPanel(dg.parent.parent).dCount = dCounter; 
                                        }
                                    ]]>
                                </mx:Script>
                                <mx:Image id="img">                                 
                                </mx:Image>
                                <mx:Text id="txt">                                  
                                </mx:Text>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>                
                <mx:DataGridColumn dataField="@dateCreated" headerText="Date Created" width="100" />
                <mx:DataGridColumn dataField="@dateModified" headerText="Date Modified" width="100"/>
                <mx:DataGridColumn dataField="@guid" headerText="guid" visible="false"/>
                <mx:DataGridColumn dataField="@fileName" headerText="File Name" visible="false"/>
                <mx:DataGridColumn dataField="@tempXml" headerText="tempXml" visible="false"/>
            </mx:columns>
        </mx:DataGrid>

the datagridcolumn id named "sum" creates images and text given by the XML i loaded but i got error when i use the scroll of the datagrid. and the images get disaligned and all of the data like the dateCreated and dateModified are shuffled or something.

please help me with this one.. thanks

Answer 1

remember that item renderers are recycled and reused, so you should not use creationCompelte events, (if only 5 item renderers are visible, only 7 are created and then they are reused, but they are created only once so creation complete only fires once)

I like to use dataChange events, they work upon creation and each time the data of the itemRenderer changes.