CODEWITHSUNDEEP
actionscript-3flex4
Mark P.
Mark P.

Reputation: 282

itemRenderer in DataGrid

I have an itemRenderer in my DataGrid that will display coloredBoxes (like a color key) depending on the value of about 8 differnt nodes in my XML. I "thought" I came up with the solution, when you first launch the app the colored boxes that are supposed to show do and the ones that aren't, don't. But when you scroll the dataGrid, they all change. I have tried it a few diffent ways, a custom MXML component, action script, both, you name it, and it always does the same thing. Can someone PLEASE look at this code and let me know what I'm doing wronng?

MXML:

<mx:DataGrid width="100%" height="100%" dataProvider="{gridData}"
             horizontalGridLines="true" horizontalGridLineColor="#666666">
    <mx:columns>
        <mx:DataGridColumn headerText="Publication title" dataField="pubTitle" showDataTips="true" dataTipField="dateEssentials"/>
        <mx:DataGridColumn headerText="Primary function" dataField="functionPrimary" width="150"/>
        <mx:DataGridColumn headerText="Lead writer" dataField="writerLead" width="150"/>
        <mx:DataGridColumn headerText="Primary channel" dataField="primaryChannel" width="150"/>
        <mx:DataGridColumn headerText="Primary date" dataField="primaryDate" width="100"
                           labelFunction="dgDateFormatter" sortCompareFunction="dgDateSorter"/>
        <mx:DataGridColumn dataField="dateEssentials" itemRenderer="scripts.DGImageRenderer"
                           width="150" resizable="false"/>
    </mx:columns>
</mx:DataGrid>

Renderer:

import mx.events.FlexEvent;
        override public function set data(value:Object):void {
            if (value != null) {
                super.data = value;
                trace(data.pubTitle);
                if (data.dateEyhpNews != null){
                    EyhpNews.visible = true;
                    trace("EYHP NEWS = " + data.dateEyhpNews);
                }
                if (data.dateEyhpSpotlight != null){
                    EyhpSpotlight.visible = true;
                    trace("EYHP SPOTLIGHT = " + data.dateEyhpSpotlight);
                }
                if (data.dateGsChs != null){
                    gsChs.visible = true;
                    trace("GS CHS = " + data.dateGsChs);
                }
                if (data.dateItsCHS != null){
                    itsChs.visible = true;
                    trace("ITS CHS = " + data.dateItsCHS);
                }
                if (data.dateProcChs != null){
                    procChs.visible = true;
                    trace("PROC CHS = " + data.dateProcChs);
                }
                if (data.dateEssentials != null){
                    essentials.visible = true;
                    trace("ESSENTIALS = " + data.dateEssentials);
                }
                if (data.dateEmail != null){
                    email.visible = true;
                    trace("EMAIL = " + data.dateEmail);
                }
                if (data.dateOther1 != null){
                    other1.visible = true;
                    trace("OTHER 1 = " + data.dateOther1);
                }
                if (data.dateOther2 != null){
                    other2.visible = true;
                    trace("OTHER 2 = " + data.pubTitle);
                }
                if (data.dateOther3 != null){
                    other3.visible = true;
                    trace("OTHER 3 = " + data.pubTitle);
                }
                trace(data.pubTitle);
            }
            dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
        }

<s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="5" paddingRight="5" >
    <mx:Box id="EyhpNews" visible="false" backgroundColor="0x0000FF" width="8" height="8" toolTip="EYHP News" />
    <mx:Box id="EyhpSpotlight" visible="false" backgroundColor="0xCC3300" width="8" height="8" toolTip="EYHP Spotlight" />
    <mx:Box id="gsChs" visible="false" backgroundColor="0x006699" width="8" height="8" toolTip="Global Services CHS" />
    <mx:Box id="itsChs" visible="false" backgroundColor="0xCC6600" width="8" height="8" toolTip="IT Services CHS" />
    <mx:Box id="procChs" visible="false" backgroundColor="0x993399" width="8" height="8" toolTip="Procurement CHS" />
    <mx:Box id="essentials" visible="false" backgroundColor="0x009933" width="8" height="8" toolTip="Essentials" />
    <mx:Box id="email" visible="false" backgroundColor="0xFF6666" width="8" height="8" toolTip="Email" />
    <mx:Box id="other1" visible="false" backgroundColor="0xFF6666" width="8" height="8" toolTip="Other 1" />
    <mx:Box id="other2" visible="false" backgroundColor="0xFF6666" width="8" height="8" toolTip="Other 2" />
    <mx:Box id="other3" visible="false" backgroundColor="0xFF6666" width="8" height="8" toolTip="Other 3" />
</s:HGroup>

Upvotes: 0

Views: 583

Answers (1)

sch
sch

Reputation: 27536

I think the data grid might be reusing the item renderers when you scroll. When it does change the value of data of the item renderer, it already has some boxes visible, and you make other new boxes visible. So what you should do is make sure that the old boxes are no longer visible.

You can do like this for example:

EyhpNews.visible = data.dateEyhpNews != null;
EyhpSpotlight.visible = data.dateEyhpSpotlight != null;
// ...

Upvotes: 1

Related Questions