This example demonstrates how to perform two tasks: customizing the hierarchical tree column's presentation and adding a formula to the group footers.
Notice the icons in the tree column. That icon is custom and is defined in the accountPresenter variable.
Presenters format column data. To use them, you define them and then add their names to the column definition's presenter option.
You can see this in the definition for the accountName field.
Also in this grid, you will notice aggregate totals in the accountName and total fields.
These are also added as formulas in the hierarchyFooter property in the column definition.
<!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'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 | 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&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&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 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== */
