ninja captain

(Update: I’ve updated the itemRenderer so you can make any row bold, not just the last row. Thanks Pedro.)

I haven’t been using Flex for very long (or Flash’s built-in components for that matter), so I’m not too familiar with their capabilities and shortcomings. I became frustrated when I learned that it is far more difficult to style a specific DataGrid row than it is to style a column.

So here’s the dilemma: I have a DataGrid filled with info, and the final row is a sum of the numbers above it. Seems like a very useful application, but I was unable to find any direct help from other blogs or forums.

I created an extension to DataGridItemRenderer, and simply referenced it in my DataGrid instance by defining its itemRenderer. As you can see, each item has a custom field called “fontWeight”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<mx:DataGrid itemRenderer="dgir">
  <mx:dataProvider>
    <mx:Array>
        <mx:Object Name="Apples" Value="4" fontWeight="normal"/>
        <mx:Object Name="Oranges" Value="3" fontWeight="normal"/>
        <mx:Object Name="Pears" Value="6" fontWeight="normal"/>
        <mx:Object Name="Cherries" Value="7" fontWeight="normal"/>
        <mx:Object Name="Total" Value="20" fontWeight="bold"/>
      </mx:Array>
    </mx:dataProvider>
  <mx:columns>
    <mx:DataGridColumn dataField="Name"/>
    <mx:DataGridColumn dataField="Value"/>
  </mx:columns>
</mx:DataGrid>

The DataGridItemRenderer extension overrides the function validateNow to check the data field named “fontWeight”. Here’s the code from the extension:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package{
  import mx.controls.DataGrid;
  import mx.controls.dataGridClasses.DataGridItemRenderer;
 
  public class dgir extends DataGridItemRenderer{
    public function dgir(){
      super();
    }
 
    override public function validateNow():void{
      if (listData)
      	setStyle('fontWeight', DataGrid(listData.owner).dataProvider[listData.rowIndex].fontWeight);
      super.validateNow();
    }
  }
}