Flex DataGrid row color spreads when scrolled up d

Question

I'm facing issue with datagrid row background color being spread when datagrid is vertically scrolled.

I'm assuming this is happening because ItemRenderers are recycled.

Here's my code :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
                >

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var rendererFactory:ClassFactory;

            protected function btn_clickHandler(event:MouseEvent):void
            {
                setFilterWordInRenderer();
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                setFilterWordInRenderer();
            }

            private function setFilterWordInRenderer():void
            {
                if(!rendererFactory)
                    rendererFactory =  new ClassFactory(CustomItemRenderer)

                trace("Reached setFilterWordInRenderer");

                col1.itemRenderer = rendererFactory;
                col2.itemRenderer = rendererFactory;
            }

        ]]>
    </mx:Script>

    <mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/>
    <mx:DataGrid id="dtg" width="378" height="496">
        <mx:dataProvider>
            <mx:XMLList id="datXML" xmlns="">
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
            </mx:XMLList>
        </mx:dataProvider>
        <mx:columns>
            <mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/>
            <mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
         implements="mx.controls.listClasses.IDropInListItemRenderer"
        >
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.DataGrid;
            import mx.controls.Label;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;

            private var myLabel:Label;


            [Bindable]
            private var _listData:BaseListData;

            public function get listData() : BaseListData
            {
                return _listData;
            }
            public function set listData( value:BaseListData ) : void
            {
                _listData = value;
            }

            override public function set data(value:Object):void 
            {
                if(!value)
                    return;
                super.data = value;
                //Set the label text,using listdata and datafield to make the item renderer as generic as possible.
                if(this.myLabel == null)
                    this.myLabel = new Label();
                this.myLabel.text = data[DataGridListData(listData).dataField];

                this.addChild(this.myLabel);
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
                super.updateDisplayList(unscaledWidth, unscaledHeight); 
                var g:Graphics = graphics;
                g.clear();

                var object:Object = _listData;
                if (object.rowIndex == 0) { //or whatever your conditions are
                    g.beginFill(0xFFFFC0); 
                    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                    g.endFill(); 
                }
            } 
        ]]>
    </mx:Script>
</mx:HBox>

The below snapshot is correct when data is loaded for first time:

But when I scroll through DataGrid, the below color is applied for any random rows :

Answer 1

I found a solution where in, on some condition, i can set the value of row color to yellow, or else keep the alternating default row color pattern as it is.

Someone may find this solution useful :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
                >

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var rendererFactory:ClassFactory;

            protected function btn_clickHandler(event:MouseEvent):void
            {
                setFilterWordInRenderer();
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                setFilterWordInRenderer();
            }

            private function setFilterWordInRenderer():void
            {
                if(!rendererFactory)
                    rendererFactory =  new ClassFactory(CustomItemRenderer)

                trace("Reached setFilterWordInRenderer");
                //Data for the renderer.The word to check.
                //rendererFactory.properties = {filterWord:textInput.text};
                //Only set the renderers to the columns where you want this highlighting to be done.                
                col1.itemRenderer = rendererFactory;
                col2.itemRenderer = rendererFactory;
            }

        ]]>
    </mx:Script>

    <mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/>
    <mx:DataGrid id="dtg" width="378" height="496" >
        <mx:dataProvider>
            <mx:XMLList id="datXML" xmlns="">
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
            </mx:XMLList>
        </mx:dataProvider>
        <mx:columns>
            <mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/>
            <mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

---

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
         implements="mx.controls.listClasses.IDropInListItemRenderer"
         >
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.AdvancedDataGrid;
            import mx.controls.DataGrid;
            import mx.controls.Label;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;

            [Bindable]
            private var myLabelString:String;

            private var grid:DataGrid;

                    //default alternating colors of data grid.
            private var alternatingColors:Array = [0xF7F7F7, 0xFFFFFF];

            [Bindable]
            private var _listData:BaseListData;

            public function get listData() : BaseListData
            {
                return _listData;
            }

            public function set listData( value:BaseListData ) : void
            {
                _listData = value;
            }

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

                if(!value)
                    return;
                super.data = value;
                myLabelString = data[DataGridListData(listData).dataField];

                if(data == "abc")
                {
                    setStyle("backgroundColor", 0xFFFFC0);
                    setStyle("backgroundAlpha", 1.0);
                }
                else
                {
                    setStyle("backgroundAlpha", 0.0);
                }
            }
        ]]>
    </mx:Script>

    <mx:Label text="{myLabelString}"/>
</mx:HBox>

Answer 2

You are right. Problem here is itemRenderer recycle issue. Here _listData instance data match with currently visible items so many item become rowIndex = 0 at the time of scrolling due to Recyle ItemRenderer.

Two ways you can solve problem.

1) Based on Data (better for value based highlight)

if (data.@rowNo == "0") { //or rely on data ANOTHER WAY
    g.beginFill(0xFFFFC0); 
    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
    g.endFill(); 
}

But XML Structure need to add rowNo attributes like below

<value id='test1' rowNo="0">abc</value>
<value id='test2' rowNo="1">sadad</value>
<value id='23' rowNo="2">ytuyt</value>

2) Based on Index (Better for only index based highlight)

To get the grid dataprovider. gridDataProvider = XMLListCollection((owner as DataGrid).dataProvider); in data setter method.

if (gridDataProvider.getItemIndex(data) == 0) {    
    g.beginFill(0xFFFFC0); 
    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
    g.endFill(); 
}

Below code have enough clarity (CustomItemRenderer.mxml).

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
         implements="mx.controls.listClasses.IDropInListItemRenderer">       
    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.DataGrid;
            import mx.controls.Label;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;

            private var myLabel:Label;

            [Bindable]
            private var _listData:BaseListData;

            [Bindable]
            private var gridDataProvider:XMLListCollection;

            public function get listData() : BaseListData
            {
                return _listData;
            }
            public function set listData( value:BaseListData ) : void
            {
                _listData = value;
            }

            override protected function createChildren():void
            {
                super.createChildren();

                this.myLabel = new Label();

                this.addChild(this.myLabel);
            }

            override public function set data(value:Object):void 
            {
                super.data = value;

                if(!value)
                    return;

                //Set the label text,using listdata and datafield to make the item renderer as generic as possible.

                this.myLabel.text = data[DataGridListData(listData).dataField];

                gridDataProvider = XMLListCollection((owner as DataGrid).dataProvider);

                this.invalidateDisplayList();
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
            { 
                super.updateDisplayList(unscaledWidth, unscaledHeight); 

                var g:Graphics = graphics;
                g.clear();

                if (gridDataProvider.getItemIndex(data) == 0) { //or rely on data 
//              if (data.@rowNo == "0") { //or rely on data 
                    g.beginFill(0xFFFFC0); 
                    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                    g.endFill(); 
                }
            } 
        ]]>
    </mx:Script>
</mx:HBox> 

Best practices: All component creation goes to createChildren() instead of data setter method.