Changing font color on a datagrid

Hi, I am trying to change the font color or the row color on a datagrid component on Flash MX 2004, the data comes from an array.

I tried with a cell render putting the text on a text field and setting the color using html, I was able to chage the color, but now I can't order the columns when clicking the column header.

I would prefer to do it without cellRendering any way here is how I tried to do it:

The HtmlCellRender I am using is this:

import mx.core.UIComponent;
import mx.controls.TextArea;
import TextField.StyleSheet;

class HtmlCellRenderer extends UIComponent

      static public var CssUrl : String;
      public var style_sheet : StyleSheet = null;
      var htmlComponent : TextField;
      var listOwner : MovieClip;  
      var getCellIndex : Function;
      var getDataLabel : Function;      
      var previousLabel:String = null;

      function HtmlCellRenderer()
            if (CssUrl != undefined && style_sheet == null) {
                  style_sheet = new TextField.StyleSheet();

      function createChildren(Void) : Void
            if (htmlComponent == undefined)
                  createLabel("htmlComponent", 1);
            htmlComponent.html = true;
            htmlComponent.multiline = false;
            htmlComponent.wordWrap = false;
            htmlComponent.selectable = false;

      function size(Void) : Void
            var h = __height;
            var w = __width;
            htmlComponent.setSize(w-4, Math.max(h, listOwner.rowHeight-4));
            htmlComponent._x = 1;
            htmlComponent._y = 1;

      function setValue(str:String, item:Object, sel:Boolean) : Void
                        if (item == undefined) {
                  if (htmlComponent != undefined) {
                        htmlComponent.text = "";
                        htmlComponent._visible = false;
                        previousLabel = null;
            htmlComponent._visible = true;
            var columnIndex = this["columnIndex"];
                                var columnName = listOwner.getColumnAt(columnIndex).columnName;
            var htmlFunction : Function = listOwner.getColumnAt(columnIndex).htmlFunction;
            if (htmlFunction != undefined) {
                  var label = htmlFunction(item, columnName);
                  if (label != undefined) {
                        if (label != previousLabel) {
                              var oldStyleSheet = htmlComponent.styleSheet
                              if (oldStyleSheet != style_sheet && style_sheet != null) {
                                    htmlComponent.styleSheet = style_sheet;
                              htmlComponent.text = label;
                              previousLabel = label;
                  } else {
                        htmlComponent.text = "";                        

      function getPreferredHeight(Void) : Number
            return 16;

      function getPreferredWidth(Void) : Number
            return 20;

And then in the movie I have this function:

HtmlFunction = function (itemObj:Object, columnName:String) {
      if (itemObj == undefined ) {
            trace("A bug !!!");
      var objData = itemObj.Cliente.datos;
      var objStyle = itemObj.Cliente.estile;
      var html:String;
      switch (columnName) {
            case "Cliente":
                  var objData = itemObj.Cliente.datos;
                  var objStyle = itemObj.Cliente.estilo;
            case "Razon":
                  var objData = itemObj.Razon.datos;
                  var objStyle = itemObj.Razon.estilo;
            case "RFC":
                  var objData = itemObj.RFC.datos;
                  var objStyle = itemObj.RFC.estilo;
            case "Clase":
                  var objData = itemObj.Clase.datos;
                  var objStyle = itemObj.Clase.estilo;
            case "Usuario":
                  var objData = itemObj.Usuario.datos;
                  var objStyle = itemObj.Usuario.estilo;
      html="<p class='" + objStyle +  "'>" + objData + "</p>"
      return html;

And this is the way I set up the columns:

var column = new DataGridColumn("Cliente");
column.headerText = "Cliente";
column.width = 50;
column.cellRenderer = "HtmlCellRenderer";
column["htmlFunction"] = HtmlFunction;
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


I appologize for not giving an indepth answer however I think your problem will be easily fixed after reading through the following help guide supplied by Macromedia, Inc.

Customizing the DataGrid component (Flash Professional only)

You can transform a DataGrid component horizontally and vertically during authoring and runtime. While authoring, select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. At runtime, use the setSize() method (see UIObject.setSize()). If there is no horizontal scroll bar, column widths adjust proportionally. If column (and therefore, cell) size adjustment occurs, then text in the cells may be clipped.

Using styles with the DataGrid component
You can set style properties to change the appearance of a DataGrid component. The DataGrid component inherits Halo styles from the List component. (For more information, see Using styles with the List component.) The DataGrid component also supports the following Halo styles:

 The background color can be set for the whole grid or for each column.
 The font style can be set for the whole grid or for each column.
 A CSS Style Declaration for the column header that can be applied to a grid or column.
 A Boolean value that indicates whether to show vertical grid lines (true) or not (false).
 A Boolean value that indicates whether to show horizontal grid lines (true) or not (false).
 The color of the vertical grid lines.
 The color of the horizontal grid lines.
 The color of the column headers.

If the above table indicates that a style can be set for a column, you can use the following syntax to set the style:

grid.getColumnAt(3).setStyle("backgroundColor", 0xff00aa)

Using skins with the DataGrid component
The skins that the DataGrid component uses to represent its visual states are included in the subcomponents from which the data grid is composed (ScrollPane and RectBorder). For information about their skins, see Using skins with the ScrollPane component and Using skins with the List component.

The rollover and selection underlays, however, use the ActionScript Drawing API. To skin these portions of the data grid while authoring, modify the ActionScript code in the skin symbols in the Flash UI Components 2/Themes/MMDefault/datagrid/ skins states folder in the library of one of the themes FLA files.

If you need any help putting this into practice, let me know.



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

Please post a comment or close this question.


It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.