Rendering a Summary Row

Grids are often used to display numeric data, in which case it can be
desirable to display an extra row containing total values for each column.
In this tutorial, we will walk through how to write a mixin which adds a
summary or totals row to a grid's footerNode for this purpose.

The Footer Region

All dgrid instances, whether List or Grid, possess
a footerNode. This node represents an area beneath the
body of the grid (the bodyNode). By default this area contains
nothing and remains hidden, but extensions (such as Pagination)
may add to it and show it by setting showFooter to true.

Therefore, to begin implementing a summary row mixin, we will want to show the
footer and add an element to the footerNode to hold the table
we will render:

Creating a Custom Setter

Now we have an area to render the summary, but we haven't actually rendered
a table or row, because we don't have data for it yet.
Let's define a custom setter for a summary property to
render data for the summary row:

Note that dgrid setters follow the naming convention _setFoo,
which is unique from Dijit's convention.

Populating the Summary Row

Now we've created a setter method, but we haven't yet added code to populate
the summary row. We can actually reuse Grid's
createRowCells method to help us accomplish this.
createRowCells accepts a tag name ('th' or
'td') and a function that will be applied for each column defined
in the grid's structure. Let's create a function to pass to
createRowCells, and call it within the custom setter:

An additional benefit of reusing createRowCells is that it will
automatically work for ColumnSet structures as well.

Additional Considerations

While the above code works well for set calls after a grid is
created, it would also be useful to be able to include summary
in the initial arguments passed to the constructor. Unlike Dijit, dgrid
does not call custom setters automatically during the creation process,
so we need to do so specifically when we want it to be called:

We also need to take some layout considerations into account.
Firstly, it is possible for a grid's columns to extend beyond its
width. We want our columns to align with the grid's at all times, but
the footer area itself is normally fixed.

Since the way we've rendered the summary row already matches the full width
of the rows in the body, we can account for scrolling simply by adding a
scroll listener:

One last layout consideration we need to account for is that when the
summary area is updated, its new contents may flow differently than its
previous contents, which could cause the height of the footerNode
to change. We can account for this by making sure to call resize
after updating the summary row (taking care not to do so if the grid hasn't
been started up yet):

You can double-click the mixin code above to select all of it
for easy copying.

Conclusion

The above example should provide a good starting point for adding and
supplying data to a summary row displayed in a grid's footer region.
This mixin could be expanded further in various ways, such as to display
multiple rows within the summary, or to account for columns'
get, formatter, or renderCell methods.