4 Replies Latest reply on Sep 8, 2009 10:07 PM by Arunkumar S

    How to change the color of the data in a advanceddatagrid based on the its value

    Arunkumar S Level 1

      Hi All,

           I'm loading the data into AdvanceddataGrid from XML. My requirement is like; if the value of the loaded data is lower than 5, then it should be shown Green in color. Or else if it is greater than 5 it should be shown in Red color.

           It would be a great help for me if someone could help me in this issue.

        • 1. Re: How to change the color of the data in a advanceddatagrid based on the its value
          ShardulSingh Level 3

          Hi, Pls find the solution of your problem,let me know if it helps you or you have any issue with this.

           

          MainApplication.mxml

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="vertical">

          <mx:Script>

          <![CDATA[

          import mx.collections.ArrayCollection;

          import mx.events.ListEvent;

          [Bindable]

          private var listDataArrayCollection:ArrayCollection=

          new ArrayCollection([

          {seq:'1',names:'John'},

          {seq:'2', names:'Alex'},

          {seq:'3', names:'Peter'},

          {seq:'4', names:'Sam'},

          {seq:'5', names:'Alis'},

          {seq:'6', names:'Robin'},

          {seq:'7', names:'Mark'},

          {seq:'8', names:'Steave'},

          {seq:'9', names:'Fill'},

          {seq:'10', names:'Abraham'},

          {seq:'11', names:'Hennery'},

          {seq:'12', names:'Luis'},

          {seq:'13', names:'Herry'},

          {seq:'14', names:'Markus'},

          {seq:'15', names:'Flip'},

          {seq:'16', names:'John_1'},

          {seq:'17', names:'Alex_1'},

          ]);

           

          ]]>

          </mx:Script>

          <mx:VBox width="300" height="100%"

          horizontalAlign="center"

          verticalAlign="middle">

          <mx:AdvancedDataGrid id="listComponent" width="50%"

          height="100%"

          borderStyle="none"

          dataProvider="{listDataArrayCollection}">

          <mx:groupedColumns>

          <mx:AdvancedDataGridColumn width="50" dataField="{data.seq}" headerText="Seq" itemRenderer="SeqItemRenderer" />

          <mx:AdvancedDataGridColumn width="100" dataField="names" headerText="Name"/>

          </mx:groupedColumns>

          </mx:AdvancedDataGrid>

          </mx:VBox>

          </mx:Application>

           

           

           

           

           

          SeqItemRenderer.mxml

          <?xml version="1.0" encoding="utf-8"?>

          <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"

          width="30" height="30" horizontalGap="5"

          horizontalScrollPolicy="off">

          <mx:Script>

          <![CDATA[

          override public function set data(value:Object):void

          {

          super.data = value;

          }

          ]]>

          </mx:Script>

          <mx:TextInput width="75"

          height="30"

          text="{data.seq}"

          editable="false"

          color="{data.seq > 5 ? 0xFF0000 : 0x00FF00}"/>

          </mx:HBox>

           

           

           

           

           

           

           

           

           

          with Regards,

           

          Shardul singh Bartwal

          1 person found this helpful
          • 2. Re: How to change the color of the data in a advanceddatagrid based on the its value
            TheFlexGuy Level 2

            Shardul is on the right track, but making the component extend TextInput may be unnecessary.  You'll want to extend a basic component since this could be displaying hundreds of items in a grid.  The bigger each renderer is, the more memory you'll be using.

             

            Here's another renderer that just extends label.  You can change seq to be the dataField you're pulling the value from that should be colored:

             

            package com.whatever
            {
                 import mx.controls.Label;
                 
                 public class GreenRedRenderer extends Label
                 {
                      public function GreenRedRenderer()
                      {
                      }
                      
                      override public function set data(value:Object):void
                      {
                                    super.data = value;
                           var num:Number = Number(value["seq"]);
                                    if (num < 5)
                                    {
                                      // If number is less than 5, display in green.
                                      setStyle("color", "green");
                                    }
                                    else if(num > 5)
                                    {
                                      // If number is greater than 5, display in red.
                                      setStyle("color", "red");
                                    }
                                    else
                                    {
                                      // Don't forget the case where it IS 5 and needs no color.
                                       setStyle("color", "black");
                                    }
                         }
                    }
            }
            

             

            -Marty [ http://www.theflexguy.com ]

            Helpful/Answered? Please mark it as such.

            1 person found this helpful
            • 3. Re: How to change the color of the data in a advanceddatagrid based on the its value
              Arunkumar S Level 1

              Hi Flex Guy,

               

                   Your suggestion is so helpful for me. In your solution you have loaded the value from an Array. But what i'm doing is loading the data from a xml file. So it would be nice if you be specific on how to change the color if load the values from XML.

               

                   In the same time i also tried your suggestion, while trying that i'm getting all the values in green.

               

              My MXML code is as follows,

                  

               

               

              <mx:AdvancedDataGrid id="MonthTillDateGrid" width="567" height="233" editable="false" showEffect="cube"

              enabled="true" dataProvider="{MTDXml}" headerWordWrap="true" lockedColumnCount="1" wordWrap="true" sortExpertMode="true" selectionMode="singleCell"

              itemClick="ClickedElement(event.columnIndex,event.rowIndex,event)" borderStyle="none" color="#000000" itemRenderer="com.GreenRedRenderer" >

               

               

               

               

               

               

               

               

               

              <mx:columns>

               

              <mx:AdvancedDataGridColumn sortable="false" headerText="Expense Category" dataField="ExpenseCategory" textAlign="left" />

               

              <mx:AdvancedDataGridColumn id="PlanId" width="70" sortable="false" headerText="Plan" dataField="Plan" textAlign="left" />

               

              <mx:AdvancedDataGridColumn width="70" sortable="false" headerText="Forecast" dataField="Forecast" textAlign="left" />

               

              <mx:AdvancedDataGridColumn width="70" sortable="false" headerText="Actual" dataField="Actual" textAlign="left" />

               

              <mx:AdvancedDataGridColumn width="85" sortable="false" headerText="Forecast %" dataField="ForecastPerc" textAlign="left" />

               

              <mx:AdvancedDataGridColumn width="70" sortable="false" headerText="Actual %" dataField="ActualPerc" textAlign="left" />

               

              </mx:columns>

               

              </mx:AdvancedDataGrid>

               

              And My package is,

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

              package

               

               

               

                   import mx.controls.Label;

               

               

               

                   public class GreenRedRenderer extends Label

                   {

               

              com

              {

               

               

                        public function GreenRedRenderer()

                        {

                        }

               

               

               

                        override public function set data(value:Object):void

                        {

               

               

                             super.data = value;

               

               

                            var num:Number = Number(value["MTDXml.cg.Plan"]);

               

               

                             if (num < 5)

                             {

               

               

                                  // If number is less than 5, display in green.

               

               

                                  setStyle(

               

              "color", "green");

                             }

               

               

                             else if (num > 5)

                             {

               

               

                                  // If number is greater than 5, display in red.

               

               

                                  setStyle(

               

              "color", "red");

                             }

               

               

                             else

               

               

                             {

               

               

               

                                  // Don't forget the case where it IS 5 and needs no color.

               

               

                                  setStyle(

               

              "color", "black");

                             }

                        }

                   }

              }

               

              I might have wrong in the line marked in Red.

              Please help me on this.