Footer Location

DataViews supports using the group footer as the group summary row.

<p>DataViews supports using the group footer as the group summary row.</p> <p>Set the <strong>location</strong> option in the group <strong>footer</strong> settings to <strong>top</strong> or <strong>bottom</strong> to show the footer at the top or bottom. In this demo, the group footer is at the top, and it adds together the data in each column in that group. This also works with subgroups, and shows above the rows in the group when the group is expanded.</p> <p>Try changing the footer location with the drop down menu above the grid and see how it changes the position when the groups are expanded.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Grouping/FooterLocation/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="grouping, footer, location, top" /> <meta name="description" content="DataViews supports using the group footer as the group summary row." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Footer Location | Features | 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/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></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 class="main-container"> <div class="sample-options"> <label>Footer location:</label> <select id="footer-location"> <option value="top" selected>top</option> <option value="bottom">bottom</option> </select> </div> <div id="grid" class="grid"></div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var cols = [ { id: 'location', caption: 'Location', dataField: 'location', allowCellMerging: true, width: 120, }, { id: 'dept', caption: 'Department', dataField: 'dept', allowCellMerging: true, width: 120, }, { id: 'name', caption: 'Employee', dataField: 'name', width: 90, }, { id: 'basic', caption: 'Basic', columns: [ { id: 'BeLate', caption: 'BeLate', dataField: 'BeLate', groupFooter: '{{=it.eval("=sum([BeLate])")}}', width: 70, }, { id: 'LeaveEarly', caption: 'LeaveEarly', dataField: 'LeaveEarly', groupFooter: '{{=it.eval("=sum([LeaveEarly])")}}', width: 95, }, { id: 'Absent', caption: 'Absent', dataField: 'Absent', groupFooter: '{{=it.eval("=sum([Absent])")}}', width: 70, }, { id: 'Total', caption: 'Total', dataType: 'number', dataField: '=[BeLate]+[LeaveEarly]+[Absent]', groupFooter: '{{=it.eval("=sum([Total])")}}', width: 55, }, ], }, { id: 'askForLeave', caption: 'Ask For Leave', columns: [ { id: 'Leave', caption: 'Leave', dataField: 'Leave', groupFooter: '{{=it.eval("=sum([Leave])")}}', width: 65, }, { id: 'SickLeave', caption: 'SickLeave', dataField: 'SickLeave', groupFooter: '{{=it.eval("=sum([SickLeave])")}}', width: 90, }, { id: 'TotalLeave', caption: 'TotalLeave', dataType: 'number', dataField: '=[Leave]+[SickLeave]', groupFooter: '{{=it.eval("=sum([TotalLeave])")}}', width: 95, }, ], }, ]; var topFooterLocation = [ { field: 'location', header: { visible: false, }, footer: { location: 'top', }, collapsed: true, }, { field: 'dept', header: { visible: false, }, footer: { location: 'top', }, collapsed: true, }, ]; var bottomFooterLocation = [ { field: 'location', header: { visible: false, }, footer: { location: 'bottom', }, collapsed: true, }, { field: 'dept', header: { visible: false, }, footer: { location: 'bottom', }, collapsed: true, }, ]; var layout = new GC.DataViews.GridLayout({ allowColumnReorder: false, allowCellMerging: true, cellMergingSettings: { groupedColumn: { onlyShowFirstRowValueInEachGroup: true, showIcon: true, }, }, grouping: topFooterLocation, }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); $('#footer-location').on('change', function () { var sel = document.getElementById('footer-location'); var value = sel.options[sel.selectedIndex].value; if (value === 'top') { dataView.data.groupDescriptors = topFooterLocation; } else { dataView.data.groupDescriptors = bottomFooterLocation; } }); // focus data.view by default document.getElementById('grid').focus();
var data = [ { location: 'US District', dept: 'Development', name: 'Jack', BeLate: 3, LeaveEarly: 1, Absent: 1, Leave: 2, SickLeave: 1, }, { location: 'US District', dept: 'Development', name: 'Tom', BeLate: 0, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 1, }, { location: 'US District', dept: 'Development', name: 'Tim', BeLate: 4, LeaveEarly: 1, Absent: 2, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Development', name: 'Paul', BeLate: 1, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Development', name: 'Lucy', BeLate: 5, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Personnel', name: 'Lily', BeLate: 4, LeaveEarly: 4, Absent: 1, Leave: 1, SickLeave: 1, }, { location: 'US District', dept: 'Personnel', name: 'Jackson', BeLate: 2, LeaveEarly: 2, Absent: 2, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Personnel', name: 'Robert', BeLate: 1, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Personnel', name: 'John', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 1, }, { location: 'US District', dept: 'Sales', name: 'Young', BeLate: 3, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 1, }, { location: 'US District', dept: 'Sales', name: 'Rose', BeLate: 1, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 1, }, { location: 'US District', dept: 'Sales', name: 'Ben', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Logistics', name: 'Ailsa', BeLate: 1, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Logistics', name: 'Selina', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'US District', dept: 'Logistics', name: 'Philip', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Development', name: 'Jack', BeLate: 3, LeaveEarly: 1, Absent: 1, Leave: 2, SickLeave: 1, }, { location: 'China District', dept: 'Development', name: 'Tom', BeLate: 0, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 1, }, { location: 'China District', dept: 'Development', name: 'Tim', BeLate: 4, LeaveEarly: 1, Absent: 2, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Development', name: 'Paul', BeLate: 1, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Development', name: 'Lucy', BeLate: 5, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Personnel', name: 'Lily', BeLate: 4, LeaveEarly: 4, Absent: 1, Leave: 1, SickLeave: 1, }, { location: 'China District', dept: 'Personnel', name: 'Jackson', BeLate: 2, LeaveEarly: 2, Absent: 2, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Personnel', name: 'Robert', BeLate: 1, LeaveEarly: 1, Absent: 1, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Personnel', name: 'John', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 1, }, { location: 'China District', dept: 'Sales', name: 'Young', BeLate: 3, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 1, }, { location: 'China District', dept: 'Sales', name: 'Rose', BeLate: 1, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 1, }, { location: 'China District', dept: 'Sales', name: 'Ben', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Logistics', name: 'Ailsa', BeLate: 1, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Logistics', name: 'Selina', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, { location: 'China District', dept: 'Logistics', name: 'Philip', BeLate: 0, LeaveEarly: 0, Absent: 0, Leave: 1, SickLeave: 0, }, ];
.main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { background: #fbfbfb; box-sizing: border-box; overflow: auto; padding: 10px; flex-grow: 0; flex-shrink: 0; } .sample-options label { margin-right: 5px; } .grid { height: calc(100% - 52); width: 100%; flex-grow: 1; flex-shrink: 1; } .gc-group-footer-cell { background-color: transparent; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0dyb3VwaW5nL0Zvb3RlckxvY2F0aW9uL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0dyb3VwaW5nL0Zvb3RlckxvY2F0aW9uL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxjQUFBO0VBQ0EsYUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDQ0Y7QURDRTtFQUNFLGlCQUFBO0FDQ0o7O0FER0E7RUFDRSx1QkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0FGOztBREdBO0VBQ0UsNkJBQUE7QUNBRiIsImZpbGUiOiJGZWF0dXJlcy9Hcm91cGluZy9Gb290ZXJMb2NhdGlvbi9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuXG4gIGxhYmVsIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gNTIpO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmdjLWdyb3VwLWZvb3Rlci1jZWxsIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMTBweDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbn1cbi5zYW1wbGUtb3B0aW9ucyBsYWJlbCB7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gNTIpO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmdjLWdyb3VwLWZvb3Rlci1jZWxsIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG59Il19 */