Customize the tree nodes based on levels in Vue Treeview component
11 Jun 202424 minutes to read
You can customize the tree nodes level wise by adding custom cssClass to the component and enabling styles.
<template>
<div id="app">
<div class="control_wrapper">
<ejs-treeview id='treeview' :fields="fields" :allowEditing='true' cssClass='mytree'></ejs-treeview>
</div>
<div class="details">
<label>Note:</label>
<div><b>1. The font-weight "Bold" is applied for all the leaf nodes</b></div>
<div><i>2. The font-weight "Italic" is applied for first level nodes</i></div>
<div style="color: darkmagenta">3. The color "darkmagenta" is applied for second level nodes</div>
</div>
</div>
</template>
<script setup>
import { TreeViewComponent as EjsTreeview } from "@syncfusion/ej2-vue-navigations";
var dataSource = [
{
id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
{
id: '02', name: 'Local Disk (D:)',
subChild: [
{
id: '02-01', name: 'Personals',
subChild: [
{ id: '02-01-01', name: 'My photo.png' },
{ id: '02-01-02', name: 'Rental document.docx' },
{ id: '02-01-03', name: 'Pay slip.pdf' },
]
},
{
id: '02-02', name: 'Projects',
subChild: [
{ id: '02-02-01', name: 'ASP Application' },
{ id: '02-02-02', name: 'TypeScript Application' },
{ id: '02-02-03', name: 'React Application' },
]
},
{
id: '02-03', name: 'Office',
subChild: [
{ id: '02-03-01', name: 'Work details.docx' },
{ id: '02-03-02', name: 'Weekly report.docx' },
{ id: '02-03-03', name: 'Wish list.csv' },
]
},
]
},
{
id: '03', name: 'Local Disk (E:)', icon: 'folder',
subChild: [
{
id: '03-01', name: 'Pictures',
subChild: [
{ id: '03-01-01', name: 'Wind.jpg' },
{ id: '03-01-02', name: 'Stone.jpg' },
{ id: '03-01-03', name: 'Home.jpg' },
]
},
{
id: '03-02', name: 'Documents',
subChild: [
{ id: '03-02-01', name: 'Environment Pollution.docx' },
{ id: '03-02-02', name: 'Global Warming.ppt' },
{ id: '03-02-03', name: 'Social Network.pdf' },
]
},
{
id: '03-03', name: 'Study Materials',
subChild: [
{ id: '03-03-01', name: 'UI-Guide.pdf' },
{ id: '03-03-02', name: 'Tutorials.zip' },
{ id: '03-03-03', name: 'TypeScript.7z' },
]
},
]
}
];
const fields = { dataSource: dataSource, id: 'id', text: 'name', child: 'subChild' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
.control_wrapper {
display: block;
max-width: 400px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
#app {
width: 350px;
margin: 0 auto;
}
.details {
padding-left: 10px;
}
/*apply custom css to first level*/
.mytree .e-level-1>.e-text-content .e-list-text {
font-style: italic;
}
/*apply custom css to second level*/
.mytree .e-level-2>.e-text-content .e-list-text {
color: darkmagenta;
}
/*apply custom css to all the leaf nodes*/
.mytree .e-level-3>.e-text-content .e-list-text {
font-weight: bold;
}
</style><template>
<div id="app">
<div class="control_wrapper">
<ejs-treeview id='treeview' :fields="fields" :allowEditing='true' cssClass='mytree'></ejs-treeview>
</div>
<div class="details">
<label>Note:</label>
<div><b>1. The font-weight "Bold" is applied for all the leaf nodes</b></div>
<div><i>2. The font-weight "Italic" is applied for first level nodes</i></div>
<div style="color: darkmagenta">3. The color "darkmagenta" is applied for second level nodes</div>
</div>
</div>
</template>
<script>
import { TreeViewComponent } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-treeview": TreeViewComponent
},
data() {
var dataSource = [
{
id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
{
id: '02', name: 'Local Disk (D:)',
subChild: [
{
id: '02-01', name: 'Personals',
subChild: [
{ id: '02-01-01', name: 'My photo.png' },
{ id: '02-01-02', name: 'Rental document.docx' },
{ id: '02-01-03', name: 'Pay slip.pdf' },
]
},
{
id: '02-02', name: 'Projects',
subChild: [
{ id: '02-02-01', name: 'ASP Application' },
{ id: '02-02-02', name: 'TypeScript Application' },
{ id: '02-02-03', name: 'React Application' },
]
},
{
id: '02-03', name: 'Office',
subChild: [
{ id: '02-03-01', name: 'Work details.docx' },
{ id: '02-03-02', name: 'Weekly report.docx' },
{ id: '02-03-03', name: 'Wish list.csv' },
]
},
]
},
{
id: '03', name: 'Local Disk (E:)', icon: 'folder',
subChild: [
{
id: '03-01', name: 'Pictures',
subChild: [
{ id: '03-01-01', name: 'Wind.jpg' },
{ id: '03-01-02', name: 'Stone.jpg' },
{ id: '03-01-03', name: 'Home.jpg' },
]
},
{
id: '03-02', name: 'Documents',
subChild: [
{ id: '03-02-01', name: 'Environment Pollution.docx' },
{ id: '03-02-02', name: 'Global Warming.ppt' },
{ id: '03-02-03', name: 'Social Network.pdf' },
]
},
{
id: '03-03', name: 'Study Materials',
subChild: [
{ id: '03-03-01', name: 'UI-Guide.pdf' },
{ id: '03-03-02', name: 'Tutorials.zip' },
{ id: '03-03-03', name: 'TypeScript.7z' },
]
},
]
}
];
return {
fields: { dataSource: dataSource, id: 'id', text: 'name', child: 'subChild' },
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
.control_wrapper {
display: block;
max-width: 400px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
#app {
width: 350px;
margin: 0 auto;
}
.details {
padding-left: 10px;
}
/*apply custom css to first level*/
.mytree .e-level-1>.e-text-content .e-list-text {
font-style: italic;
}
/*apply custom css to second level*/
.mytree .e-level-2>.e-text-content .e-list-text {
color: darkmagenta;
}
/*apply custom css to all the leaf nodes*/
.mytree .e-level-3>.e-text-content .e-list-text {
font-weight: bold;
}
</style>