PDA

View Full Version : Rendering Cell Items


guide0
02-03-2010, 11:11 AM
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
02-05-2010, 06:07 PM
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/03/thinking_about_item_renderers_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
02-09-2010, 09:34 PM
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" />