Home > actionscript, flex > Make a DataGrid row bold

Make a DataGrid row bold

(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();
    }
  }
}
  1. August 21st, 2008 at 11:46 | #1

    Hi Adam,

    Personally I would add an event listener in your constructor for the data change event:

    addEventListener(FlexEvent.DATA_CHANGE, checkBoldItem)

    Then instead of overriding validateNow() create an event listener to do the update.

    public function checkBoldItem(e : Event):void {
    if (listData)
    setStyle(‘fontWeight’, ((listData.rowIndex == DataGrid(listData.owner).dataProvider.length-1) ? ‘bold’ : ‘normal’));
    }

    Flex has a concept of virtualized lists and reuses item renderers, when the data for an itemRenderer changes, it fires a dataChange event on the itemRenderer… I am not sure how reliable the validateNow method is.

    All the best.

  2. August 21st, 2008 at 14:09 | #2

    Jon,

    Thanks for the suggestion. I haven’t tested this, but I think validateNow gets triggered less often than a data change event, which means it would be less resource intensive for larger scale applications. I’m not sure though. I’ll test it out.

    Thanks again, and take care.

  3. scuty
    August 25th, 2008 at 06:36 | #3

    none of this work on flex 3. when you try to scroll the text is back to normal. after you roll over the item the text is becoming bold.

    any updates?

  4. August 25th, 2008 at 06:46 | #4

    scuty,

    The example works fine for me, and I have Flex 3. But the code is very simplified, and it’s meant to be more of a guideline. I’ll try to update this soon.

  5. scuty
    August 25th, 2008 at 07:24 | #5

    what I did is I changed the fontWeight of certain rows not just the last one based on a value from dataProvider.

    something like:

    styleName = (DataGrid(listData.owner).dataProvider[listData.rowIndex].msg_status == 0) ? 'unreadRow' : 'readRow';

    and for some reason when I scroll the DataGrid does not update those rows, only when I roll over them.

    I am trying to find a way to do this for days. is getting frustrating.

    I know that it would be easier with AdvancedDataGrid but I have a trial version of Flex Builder.

  6. May 4th, 2009 at 11:27 | #6

    Hi all, Thanx Adam for this post.

    This is an old post, but replaying to scuty, I just ask for the value in data variable and works fine. Not asking to the dataProvider,

    override public function validateNow():void{
    if(listData)
    setStyle(‘fontWeight’, data.flag ? ‘bold’ : ‘normal’);
    super.validateNow();
    }

    my flag is a boolean.

  7. SkOOrA
    September 1st, 2009 at 05:02 | #7

    Kurwa wy skurwysyny!!

    WTF is listData ????

  8. September 1st, 2009 at 08:27 | #8

    @SkOOrA
    Flex passes the datagrid row information to your item renderer. That information is called listData.

  9. September 4th, 2009 at 16:50 | #9

    Does this code work for ComboBoxes too? I’ve got a need to Bold and make some rows un-selectable.. any suggestions?

  10. mohammed
    December 1st, 2009 at 12:19 | #10

    how do you add the rows to display a summary row(total) in datagrid………..I am stuck with smilar situation ………..help please…….!!

  11. December 1st, 2009 at 13:41 | #11

    @mohammed – I think this is what you are looking for:

    http://blogs.adobe.com/aharui/2007/04/datagrid_footers.html

  12. aofficer
    December 3rd, 2009 at 09:15 | #12

    I had to modify script because rowindex zero gives me a blank screen error. I think something is up with my dataprovider. Is there something I’m missing?

    if (listData){
    if (listData.rowIndex!=0){
    setStyle(‘fontWeight’, DataGrid(listData.owner).dataProvider[listData.rowIndex].fontWeight);
    }
    super.validateNow();
    }

  13. December 3rd, 2009 at 09:24 | #13

    @aofficer – It must be a datagrid problem, that code works fine on the datagrid in the example above.

  14. Tim
    January 6th, 2010 at 02:15 | #14

    DataGrid(listData.owner).dataProvider.length
    can also be written as …
    DataGrid(listData.owner).length

  15. June 8th, 2014 at 14:44 | #15

    Simply desire to say your article is as surprising. The clarity in your post
    is simply cool and i could assume you’re an expert on this subject.
    Well with your permission allow me to grab your
    feed to keep up to date with forthcoming post.
    Thanks a million and please continue the gratifying work.

  1. September 6th, 2009 at 20:06 | #1
*