Spark DataGrid Footers

Here is a first attempt at putting footers in a Spark DataGrid.  The approach taken is to customize the skin and add an additional Grid element and assign it an custom ArrayList that contains the summary data. A subclass of GridColumn allows specifying a summary function. In the demo, the first column does a sum, the second does an average.

One of the surprises was in the partAdded handler.  Because you can’t control the order in which skin parts are added in subclasses, you have to build in some redundancy when there are interdependencies between skin parts.

Run Demo
Download Source

Usual caveats apply.

12 Responses to Spark DataGrid Footers

  1. Hey Alex,

    have you tried dragging the column separators? The rendering of the layout of the DataGrid gets screwed up. If you need a screenshot, just drop me an email.


    • Alex Harui says:

      Thanks for catching that. It is also related to the timing of the adding of the skin parts. I uploaded new versions.

  2. Hello,

    From what i’ve seen on your implementation you do “footer.columns = columns”.
    If i understood correctly the spark DataGrid architecture that might be a problem since in the column setter property on the Grid component the column “grid” property is updated, as a result, column will invalidate the bad grid when they need to invalidate it.
    Perhaps it’s my misunderstanding

    Thanks for your demo

    • Alex Harui says:

      Yeah, it is sort of a hack. But it seems to work. I could try to synchronize a copy of the column set I suppose

  3. What about using the GridColumnHeaderGroup component, instead of the Grid?
    also apparently the nestLevel property is set on every DataGrid part to be grid.nestLevel+1 i spent hard time figuring that in my own little try

  4. Brett says:

    I tried editing some of the data in the grid to update the total. On your demo it works no problem but when I run your source on my server, editing the first row calculates correctly but any other row miscalculates a huge number. I’m testing this on Flash Builder 4.5 with Coldfusion 9.

  5. Adam says:

    Just what I was looking for! Thank you! I do have a few questions however (I have limited experience with Spark).

    1. Is it possible to use a different cell renderer for the footer columns? I want the footer values to be in bold.

    2. When I don’t specify a width for each column, the footer grid columns don’t line up with the datagrid columns, until I click the column divider and it recalculates the width. How can I fix this? (Aside from specifying column widths of course)


    • Alex Harui says:

      You should be able to set the itemRenderer on the footer columns

      Not sure how to fix the width problem. Maybe fake the divider event to force a recalc.

  6. Matt B says:

    there is some sort of bug. i specify the width=”940″ for the datagrid and am not specifying the width of the individual columns and the footer sums are not aligned… try and you’ll see what i mean. any way to fix?

  7. Safrizal says:

    Bagi yang mengalami masalah Horizontall Scroller untuk column yang besarnya melebihi ukuran dari Datagrid, bisa mencoba trik ini :

    untuk DataGridSkin.mxml :
    ( footer-nya sejajar dengan columnHeaderGroup dan )

    <background …..
    <headerSeparator …..
    <scroller …..
    <grid ….

    di, ditambahkan :

    private var _gridEvent:Boolean = false;

    private function grid_changeEventHandler(event:PropertyChangeEvent):void
    if ( == “horizontalScrollPosition”)
    footer.horizontalScrollPosition = Number(event.newValue);

    private function horizontalScrollFix():void
    if (_gridEvent) return;

    _gridEvent = true;
    grid.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, grid_changeEventHandler);

    di bagian partAdded, ditambahkan :

    untuk if (instance == footer),
    footer.layout.clipAndEnableScrolling = true;
    lalu, untuk if (grid), panggil : horizontalScrollFix();

    lalu tambahkan juga paling bawah dari fungsi partAdded,
    else if (instance == grid)
    if (footer) horizontalScrollFix();

    Selamat mencoba!
    Terima kasih untuk Pak Alex Harui, anda memang yang terbaik, ditunggu ide-ide anda berikutnya…

    Terima Kasih,

  8. Shally says:

    Hey Adam,
    I was able to solve these problems. I was able to solve the sizing issue as well as used a custom item renderer. I would love to attach code here but seems not possible.
    1. To use a different itemRenderer, go into the skin and specify it there. Also DO NOT use the same columns as you used for the main grid, make new, custom class is better.
    2. Use the grid.layout.getElementBounds(index) to get the column and then get width from there and update the new columns. Otherwise this sizing issue will always remain… Also initially put a UPDATE_COMPLE event listener on the grid so that the columns size properly the very first time