Solved

Changing font color on a datagrid

Posted on 2003-12-10
4
892 Views
Last Modified: 2013-12-03
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();
                  style_sheet.load(CssUrl);      
              }
      }

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

      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;
                  }
                  return;
            }
            
            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 !!!");
            return;
      }
      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;
                  break;
            case "Razon":
                  var objData = itemObj.Razon.datos;
                  var objStyle = itemObj.Razon.estilo;
                  break;
            case "RFC":
                  var objData = itemObj.RFC.datos;
                  var objStyle = itemObj.RFC.estilo;
                  break;
            case "Clase":
                  var objData = itemObj.Clase.datos;
                  var objStyle = itemObj.Clase.estilo;
                  break;
            case "Usuario":
                  var objData = itemObj.Usuario.datos;
                  var objStyle = itemObj.Usuario.estilo;
                  break;
      }
      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;
resultados.addColumn(column);
0
Comment
Question by:AllordenS
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 9

Accepted Solution

by:
OBCT earned 500 total points
ID: 10016350
AllordenS,

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:

Style
 Description
 
backgroundColor
 The background color can be set for the whole grid or for each column.
 
labelStyle
 The font style can be set for the whole grid or for each column.
 
headerStyle
 A CSS Style Declaration for the column header that can be applied to a grid or column.
 
vGridLines
 A Boolean value that indicates whether to show vertical grid lines (true) or not (false).
 
hGridLines
 A Boolean value that indicates whether to show horizontal grid lines (true) or not (false).
 
vGridLineColor
 The color of the vertical grid lines.
 
hGridLineColor
 The color of the horizontal grid lines.
 
headerColor
 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.

Cheers

-OBCT
0
 
LVL 9

Expert Comment

by:OBCT
ID: 11005650
AllordenS,

Please post a comment or close this question.

Cheers

-OBCT
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question