Rendering Cell Items

[guide0]

I have following problem. I need to be able to render the content of a cell "delayed" based upon the content of cell "DelaySeverity". However the following renderer (BackgroundComp) only renders the background of the cell itself.

How can I modify this class such that I can render the cell based upon the content from another column ?

<mx:Array>
                <mx:DataGridColumn  dataField="id" headerText="Airline" />
                <mx:DataGridColumn  dataField="cancelled" headerText="Cancelled Flights (%)"  />
                <mx:DataGridColumn  dataField="delayed" headerText="Delayed Flights (%)"  />
                <mx:DataGridColumn dataField="DelaySeverity" headerText="Delay" itemRenderer="BackgroundComp"  />
    
        </mx:Array>

package {

    import mx.controls.Label;
    import mx.controls.dataGridClasses.*;
    import mx.controls.DataGrid;
    import flash.display.Graphics;
    import mx.styles.StyleManager;

    [Style(name="backgroundColor", type="uint", format="Color", inherit="no")]
    
    public class BackgroundComp extends Label {

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
             super.updateDisplayList(unscaledWidth, unscaledHeight);
               
             var g:Graphics = graphics;
             g.clear();
             var grid1:DataGrid = DataGrid(DataGridListData(listData).owner);
             if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data))
                 return;
             
                 switch (data[DataGridListData(listData).dataField]) {
    
                    case (1): {
                    
                     g.beginFill(0xDE0033);
                     g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                     g.endFill();
                     break;
    
                    }
                    
                    case (2): {
                    
                     g.beginFill(0x51DEED);
                     g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                     g.endFill();
                     break;
                    }
                    
                    case (3): {
                    
                     g.beginFill(0x7CFFE3);
                     g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                     g.endFill();
                    break;
                    }
                    
    
                 } // switch
                 
             } // override
        } // class

} // package 

[drkstr]

In my humble opinion, you are going about item renderers in the wrong way. They should be completely data driven, and not reference the outside world in any way (such as referencing the DataGrid). There are always exceptions to the rule, but your problem does not seem like one of them.

Here is a good overview on how item renderers work:

http://blogs.adobe.com/aharui/2007/0...nderers_1.html

Essentially, each of the cells you want to render should have their own itemRenderer. Any visual changes they make should be the result of changes to it's 'data' property. Else wise, you will run into recycling issues.


Cheers!

[SeaOfHoles]

Isn't data[DataGridListData(listData).dataField going to return a value like "delayed" or "cancelled"?

Something like this

<mx:DataGridColumn  dataField="delayed" headerText="Delayed Flights (%)" itemRenderer="BackgroundComp"  />
<mx:DataGridColumn dataField="DelaySeverity" headerText="Delay" itemRenderer="BackgroundComp"  />