ActionScript-3 – Change the background color of the data grid cell according to multiple conditions in Flex

Hi, I’m new to Adobe Flex, if my question sounds stupid, please apologize. Here it is anyway.
I’m trying a simple data grid, it Basically checked two conditions
1) If the artist is 01 and the album is’Album 01′, set the background to the corresponding cell in the “Year” column.

Use my code below to’set the style’ to the background color, because the attribute doesn’t work but changing the font color is working, and secondly I don’t know how to write the code to make the above nested condition work? If anyone can help me in this regard, I would be very grateful.
Thank you! In advance.

The following is the code:
Newdatagrid.mxml

 
xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public static var initDG:ArrayCollection = new ArrayCollection([
{Artist:'01', Album:'Album 01', Year:'2008'},
{Artist:'01', Album:'Album 02', Year:'2009'},
{Artist:'03', Album:'Album 03', Year:'2007'},
{Artist:'03', Album:'Album 04', Year:'2003'},

]);

]]>






< br />







Rendering:

< /p>


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements="mx.controls.listClasses.IDropInListItemRenderer">

import mx.controls.dataGridClasses.DataGridListData;
import mx. controls.listClasses.BaseListData;
imp ort mx.controls.Alert;

private var _listData:BaseListData;

[Bindable]private var isSelected:Boolean = false;

override public function set data( value:Object): void
{
super.data = value;
lblData.text = data[column.dataField];

if ( data[column.dataField].valueOf() >= 2008){
//styleName="myStyles.BgColor";
setStyle('backgroundColor',0xFFFF00);
}else{< br /> setStyle('backgroundColor',0x32CD32);
}

}

[Bindable]public function get listData(): BaseListData
{
return _listData;
}
public function set listData( value:BaseListData): void
{
_listData = value;
}
< br /> ]]>



The output I want: Condition: If Artist = 01 and Year> = 2008, then the cell background will become red

The GridItemRenderer class does not have this Style backgroundColor.
So setting it has no effect.

What you can do is add a Rect to the ItemRenderer and set its color attribute according to your conditions.

An example is this:


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library ://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">


override public function prepare( hasBeenRecycled:Boolean):void {


if(this.data) {

if(this.data.Year >= 2008 && this.data.Artist == '01' && column.dataField =='Year')
bgColor.color = 0xFF0000;
else
bgColor.color = 0xFFFFFF;
}
}
]]>








< br />

Hi, I am new to Adobe Flex, if my question sounds stupid, please apologize. Anyway it is here.
I’m trying a simple data grid, it basically checks two conditions
1) If the artist is 01 and the album is’Album 01′, then set the background to the corresponding in the “Year” column Cell.

Use my code below to’set style’ to the background color, because the attribute does not work but changing the font color is working, and secondly I don’t know how to write the code to make the above embed Set of conditions work? If anyone can help me in this regard, I would be very grateful.
Thank you! In advance.

The following is the code:
Newdatagrid.mxml

 
xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public static var initDG:ArrayCollection = new ArrayCollection([
{Artist:'01', Album:'Album 01', Year:'2008'},
{Artist:'01', Album:'Album 02', Year:'2009'},
{Artist:'03', Album:'Album 03', Year:'2007'},
{Artist:'03', Album:'Album 04', Year:'2003'},

]);

]]>















Rendering:


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements ="mx.controls.listClasses.IDropInListItemRenderer">

import mx.controls.dataGridClasses.DataGridListData;
import mx.controls .listClasses.BaseListData;
import mx .controls.Alert;

private var _listData:BaseListData;

[Bindable]private var isSelected:Boolean = false;

override public function set data( value:Object): void
{
super.data = value;
lblData.text = data[column.dataField];

if (data[ column.dataField].valueOf() >= 2008){
//styleName="myStyles.BgColor";
setStyle('backgroundColor',0xFFFF00);
}else{
setStyle('backgroundColor',0x32CD32);
}

}

[Bindable]public function get listData(): BaseListData
{
return _listData;
}
public function set listData( value:BaseListData): void
{
_listData = value;
}

]]>



The output I want: Condition: If Artist = 01 and Year> = 2008, then the cell background will become red

The GridItemRenderer class has no such style backgroundColor.
So setting it has no effect.

What you can do is to add a Rect to the ItemRenderer and set its color attributes according to your conditions.

An example is this:


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling=" true">


override public function prepare(hasBeenRecycled:Boolean):void {

< br /> if(this.data) {

if(this.data.Year >= 2008 && this.data.Artist == '01' && column.dataField =='Year') < br /> bgColor.color = 0xFF0000;
else
bgColor.color = 0xFFFFFF;
}
}
]]>









Leave a Comment

Your email address will not be published.