20070523

Adding Total Row at the end of DataGrid

Algo: Add to Technorati Favorites
====

1. Create two datagrids and put both in a VBox. Set the 'verticalGap' of the VBox to zero.
2. First datagrid contains all the rows while the second one contains only the total row.
3. Second datagrid has
a) showHeaders = false
b) rowCount = 1
4. Dataprovider of the First datagrid is the arraycollection containing the Objects/data representing various rows
5. Dataprovider of the Second datagrid is the arraycollection containing ONLY one item which contains the total dataobject.

e.g.
The code would be something like :


Click here for demo
Click here for the source code

Approach 2
Another approach has been mentioned at:
http://blogs.adobe.com/aharui/2007/04/datagrid_footers.html

But the above implementation doesn't take care of resizing columns. In order to add that support:
1. add following function to FooterDataGrid
public function recreateBorder() : void
{
removeChild(DisplayObject(border));
border = null;
createBorder();
}


2. call this function on the "columnStretch" event i.e.

columnStretch="{dg1.recreateBorder()}" >


Click here to see the demo.

4 comments:

Anonymous said...

Another approach to the same problem can be found at:

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

TheWizard said...

A well document, well done example. Thanks for the assistance.

Sean Clark Hess said...

I encapsulated Alex's approach into an easy-to-use Component called FooterDataGrid.

http://code.steelpotato.com/2008/07/footer-datagrid-display-total-or.html

Sentient said...

this turned out to be a nice simple solution for me. Thanks!