Customize Hierarchy Footer | Data Views | MESCIUS DataViewsJS JavaScript Demos

This example demonstrates how to customize hierarchy footers. In this demo, various aggregates have been added to each nodes' footer. To customize these footers, use the template option in the footer option array found in the hierarchy options. In this example, the template option contains formatting and the formulas necessary to display aggregates.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/TreeGrid/CustomizeHierarchyFooter/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="tree, treegrid, tree grid, hirarchy, hirarchical, parent child, template" />
<meta name="description" content="This example demonstrates how to customize hierarchy footers." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Customize Hierarchy Footer | Data Views | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="grid" class="grid"></div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
id: 'department',
caption: 'Department',
dataField: 'department',
width: 250,
},
{
id: 'budgetTotal',
caption: 'Total Budget',
dataField: '=SUMX(Hierarchy.Children(true, true), [budget])',
minWidth: 120,
format: '$0.00',
},
{
id: 'budget',
caption: 'Own Budget',
dataField: 'budget',
minWidth: 120,
format: '$0.00',
},
{
id: 'location',
caption: 'Location',
dataField: 'location',
minWidth: 120,
},
{
id: 'phone',
caption: 'Phone',
dataField: 'phone',
minWidth: 120,
},
{
id: 'country',
caption: 'Country',
dataField: 'country',
minWidth: 120,
},
{
id: 'id',
caption: 'Id',
dataField: 'id',
visible: false,
},
{
id: 'parent',
caption: 'Parent',
dataField: 'parent',
visible: false,
},
];
var hierarchyFooter =
'<p class="footer-p">Count: {{=it.eval("=COUNT([id])")}}, Total Budget: {{=it.eval("=SUMX(Hierarchy.Children(true, true), [budget]", "$#,#")}}, Max Budget: {{=it.eval("=MAX([budget]", "$#,#")}}, Min Budget: {{=it.eval("=MIN([budget]", "$#,#")}}</p>';
var layout = new GC.DataViews.GridLayout({
allowSorting: true,
showRowHeader: false,
hierarchy: {
keyField: 'id',
parentField: 'parent',
collapsed: true,
column: 'department',
footer: {
visible: true,
height: 40,
template: hierarchyFooter,
},
},
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); // expand first level
dataView.data.nodes.forEach(function (node) {
node.collapsed = false;
});
dataView.invalidate(); // focus data.view by default
document.getElementById('grid').focus();

var data = [{
id: 1,
department: 'Corporate Headquarters',
budget: 13000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: null
}, {
id: 2,
department: 'Sales and Marketing',
budget: 6000,
location: 'San Francisco',
phone: '(408) 555-1234',
country: 'US',
parent: 1
}, {
id: 3,
department: 'Finance',
budget: 4000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 1
}, {
id: 4,
department: 'Engineering',
budget: 11000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 1
}, {
id: 5,
department: 'Field Office: East Coast',
budget: 5000,
location: 'Toronto',
phone: '(416) 677-1000',
country: 'US',
parent: 2
}, {
id: 6,
department: 'Field Office: East Coast',
budget: 5000,
location: 'Boston',
phone: '(408) 555-1234',
country: 'US',
parent: 2
}, {
id: 7,
department: 'Pacific Rim Headquarters',
budget: 3000,
location: 'Kuaui',
phone: '(408) 555-1234',
country: 'US',
parent: 2
}, {
id: 8,
department: 'Marketing',
budget: 15000,
location: 'San Francisco',
phone: '(408) 555-1234',
country: 'US',
parent: 2
}, {
id: 9,
department: 'Field Office: Singapore',
budget: 3000,
location: 'Singapore',
phone: '(606) 555-5486',
country: 'US',
parent: 7
}, {
id: 10,
department: 'Field Office: Japan',
budget: 5000,
location: 'Tokyo',
phone: '(707) 555-1526',
country: 'US',
parent: 7
}, {
id: 11,
department: 'Consumer Electronics Div',
budget: 11000,
location: 'Burlington, VT',
phone: '(802) 555-1234',
country: 'US',
parent: 4
}, {
id: 12,
department: 'Software Products Div',
budget: 12000,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 4
}, {
id: 13,
department: 'Software Development',
budget: 4000,
location: 'Monterey',
phone: '(802) 555-1234',
country: 'US',
parent: 11
}, {
id: 14,
department: 'Quality Assurance',
budget: 4800,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 12
}, {
id: 15,
department: 'Customer Support',
budget: 3800,
location: 'Monterey',
phone: '(408) 555-1234',
country: 'US',
parent: 12
}, {
id: 16,
department: 'Research and Development',
budget: 4600,
location: 'Burlington, VT',
phone: '(408) 555-1234',
country: 'US',
parent: 12
}, {
id: 17,
department: 'Customer Services',
budget: 8500,
location: 'Burlington, VT',
phone: '(408) 555-1234',
country: 'US',
parent: 12
}, {
id: 18,
department: 'Corporate Headquarters',
budget: 16000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: null
}, {
id: 19,
department: 'Sales and Marketing',
budget: 5000,
location: 'Xian',
phone: '(2108) 555-29321',
country: 'China',
parent: 18
}, {
id: 20,
department: 'Finance',
budget: 21000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 18
}, {
id: 21,
department: 'Engineering',
budget: 10000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 18
}, {
id: 22,
department: 'Field Office: East Coast',
budget: 21000,
location: 'Beijing',
phone: '(2286) 62424-1000',
country: 'China',
parent: 19
}, {
id: 23,
department: 'Field Office: East Coast',
budget: 5000,
location: 'Boston',
phone: '(2108) 555-29321',
country: 'China',
parent: 19
}, {
id: 24,
department: 'Pacific Rim Headquarters',
budget: 3000,
location: 'Kuaui',
phone: '(2108) 555-29321',
country: 'China',
parent: 19
}, {
id: 25,
department: 'Marketing',
budget: 15000,
location: 'Xian',
phone: '(2108) 555-29321',
country: 'China',
parent: 19
}, {
id: 26,
department: 'Field Office: Singapore',
budget: 24000,
location: 'Singapore',
phone: '(606) 555-52186',
country: 'China',
parent: 24
}, {
id: 27,
department: 'Field Office: Japan',
budget: 5000,
location: 'Tokyo',
phone: '(24024) 555-15196',
country: 'China',
parent: 24
}, {
id: 28,
department: 'Consumer Electronics Div',
budget: 13000,
location: 'Burlington, VT',
phone: '(8019) 555-29321',
country: 'China',
parent: 21
}, {
id: 29,
department: 'Software Products Div',
budget: 8000,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 21
}, {
id: 30,
department: 'Software Development',
budget: 21000,
location: 'ShangHai',
phone: '(8019) 555-29321',
country: 'China',
parent: 28
}, {
id: 31,
department: 'Quality Assurance',
budget: 51900,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 29
}, {
id: 32,
department: 'CChinatomer Support',
budget: 32100,
location: 'ShangHai',
phone: '(2108) 555-29321',
country: 'China',
parent: 29
}, {
id: 33,
department: 'Research and Development',
budget: 1800,
location: 'Burlington, VT',
phone: '(2108) 555-29321',
country: 'China',
parent: 29
}, {
id: 34,
department: 'CChinatomer Services',
budget: 26600,
location: 'Burlington, VT',
phone: '(2108) 555-29321',
country: 'China',
parent: 29
}];

.grid .gc-cell.c1 {
justify-content: flex-end;
}
.footer-p {
font-weight: bold;
margin-bottom: 1em;
margin-top: 1em;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVlR3JpZC9DdXN0b21pemVIaWVyYXJjaHlGb290ZXIvcHVyZWpzL3N0eWxlcy5zY3NzIiwiRGF0YVZpZXdzL1RyZWVHcmlkL0N1c3RvbWl6ZUhpZXJhcmNoeUZvb3Rlci9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSxpQkFBQTtFQUNBLGtCQUFBO0VBQ0EsZUFBQTtBQ0NGIiwiZmlsZSI6IkRhdGFWaWV3cy9UcmVlR3JpZC9DdXN0b21pemVIaWVyYXJjaHlGb290ZXIvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZ3JpZCAuZ2MtY2VsbC5jMSB7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG59XG5cbi5mb290ZXItcCB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICBtYXJnaW4tYm90dG9tOiAxZW07XG4gIG1hcmdpbi10b3A6IDFlbTtcbn1cbiIsIi5ncmlkIC5nYy1jZWxsLmMxIHtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cblxuLmZvb3Rlci1wIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIG1hcmdpbi1ib3R0b206IDFlbTtcbiAgbWFyZ2luLXRvcDogMWVtO1xufSJdfQ== */