ninja captain

If you’ve ever tried to lower the rowHeight property of a DataGrid in Flex, you have probably noticed that if you lower the height too much, your text will get cut-off at the bottom. I’ve tried a number of solutions to correct this problem, but this one seems to be the best.

There are two properties addressed here: leading and paddingBottom.

leading: controls the bottom padding of the DataGrid header only.
paddingBottom: controls the bottom padding for all the DataGrid rows, AND the DataGrid header.

Thus, the solution is to lower the value for paddingBottom, and compensate by increasing the leading value.

for example:

1

<mx:DataGrid rowHeight="18" leading="4" paddingBottom="0">

By default, both of those settings are 2.

See the example below:
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
The rowHeight property of both DataGrid controls are set by the slider at the bottom. The DataGrid on the left has default values for leading (2) and paddingBottom (also 2). Those properties for the DataGrid on the right is controlled by the sliders.

(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.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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();
    }
  }
}