4 Replies Latest reply on Dec 22, 2006 7:39 AM by Hobbitville

    Change datagrid cell background color

    Hobbitville
      Hi,
      I have a datagrid and I provide data for it. I need to configure background color for every cell of a column
      I tried using itemrendere but it works for all cells of the column, not cell by cell.
      Could you please help me? Thanks!
      This is my .mxml file:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
      <mx:Script>
      <![CDATA[
      import mx.controls.dataGridClasses.DataGridColumn;
      import mx.controls.DataGrid;
      import mx.collections.ArrayCollection;

      public function initApp():void {
      var mydataArray:Array = new Array(2);
      mydataArray[0] = {cl1: "company A", cl2: "OK"};
      mydataArray[1] = {cl1: "company B", cl2: "KO"};

      mydg.dataProvider = mydataArray;
      }
      ]]>
      </mx:Script>
      <mx:DataGrid id="mydg" x="29" y="10" width="300" height="184">
      <mx:columns>
      <mx:DataGridColumn headerText="Column 1" dataField="cl1"/>
      <mx:DataGridColumn wordWrap="true" headerText="Column 2" dataField="cl2">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox backgroundColor="#ff0000" width="100%" height="100%">
      <mx:Text width="100" id="mytext" text="{data.cl2}"/>
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>
      </mx:Application>
        • 1. Re: Change datagrid cell background color
          peterent Level 2
          What is the criteria for deciding what color to make a cell? You will need an itemRenderer to do this, but they can be very flexible.
          • 2. Re: Change datagrid cell background color
            Hobbitville Level 1
            When I create mydataArray I take values from another array. So when I pass dataprovider to the grid, I want to tell to the grid also wich cells will be red, and wich cells will be green.
            Example:

            var mydataArray:Array = new Array(2);
            mydataArray[0] = {cl1: "company A", cl2: "OK", cl3: "green"};
            mydataArray[1] = {cl1: "company B", cl2: "KO", cl3: "red"};

            mydg.dataProvider = mydataArray;
            • 3. Re: Change datagrid cell background color
              peterent Level 2
              Create a new MXML file, call it whatever you like, such as ColoredCell.mxml and use Canvas the root tag. If you are familiar enough with ActionScript, you can use the DrawingAPI to do this as well. Using a Canvas is easier to understand.

              <mx:Canvas xmlns:xml="...usual stuff here..." backgroundColor="{cellColor}" >
              <mx:Script><![CDATA[
              [Bindable] private var cellColor:Number;
              override public function set data( value:Object ) : void
              {
              super.data = value; // VERY IMPORTANT
              if( data.cl3 == "green" ) cellColor = 0x00FF00;
              else if( data.cl3 == "red" ) cellColor = 0xFF00;
              // etc if you have more
              }
              <mx:Text text="{data.cl2}" /> <!-- or whatever column you are using -->
              </mx:Canvas>

              The set data override will change the value of the cellColor variable. The cellColor variable is dynamically bound to the backgroundColor style of the root tag. So that's how the background color can change.

              You need the Text (or Label if you prefer) in the Canvas to show the value of the cell.

              One short-cut you can take is when you are setting the color in your data. Instead of setting the value to strings, like "green" and "red", set the value to the actual color value, like 0xFF0000 and 0x00FF00. Then you won't have to do the IF-test in the itemRenderer:

              super.data = value;
              cellColor = data.cl3;
              • 4. Re: Change datagrid cell background color
                Hobbitville Level 1
                Thanks a lot for your help. Great, it works!