Chart of Accounts

This example demonstrates how to perform two tasks: customizing the hierarchical tree column's presentation and adding a formula to the group footers.

<p>This example demonstrates how to perform two tasks: customizing the hierarchical tree column's presentation and adding a formula to the group footers.</p> <p>Notice the icons in the tree column. That icon is custom and is defined in the <strong>accountPresenter</strong> variable. Presenters format column data. To use them, you define them and then add their names to the column definition's <strong>presenter</strong> option. You can see this in the definition for the <strong>accountName</strong> field.</p> <p>Also in this grid, you will notice aggregate totals in the <strong>accountName</strong> and <strong>total</strong> fields. These are also added as formulas in the <strong>hierarchyFooter</strong> property in the column definition.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/DataViews/TreeGrid/ChartOfAccounts/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" /> <meta name="description" content="This example demonstrates how to perform two tasks: customizing the hierarchical tree column&#x27;s presentation and adding a formula to the group footers." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Chart of Accounts | 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 SITE_ROOT = window.process.env.SITE_ROOT; var accountPresenter = '<img src="'.concat( SITE_ROOT, '/images/icon.png" style="vertical-align: top; position: relative; top: 1px; margin-right: 0.2em;"></img><span>{{=it.accountName}}</span>' ); var cols = [ { id: 'accountName', caption: 'Account Name', dataField: 'accountName', minWidth: 120, presenter: accountPresenter, hierarchyFooter: '<span style="font-weight:bold">Count: {{=it.eval("=COUNT([id])")}}</span>', }, { id: 'type', caption: 'Type', dataField: 'type', }, { id: 'commodity', caption: 'Currency', dataField: 'commodity', }, { id: 'expense', caption: 'Total Expense', dataField: '=SUMX(Hierarchy.Children(true, true), [total])', format: '$0.00', hierarchyFooter: '<span style="font-weight:bold">Total: {{=it.eval("=SUMX(Hierarchy.Children(true, true), [total])", "$0.0")}}</span>', }, { id: 'total', caption: 'Own Expense', dataField: 'total', format: '$0.00', }, { id: 'id', caption: 'Id', dataField: 'id', visible: false, }, { id: 'parentID', caption: 'ParentID', dataField: 'parentID', visible: false, }, ]; var layout = new GC.DataViews.GridLayout({ allowSorting: true, showRowHeader: false, hierarchy: { keyField: 'id', parentField: 'parentID', collapsed: false, footer: { visible: true, }, }, }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); // focus data.view by default document.getElementById('grid').focus();
// chart accounts var data = [ { id: 0, accountName: 'Assets', type: 'Asset', commodity: 'US Dollar', total: 10, parentID: null, }, { id: 1, accountName: 'Checking', type: 'Bank', commodity: 'US Dollar', total: 300, parentID: 0, }, { id: 2, accountName: 'Saving', type: 'Bank', commodity: 'US Dollar', total: 630, parentID: 0, }, { id: 3, accountName: 'Equity', type: 'Equity', commodity: 'US Dollar', total: 500, parentID: null, }, { id: 4, accountName: 'Opening Balance', type: 'Equity', commodity: 'US Dollar', total: 100, parentID: 3, }, { id: 5, accountName: 'Expenses', type: 'Expense', commodity: 'US Dollar', total: 250, parentID: null, }, { id: 6, accountName: 'Electricity', type: 'Expense', commodity: 'US Dollar', total: 460, parentID: 5, }, { id: 7, accountName: 'Groceries', type: 'Expense', commodity: 'US Dollar', total: 360, parentID: 5, }, { id: 8, accountName: 'Phone', type: 'Expense', commodity: 'US Dollar', total: 120, parentID: 5, }, { id: 9, accountName: 'Rent', type: 'Expense', commodity: 'US Dollar', total: 250, parentID: 5, }, { id: 10, accountName: 'Taxes', type: 'Expense', commodity: 'US Dollar', total: 420, parentID: 5, }, { id: 11, accountName: 'Federal', type: 'Expense', commodity: 'US Dollar', total: 120, parentID: 10, }, { id: 12, accountName: 'Medicare', type: 'Expense', commodity: 'US Dollar', total: 510, parentID: 10, }, { id: 13, accountName: 'Social Security', type: 'Expense', commodity: 'US Dollar', total: 150, parentID: 10, }, { id: 14, accountName: 'Income', type: 'Income', commodity: 'US Dollar', total: 120, parentID: null, }, { id: 15, accountName: 'Salary', type: 'Income', commodity: 'US Dollar', total: 410, parentID: 14, }, { id: 16, accountName: 'Liabilities', type: 'Liability', commodity: 'US Dollar', total: 150, parentID: null, }, { id: 17, accountName: 'Visa', type: 'Credit Card', commodity: 'US Dollar', total: 580, parentID: 16, }, ];
.grid .gc-cell.c3 { text-align: right; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9UcmVlR3JpZC9DaGFydE9mQWNjb3VudHMvcHVyZWpzL3N0eWxlcy5zY3NzIiwiRGF0YVZpZXdzL1RyZWVHcmlkL0NoYXJ0T2ZBY2NvdW50cy9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGlCQUFBO0FDQ0YiLCJmaWxlIjoiRGF0YVZpZXdzL1RyZWVHcmlkL0NoYXJ0T2ZBY2NvdW50cy9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ncmlkIC5nYy1jZWxsLmMzIHtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG59XG4iLCIuZ3JpZCAuZ2MtY2VsbC5jMyB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufSJdfQ== */