Skip to content

Commit 199c610

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding column template sample
Adding column template sample
1 parent 6b12584 commit 199c610

File tree

13 files changed

+425
-1
lines changed

13 files changed

+425
-1
lines changed

‎README.md‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,31 @@
1-
# customize-vue-tree-grid-columns-using-a-template
1+
# Customize Vue Tree Grid Columns Using a Template
2+
23
A quick-start project that helps you to customize the Vue TreeGrid column using a template and header template property. The columns->template property accepts either string or HTML element`s ID value, which will be used as the template for the cell.
4+
5+
Refer to the following documentation on the column template in the Syncfusion Vue Tree Grid component:
6+
https://ej2.syncfusion.com/vue/documentation/treegrid/columns/column-template/
7+
8+
Refer to the following documentation on the header template in the Syncfusion Vue Tree Grid component:
9+
https://ej2.syncfusion.com/vue/documentation/treegrid/columns/headers/#header-template
10+
11+
Check out this online column template example for the Syncfusion Vue TreeGrid component:
12+
https://ej2.syncfusion.com/vue/demos/#/bootstrap5/tree-grid/columntemplate.html
13+
14+
Check out this online header template example for the Syncfusion Vue TreeGrid component:
15+
https://ej2.syncfusion.com/vue/demos/#/bootstrap5/tree-grid/headertemplate.html
16+
17+
Check the following documentation to learn more about template rendering in Syncfusion Vue components:
18+
https://ej2.syncfusion.com/vue/documentation/common/template/
19+
Check the following documentation to learn more about Icon’s library in Syncfusion Vue components:
20+
https://ej2.syncfusion.com/vue/documentation/appearance/icons/
21+
22+
Refer to the following Syncfusion Vue TreeGrid getting started video:
23+
https://www.youtube.com/watch?v=FEMyOHKjjao
24+
25+
## Project prerequisites
26+
27+
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.
28+
29+
### How to run this application?
30+
31+
To run this application, you need to clone the `customize-vue-tree-grid-columns-using-a-template` 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.

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎jsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"baseUrl": "./",
6+
"moduleResolution": "node",
7+
"paths": {
8+
"@/*": [
9+
"src/*"
10+
]
11+
},
12+
"lib": [
13+
"esnext",
14+
"dom",
15+
"dom.iterable",
16+
"scripthost"
17+
]
18+
}
19+
}

‎package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "myvueproject",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@syncfusion/ej2-vue-charts": "^20.3.52",
12+
"@syncfusion/ej2-vue-grids": "^20.2.45",
13+
"@syncfusion/ej2-vue-treegrid": "^20.2.45",
14+
"core-js": "^3.8.3",
15+
"vue": "^3.2.13",
16+
"vue-class-component": "^8.0.0-rc.1"
17+
},
18+
"devDependencies": {
19+
"@babel/core": "^7.12.16",
20+
"@babel/eslint-parser": "^7.12.16",
21+
"@vue/cli-plugin-babel": "~5.0.0",
22+
"@vue/cli-plugin-eslint": "~5.0.0",
23+
"@vue/cli-service": "~5.0.0",
24+
"eslint": "^7.32.0",
25+
"eslint-plugin-vue": "^8.0.3"
26+
},
27+
"eslintConfig": {
28+
"root": true,
29+
"env": {
30+
"node": true
31+
},
32+
"extends": [
33+
"plugin:vue/vue3-essential",
34+
"eslint:recommended"
35+
],
36+
"parserOptions": {
37+
"parser": "@babel/eslint-parser"
38+
},
39+
"rules": {}
40+
},
41+
"browserslist": [
42+
"> 1%",
43+
"last 2 versions",
44+
"not dead",
45+
"not ie 11"
46+
]
47+
}

‎public/favicon.ico‎

4.19 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<ejs-treegrid :dataSource="data" childMapping="Children" :allowPaging="true"
3+
:treeColumnIndex="0" :height='450' :rowHeight="83">
4+
<e-columns>
5+
<e-column field='EmpID' headerText='Employee ID' width='180'></e-column>
6+
<e-column headerText="Image" width="120" :template="'imageTemplate'"></e-column>
7+
<e-column :headerTemplate="'iconTemplate'" :template="'nameTemplate'"></e-column>
8+
<e-column :headerTemplate="'iconTemplate2'" :template="'addrTemplate'" width='350'></e-column>
9+
<e-column field='DOB' :headerTemplate="'iconTemplate3'" format='yMd'></e-column>
10+
</e-columns>
11+
<template v-slot:addrTemplate="{data}">
12+
<div style="display:inline-block;">
13+
<div>{{data.Address}}, {{data.Country}}</div>
14+
<div class="e-column-data">{{data.Contact}}</div>
15+
</div>
16+
</template>
17+
<template v-slot:imageTemplate="{data}">
18+
<img :src="'https://ej2.syncfusion.com/vue/demos/source/tree-grid/images/'+ data.FullName + '.png'"
19+
alt="data.FullName"/>
20+
</template>
21+
<template v-slot:nameTemplate="{data}">
22+
<div style="font-size: 14px;">
23+
{{data.Name}}
24+
<p class="e-column-data">{{data.Designation}}</p>
25+
</div>
26+
</template>
27+
<template v-slot:iconTemplate>
28+
<div>
29+
<span class="e-icons e-people e-font-icon" style="font-size: 15px;"></span>
30+
<span class="e-headerText" style="padding-left: 10px;">Employee Name</span>
31+
</div>
32+
</template>
33+
<template v-slot:iconTemplate2>
34+
<div>
35+
<span class="e-icons e-location e-font-icon" style="font-size: 15px;"></span>
36+
<span class="e-headerText" style="padding-left: 10px;">Employee Address</span>
37+
</div>
38+
</template>
39+
<template v-slot:iconTemplate3>
40+
<div>
41+
<span class="e-icons e-day" style="font-size: 15px;"></span>
42+
<span class="e-headerText" style="padding-left: 10px;">DOB</span>
43+
</div>
44+
</template>
45+
</ejs-treegrid>
46+
</template>
47+
<script>
48+
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page } from "@syncfusion/ej2-vue-treegrid";
49+
import {employeeData} from './data.js';
50+
51+
export default{
52+
name: 'App',
53+
components: {
54+
'ejs-treegrid': TreeGridComponent,
55+
'e-columns': ColumnsDirective,
56+
'e-column': ColumnDirective
57+
},
58+
data: () => {
59+
return {
60+
data: employeeData
61+
}
62+
},
63+
provide:{
64+
treegrid: [Page]
65+
}
66+
}
67+
</script>
68+
69+
<style>
70+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
71+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
72+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
73+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
74+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
75+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
76+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
77+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
78+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
79+
@import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
80+
#app{
81+
max-width: 80%;
82+
}
83+
.e-font-icon{
84+
vertical-align: middle;
85+
}
86+
.e-column-data{
87+
font-size: 9px;
88+
padding-top: 15px;
89+
}
90+
</style>

‎src/__VLS_template.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { TreeGridComponent } from '@syncfusion/ej2-vue-treegrid';
2+
3+
export default (await import('vue')).defineComponent({
4+
name: 'App',
5+
components: {
6+
'ejs-treegrid': TreeGridComponent
7+
}
8+
});
9+
const __VLS_template = () => ({});

‎src/assets/logo.png‎

6.69 KB
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br>
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8+
</p>
9+
<h3>Installed CLI Plugins</h3>
10+
<ul>
11+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13+
</ul>
14+
<h3>Essential Links</h3>
15+
<ul>
16+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21+
</ul>
22+
<h3>Ecosystem</h3>
23+
<ul>
24+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29+
</ul>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'HelloWorld',
36+
props: {
37+
msg: String
38+
}
39+
}
40+
</script>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
h3 {
45+
margin: 40px 0 0;
46+
}
47+
ul {
48+
list-style-type: none;
49+
padding: 0;
50+
}
51+
li {
52+
display: inline-block;
53+
margin: 0 10px;
54+
}
55+
a {
56+
color: #42b983;
57+
}
58+
</style>

0 commit comments

Comments
 (0)