Customize Hierarchy Footer

This example demonstrates how to customize hierarchy footers.

<p>This example demonstrates how to customize hierarchy footers. In this demo, various aggregates have been added to each nodes' footer.</p> <p>To customize these footers, use the <strong>template</strong> option in the&nbsp;<strong>footer</strong> option array found in the <strong>hierarchy</strong> options. In this example, the <strong>template</strong> option contains formatting and the formulas necessary to display aggregates.</p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display:none;visibility:hidden" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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== */