Monday, March 28, 2011

Making font bold on grid row highlight

You may need to change the font Weight/Style or other styles when a grid row is highlighted. You can view the attached example:

How can this be achieved?
There are many ways to do it:
1. You can create a custom renderer for each column in the grid which will change apply the desired style on mouse over of the cell. But this is not the best approach Since, each column will have to have a custom renderer :(
2. Another approach is you can have a style function defined which does the work. Ex:
    public function gridStyleFunction(data:Object, col:AdvancedDataGridColumn):Object {
      if (this.isItemHighlighted(data))
        return {fontWeight: "bold"};

      //return null if item is not highlighted.
      return null;
   And if you have a AdvancedDataGrid, then you can set the grid's style function to "gridStyleFunction".
  But sometimes it may happen that changing the font styles dynamically may screw up the other font related styles applied earlier (how and why we will discuss in a separate post..) so we can use another approach described below:
3. we can override the grid's drawItem function:
    protected override 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 rowRenderers:Array=listItems;
      for (var i:int=0; i < rowRenderers.length; i++) {
        if (rowRenderers[i] != null && rowRenderers[i].length > 0) {
          if (this.isItemHighlighted(rowRenderers[i][0].data)) {
            for (var j:int=0; j < rowRenderers[i].length; j++) {
          } else {
            for (var k:int=0; k < rowRenderers[i].length; k++) {

Basically we are accessing all the renderer's of a specific row. If you don't do this and just set the item's style, it will change only the style of the first cell in the row.

Hope it helps!!...:)