5 Replies Latest reply on Dec 26, 2011 5:44 AM by JoeBrain00

    spark DataGrid - how to dynamically change itemRenderer colors in code

    JoeBrain00

      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!

        • 1. Re: spark DataGrid - how to dynamically change itemRenderer colors in code
          Claudiu Ursica Level 4

          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

          • 2. Re: spark DataGrid - how to dynamically change itemRenderer colors in code
            Carol L. Frampton Level 2

            Look at IGridItemRenderer.prepare().

             

            Carol

            • 3. Re: spark DataGrid - how to dynamically change itemRenderer colors in code
              JoeBrain00 Level 1

              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>

              • 4. Re: spark DataGrid - how to dynamically change itemRenderer colors in code
                Carol L. Frampton Level 2

                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>

                • 5. Re: spark DataGrid - how to dynamically change itemRenderer colors in code
                  JoeBrain00 Level 1

                  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!  :-)