Skip to content

Commit 3859ecb

Browse files
maheshtpsmaheshtps
authored
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Treeview Customization sample
2 parents 1bfb005 + 39dc670 commit 3859ecb

File tree

10 files changed

+203
-2
lines changed

10 files changed

+203
-2
lines changed

‎README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
1-
# how-to-customize-the-vue-treeview-component
2-
A quick start Vue project that shows how to customize the Vue TreeView component. It includes a code snippet for customizing the nodes based on levels, expand, and collapse icons. It also includes a code snippet for displaying the number of messages as a badge and displaying images and icons to the tree nodes.
1+
# How to Customize the Vue TreeView Component
2+
A quick start Vue project that shows how to customize the Vue TreeView component. It includes a code snippet for customizing the nodes based on levels, expand, and collapse icons. It also includes a code snippet for displaying the number of messages as a badge and displaying images and icons to the tree nodes.
3+
4+
Refer to the following documentation to learn about the Vue TreeView component:
5+
https://ej2.syncfusion.com/vue/documentation/treeview/template
6+
7+
Check out this online example of the Vue TreeView Component:
8+
https://ej2.syncfusion.com/vue/demos/#/bootstrap5/treeview/template.html
9+
10+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
11+
12+
### How to run this application?
13+
To run this application, you need to clone the `how-to-customize-the-vue-treeview-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "my-project",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-navigations": "^22.2.5",
13+
"@syncfusion/ej2-vue-notifications": "^22.2.5",
14+
"vue": "^3.3.4"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^4.2.3",
18+
"vite": "^4.4.5"
19+
}
20+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="tree-template-control-wrapper">
3+
<ejs-treeview id="template" :fields="fields" :nodeTemplate="'nodeTemplate'"
4+
cssClass="custom">
5+
<template v-slot:nodeTemplate="{data}">
6+
<div v-if="data.image">
7+
<img class='image' :src='data.image' alt='employee'/>
8+
</div>
9+
<span>{{ data.name }}</span>
10+
<div v-if="data.count" class="nodeBadge">
11+
<span class="e-badge e-badge-primary">{{ data.count }}</span>
12+
</div>
13+
</template>
14+
</ejs-treeview>
15+
</div>
16+
</template>
17+
18+
<script setup>
19+
import { TreeViewComponent as EjsTreeview } from "@syncfusion/ej2-vue-navigations";
20+
const data = [
21+
{ "id": 1, "name": "Favorites", "hasChild": true},
22+
{ "id": 2,"pid": 1, "name": "Sales Reports", icon:"pdf" },
23+
{ "id": 4,"pid": 1, "name": "Marketing Reports", icon:"pdf"},
24+
{ "id": 3,"pid": 1, "name": "Pictures", "hasChild": true},
25+
{ "id": 13,"pid": 3, "name": "Employee1", image: "https://ej2.syncfusion.com/demos/src/treeview/images/employees/1.png"},
26+
{ "id": 14,"pid": 3, "name": "Employee2", image: "https://ej2.syncfusion.com/demos/src/treeview/images/employees/2.png"},
27+
{ "id": 5, "name": "My Folder", "hasChild": true, "expanded": true },
28+
{ "id": 6,"pid": 5, "name": "Inbox", "selected": true, "count":51 },
29+
{ "id": 7,"pid": 5, "name": "Drafts", "count":9},
30+
{ "id": 8,"pid": 5, "name": "Deleted Items"},
31+
{ "id": 9,"pid": 5, "name": "Sent Items", "count":20},
32+
{ "id": 10,"pid": 5, "name": "Sales Reports" },
33+
{ "id": 11,"pid": 5, "name": "Marketing Reports"},
34+
{ "id": 12,"pid": 5, "name": "Outbox"}
35+
];
36+
const fields = { dataSource: data, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild',
37+
iconCss:'icon' };</script>
38+
39+
<style>
40+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
41+
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
42+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
43+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
44+
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
45+
</style>

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎src/style.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
.tree-template .tree-template-control-wrapper {
3+
display: block;
4+
max-width: 450px;
5+
max-height: 350px;
6+
margin: auto;
7+
overflow: auto;
8+
border: 1px solid #dddddd;
9+
border-radius: 3px;
10+
}
11+
.nodeBadge {
12+
float: right;
13+
margin-left: 50px;
14+
}
15+
/*apply custom css to first level*/
16+
.custom .e-level-1 > .e-text-content .e-list-text {
17+
font-weight: bold;
18+
}
19+
20+
/*apply custom css to second level*/
21+
.custom .e-level-2 > .e-text-content .e-list-text {
22+
color: darkmagenta;
23+
}
24+
25+
/*apply custom css to all the leaf nodes*/
26+
.custom .e-level-3 > .e-text-content .e-list-text {
27+
font-style: italic;
28+
color:blue;
29+
}
30+
.custom.e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before {
31+
content: '\e700';
32+
font-size: 12px;
33+
}
34+
.custom .e-list-item .e-icons {
35+
font-family: "Customize-icon";
36+
}
37+
@font-face {
38+
font-family: 'Customize-icon';
39+
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmcYqIngAAAcwAAAD8aGVhZBWT124AAADQAAAANmhoZWEHmANtAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQBAAH4AAAHEAAAACG1heHABEAAxAAABCAAAACBuYW1l/qscPAAAAsgAAAJ5cG9zdIPGFvoAAAVEAAAAVgABAAADUv9qAFoEAAAA//8D6QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAIKcGUl8PPPUACwPoAAAAANlGSVAAAAAA2UZJUAAAAAAD6QPpAAAACAACAAAAAAAAAAEAAAADACUAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAEAAfgADAAAAAAPpA+kACAAWACQAAAEhFSEHMzcnIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYCMf6kAWqUqMK8rgF+goKK/qCEfn5Coquf/amRkZoBkpqRkUq3xLcCKmSTybt4if6ghYKChQFgiUJBQRma/m6akZGaAZKaSElJAAMAAAAAA+gD6QAGABQAIgAAASMXNyMRIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYBvrLp6JmGAW6BgYf+oYiBgUGhqqH9qZOTmgGOmpOTSrbCtgGy6ekBbwuI/qGHgYGIAV6IQEFBFpr+cZmTk5oBj5lKSUkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA4AAQABAAAAAAACAAcADwABAAAAAAADAA4AFgABAAAAAAAEAA4AJAABAAAAAAAFAAsAMgABAAAAAAAGAA4APQABAAAAAAAKACwASwABAAAAAAALABIAdwADAAEECQAAAAIAiQADAAEECQABABwAiwADAAEECQACAA4ApwADAAEECQADABwAtQADAAEECQAEABwA0QADAAEECQAFABYA7QADAAEECQAGABwBAwADAAEECQAKAFgBHwADAAEECQALACQBdyBDdXN0b21pemUtaWNvblJlZ3VsYXJDdXN0b21pemUtaWNvbkN1c3RvbWl6ZS1pY29uVmVyc2lvbiAxLjBDdXN0b21pemUtaWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEMAdQBzAHQAbwBtAGkAegBlAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFy1hcnJvdy1jaXJjbGUtcmlnaHQtXzAxEi1hcnJvdy1jaXJjbGUtZG93bgAAAAA=) format('truetype');
40+
font-weight: normal;
41+
font-style: normal;
42+
}
43+
.image {
44+
float: left;
45+
padding: 0px 16px 11px 0;
46+
width: 35px;
47+
}
48+
.e-treeview .e-list-icon {
49+
background-repeat: no-repeat;
50+
background-image: url(https://ej2.syncfusion.com/demos/src/treeview/images/icons/file_icons.png);
51+
height: 20px;
52+
}
53+
54+
.e-treeview .e-list-icon.pdf {
55+
background-position: -10px -104px;
56+
float: left;
57+
margin-top: 5px;
58+
}

‎vite.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)