1 Reply Latest reply on Nov 8, 2006 1:12 PM by flex_mo

    DataGrid cell color

    flex_mo
      hi,
      I have a datagrid that has multiple columns and rows.When u click a datagrid column,the requirement is that it has to group the column values and color them.
      for example,if i click on column 1, and it has 5 values.the values are 1,2,2,7,7
      The first one should be of a diff colour,the 2nd and 3rd should be of the same colour(but diff from first one).,the fourth and fifth should be of the same colour(but diff from prev colours).I hope i am clear.can u help with the best way to achieve this.
      Basically dynamically the value needs to get grouped and coloured.
      Thanks in advance

        • 1. Re: DataGrid cell color
          flex_mo Level 1
          Hi,
          I kind of figured the logic and everything out..
          Just one problem exists.When I try to scroll the datagrid,it behaves erratically.
          Can u pls help me to debug this one..

          Here is my code:
          This is for the test example and it has a renderer RendererDGList.mxml and a clearOut.mxml(this is just to remove the colors..so i am not enclosing this one)Right now i am trying only for a single column(first column)..


          test file

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
          <mx:Script>
          <![CDATA[
          import mx.controls.dataGridClasses.DataGridColumn;
          import mx.controls.Alert;
          import mx.controls.dataGridClasses.DataGridListData;
          import mx.events.*;
          [Bindable] public var dgArray:Array=[{col1:"2",col2:"aa",col3:"bb"},{col1:"6",col2:"aa",col3:"bb"},{col1:"2",co l2:"aa",col3:"bb"},{col1:"6",col2:"aa",col3:"bb"},{col1:"6",col2:"aa",col3:"bb"},{col1:"2" ,col2:"aa",col3:"bb"},{col1:"6",col2:"aa",col3:"bb"}];
          static var flag:Boolean=false;
          static var index:int=0;
          static var previndex:int=0;
          public function init():void
          {
          //dg1.addEventListener("collectionChange",callme);
          }

          public function headRelEvt(event:DataGridEvent):void
          {
          RendererDGListData.i=-1;
          RendererDGListData.oldtext="";

          var dgc:DataGridColumn=new DataGridColumn();
          dgc=dg1.columns[event.columnIndex];
          if(event.columnIndex==0)
          {
          var productRenderer:ClassFactory = new ClassFactory(RendererDGListData);
          dgc.editable=false;
          dgc.itemRenderer= productRenderer;
          }
          else
          {
          var rend:ClassFactory=new ClassFactory(clearOut);
          dgc=dg1.columns[0];
          dgc.editable=false;
          dgc.itemRenderer=rend;
          }




          }
          ]]>
          </mx:Script>
          <mx:DataGrid x="64" y="94" id="dg1" dataProvider="{dgArray}" headerRelease="headRelEvt(event)" height="100%" scroll="false">
          <mx:columns>
          <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
          <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
          <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
          </mx:columns>
          </mx:DataGrid>

          </mx:Application>


          RendererDGList.mxml
          <?xml version="1.0"?>
          <!-- RendererDGListData.mxml -->
          <mx:TextArea xmlns:mx=" http://www.adobe.com/2006/mxml" preinitialize="initTA();">

          <mx:Script>
          <![CDATA[

          import mx.controls.dataGridClasses.DataGridListData;
          import flash.events.Event;
          public var colorArray:Array=["Aqua", "Blue", "Gray", "Green", "Lime", "Maroon", "Navy", "Olive", "Purple", "Red", "Silver", "Teal", "White", "Yellow"];
          static var i:int=-1;
          static var oldtext:String="";
          public function initTA():void {
          addEventListener("dataChange", handleDataChanged);

          }

          public function handleDataChanged(event:Event):void {

          // Cast listData to DataGridListData.

          var myListData:DataGridListData = DataGridListData(listData);

          // Access information about the data passed to the item renderer.
          if(oldtext!=text)
          {
          i=i+1;

          }
          //text="row index: " + String(myListData.rowIndex) + " column index: " + String(myListData.columnIndex);
          setStyle("backgroundColor",colorArray );
          text=String(myListData.label);
          oldtext=text;





          }
          ]]>
          </mx:Script>
          </mx:TextArea>