Flex 3 DataGrid Footers

I took a few minutes to prove that there is another way to add Footers to DataGrid in Flex 3. The old blog post showed how to add footers to the border. In Flex 3 we added more hooks so you can add other “content areas” to the DataGrid.
I’m short on time so the example isn’t fully fleshed out. It could definitely use some optimization as to when and how often it refreshes. It probably needs masking if horizontal scrollbars are on, but at least it should show up in the right place relative to the horizontal scroll bar. There’s probably bugs as well, so the usual caveats apply, but it should get you started in the right direction. Also, I did not try this with AdvancedDataGrid. It is actually developed by an entirely different team.
Download Source
Run Demo

36 Responses to Flex 3 DataGrid Footers

  1. Jeremiah says:

    I’ve implemented the code you provided to show some total rows on my data grids. I ran into a couple of issues that were overcome by a couple small changes to the code as follows:
    listContent.setActualSize(listContent.width, listContent.height – (footerHeight+15));
    footer.setActualSize(listContent.width, footerHeight);
    footer.move(listContent.x, listContent.y + listContent.heightExcludingOffsets + 15);

  2. MArcio says:

    This component is fantastic, Very Good
    But
    if i use delete
    paddingTop=”0″ paddingBottom=”0″ verticalAlign=”middle”
    and include
    width=”100%” height=”100%”
    in
    The Footer of datagrid not display correct
    Please test your Datagrid with 138 records
    ——
    if i use this
    And update in file
    FooterDataGrid.as
    in line 19
    protected var footerHeight:int = 22;
    to
    protected var footerHeight:int = 24;
    Functional is correct !
    —————-
    How should I proceed?
    —————————
    Alex responds:
    This code is just a prototype and is unsupported. If you have it working, great.

  3. MArcio says:

    If i resize collum datagrid and in sequence i use slider to filter datagrid the error ocurred
    ————-
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at DataGridFooter/updateDisplayList()[C:\inetpub\wwwroot\webserver\rarus_admin_flex_2\src\DataGridFooter.as:103]
    at mx.core::UIComponent/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:6214]
    at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:602]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:675]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
    at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]
    ————-
    Please Help me, how to resolve this ?
    ———————-
    Alex responds:
    in DataGridFooter.as in updateDisplayList, check to see if col is null and break out of the while loop

  4. MArcio says:

    if i use itemRenderer error ocurred
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at DataGridFooter/updateDisplayList
    ————-
    —————
    —————————-
    Alex responds:
    Your custon renderer must implement IDropInListItemRenderer

  5. KLadofoRA says:

    thanks for that just was asking can’t we using any thing and replacing it on this code
    footer.setActualSize(listContent.width, footerHeight);
    ?
    thanks
    —————————
    Alex responds:
    Not sure I understand the question. I guess you can make the footer some other size if you want to.

  6. romain says:

    Hi Alex,
    You talked about a version for AdvancedDataGrid developed by an other team. Do you have a link for showing that ? thanks
    —————–
    Alex responds:
    ADG has SummaryRows. It is developed by another team. I don’t know if they’ve done footer support or not. Try Sameer’s blog: http://techrays.wordpress.com/

  7. ggfou says:

    useful post.thanks for ur sharing!

  8. akshay says:

    how to enhance debugging in flex 🙁
    —————
    Alex responds:
    Debugging works fine for me. If you want specific features that other debuggers have, please file bugs/enhancement requests at bugs.adobe.com/jira

  9. labs says:

    this blog is the AWESOME!

  10. Hi, I added some functionality to these footers – horizontal scrolling, column resizing, and locked columns. I also implemented for the Advanced Data Grid. Post here. Thanks for the great post and great starting point.

  11. Artur says:

    Hi Alex, this is a great component. But I have problems with it when I’m using a custom ItemRenderer. In this case the updateDisplayList() function is called permanently and it cause an infinite loop. When the addChild(DisplayObject(renderer)); is removed, it works fine, but the Renderer is not shown (of course). How can I change it? Do you have any ideeas? I need it for my current project.
    Thanks, Artur
    ————————–
    override invalidateDisplayList() and maybe invalidateSize() and see why it gets called. Usually you’re doing something that changes the potential size of the renderer like adding children to it in updateDisplayLIst. You shouldn’t do that, but if you must, then block the call to invalidateDisplayList somehow (have it not call super.invalidateDisplayList in those conditions)

  12. jbr says:

    thanks for the code again
    your posts helps me allot
    thanks

  13. Rick says:

    If you know some site that supply tutorials about flex, please tell me! and thanks a lot!
    —————–
    Alex responds:
    Search the web. FlexExamples.com and Lynda.com have stuff. Our documentation folks are sad to hear that their writings aren’t sufficient for you.

  14. Bera Florin says:

    Hi Alex! I want to use the footer as a toolbar, but I haven’t found a way to add a button or a label to it.
    Do you have any ideeas how to put a button on this footer?
    Help pls. Thanks!
    —————-
    Alex responds:
    You could make a button the renderer for one of the columns. You can also subclass the border and add a toolbar there.

  15. Andrew says:

    Hi,
    thanks for the example.
    i´ve copied&pasted the example, but looks like Flex Builder doesn´t recognize the namespaces??
    But i got this error in Flex Builder:

    Could not resolve to a component implementation. loginTest1/src dg.mxml Unknown 1219766177385 1574

    —————-
    Alex responds:
    You have to setup xmlns:local in the Application tag. See how I used it in my example

  16. Mark S says:

    I’m intending to integrate this solution into my current project which has its own extension of DataGridColumn.
    Can you explain why you extend DataGridColumn, **and** then place an instance of the base class as a public property? It’s a pattern I haven’t seen before, and can’t understand why it’s necessary to extend the base column class, and then use an instance of the base.
    btw, the project I’m working on will be adding the column in actionscript (if this makes any difference)
    Thanks.
    ——————
    Alex responds:
    I just did that so you could specify different styles and labelFunctions for the footer. You could just duplicate stuff on the column subclass, but there’d be style name collisions

  17. hbell says:

    Hello there,
    thank you for great example.
    May i use to project this example?
    and what kind of license this example has?
    regards
    hbell
    ————————–
    Alex responds:
    There is no license. You can use it however you wish as long as there is no liability back to me.

  18. Ravi says:

    Does this applicable to editable data grid,where user can change the existing value,correspondingly Ave value need to be updated,Currently when i make the grid editable Ave is not getting calculated.
    ————————
    Alex responds:
    Yes, there are other events where you’ll need to update the footer. ITEM_EDIT_END for editable datagrids and probably on some collection change events as well.

  19. Vimal says:

    How do I set the visible property of Grid column and footer?
    If I say visible=false at FooterDataGridColumn level the grid column is not visible but the footer column is visible and
    visible=false at DataGridColumn level has no effect
    Thanks
    —————
    Alex responds:
    You’ll probably have to modify the example to handle hidden columns.

  20. Sachin Dev Tripathi says:

    Hi Alex,
    The vertical rows of ADG are not display correctly.At the bottom they are incresed by few pixels.
    So the last line of listContent is appearing overlapped by footer. When i make distance between listContent and footer i saw listContent is creating a 1/3row at last.

  21. Sachin Dev Tripathi says:

    Hi alex
    what is masking?? you have told about this in second para of this page?
    is it related to my problem(posted yesterday)
    please advice
    -sachindevtripathi@gmail.com
    ———————
    Alex responds:
    See the documentation for flash.display.DisplayObject.mask

  22. Martin says:

    Multiple Footer Rows:
    I was trying to add the support for multiple footer rows, however it does not work.
    Instead of defining one footer column in MXML for each column, I am passing in an array:
    In the updateDisplayList() method I am drawing the other columns following the current example, but I only get the grid lines, not the contents of the Footer Columns.
    Any suggestions/ideas on this?
    Thx
    Martin

  23. Alex Harui says:

    Make sure you’ve converted everything in the example that needs to understand that the footercolumns is now an array. Take the example, add just the one footer column in the example and an array and make sure that works first.

  24. Martin says:

    Yes, passing in the array and then adding just one footer column works fine.
    Then, the second one gets drawn on the sprite as well, but on the rendered Datagrid I just see the Vertical separator line, but not the content.

  25. Alex Harui says:

    I don’t know how to provide further assistance. I think you’ll just have to step through it in the debugger, checking the sizes and positions of things. You can also try asking on an Adobe forum or FlexCoders.

  26. Shrikant says:

    Hey Alex, This component is cool 🙂
    Thanks
    Shrikant

  27. Lee says:

    Hi Alex, thanks for sharing this code. I see you’re adding the renderer in DataGridFooter’s updateDisplayList method, however when I try to use a custom itemRenderer (such as a RadioButton) it gets stuck in an infinite loop. Any ideas as to how I might solve this issue?

  28. Alex Harui says:

    You might have to block one or more of invalidateProperties/Size/DisplayList when handling the child renderer. We do that in the List classes.

  29. Rob McKeown says:

    Any chance you could point us in the direction of where you would “block one or more of invalidateProperties/Size/DisplayList”? You mention that it is done in the List classes, but it isn’t obvious from looking at the source where that is happening.

  30. Alex Harui says:

    Basically, you can override invalidateProperties() and decide whether to call super.invalidateProperties(). See ListBaseContentHolder.as

  31. wow , thx for sharing this wonderful code , Like 🙂

  32. allan says:

    try to ge tthe dynamic update on the footer note works, but couldnt

  33. Suresh says:

    Alex,

    Is there any way to add the summary row next to header? My summary rows is custom and I shouldn’t be using summary row feature in Advanced Data Grid.

    Thanks,
    Suresh