Customize the tree nodes based on levels in Vue TreeView component

17 Feb 202524 minutes to read

You can customize the tree nodes based on their levels by adding a custom cssClass to the component and enabling specific 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>