Change Background Color of datagrid cell based on more than one condition in Flex

Question

Hi I'm very new to Adobe Flex, apologize if my question sounds stupid. Anyhow here it is. I am trying simple datagrid which checks basically 2 conditions 1) If the Artist is 01 and Album is 'Album 01' set Background to corresponding cell in Column 'Year'.

With my below code 'set Style' to Background Color as property is not working but changing the font color is working and secondly i am not sure how to write the code to get the above nested conditions working? If anybody could help me in this aspect i would be really be grateful. Thank you! in Advance.

Below is the code: Newdatagrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 

           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"          minHeight="600" >
<fx:Script>
    <![CDATA[
        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'},

        ]); 

    ]]>

</fx:Script>


<s:VGroup>
    <s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">   
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="Artist"    headerText="Artist" itemRenderer="CellRenderer"/>
                <s:GridColumn dataField="Album" headerText="Album" itemRenderer="CellRenderer"/>
                <s:GridColumn dataField="Year" headerText="Year" itemRenderer="CellRenderer"/>
            </s:ArrayList>
        </s:columns>       
    </s:DataGrid> 
</s:VGroup>
</s:Application>

Renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                    implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
    <![CDATA[
        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;
        }

    ]]>
</fx:Script>
<s:Label id="lblData" top="9" left="7" width="100%" height="100%"    textAlign="center"/>

</s:GridItemRenderer>

My Desired Output: Condition: If Artist=01 and Year >= 2008 then cell Background of Year change to Red

Answer 1

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

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

an example would be something like:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

    <fx:Script>
        <![CDATA[
            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;
                }
            }
        ]]>
    </fx:Script>

    <s:Rect top="0" bottom="0" left="0" right="0">
        <s:fill>
            <s:SolidColor id="bgColor" color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
    <s:Label id="labelDisplay" top="9" left="7"/>

</s:GridItemRenderer>

Answer 2

    <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"          minHeight="600" >
    <fx:Script>
        <![CDATA[
            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'},

            ]); 

        ]]>

    </fx:Script>


    <s:VGroup>
        <s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">   
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="Artist"    headerText="Artist"/>
                    <s:GridColumn dataField="Album" headerText="Album"/>
                    <s:GridColumn dataField="Year" headerText="Year" itemRenderer="CellRenderer"/>
                </s:ArrayList>
            </s:columns>       
        </s:DataGrid> 
    </s:VGroup>
</s:WindowedApplication>

----------------------------CellRenderer.mxml------------------------

    <?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

    <fx:Script>
        <![CDATA[
            override public function prepare(hasBeenRecycled:Boolean):void {
                lblData.text = data[column.dataField]
                if(this.data) {
                    lblData.text = data[column.dataField];

                    if(this.data.Year >= 2008&&this.data.Artist==01)
                        bgColor.color = 0xFF0000;
                    else
                        bgColor.color = 0xFFFFFF;
                }
            }
        ]]>
    </fx:Script>

    <s:Rect top="0" bottom="0" left="0" right="0">
        <s:fill>
            <s:SolidColor id="bgColor" color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
    <s:Label id="lblData" top="9" left="7" width="100%" height="100%" textAlign="center"/>

</s:GridItemRenderer>