SyncfusionExamples · UmaMaheswariChandrabose · Oct 5, 2022 · Oct 5, 2022
diff --git a/README.md b/README.md
@@ -1,2 +1,23 @@
-# deep-dive-into-aggregates-in-vue-treegrid
+# Deep Dive into Aggregates in Vue TreeGrid
+
 A quick-start project that helps you display aggregate values for columns in the Syncfusion Vue Tree Grid component. This project contains code to enable aggregate with their types. It also has code to display the custom aggregate function.
+
+Refer to the following documentation on aggregates in the Syncfusion Vue Tree Grid component: 
+https://ej2.syncfusion.com/vue/documentation/treegrid/aggregates/aggregates/
+
+Check out this online aggregates example of the Syncfusion Vue Tree Grid component: 
+https://ej2.syncfusion.com/vue/demos/#/bootstrap5/tree-grid/aggregate.html
+
+Refer to the following Syncfusion Vue Tree Grid getting started video: 
+https://www.youtube.com/watch?v=FEMyOHKjjao
+
+Check the following documentation to know more about template rendering in Syncfusion Vue components,
+https://ej2.syncfusion.com/vue/documentation/common/template/
+
+## Project prerequisites
+
+Make sure that you have the latest versions of Vue, Node, Vue Class Component, and Visual Studio Code in your machine before starting to work on this project.
+
+### How to run this application?
+
+To run this application, you need to clone the `deep-dive-into-aggregates-in-vue-treegrid` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm run serve` command.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "myvueproject",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-grids": "^20.2.45",
+    "@syncfusion/ej2-vue-treegrid": "^20.2.45",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13",
+    "vue-class-component": "^8.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,116 @@
+<template>
+  <ejs-treegrid :dataSource="data" childMapping="subtasks" 
+    :treeColumnIndex="1" :height='450'>
+    <e-columns>
+        <e-column field='ID' headerText='S.No' width='90' textAlign='Right'></e-column>
+        <e-column field='Name' headerText='ShipMent Name' width='220'></e-column>
+        <e-column field='category' headerText='Category' width='220'></e-column>
+        <e-column field='unitPrice' headerText='Unit Price($)' format='c2' width='120' textAlign='Right'></e-column>
+        <e-column field='price' headerText='Price($)' width='100' format='c' textAlign='Right'></e-column>
+    </e-columns>
+    <e-aggregates>
+      <e-aggregate>
+        <e-aggregate-columns :showChildSummary="false">
+          <e-aggregate-column field="price" type="Sum" :footerTemplate="footerSum"></e-aggregate-column>
+          <e-aggregate-column field="unitPrice" type="Max" :footerTemplate="footerMax"></e-aggregate-column>
+        </e-aggregate-columns>
+      </e-aggregate>
+      <e-aggregate>
+        <e-aggregate-columns :showChildSummary="true">
+          <e-aggregate-column field="category" type="Custom" :footerTemplate="customFooter" :customAggregate="customAggregateFn"></e-aggregate-column>
+        </e-aggregate-columns>
+      </e-aggregate>
+    </e-aggregates>
+  </ejs-treegrid>
+</template>
+<script>
+import { TreeGridComponent, ColumnsDirective, ColumnDirective, Aggregate, AggregatesDirective, 
+  AggregateDirective, AggregateColumnsDirective, AggregateColumnDirective } from "@syncfusion/ej2-vue-treegrid";
+import {summaryData} from './data.js';
+import {createApp} from 'vue/dist/vue.esm-bundler';
+import {getObject} from '@syncfusion/ej2-vue-grids';
+const app = createApp();
+var footerTemp = app.component("footerSum",{
+  template: "<span>Sum: {{data.Sum}}</span>",
+  data: () => ({})
+})
+var footerTemp1 = app.component("footerMax",{
+  template: "<span>Maximum: {{data.Max}}</span>",
+  data: () => ({})
+})
+var customAggregate = app.component("customFooter",{
+  template: "<b>Count of Frozen Seafood: {{data.Custom}}</b>",
+  data: () => ({})
+})
+export default{
+  name: 'App',
+  components: {
+    'ejs-treegrid': TreeGridComponent,
+    'e-columns': ColumnsDirective,
+    'e-column': ColumnDirective,
+    'e-aggregates': AggregatesDirective,
+    'e-aggregate': AggregateDirective,
+    'e-aggregate-columns': AggregateColumnsDirective,
+    'e-aggregate-column': AggregateColumnDirective
+  },
+  data: () => {
+    return {
+      data: summaryData,
+      footerMax(){
+        return{
+          template: footerTemp1
+        }
+      },
+      customFooter(){
+        return{
+          template: customAggregate
+        }
+      },
+      footerSum(){
+        return{
+          template: footerTemp
+        }
+      }
+    }
+  },
+  methods:{
+    customAggregateFn: function(data){
+      let sampleData = getObject('result', data);
+      let countLength = 0;
+      sampleData.filter((item) => {
+          let data = getObject('category', item);
+          if (data === 'Frozen seafood') {
+              countLength++;
+          }
+      });
+      return countLength;
+    }
+  },
+  provide:{
+    treegrid: [Aggregate]
+  }
+}
+</script>
+
+<style>
+  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
+
+  .btn{
+    margin: 1%;
+  }
+
+  .e-image {
+    height: 13px;
+    width: 14px;
+    vertical-align: middle;
+  }
+</style>
diff --git a/src/__VLS_template.js b/src/__VLS_template.js
@@ -0,0 +1,9 @@
+import { TreeGridComponent } from '@syncfusion/ej2-vue-treegrid';
+
+export default (await import('vue')).defineComponent({
+name: 'App',
+components: {
+'ejs-treegrid': TreeGridComponent
+}
+});
+const __VLS_template = () => ({});
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/data.js b/src/data.js
@@ -0,0 +1,44 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+export let summaryData =  [{
+    ID: '1',
+    Name: 'Order 1',
+    units: 1395,
+    unitPrice: 47.00,
+    price: 65565,
+    category: 'Seafoods',
+    subtasks: [
+        { ID: '1.1', Name: 'Mackerel', category: 'Frozen seafood', units: 235, unitPrice: 12.26, price: 2881.1 },
+        { ID: '1.2', Name: 'Yellowfin Tuna', category: 'Frozen seafood', units: 324, unitPrice: 18.45, price: 5977.8 },
+        { ID: '1.3', Name: 'Herrings', category: 'Frozen seafood', units: 488, unitPrice: 11.45, price: 5587.6 },
+        { ID: '1.4', Name: 'Preserved Olives', category: 'Edible', units: 125, unitPrice: 19.56, price: 2445 },
+        { ID: '1.5', Name: 'Sweet corn Frozen', category: 'Edible', units: 223, unitPrice: 12.34, price: 2751.82 }
+     ]
+},
+{
+    ID: '2',
+    Name: 'Order 2',
+    units: 1944,
+    unitPrice: 58.45,
+    price: 1245.73,
+    category: 'Products',
+    subtasks: [
+        { ID: '2.1', Name: 'Tilapias', category: 'Frozen seafood', units: 278, unitPrice: 15.45, price: 4295.1 },
+        { ID: '2.2', Name: 'White Shrimp', category: 'Frozen seafood', units: 560, unitPrice: 17.66, price: 9889.6 },
+        { ID: '2.3', Name: 'Fresh Cheese', category: 'Dairy', units: 323, unitPrice: 12.35, price: 3989 },
+        { ID: '2.4', Name: 'Blue Veined Cheese', category: 'Dairy', units: 370, unitPrice: 15.77, price: 5834.9 },
+        { ID: '2.5', Name: 'Butter', category: 'Dairy', units: 413, unitPrice: 19.45, price: 8032.85 }
+    ]
+},
+{
+    ID: '3',
+    Name: 'Order 3',
+    units: 1120,
+    unitPrice: 33.45,
+    price: 37464,
+    category: 'Crystals',
+    subtasks: [
+        { ID: '3.1', Name: 'Lead glassware', category: 'Solid crystals', units: 542, unitPrice: 19.56, price: 10601.52 },
+        { ID: '3.2', Name: 'Pharmaceutical Glassware', category: 'Solid crystals', units: 324, unitPrice: 11.36, price: 3680.64 },
+        { ID: '3.3', Name: 'Glass beads', category: 'Solid crystals', units: 254, unitPrice: 16.11, price: 4091.94 }
+    ]
+}];
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import {registerLicense} from '@syncfusion/ej2-base';
+registerLicense("ORg4AjUWIQA/Gnt2VVhiQlFaclxJVHxIe0x0RWFbb1x6cVZMYFVBNQtUQF1hS35bd0NjX31XcX1QR2FY")
+createApp(App).mount('#app')
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})