RealGrid2 Guide
Header and Footer
Column footer

column footer

It is simple to calculate and display the total for each column in RealGrid. You just need to specify an expression that displays statistical values in the column footer.expression. The types of values that can be used in the expression vary depending on the grid summaryMode. If the total value calculated and provided by the grid is incorrect or the required summation expression does not exist, you can use valueCallback() to display it. You can also get the total value of a field by calling the GridBase.getSummary(field, summary) function. field can be a field name or field index. Types that can be displayed as summary values include avg, sum, count, min, and max. For more details, see SummaryType Check it out here.

Column Footer

  • footer.visible: Displays the footer at the bottom of the grid.
// Specify sum expression when setting column
gridView.setColumns([{
     ...
}, {
     name: "SaveCost",
     fieldName: "SaveCost",
     width: "80",
     numberFormat: "#,##0",
     header: {
       text: "Payment"
     },
     footer: {
       text: "Total =>"
     },
     styleName: "right-column"
   },
   {
     name: "SaveMaturity",
     fieldName: "SaveMaturity",
     width: "80",
     numberFormat: "#,##0",
     header: {
       text: "Maturity amount"
     },
     footer: {
       text: "Total",
       expression: "sum",
     },
     styleName: "right-column"
   }, {
     ...
}];

As in the footer, the summary mode must be set to "statistical" to display the variance and standard deviation values.

gridView.setOptions({ summaryMode: "statistical" });
gridView.setOptions({ summaryMode: "aggregate" });

It does not calculate the sum of the column.

gridView.setOptions({ summaryMode: "none" });

Please refer to summary Mode on the Help site.

Column footer dynamic calculation

The content to be displayed in the column footer can be processed in column.footer.valueCallback() to display the desired value.

// Specify sum expression when setting column
gridView.setColumns([{
     ...
}, {
     name: "SaveMaturity",
     fieldName: "SaveMaturity",
     width: "80",
     numberFormat: "#,##0",
     header: {
       text: "Maturity amount"
     },
     footer: {
       numberFormat: "#,##0",
       styleName:"orange-column",
       valueCallback: function (grid, column, footerIndex, columnFooter, value){
         //You can easily find the average value with the code below
         //var avg = grid.getSummary("SaveMaturity", "avg");
         //If calculated separately, process as follows
         var sum = 0;
         var prod = grid.getDataSource();
         var cnt = prod.getRowCount();
 
         for (var i=0 ; i<cnt ; i++) {
           sum += prod.getValue(i, 'SaveMaturity');
         }
 
         return sum / cnt;
       }
     },
     styleName: "right-column"
   }, {
     ...
}];

Column footer display multiple rows

The footer summary can be displayed in multiple rows. Just create as many footers as you need for your items.

  • options
gridView.setFooters({
   visible:true,
   items:[
     {
       //styleName: "orange-column", //If individual CSS style application is required
       height: 40
     },
     {
       height: 40
     }
   ]
});
  • columns
var columns = [{
     ...
}, {
   "name": "QuantityPerUnit",
   "fieldName": "QuantityPerUnit",
   "width": "100",
   "header": {
       "text": "Quantity / Unit",
       "styleName": "orange-column"
   },
   "footers": [{
     "text": "Total ==> ",
     "styleName": "orange-column"
   }, {
     "text": "Average ==> ",
     "styleName": "orange-column"
   }]
}, {
   "name": "Quantity",
   "fieldName": "Quantity",
   "width": "100",
   "header": {
       "text": "Quantity",
       "styleName": "orange-column"
     },
   "footers": [{
     "expression": "sum",
     "numberFormat": "#,##0.00",
     "styleName": "orange-column"
   }, {
     "expression": "avg",
     "numberFormat": "#,##0.00",
     "styleName": "orange-column"
   }]
}, {
     ...
}];
Header checkboxMerge column footers