3 Replies Latest reply on Sep 15, 2008 8:02 AM by nikos101

    DataGrid - Change Text Color of entire Row

    anoweb Level 1
      I have a DataGrid and I need to color the text of an entire row based on some value in one of the columns. For example if I had a grid with columns (Name, Age, Country). If the "Age" column for a particular row was less than 18 the text for the entire row should be "blue". I have found examples on how to make the entire background of the row colored, by override the drawRowBackground function of the DataGrid, but I need the text to be colored.

      I have tried extending DataGrid and overriding the "drawItem" function ( code is attached). However it only colors the text of the first column of the row, not the entire row.

      Any thoughts?
        • 1. Re: DataGrid - Change Text Color of entire Row
          Level 7

          "anoweb" <webforumsuser@macromedia.com> wrote in message
          news:gale2a$46g$1@forums.macromedia.com...
          >I have a DataGrid and I need to color the text of an entire row based on
          >some
          > value in one of the columns. For example if I had a grid with columns
          > (Name,
          > Age, Country). If the "Age" column for a particular row was less than 18
          > the
          > text for the entire row should be "blue". I have found examples on how to
          > make
          > the entire background of the row colored, by override the
          > drawRowBackground
          > function of the DataGrid, but I need the text to be colored.
          >
          > I have tried extending DataGrid and overriding the "drawItem" function
          > ( code is attached). However it only colors the text of the first
          > column
          > of the row, not the entire row.
          >
          > Any thoughts?
          >
          > override protected function drawItem(item:IListItemRenderer,
          > selected:Boolean=false, highlighted:Boolean=false, caret:Boolean=false,
          > transition:Boolean=false):void
          > {
          > super.drawItem(item, selected, highlighted, caret, transition);
          >
          > var ren:DataGridItemRenderer = (item as DataGridItemRenderer);
          > var data:Person = item.data as Person;
          >
          > if (data.age < 18)
          > {
          > ren.setStyle("color", 0x0000FF);
          > }
          > }

          This is one possible approach:

          http://flexdiary.blogspot.com/2008/08/tilelist-with-stylefunction.html


          • 2. Re: DataGrid - Change Text Color of entire Row
            nikos101 Level 2
            You need a custom item renderer eg

            <mx:DataGridColumn id = "se" dataField="comment"
            headerText="Comment" editable="false" sortable="false" wordWrap="true" width="380">

            <mx:itemRenderer>
            <mx:Component>
            <mx:TextInput height="100%" borderStyle="none" editable="false"
            backgroundColor="{outerDocument.rendererBG(data.positionRank)}"/>
            </mx:Component>
            </mx:itemRenderer>


            </mx:DataGridColumn>


            /**
            * This method is used for changing the background of a datagrid, has to be public for
            * the item renderer to see
            *
            **/

            public function rendererBG(positionRank:String):uint{
            switch(positionRank){
            case "3":
            return 0xe1deae;
            break;
            case "5":
            return 0x90d7e7;
            break;
            case "7":
            return 0xfac396;
            break;
            case "20":
            return 0xffffaa;
            break;
            default:
            return 0xffffff;
            break;
            }
            }
            • 3. Re: DataGrid - Change Text Color of entire Row
              nikos101 Level 2
              NB you have to use outerDocument because the customrender cannot see the function as it is out of scope