Skip to content

Commit 840ef61

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Vue Tree Grid Row Template sample
Vue Tree Grid Row Template sample
1 parent 906b067 commit 840ef61

File tree

13 files changed

+412
-1
lines changed

13 files changed

+412
-1
lines changed

‎README.md‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,20 @@
1-
# customize-vue-tree-grid-rows-using-a-template
1+
# Customize Vue Tree Grid Rows Using a Template
2+
23
A quick-start project that shows you how to customize the Vue TreeGrid rows using a template. The rowTemplate property accepts either string or HTML element ID values, which are then used as the template for the row. In this project, we present employee information with a photo and details like name, address, etc.
4+
5+
Refer to the following documentation on the row template in the Syncfusion Vue Tree Grid component:
6+
https://ej2.syncfusion.com/vue/documentation/treegrid/row/row-template/
7+
8+
Check out this online row template example for the Syncfusion Vue TreeGrid component:
9+
https://ej2.syncfusion.com/vue/demos/#/bootstrap5/tree-grid/row-template.html
10+
11+
Refer to the following Syncfusion Vue TreeGrid getting started video:
12+
https://www.youtube.com/watch?v=FEMyOHKjjao
13+
14+
## Project prerequisites
15+
16+
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.
17+
18+
### How to run this application?
19+
20+
To run this application, you need to clone the `customize-vue-tree-grid-rows-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: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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-grids": "^20.2.45",
12+
"@syncfusion/ej2-vue-treegrid": "^20.2.45",
13+
"core-js": "^3.8.3",
14+
"vue": "^3.2.13",
15+
"vue-class-component": "^8.0.0-rc.1"
16+
},
17+
"devDependencies": {
18+
"@babel/core": "^7.12.16",
19+
"@babel/eslint-parser": "^7.12.16",
20+
"@vue/cli-plugin-babel": "~5.0.0",
21+
"@vue/cli-plugin-eslint": "~5.0.0",
22+
"@vue/cli-service": "~5.0.0",
23+
"eslint": "^7.32.0",
24+
"eslint-plugin-vue": "^8.0.3"
25+
},
26+
"eslintConfig": {
27+
"root": true,
28+
"env": {
29+
"node": true
30+
},
31+
"extends": [
32+
"plugin:vue/vue3-essential",
33+
"eslint:recommended"
34+
],
35+
"parserOptions": {
36+
"parser": "@babel/eslint-parser"
37+
},
38+
"rules": {}
39+
},
40+
"browserslist": [
41+
"> 1%",
42+
"last 2 versions",
43+
"not dead",
44+
"not ie 11"
45+
]
46+
}

‎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: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<ejs-treegrid :dataSource="data" childMapping="Children" :allowPaging="true"
3+
:treeColumnIndex="0" :height='450' :rowHeight="83" :rowTemplate="'customTemplate'">
4+
<e-columns>
5+
<e-column field='EmpID' headerText='Employee ID' width='180'></e-column>
6+
<e-column field='Name' headerText='Employee Name'></e-column>
7+
<e-column headerText='Employee Details' width='350'></e-column>
8+
<e-column field='DOB' headerText='DOB'></e-column>
9+
</e-columns>
10+
<template v-slot:customTemplate="{data}">
11+
<tr>
12+
<td class="border" style="padding-left: 18px;">
13+
<span>{{data.EmpID}}</span>
14+
</td>
15+
<td class="border" style="padding: 10px 0 0 20px;">
16+
<div style="font-size: 14px;">
17+
{{data.Name}}
18+
<p style="font-size: 9px;">{{data.Designation}}</p>
19+
</div>
20+
</td>
21+
<td class="border">
22+
<div>
23+
<div style="position: relative;display:inline-block">
24+
<img :src="'https://ej2.syncfusion.com/vue/demos/source/tree-grid/images/'+ data.FullName + '.png'"
25+
alt="data.FullName"/>
26+
</div>
27+
<div style="display: inline-block;">
28+
<div style="padding: 5px;">{{data.Address}}</div>
29+
<div style="padding: 5px;">{{data.Country}}</div>
30+
<div style="padding: 5px;font-size: 12px;">{{data.Contact}}</div>
31+
</div>
32+
</div>
33+
</td>
34+
<td class="border" style="padding-left: 20px;">
35+
<span>{{format(data.DOB)}}</span>
36+
</td>
37+
</tr>
38+
</template>
39+
</ejs-treegrid>
40+
</template>
41+
<script>
42+
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page } from "@syncfusion/ej2-vue-treegrid";
43+
import {employeeData} from './data.js';
44+
import {Internationalization} from '@syncfusion/ej2-base';
45+
let object = new Internationalization();
46+
export default{
47+
name: 'App',
48+
components: {
49+
'ejs-treegrid': TreeGridComponent,
50+
'e-columns': ColumnsDirective,
51+
'e-column': ColumnDirective
52+
},
53+
data: () => {
54+
return {
55+
data: employeeData
56+
}
57+
},
58+
methods:{
59+
format(date){
60+
return object.formatDate(date,{skeleton:'yMd', type:'date'})
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+
81+
#app{
82+
max-width: 80%;
83+
}
84+
85+
.border{
86+
border: solid #e0e0e0;
87+
border-width: 1px 0 0 0;
88+
}
89+
</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)