by Alex Harui

 Comments (12)

Created

February 22, 2011

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.

COMMENTS

  • By João Saleiro - 11:52 AM on February 22, 2011   Reply

    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.

    Cheers

    • By Alex Harui - 9:19 PM on February 22, 2011   Reply

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

  • By François de Campredon - 3:51 PM on March 2, 2011   Reply

    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

    • By Alex Harui - 9:09 PM on March 4, 2011   Reply

      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

  • By François de Campredon - 12:06 AM on March 5, 2011   Reply

    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

  • By Brett - 7:31 PM on June 2, 2011   Reply

    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.

    • By Alex Harui - 12:19 AM on June 17, 2011   Reply

      Make sure there aren’t any non-numbers in the row fields

  • By Adam - 2:27 AM on July 21, 2011   Reply

    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)

    Thanks,
    Adam

    • By Alex Harui - 12:26 AM on July 30, 2011   Reply

      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.

  • By Matt B - 9:59 PM on November 8, 2011   Reply

    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?

  • By Safrizal - 8:41 AM on November 23, 2011   Reply

    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 FooterDataGrid.as, ditambahkan :

    private var _gridEvent:Boolean = false;

    private function grid_changeEventHandler(event:PropertyChangeEvent):void
    {
    if (event.property == “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,
    Rizal

  • By Shally - 6:25 AM on December 3, 2011   Reply

    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

ADD A COMMENT