FlexGrid Custom Footers

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

  1. Group Footer Rows: When grouping is enabled, the FlexGrid adds group rows above each group. This sample shows how you can add custom group rows below each group as well. The group footer rows were implemented as a custom directive called groupFooters which you can add to any FlexGrid.
  2. Footer Grid: In some situations you may want to display a non-scrollable row below the grid to show summary information such as subtotals. This sample shows how you can accomplish this using a separate but synchronized grid with a single row. The grid footer was implemented as a custom directive called gridFooterFor which you should add to a FlexGrid that is supposed to act as a footer for another FlexGrid.

Select how you would like to group the data:


See and edit the data here: