Check uncheck the checkbox on clicking the tree node text in Vue TreeView component

17 Feb 202515 minutes to read

You can toggle the checkboxes in the TreeView by clicking on the tree node text. This can be achieved using the nodeClicked event of the TreeView.

<template>
    <div id="app">
        <div class="control_wrapper">
            <ejs-treeview id='treeview' ref="treeview" :fields="fields" :showCheckBox='true' :nodeClicked='nodeChecked'
                :keyPress='nodeChecked'></ejs-treeview>
        </div>
    </div>
</template>

<script setup>

    import { TreeViewComponent as EjsTreeview } from "@syncfusion/ej2-vue-navigations";
    const treeview = ref(null);
    var dataSource = [
        { id: 1, name: 'Australia', hasChild: true, expanded: true },
        { id: 2, pid: 1, name: 'New South Wales', isChecked: true },
        { id: 3, pid: 1, name: 'Victoria' },
        { id: 4, pid: 1, name: 'South Australia' },
        { id: 6, pid: 1, name: 'Western Australia', isChecked: true },
        { id: 7, name: 'Brazil', hasChild: true },
        { id: 8, pid: 7, name: 'Paraná' },
        { id: 9, pid: 7, name: 'Ceará' },
        { id: 10, pid: 7, name: 'Acre' },
        { id: 11, name: 'China', hasChild: true },
        { id: 12, pid: 11, name: 'Guangzhou' },
        { id: 13, pid: 11, name: 'Shanghai' },
        { id: 14, pid: 11, name: 'Beijing' },
        { id: 15, pid: 11, name: 'Shantou' },
        { id: 16, name: 'France', hasChild: true },
        { id: 17, pid: 16, name: 'Pays de la Loire' },
        { id: 18, pid: 16, name: 'Aquitaine' },
        { id: 19, pid: 16, name: 'Brittany' },
        { id: 20, pid: 16, name: 'Lorraine' },
        { id: 21, name: 'India', hasChild: true },
        { id: 22, pid: 21, name: 'Assam' },
        { id: 23, pid: 21, name: 'Bihar' },
        { id: 24, pid: 21, name: 'Tamil Nadu' },
        { id: 25, pid: 21, name: 'Punjab' }
    ];

    const fields = { dataSource: dataSource, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };

    const nodeChecked = (args) => {
        var treeObj = treeview.value.ej2Instances;
        var checkedNode = [args.node];
        if (args.event.target.classList.contains('e-fullrow') || args.event.key == "Enter") {
            var getNodeDetails = treeObj.getNode(args.node);
            if (getNodeDetails.isChecked == 'true') {
                treeObj.uncheckAll(checkedNode);
            } else {
                treeObj.checkAll(checkedNode);
            }
        }
    };

</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

    .control_wrapper {
        display: block;
        max-width: 350px;
        max-height: 350px;
        margin: auto;
        overflow: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>
<template>
    <div id="app">
        <div class="control_wrapper">
            <ejs-treeview id='treeview' ref="treeview" :fields="fields" :showCheckBox='true' :nodeClicked='nodeChecked'
                :keyPress='nodeChecked'></ejs-treeview>
        </div>
    </div>
</template>

<script>
    import { TreeViewComponent } from "@syncfusion/ej2-vue-navigations";
    import { ref } from 'vue';
    export default {
        name: "App",
        components: {
            "ejs-treeview": TreeViewComponent
        },
        data() {
            var dataSource = [
                { id: 1, name: 'Australia', hasChild: true, expanded: true },
                { id: 2, pid: 1, name: 'New South Wales', isChecked: true },
                { id: 3, pid: 1, name: 'Victoria' },
                { id: 4, pid: 1, name: 'South Australia' },
                { id: 6, pid: 1, name: 'Western Australia', isChecked: true },
                { id: 7, name: 'Brazil', hasChild: true },
                { id: 8, pid: 7, name: 'Paraná' },
                { id: 9, pid: 7, name: 'Ceará' },
                { id: 10, pid: 7, name: 'Acre' },
                { id: 11, name: 'China', hasChild: true },
                { id: 12, pid: 11, name: 'Guangzhou' },
                { id: 13, pid: 11, name: 'Shanghai' },
                { id: 14, pid: 11, name: 'Beijing' },
                { id: 15, pid: 11, name: 'Shantou' },
                { id: 16, name: 'France', hasChild: true },
                { id: 17, pid: 16, name: 'Pays de la Loire' },
                { id: 18, pid: 16, name: 'Aquitaine' },
                { id: 19, pid: 16, name: 'Brittany' },
                { id: 20, pid: 16, name: 'Lorraine' },
                { id: 21, name: 'India', hasChild: true },
                { id: 22, pid: 21, name: 'Assam' },
                { id: 23, pid: 21, name: 'Bihar' },
                { id: 24, pid: 21, name: 'Tamil Nadu' },
                { id: 25, pid: 21, name: 'Punjab' }
            ];
            return {
                fields: { dataSource: dataSource, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
            }
        },
        methods: {
            nodeChecked: function (args) {
                var treeObj =this.$refs.treeview.ej2Instances;
                var checkedNode = [args.node];
                if (args.event.target.classList.contains('e-fullrow') || args.event.key == "Enter") {
                    var getNodeDetails = treeObj.getNode(args.node);
                    if (getNodeDetails.isChecked == 'true') {
                        treeObj.uncheckAll(checkedNode);
                    } else {
                        treeObj.checkAll(checkedNode);
                    }
                }
            }
        }
    }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

    .control_wrapper {
        display: block;
        max-width: 350px;
        max-height: 350px;
        margin: auto;
        overflow: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>