0 Replies Latest reply on Jun 18, 2008 7:54 AM by dragonmagik

    DataGrid ItemRender and font family

    dragonmagik
      i am writing a custom data grid ItemRender that, for every cell, displays a numeric value. Additionally, if the xml data structure defines an attribute for a given row, it is supposed to display a colored arrow in the same cell.

      Reading the data and determining if to display the arrow, and the color of the arrow work fine. I am trying to embed the windgings font to display the arrow, that way I can set the color programatically. As I said, reading the data works fine, the coloring of the 'arrow' works fine. My problem is I cannot change the fontFamily of any label in the item renderer. Even the entire renderer itself. Below is my code, followed by several other things I have tried. Thanks for the help.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" implements="mx.controls.listClasses.IDropInListItemRenderer"
      horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:Style>
      @font-face
      {
      src: local("wingdings");
      fontFamily: myArrowFont;
      font-anti-alias-type: advanced;
      font-weight: bold;
      }

      .arrowStyle
      {
      fontFamily: myArrowFont;
      font-weight: bold;
      font-size: 12;
      }

      </mx:Style>
      <mx:Script>
      <![CDATA[
      import mx.controls.listClasses.BaseListData;
      import mx.controls.dataGridClasses.DataGridListData;

      protected var _listData:DataGridListData;

      public function get listData():BaseListData
      {
      return _listData;
      }
      public function set listData(value:BaseListData):void
      {
      _listData = DataGridListData(value);
      invalidateProperties();
      }

      override public function set data(value:Object):void
      {
      super.data = value;
      cellArrow.setStyle('color',value[_listData.dataField].@color);
      switch(value[_listData.dataField].@direction.toString())
      {
      case 'up':
      cellArrow.text = 'é';
      break;
      case 'down':
      cellArrow.text = 'ê';
      break;
      case 'equal':
      cellArrow.text = 'd';
      break;
      default:
      cellArrow.text = '';
      break;
      }
      cellText.text = value[_listData.dataField];
      }
      ]]>
      </mx:Script>
      <mx:Label id="cellText" text=""/>
      <mx:Spacer width="100%"/>
      <mx:Label id="cellArrow" styleName="arrowStyle" text=""/>
      </mx:HBox>

      I have tried using <mx:Label id="cellArrow" fontFamily='myArrowFont'/>
      I have set the fontFamily='myArrowFont' in the base HBox tag as well, and it doesn't change the font of either the cellArrow or cellText label.
      I have also used cellArrow.setStyle('fontFamily','myArrowFont') in the override set data method.

      I have written the same component in ActionScript implementing the same functionality.

      The cellArrow label's text and color are set correctly to the data, however I cannot get the font to change to windgings.

      I have tried setting the DataGridColumn fontFamily to the wingdings font, and all it does is change the header text of the column, not any of the rows.


      The actual datagrid is created entirely in actionscript, because it is part of a control that will build a datagrid with X number of columns, defined in a data structure. That code works fine as well, and is below, incase it helps.

      //_dataP is an XMLList from an httpservice or web service that defines our grids

      var colsX:XMLList = _dataP..column; //get an xmllist of our columns
      var len:int = colsX.length(); //and store the length

      var cols:Array = new Array(); //create an empty array to hold each column
      var col:DataGridColumn; //a data grid column reference
      for(var i:int = 0; i < len; i++)
      {
      col = new DataGridColumn(); //create a new column
      col.headerText = colsX .@text; //set the header text
      col.dataField = colsX
      .@field; //and data field
      col.itemRenderer = new ClassFactory(quadBoxItemRenderer);
      cols.push(col); //add it to the array
      }

      _grid.columns = cols; //set our columns array as the columns of the grid
      var rows:XMLList = _dataP..row;
      _grid.rowCount = (rows.length() == 0) ? 1 : rows.length();
      _grid.dataProvider = rows; //and give it the list of rows
      _grid.percentWidth = 100;
      _gridBox.addChild(_grid);

      any help is vastly appreciated. Thanks.