— Forest and the Trees

Data Grid and ADG Footers

[UPDATE 26 Jun 2008] – view source is now fully functional

I made some enhancements to the DataGrid footer posted in Alex’s Flex Closet. This supports resizing columns, locked columns, and horizontal scrolling. It is also implemented in both the Data Grid and the Advanced Data Grid. Licensed under MIT (which I believe is the do whatever the hell you want license – commercial, non-commercial, sell it unedited to someone (although that would be morally wrong)).

I haven’t tested these very much. If you find a bug, please comment.

Demo here. The functions that calculate the content of the footers are in the main mxml. Right click to view source.

  1. Adam says: June 26, 20087:45 am

    view source is only working for the main application. the components’ source code does not load.

  2. Doug says: June 26, 20088:29 am

    Thanks for the heads up – my bad. The zip file did work (and contains all the code), but, now, everything is viewable.

  3. Andres says: September 11, 20085:56 am

    i can see the Tab Keybooard doesnt work.

    i´m try to figure out why not!

  4. Netta says: December 24, 200811:27 am

    Thanks for this, it’s great!

    I need to add itemRenderers for the footer row and I can’t seem to get it working. Is there a gotcha I’m missing or should I just be able to set itemRenderer on the mx:AdvancedDataGridColumn inside the
    adgFooter:FooterAdvancedDataGridColumn? It seems to go into and endless rendering loop when I do this. Any tips would be very welcome.

    Many thanks,

  5. Vimal says: February 11, 20097:42 pm

    Thanks for this post.

    How to set the visible property of the footer colums?

    eg. If I do

    the grid column is not displayed but still the footer is displayed and
    setting the visible property to false of the footer column is not working.

    Any help? I’m tring to modify this to enable the user to reconfigure his/her grid view.


  6. Doug says: February 25, 20097:28 am

    Sorry for delay. You might try setting “includeInLayout” to false somehow. But, I did not set that up as an option – basically, if you don’t want the footer, just use the ADG.

    Thanks for the comment though. If I have the time to rebuild this, that would be a good feature to include.

  7. Ric says: April 2, 20095:06 am

    Hi all,

    It would be really nice if we could add a item renderer on the footer.

    Like @Vimal i’ve tried but no luck.

    Any tips would be very welcome.


  8. Doug says: April 2, 20095:13 am

    Hi Ric,

    Agreed. I’ve been meaning to revisit this component to make it more flexible. I don’t have much time right now. But, maybe in a couple weeks. I believe there is a Label added to the Footer part of the code. You might be able to plug an item renderer in there.
    Apologies for lack of help

  9. Ric says: April 2, 20095:53 am

    Hi Doug,

    Thanks for the reply. I managed to do it (eventualy). The answer was getting it to run
    on the AdvancedDatagridColumn class

    this.itemRenderer = new ClassFactory(classes.Format4Finance);

    Hope this helps everyone.


  10. Prashant Mehta says: April 16, 20092:23 am

    Hi All,
    I am using Normal datagrid for displaying footers and i am also facing the same problem as others, regarding to itemrenderers, i am not able to add an itemrenderer to datagrid column.If anyone has solution for this,
    Thanks in Advance.


  11. Prashant Mehta says: April 16, 20092:24 am

    Hi All,
    I am using Normal datagrid for displaying footers and i am also facing the same problem as others, regarding to itemrenderers, i am not able to add an itemrenderer to datagrid column.If anyone has solution for this,Please let me know ASAP
    Thanks in Advance.


  12. Prashant Mehta says: April 17, 20091:11 am

    Hi All,
    Finally i found the solution for it, i created a function which i called on creationComplete event of datagrid and then i did the following thing on it:-
    datagridColumnid.itemRenderer=new ClassFactory(classpath.renderername);
    It works perfectly.Hope it helps to everyone,
    also thankyou Ric for providing hint


  13. Patrick says: May 11, 20094:30 pm

    For those of us who are complete idiots…..

    I’m trying to add an item renderer to the columns and possibly to the footer as well. I’ve tried doing what was suggested, but can’t seem to get it to work. Can someone point me to some example working code for the item renderer? I’m trying to change the cell color background if the value is above a certain number.

    Ant help greatly appreciated…..

  14. Sachin Dev Tripathi says: May 13, 200912:57 am

    It is a nice demo, but you can see a problem in the last sample(footer with ADG with Hscroll Bar)..the last row of ADG listContent is overlapping by footer.so half row is displaying.i have try in code to move Footer in updateDisplayList of ADG but it is now working perfectly.Main problem arised when hscroll is visible.
    How to handle this problem.i need exect positioning of footer, after the listContent.

    please help me

  15. Doug says: May 13, 20096:45 am

    It looks like the same thing happens w/o the footer. Look in the example to the left. So, I don’t think it’s a problem w/ the footer but, w/ the data grid and adg. You might be able to explicitly set the height of the entire grid?

  16. Sachin Dev Tripathi says: May 14, 200912:37 am

    I am not setting height of GRID.I have a resizable grid its height/width is on percentage of window size. Second thing I found the exact problem and solution (may be).

    Actually, we have to concentrate on height of listContent because it creates rows for all displayable area(listContent) so it is creating a half sized row. We can subtract these extra pixels by making listContent to the multiple of rowHeight of ADG. It is working perfect with 24 footerheight and rowheight.
    is it ok?
    Please let me know

    Sachin Dev Tripathi

  17. Sachin Dev Tripathi says: May 14, 20095:44 am

    What is the differance between height and $height of a flex component? because each time there has few pixels differance.


  18. sunil says: May 18, 20096:46 am

    Hi ,
    I have downloaded this component and used it in my application,
    This calculation of average works fine when we have static data like in the demo,however when we have a response from server(say an XML) the average cannot be calculated as it does not have the data by the time control goes to labelfunction.
    Please let me know if there is a workaround for the same.

    thanks in advance,

  19. Sachin Dev Tripathi says: May 18, 200910:24 am

    Hi doug.

    Can we add Grand total at the end of rows in grid..is it posible? actually the problem is that current footer component is rejected by my project manager..he needs grand total at the end of the row..
    i am doing RnD..
    Please let me know if you have any suggestion.

    Thank in advance


  20. Doug says: May 18, 200910:31 am

    That’s a different problem. You’ll need to add another column to the data grid and create a sum item renderer. Add a item renderer, and override the set data method. In the set data method add up all the other columns.

  21. sunil says: May 19, 20091:24 am

    Rephrasing the question posted earlier

    I need to have a grand total and end of each column in the footer, I have tried it in the way you calculated the average for your component, but the response from the server comes after the label function is called,so I dont have data when I create the footer row.
    Is there any way I can achive this functionality.

    Any help regarding this is appreciated

  22. Jorel says: May 27, 200910:52 am

    Thanks for posting this code! Really useful for an application that needs a total for each column of a grid with variable number of columns. I was able to convert to pure actionscript initialization. Awesome – this would have taken me days to figure out.

  23. tntomek says: June 22, 200912:38 pm

    Thank for this great post.

    Is there any way to make the footer itemRenderers not refresh as often? I have a fairly expensive column total calculation that seem to get done all the time even without the underlying dataPrpvider raising any propertyChanged events. I have solved this by haing the footer row actually bound to it’s own dataprovder that is computed when the underlying dataProvider is updated. Somehow I still get this ‘flicker’ as I’m scrolling, this leads me to believe something very simple is not being set, maybe renderers are not recycled/reused correctly or always created from scratch. Any thoughts?

  24. Doug says: June 22, 20091:00 pm

    I really need to take a fresh look at this component. Let’s see – I’d try removing the expensive row calculation and see if the flickering goes away. I checked the version on line and there doesn’t seem to be any flicker. It sounds like the renderers are being recreated to me. Maybe check the data provider to see if it is being recreated?

  25. Jubei says: July 17, 20093:39 pm

    Awesome component. I did notice that the design view does not work if the datagrid is set to lockedColumnCount=”1″.

    Still, a great component. You would think something like this would have been implemented by Adobe.

  26. sudeep says: August 3, 20091:42 pm

    Hi ,

    I have used the footer datagrid u have posted on the site , it works fime , but the problem is when the data gets rendered on the datagrid i see that it overrides the previous data and when i drag the column everything works fine . can you please let me know how to resolve this issue..


  27. Doug says: August 3, 20092:10 pm

    Sorry, I’m not sure I understand the problem.

  28. [...] Les dejo otras implementaciones más completas de footer para los DG: http://www.forestandthetrees.com/2008/06/16/data-grid-and-adg-footers/ y [...]

  29. Jubei says: August 16, 200912:45 pm

    I have found something peculiar…the footer is calling the labelFunction before the creationComplete fires.

    It only does this when the labelFunction is part of the FooterDatagrid

    If you add a trace statement inside the labelFunction, you will see it fires several times before any other components are available. This causes Null errors if your code is doing summary functions on data that is loaded remotely.

    This does not occur with a regular column and regular labelFunction not wrapped in a FooterDataGridColumn.

  30. Jubei says: August 16, 200912:58 pm

    I see this is the same problem that sunil posted about…no resolution for this? If not, this component will only work with static data.

  31. Mike Robinson says: August 23, 20092:48 pm

    Thanks. Nice work. One problem is if you have columns that are invisible at time then horizontal scrolling will not work properly. Here is a patch to DataGridFooter.as which will correct it:

    // ## Original line
    var cols:Array = dataGrid.columns;

    // ## Modification to only use the visible
    // ## columns when redrawing footer
    var orgcols:Array = dataGrid.columns;
    var cols:Array = new Array();
    for(var k : int = 0; k < orgcols.length; k++){
    if(DataGridColumn(orgcols[k]).visible == true)

  32. Mike Robinson says: August 23, 20092:53 pm

    p.s I would apply the same patch to the AdvancedDataGridFooter.

  33. House says: August 25, 20098:30 am

    Thanks for this component, it’s very useful!

    I need to add columns dynamically. Is it possible?
    Could you give me an example?


  34. Jubei says: August 25, 200911:56 pm

    Thanks for the update @Mike. BTW, that weird null error in the labelfunction can be trapped with a try/catch statement, but still no real solution :(

  35. DataGrid Footer | Othenos, Inc. says: August 27, 200911:28 am

    [...] was enjoying the enhancements made to the DataGrid control I found on Doug Marttila’s site, who in turn was working from an original update made by Alex Harui. However, I found that the [...]

  36. tennis says: August 28, 20091:30 pm


    I am trying to integrate this example into my project.

    However, in my case, my dataGrid dataProvider has to bind to a dynamically changed ArrayCollection. It is working though, if I do not have any itemRenderer in the foot row.

    When I try to put itemRenderer into one of the foot column, the code seems looping into updateDisplayList() of the AdvancedDataGridFooter forever, and keep calling my itemRenderer class.

    I have tried to put the following code or similar at dataGrid initialize function , or createComplete function, or into FooterAdvancedDataGridColumn class, they all not work

    column.footerColumn.itemRenderer = new RendererFactory();

    Hope I have explained what my problem is clearly.

    Can anyone help? Thanks

  37. Doug says: September 24, 20093:58 pm

    I have received two emails from developers who have improved the adg and dg footers. I have quickly looked at the code (it’s not spam) but haven’t fully tested it. That said, I have no reason to believe the code does not work. So, if you need the following functionality please check out these links.
    GrandTotal from Sachin Dev Tripathi. View working sample here.
    grouped columns from Rob Dell’Aquila

  38. Pratap says: October 13, 20098:12 am

    Thanks for this component.
    This is what am looking for.

    Am facing some problem while implementing this using actionscript. Am able to generate it properly but unable to see anything on footer of locked columns.

    am adding columns like this:

    var keyColoumn:FooterDataGridColumn = new FooterDataGridColumn(); keyColoumn.dataField=”name”;

    var keyFooter:DataGridColumn=new DataGridColumn(); keyFooter.dataField=”name” keyFooter.headerText=”Total”; keyColoumn.footerColumn=keyFooter;


    Any idea y its happening like that?

    Thanks & Regards

  39. Doug says: October 13, 20099:08 am

    Here is another Data Grid w/ Footers.

  40. Doug says: October 13, 20092:45 pm

    Pratap, It might be data binding. Instead of pushing onto datagrid.cols – try setting dataGrid.columns to an array instance. E.g.
    var cols : Array = dataGrid.columns;
    cols.push (my new column);
    dataGrid.columns = cols;

    Just a quick guess.

  41. sanmah says: May 11, 20108:36 am

    Please exuse my poor english…

    At the last pattern of demonstration,
    The value of “lockedColmunCount” is changed “1″ to “3″,
    The average is not displayed.
    How should i fix it?
    or Flex’s specification?

    I want to solve it, please.
    Thanks & Regards

  42. Rajendran says: September 16, 20106:03 am

    First thanks for this nice footer, its nice.

    I’m trying to add an item renderer to the columns and possibly to the footer as well. I’ve tried doing what was suggested, but can’t seem to get it to work. Can someone point me to some example working code for the item renderer?

    Same, i am ending up to an endless loop in my item renderer, can any one pls help me out on the same, with renderer code, Ric or prashant, thanks in advance.


  43. Rajendran says: September 17, 201012:40 am

    I am able to give FooterAdvancedDataGridColumn an item renderer which shows an image inside the colums of every row, but not able to give it in the footer,(i.e) in the adg column which is the footer a single row, i gave headertext and it comes, when giving the headerRenderer(a rectangle color box) its not comming in footer.

    Do i need to use headerRenderer or itemRenderer? but i checked itemRenderer it loops in side itemRenderer, headerRenderer nothing happens except the headerText comes.

    Pls any help?

Submit comment