Data Value lose color when Scrolling on Datagrid in Flex 4

Question

I am having problem when I am scrolling my datagrid. My item renderer column is losing its value when I scroll. In my code, I change the colour of the itemrenderer (a label) on MouseOver and MouseOut. When I load the datagrid, this works fine but when I scroll down my grid some values have their colours already changed as if the MouseOver event has been executed on them.

Any one can tell me what is the issue with this?

Please have a look at the code for my datagrid and the itemrenderer. Please note that I am using a flexicious datagrid in my case.

Thanks for your precious help.

        <flxs:columnLevel>
                            <flxs:FlexDataGridColumnLevel>
                                <flxs:columns>
<flxs:FlexDataGridColumn  dataField="testcol" width="118" id="coltest">
<flxs:itemRenderer>

    <fx:Component>
                                                <mx:VBox horizontalAlign="left" paddingLeft="10" verticalAlign="middle">

                                                    <fx:Script>
                                                        <![CDATA[

                                                            import mx.controls.Alert;

                                                            protected function lbl1_clickHandler(event:MouseEvent):void
                                                            {
                                                                //Do Something                      
                                                            }

                                                            protected function lbl1_mouseOverHandler(event:MouseEvent):void
                                                            {
                                                                var dataColor:uint;
                                                                var dataUnderline:String = 'none';
                                                                if (data.payer == 'D'){
                                                                    dataColor = 0x999999;

                                                                }   
                                                                else{
                                                                    dataColor = 0x0DACE0; //color
                        }

                                                            }

                                                            protected function lbl_mouseOutHandler(event:MouseEvent):void
                                                            {
                                                                var dataColor:uint;

                                                                if (data.payer == 'D'){
                                                                    dataColor = 0x999999;
                                                                                                                                    }   
                                                                else{
                                                                    dataColor = 0x000000;

                                                                }
                                                            }
    ]]>
                                                    </fx:Script>
                                                    <mx:Label id="lbl" paddingLeft="10" left="10" fontWeight="normal" mouseOut="lbl_mouseOutHandler(event)" mouseOver="lbl_mouseOverHandler(event)" text="{data.testcol}" click="lbl1_clickHandler(event)"/>
                                                </mx:VBox>  
                                            </fx:Component>
                                        </flxs:itemRenderer>
    </flxs:FlexDataGridColumn>
                    </flxs:columns>
                            </flxs:FlexDataGridColumnLevel>

                        </flxs:columnLevel>

                    </flxs:FlexDataGrid>*

Answer 1

Short answer: You haven't overridden the "set data" on your itemrenderer, so it will keep the previous properties.

Itemrenderers in the Flex world are recycled, meaning that even though you may have 100 objects in your list, you only have 10-12 actual instances of your inline itemrenderer. The caveat is that the when the itemrenderer is populated with new data, the data-dependent properties aren't reset. That lack of resetting is why you have renderers that appear to have been mousedOver when in fact they havent'.

The standard solution is to override the "set data" function which does exactly as it sounds, it performs operations when the data is set. If I had a similar problem, my code would look like (best I can do with a 9:00AM memory).

override public function set data(value:Object):void
{
    if( value != null )
    { 
       super.data = value'
        dataColor = 0xwhatever-color-non-moused-over-objects-should-have;
    }
}

Here is a link with more information.