Skip to main content
Participant
December 21, 2011
Answered

spark DataGrid - how to dynamically change itemRenderer colors in code

  • December 21, 2011
  • 3 replies
  • 11200 views

I need to dynamically change some attributes of my spark DataGrid at runtime, such as header colors, column colors and whether or not to show the grids row/col lines.  I've seen hundreds of examples of doing this, but they are all hard-coded.  For instance; by creating a custom "BlueGridHeaderRenderer" and the color is hard coded to Blue. 

What I need to do is to be able to change the color at runtime via ActionScript.  For instance; by creating a MyHeaderRenderer and being able to set the color dynamically in code through either a function or property. 

Seems like a pretty simple request...but I've been banging my head against the wall on this one.  Is this even possible??  If so, can someone share some sample code, or at least point me in a direction?

Thanks!

This topic has been closed for replies.
Correct answer Carol_L__Frampton

Look at IGridItemRenderer.prepare().

Carol

3 replies

Participant
December 21, 2011

Update: Modified the code a bit more...

Thank you Carol for pointing me in the right direction!   A combination of the IGridItemRenderer.prepare() with the ClassFactory.properties did the trick!  Now I can change the item renderer's properties on the fly via code and have the colors be driven via logic, or an XML file.

Here is a sample application that I modified to show how it works...

******************************************************************
** THE MAIN APPLICATION CODE
**
** Create a new application and paste this in
** File->New->MXML Application
******************************************************************

<?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:Declarations>
  <s:ArrayCollection id="productInfo">
   <fx:Object product="Winnie the Pooh" inStock="false" price="19.99" />
   <fx:Object product="Dora the Explorer" inStock="true" price="24.99" />
   <fx:Object product="Elmo" inStock="true" price="29.99" />
   <fx:Object product="Olivia the Pig" inStock="true" price="12.66" />
   <fx:Object product="Little People" inStock="true" price="25.99" />
   <fx:Object product="Sophie Giraffe" inStock="false" price="9.99" />
   <fx:Object product="Snoopy" inStock="true" price="6.55" />
  </s:ArrayCollection>
 
  <s:ArrayList id="columns1" >
   <s:GridColumn headerText="Product" dataField="product" itemRendererFunction="MyCustomItemRendererFunction" />
   <s:GridColumn headerText="Price" dataField="price" itemRendererFunction="MyCustomItemRendererFunction"/>
   <s:GridColumn headerText="In Stock?" dataField="inStock" itemRendererFunction="MyCustomItemRendererFunction" />
  </s:ArrayList>
 
</fx:Declarations>

<fx:Script>
  <![CDATA[
   import mx.core.ClassFactory;
   import spark.skins.spark.DefaultGridItemRenderer;
  
   private var varDefaultBackgroundColor:uint = 0xFFFFFF;
   private var varDefaultForegroundColor:uint= 0x000000;
  
   private var varPriceBackgroundColor:uint= 0xFF0000;
   private var varPriceForegroundColor:uint= 0xFFFFFF;
  
     
   private function MyCustomItemRendererFunction(item:Object, column:GridColumn):ClassFactory
   {
   
    // Create a Class Factory variable
    var myRendererObject:ClassFactory;
   
    // This is the "default" color is nothing else happens
    // I'm passing it a pointer to "MyItemRenderer"
    myRendererObject = new ClassFactory(MyItemRenderer);
    myRendererObject.properties = { MyBackgroundColor: varDefaultBackgroundColor, MyForegroundColor: varDefaultForegroundColor };
   
    if (column.dataField == "price")
    {
     // override the renderer and set a diffent color "in code" using a variable
     myRendererObject.properties = { MyBackgroundColor: varPriceBackgroundColor, MyForegroundColor: varPriceForegroundColor };
    }
   
       
    return myRendererObject;
   
   }
  
  ]]>
</fx:Script>

<s:DataGrid id="ProductGrid" dataProvider="{productInfo}" columns="{columns1}" width="360"/>

</s:Application>

*******************************************************************************
** MyItemRenderer CODE
**
** Create a new item renderer called "MyItemRenderer" and paste this in
** File->New->Item 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" clipAndEnableScrolling="true">

<fx:Script>
  <![CDATA[
  
   public var MyBackgroundColor:uint;
   public var MyForegroundColor:uint;
     
   override public function prepare(hasBeenRecycled:Boolean):void
   {
    MyFillColor.color = MyBackgroundColor;
    MyTextColor.text = data[column.dataField];
    MyTextColor.setStyle("color", MyForegroundColor);
   }
  
  ]]>
</fx:Script>
<s:Rect top="0" bottom="0" right="0" left="0">
  <s:fill>
   <s:SolidColor id="MyFillColor" alpha=".5"/>
  </s:fill>
</s:Rect>
<s:Label id="MyTextColor" top="9" left="7" alpha="1"/>

</s:GridItemRenderer>

Participating Frequently
December 22, 2011

I think a better implementation of the IR is:

<?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[

            import spark.components.gridClasses.GridColumn;

           

            public var MyBackgroundColor:uint;

            public var MyForegroundColor:uint;

           

            override public function prepare(hasBeenRecycled:Boolean):void

            {

                MyTextColor.text = data[column.dataField];

                if (column.dataField == "price")

                {

                    MyFillColor.color = 0xFF0000;

                    MyTextColor.setStyle("color", "0xFFFFFF");

                                       

                }

                else if (column.dataField == "product")

                {

                    MyFillColor.color = 0x0000FF;

                    MyTextColor.setStyle("color", "0xFFFFFF");

                }

                else

                {

                    MyFillColor.color = 0xFFFFFF;

                    MyTextColor.setStyle("color", "0x000000");

                }

            }

           

        ]]>

    </fx:Script>

    <s:Rect top="0" bottom="0" right="0" left="0">

        <s:fill>

            <s:SolidColor id="MyFillColor" alpha=".5"/>

        </s:fill>

    </s:Rect>

    <s:Label id="MyTextColor" top="9" left="7" alpha="1"/>

   

</s:GridItemRenderer>

and the DG is:

<?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:Declarations>

        <s:ArrayCollection id="productInfo">

            <fx:Object product="Winnie the Pooh" inStock="false" price="19.99" />

            <fx:Object product="Dora the Explorer" inStock="true" price="24.99" />

            <fx:Object product="Elmo" inStock="true" price="29.99" />

            <fx:Object product="Olivia the Pig" inStock="true" price="12.66" />

            <fx:Object product="Little People" inStock="true" price="25.99" />

            <fx:Object product="Sophie Giraffe" inStock="false" price="9.99" />

            <fx:Object product="Snoopy" inStock="true" price="6.55" />

        </s:ArrayCollection>

       

        <s:ArrayList id="columns1" >

            <s:GridColumn headerText="Product" dataField="product" />

            <s:GridColumn headerText="Price" dataField="price" />

            <s:GridColumn headerText="In Stock?" dataField="inStock" />

        </s:ArrayList>       

    </fx:Declarations>

   

    <s:DataGrid id="ProductGrid" dataProvider="{productInfo}" columns="{columns1}" width="360" itemRenderer="MyItemRenderer"/>

   

</s:Application>

Participant
December 26, 2011

Thanks, but that kind of defeats my ultimate goal of being able to "send the colors into" the IR.  Ultimately, I want to store the colors in a configurable XML file somewhere.  Thanks for your suggestions though!  :-)

Carol_L__FramptonCorrect answer
Participating Frequently
December 21, 2011

Look at IGridItemRenderer.prepare().

Carol

Participating Frequently
December 21, 2011

You should be able to pass the color to the renderer something like

myHeaderRenderer.properties = ;

And inside force a repaint accordingly. Did not try it myself though.

C