Flex DataGrid row color spreads when scrolled up down

问题

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 :

回答1:

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.

回答2:

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>

来源：https://stackoverflow.com/questions/22308385/flex-datagrid-row-color-spreads-when-scrolled-up-down

标签

actionscript-3

flash

apache-flex

datagrid

flex3