You're right. Your column backgroundColors are being displayed on top of your
row background Colors. The fact is, you have to choose one or the other to be
on top. Adobe decided that column colors should always be displayed over row
colors. If you want to display rowColors over column colors, the easiest way to
do it is by overriding updateDisplayList on your datagrid thus:
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var rowBGIndex:int =
listContent.getChildIndex(listContent.getChildByName("rowBGs"));
var colBGIndex:int =
listContent.getChildIndex(listContent.getChildByName("colBGs"));
if (colBGIndex > rowBGIndex) {
listContent.swapChildrenAt(rowBGIndex, colBGIndex);
}
}
This is starting to get into the realm of "ugly hack", so beware. Much further
into that realm is the modified example below. What I've done is given each
item in the dataprovider a "default" color of 0xffffffff. When drawing a row,
if the calculated color is 0xffffffff then I do not draw the row, and let the
column color shine through.
As I said before, this is getting dangerously ugly, and for the benefit of the
community, further examples of this should probably be hidden from public view.
Also, beware of retinal damage that could be caused by my awful choice of
colors in the examples.
#Application
##################
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"
xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] public var rowColor:uint = 0xffffff;
[Bindable] public var vowels:ArrayCollection = new ArrayCollection([
{label: "a", rowColor: 0xffffffff},
{label: "e", rowColor: 0xffffffff},
{label: "i", rowColor: 0xffffffff},
{label: "o", rowColor: 0xffffffff},
{label: "u", rowColor: 0x0000ff},
{label: "sometimes y", rowColor: 0xffffffff}
]);
private function determineColor(item:Object, rowIndex:int,
dataIndex:int, oldColor:uint):uint {
return item.rowColor;
}
private function makeSelectedItemRed():void {
if (myDG.selectedItem != null) {
myDG.selectedItem.rowColor = 0xff0000;
myDG.invalidateDisplayList();
myDG.selectedItem = null;
}
}
]]>
</mx:Script>
<local:ColoredDataGrid id="myDG" dataProvider="{vowels}"
rowColorFunction="determineColor">
<local:columns>
<mx:DataGridColumn dataField="label" backgroundColor="#00ff00"/>
<mx:DataGridColumn backgroundColor="#00cc00"/>
<mx:DataGridColumn backgroundColor="#009900"/>
</local:columns>
</local:ColoredDataGrid>
<mx:Button label="Make selected item Red!!!"
click="makeSelectedItemRed()"/>
</mx:Application>
######################
# ColoredDataGrid.as
######################
package {
import flash.display.Sprite;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
public class ColoredDataGrid extends DataGrid {
public var rowColorFunction:Function;
public function ColoredDataGrid() {
super();
}
override protected function drawRowBackground(s:Sprite, rowIndex:int,
y:Number, height:Number, color:uint, dataIndex:int):void {
if(rowColorFunction != null) {
var item:Object;
if (dataProvider is ArrayCollection) {
item = (dataProvider as
ArrayCollection).getItemAt(dataIndex);
}
color = rowColorFunction( item, rowIndex, dataIndex, color );
}
if (color != 0xffffffff) {
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var rowBGIndex:int =
listContent.getChildIndex(listContent.getChildByName("rowBGs"));
var colBGIndex:int =
listContent.getChildIndex(listContent.getChildByName("colBGs"));
if (colBGIndex > rowBGIndex) {
listContent.swapChildrenAt(rowBGIndex, colBGIndex);
}
}
}
}
#################################
----- Original Message ----
From: markgoldin_2000 <[EMAIL PROTECTED]>
To: flexcoders@yahoogroups.com
Sent: Monday, June 30, 2008 3:24:07 PM
Subject: [flexcoders] Re: Draw colored shape
I think I know why it's not working for me.
I am setting up backgrould colors for all columns:
dgc.setStyle( "backgroundColor ", someColor);
and that's why I dont row color change when I call
invalidateDisplayLi st later on.
Is that correct? If yes, then what else would you suggest to get row
background change on demand?
Thanks
--- In [EMAIL PROTECTED] ups.com, Enjoy Jake <enjoy_jake@ ...> wrote:
>
> Here's a quick sample I through together for you. There are two
files, one is the main application file, and the other is the
extended datagrid.
>
> Application
> ############ ######### ########
> <?xml version="1.0" encoding="utf- 8"?>
> <mx:Application xmlns:mx="http://www.adobe. com/2006/ mxml"
layout="vertical" xmlns:local= "*">
> <mx:Script>
> <![CDATA[
> import mx.collections. ArrayCollection;
> [Bindable] public var rowColor:uint = 0xffffff;
>
> [Bindable] public var vowels:ArrayCollect ion = new
ArrayCollection( ["a", "e", "i", "o", "u", "sometimes y"]);
>
> private function determineColor( item:Object,
rowIndex:int, dataIndex:int, oldColor:uint) :uint {
> return rowColor;
> }
> ]]>
> </mx:Script>
> <local:ColoredDataG rid id="myDG" dataProvider= "{vowels} "
rowColorFunction= "determineColor" >
> <local:columns>
> <mx:DataGridColumn dataField="name" />
> <mx:DataGridColumn/ >
> <mx:DataGridColumn/ >
> </local:columns>
> </local:ColoredData Grid>
>
> <mx:Button label="Make it Blue!!!" click="rowColor = 0x0000ff;
myDG.invalidateDisp layList() "/>
> </mx:Application>
> ############ ######### ######### ####
>
>
>
> # ColoredDataGrid. as
> ############ ######### ######### ####
> package {
> import flash.display. Sprite;
>
> import mx.collections. ArrayCollection;
> import mx.collections. XMLListCollectio n;
> import mx.controls. DataGrid;
>
> public class ColoredDataGrid extends DataGrid {
> public var rowColorFunction: Function;
>
> public function ColoredDataGrid( ) {
> super();
> }
>
> override protected function drawRowBackground( s:Sprite,
rowIndex:int, y:Number, height:Number, color:uint,
dataIndex:int) :void {
> if(rowColorFunction != null) {
> var item:Object;
>
> if (dataProvider is ArrayCollection) {
> item = (dataProvider as
ArrayCollection) .getItemAt( dataIndex) ;
> }
>
> color = rowColorFunction( item, rowIndex,
dataIndex, color );
> }
> super.drawRowBackgr ound
(s,rowIndex, y,height, color,dataIndex) ;
> }
> }
> }
> ############ ######### ######### ####
>
>
> ----- Original Message ----
> From: markgoldin_2000 <markgoldin_ [EMAIL PROTECTED]>
> To: [EMAIL PROTECTED] ups.com
> Sent: Monday, June 30, 2008 2:21:52 PM
> Subject: [flexcoders] Re: Draw colored shape
>
>
> Here is my code:
> //show data
> dataProvider = xmlTrainBlocksCars;
> // highlight west receiving
> invalidateDisplayLi st();
>
> override protected function drawRowBackground( s:Sprite,
rowIndex:int,
> y:Number, height:Number, color:uint, dataIndex:int) :void
> {
> if (rowIndex == 3)
> color = 0xFF0000;
> super.drawRowBackgr ound(s,rowIndex, y,height, color,dataIndex) ;
> }
>
> Nothing is happening.
>
> --- In [EMAIL PROTECTED] ups.com, "Alex Harui" <aharui@> wrote:
> >
> > Same thing. You would call invalidateDisplayLi st and that will
> cause
> > drawRowBackground to be called.
> >
> >
> >
> > ____________ _________ _________ __
> >
> > From: [EMAIL PROTECTED] ups.com
> [mailto:flexcoders@ yahoogro ups.com] On
> > Behalf Of markgoldin_2000
> > Sent: Monday, June 30, 2008 1:38 PM
> > To: [EMAIL PROTECTED] ups.com
> > Subject: [flexcoders] Re: Draw colored shape
> >
> >
> >
> > Alex,
> > I am trying to create a solution that will allow me to change
rows
> > colors from external to a dataGrid events. For example, from a
> > contextMenu or from a click of a button.
> > What would you suggest?
> > If drawRowBackground it is then how do I execute it on demand?
> >
> > --- In [EMAIL PROTECTED] ups.com <mailto:flexcoders%
> 40yahoogroups. com>
> > , "Alex Harui" <aharui@> wrote:
> > >
> > > Best way to color a row is to override drawRowBackground
> > >
> > >
> > >
> > > ____________ _________ _________ __
> > >
> > > From: [EMAIL PROTECTED] ups.com <mailto:flexcoders%
> 40yahoogroups. com>
> >
> > [mailto:flexcoders@ yahoogro ups.com <mailto:flexcoders%
> 40yahoogroups. com>
> > ] On
> > > Behalf Of markgoldin_2000
> > > Sent: Monday, June 30, 2008 1:08 PM
> > > To: [EMAIL PROTECTED] ups.com <mailto:flexcoders%
> 40yahoogroups. com>
> > > Subject: [flexcoders] Draw colored shape
> > >
> > >
> > >
> > > I am trying to use this function to change row's color in DG:
> > > public function setColor(row: Number, color:Number,
> > Width:Number) :void
> > > {
> > > var g:Graphics = graphics;
> > > g.clear();
> > > g.beginFill( color);
> > > g.drawRect(x, y, Width, 35);
> > > g.endFill();
> > > }
> > > I am calling this function after I have asiigned dataSource.
> > >
> > > Dont see any coloring though.
> > > Is it all wrong?
> > >
> > > Thanks
> > >
> >
>
