FlexGrid Custom Footers

This sample shows how to extend FlexGrid to provide two types of footer elements:

Column Footer Rows

In some situations you may want to display non-scrollable rows below the grid data containing summary information such as subtotals. This can be done by adding rows to the grid's columnFooter panel.

If you add a GroupRow to the columnFooter panel, the grid will automatically provide values for any columns that have the aggregate property set. This is what this sample does.

If you add regular rows to the columnFooter panel, then you should set their values using the panel's setCellData method. You can add as many column footer rows as you want, possibly showing different aggregates on each one (sum, count, average, min, max, etc).

Group Footer Rows

When grouping is enabled, FlexGrid adds group rows above each group. This sample shows how you can add custom group rows below each group as well.

Group footer rows are implemented using a custom directive called groupFooters which you can customize and add to any FlexGrid.

Select how to group the data:

See and edit the data here: