Footer Section in Advanced Grids
You can add a footer section in the Advanced Grid and the Advanced Tree Grid using Mashup Builder properties or the JSON configuration. The footer is configurable, and it displays the totals for the data in the columns.
To add a footer, do the following:
1. Select the EnableFooter property and set it to true.
This enables the FooterData and TableFooterStyle properties in the Mashup Builder. You can provide the footer data through a service that is bound to the FooterData infotable property.
 |
If you do not bind the data, a message appears, and the grid does not render.
|
In a JSON configuration service, you can set the footer property as a top-level parameter as follows:
var config = {
“enableFooter”: false,
...
}
“enableFooter”: false,
...
}
In a JSON configuration service, you can set the footer style in the style section as follows:
var config = {
“tableFooterStyle”:
...
}
“tableFooterStyle”:
...
}
The footer data is described in two example services, GetPartsFooterData and GetWeatherFooterData on the GridAdvancedExampleServices Thing. The first service is used in the HierarchicalEditablePartsWithFooterExample and the second is used in the WeatherFooterEXample.
|
|
Put the token names in double square brackets in the infotable data to localize them. For example: [[totalUnits]] in the image above.
|
You can find these examples in the sample file GridAdvancedExampleEntities-V4.0.xml. For more information, see Advanced Grids Samples File.
Functions You can Include in the Footer infotable:
You can also perform client-side calculations in the grid using the following functions in the JSON configuration:
• {#stat_count} — Counts the number of rows.
• {#stat_max} — Calculates the maximum client-side value for the values in the column.
• {#stat_min} — Calculates the minimum client-side value for the values in the column.
• {#stat_average} — Calculates the average client-side value for the values in the column.
• {#stat_total} — Calculates the total client-side value for the values in the column.
• {#cspan} – Span columns.
|
|
• You can perform your own calculations and add them to the footer such as in the calculation of cold days in the COLD column in the image above: Weather data example with footer.
• You can align data in the footer using #cspan and text alignment settings text-align:left or text-align:right. Use HTML escape characters for comma in text, and the text following the comma is the alignment setting in the configuration, which is by default text-align:left.
• If you are using #cspan elements in columns to span several columns and you move columns, issues may occur at run time. To ensure that text and data stay together in the footer when columns are moved, put them together in the same column.
|