actionscript-3apache-flexadvanceddatagriditemrenderers

how to color advanceddatagrid column background based on condition?


AdvancedDataGrid does not allow me to use column level itemrenderizer nor style function using which i should fill the background color of the column on specific conditions on each row .

I tried the style function where it changes the text color but not the background color for the cell >i do not have the idea about how to use a itemrender to override properties of ADG .

Please help me i tried all possible ways and this is my last hope to get some solution My code:

        <mx:AdvancedDataGridColumnGroup headerText="Time Frame">    
            <mx:AdvancedDataGridColumn dataField="region" headerText="Region"/>
            <mx:AdvancedDataGridColumn dataField="cat1" headerText="Cat 1"/>
            <mx:AdvancedDataGridColumn dataField="cat2" headerText="Cat 2"/>
        </mx:AdvancedDataGridColumnGroup> 
            <mx:AdvancedDataGridColumn id="levelfield" dataField="level" headerText="level"  styleFunction="myColStyleFunc" />
        <mx:AdvancedDataGridColumnGroup headerText="Role">    
            <mx:AdvancedDataGridColumn dataField="operation" headerText="Operation" />
        </mx:AdvancedDataGridColumnGroup> 

Function

public function myColStyleFunc(data:Object, col:AdvancedDataGridColumn):Object
{
    if(data["level"]== 'Level 1'){
        return {backgroundColor:0x00FF00};
}

Solution

  • You may need to write your own item renderer overriding set data method for that as shown below. Name of the class is ColoredHeaderRenderer.

    <s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                      xmlns:s="library://ns.adobe.com/flex/spark" 
                                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                                      focusEnabled="true" xmlns:local="*">
        <fx:Script>
            <![CDATA[
    
                override public function set data(value:Object):void {
                      if(value.Actual == 29134) {
                          lblData.getTxt().background = true;
                          lblData.getTxt().backgroundColor = '0xFFFF00';
                      } else if(value.Actual == 38865) {
                          lblData.getTxt().background = true;
                          lblData.getTxt().backgroundColor = '0xFF0000';
                      }
                       super.data=value;  
                }
            ]]>
        </fx:Script>
        <local:CustomLabel id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}"/>
    </s:MXAdvancedDataGridItemRenderer>
    

    I have tried this with the following sample code:

    <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" xmlns:local="*">
        <fx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                [Bindable]
                private var dpHierarchy:ArrayCollection = new ArrayCollection([
                    {Region:"Southwest", categories: [
                        {Region:"Arizona", categories: [ 
                            {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                            {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
                        {Region:"Central California", categories: [ 
                            {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
                        {Region:"Nevada", categories: [ 
                            {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
                        {Region:"Northern California", categories: [ 
                            {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                            {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
                        {Region:"Southern California", categories: [ 
                            {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                            {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
                    ]}
                ]);
            ]]>
        </fx:Script>
    
        <mx:AdvancedDataGrid width="100%" height="100%">
            <mx:dataProvider>
                <mx:HierarchicalData source="{dpHierarchy}" 
                                     childrenField="categories"/>
            </mx:dataProvider>
            <mx:columns>
                <mx:AdvancedDataGridColumn dataField="Region"/>
                <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                           headerText="Territory Rep"/>
                <mx:AdvancedDataGridColumn dataField="Actual" itemRenderer="ColoredHeaderRenderer"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:columns>
        </mx:AdvancedDataGrid>
    </s:Application>
    

    And it works fine as shown below: enter image description here