RealGrid2 Guide
Header and Footer
Show top summary

Header Summary

The total and statistical values of each column are displayed at the start of the grid, with a footer located at the end of the grid. If you set gridView.headerSummaries.visible = true, you can see that a bar with the same function as the footer is displayed at the starting position.

Column Header Summary

The way to set the summary displayed at the top is by setting it in the column.headerSummary property. It is the same as the setting method summarized in the footer.

function btnShowHeaderSummary() {
   gridView.headerSummaries.visible = true;
}
 
function btnHideHeaderSummary() {
   gridView.headerSummaries.visible = false;
}
var columns = [{
     ...
}, {
   "name": "QuantityPerUnit",
   "fieldName": "QuantityPerUnit",
   "width": "100",
   "header": {
       "text": "Quantity / Unit"
   },
   "headerSummary": {
     "text": "Total: "
   }
}, {
   "name": "Quantity",
   "fieldName": "Quantity",
   "width": "100",
   "header": {
       "text": "Quantity"
   },
   "headerSummary": {
     "expression": "sum",
     "numberFormat": "#,##0"
   },
   "footer": {
       "expression": "sum",
       "numberFormat": "#,##0"
   }
}, {
     ...
}];

Dynamic calculation of Column Header Summary

If the developer wants to calculate and display the summary displayed at the top, set it to column.headerSummary.valueCallback. The OrderID column displays the number of data rows/2, and the Quantity column displays the total of checked rows. (Proceed by returning the value you want to display.)

var columns = [{
     ...
}, {
   "name": "OrderID",
   "fieldName": "OrderID",
   "width": "80",
   "header": {
       "text": "Order ID"
   },
   "headerSummary": {
     valueCallback: function (grid, column, childIndex, summary, value) {
       //return the value you want to display
       return grid.getSummary("OrderID", "count") / 2;
     }
   }
}, {
     ...
}, {
   "name": "Quantity",
   "fieldName": "Quantity",
   "width": "100",
   "header": {
       "text": "Quantity",
       "styleName": "orange-column"
   },
   "headerSummary": {
     "numberFormat": "#,##0.#",
     valueCallback: function (grid, column, childIndex, summary, value) {
       var prod = grid.getDataSource();
       var checkedRows = grid.getCheckedRows();
       var sum = 0;
 
       checkedRows.forEach(function(e) {
         sum += prod.getValue(e, column.fieldName);
       });
 
       return sum;
     }
   },
   "footer": {
       "expression": "sum",
       "numberFormat": "#,##0"
   }
}, {
     ...
}];

Header Summary Display multiple rows

The top summary can be displayed in multiple rows.

  • options
gridView.setHeaderSummaries({
   visible:true,
   items:[
     {
       //styleName: "blue-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"
   },
   "summaries": [{
     "text": "Total ==> ",
   }, {
     "text": "Average ==> ",
   }]
}, {
   "name": "Quantity",
   "fieldName": "Quantity",
   "width": "100",
   "header": {
       "text": "Quantity"
   },
   "summaries": [{
     "expression": "sum",
     "numberFormat": "#,##0.00"
   }, {
     "expression": "avg",
     "numberFormat": "#,##0.00"
   }]
}, {
     ...
}];

Individual row colSpan of multiple Header Summary rows

A Header Summary consisting of multiple rows can be colSpanned for each row. In this case, layout must be used, and the text of the colSpanned cell is set in the first column (Country column).

gridView.setHeaderSummaries({
   visible:true,
   items:[
     {
       //styleName: "blue-column", if individual CSS style application is required
       height: 40
     },
     {
       height: 40
     }
   ]
});
  • columns
var columns = [{
   "name": "Country",
   "fieldName": "Country",
   "width": "100",
   "header": {
     "text": "Country"
   }
   "summaries": [{
     "text": "Total ==> ",
   }, {
     "text": "Average ==> ",
   }]
}, {
   ...
}, {
   "name": "Quantity",
   "fieldName": "Quantity",
   "width": "100",
   "header": {
       "text": "Quantity"
   },
   "summaries": [{
     "expression": "sum",
     "numberFormat": "#,##0.00"
   }, {
     "expression": "avg",
     "numberFormat": "#,##0.00"
   }]
}, {
     ...
}];
  • layout

Method 1.

gridView.layoutByColumn("Country").summaryUserSpans = [{ colspan: 3 }, { colspan: 3}];

Method 2.

var layout1 = [
   {
     column: "Country",
     summaryUserSpans: [{ colspan: 3 }, { colspan: 3}]
   },
   "CompanyName",
   "QuantityPerUnit",
   "Quantity",
   "OrderID",
   "CustomerID",
   "EmployeeID",
   "OrderDate",
   "Phone",
   "ProductName"
];
 
gridView.setColumnLayout(layout1);

rowSpan, colSpan of multiple Header Summary rows

Header Summary consisting of multiple rows can be rowSpan and colSpan. In this case, you must use a layout, and the text of the spanned cell is set in the first column (Country column).

gridView.setHeaderSummaries({
   visible:true,
   items:[
     {
       //styleName: "blue-column", if individual CSS style application is required
       height: 40
     },
     {
       height: 40
     }
   ]
});
  • columns
var columns = [{
   "name": "Country",
   "fieldName": "Country",
   "width": "100",
   "header": {
     "text": "Country"
   },
   "summaries": [{
     "text": "sum/average ==>"
   }]
}, {
   ...
}, {
   "name": "Quantity",
   "fieldName": "Quantity",
   "width": "100",
   "header": {
       "text": "Quantity"
   },
   "summaries": [{
     "expression": "sum",
     "numberFormat": "#,##0.00"
   }, {
     "expression": "avg",
     "numberFormat": "#,##0.00"
   }]
}, {
     ...
}];
  • layout

Method 1.

gridView.layoutByColumn("Country").summaryUserSpans = [{ rowspan: 2, colspan: 3 }];

Method 2.

var layout1 = [
   {
     column: "Country",
     summaryUserSpans: [{ rowspan: 2, colspan: 3 }]
   },
   "CompanyName",
   "QuantityPerUnit",
   "Quantity",
   "OrderID",
   "CustomerID",
   "EmployeeID",
   "OrderDate",
   "Phone",
   "ProductName"
];
 
gridView.setColumnLayout(layout1);
Column Footer HTML TemplateColumn header HTML Template