Vue Tree View - Node Selection and Customization

To select a node, users can click a checkbox next to it. Set the showCheckBoxesMode to "normal" or "selectAll" to display node checkboxes. The "selectAll" mode also enables a checkbox that selects all nodes simultaneously. If selectByClick is enabled, users can click nodes to select them.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div> <div class="form"> <h4>Employees</h4> <DxTreeView id="treeview" ref="treeViewRef" :width="340" :height="320" :items="employees" :show-check-boxes-mode="showCheckBoxesModeValue" :selection-mode="selectionModeValue" :select-nodes-recursive="selectNodesRecursiveValue" :select-by-click="selectByClickValue" @selection-changed="treeViewSelectionChanged" @content-ready="treeViewContentReady" > <template #item="item"> {{ item.data.fullName + ' (' + item.data.position + ')' }} </template> </DxTreeView> {{ ' ' }} <div class="selected-container">Selected employees <DxList id="selected-employees" show-scrollbar="always" :width="400" :height="200" :items="selectedEmployees" > <template #item="item"> {{ item.data.prefix + " " + item.data.fullName + " (" + item.data.position + ")" }} </template> </DxList> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="option"> <span>Show Check Boxes Mode:</span> <div class="editor-container"> <DxSelectBox :items="showCheckBoxesModes" :input-attr="{ 'aria-label': 'Show Checkboxes Mode' }" v-model:value="showCheckBoxesModeValue" @value-changed="showCheckBoxesModeValueChanged" /> </div> </div> <div class="option"> <span>Selection Mode:</span> <div class="editor-container"> <DxSelectBox :items="selectionModes" v-model:value="selectionModeValue" :input-attr="{ 'aria-label': 'Selection Mode' }" :disabled="isSelectionModeDisabled" @value-changed="selectionModeValueChanged" /> </div> </div> <div class="option"> <div class="caption-placeholder"> </div> <div class="editor-container"> <DxCheckBox text="Select Nodes Recursive" :disabled="isRecursiveDisabled" v-model:value="selectNodesRecursiveValue" /> </div> </div> <div class="option"> <div class="caption-placeholder"> </div> <div class="editor-container"> <DxCheckBox text="Select By Click" v-model:value="selectByClickValue" /> </div> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxTreeView from 'devextreme-vue/tree-view'; import DxList from 'devextreme-vue/list'; import DxSelectBox from 'devextreme-vue/select-box'; import DxCheckBox from 'devextreme-vue/check-box'; import { employees } from './data.ts'; const selectionModes = ['multiple', 'single']; const showCheckBoxesModes = ['normal', 'selectAll', 'none']; const selectedEmployees = ref([]); const showCheckBoxesModeValue = ref(showCheckBoxesModes[0]); const selectionModeValue = ref(selectionModes[0]); const isSelectionModeDisabled = ref(false); const isRecursiveDisabled = ref(false); const selectNodesRecursiveValue = ref(true); const selectByClickValue = ref(false); const treeViewRef = ref(); function treeViewSelectionChanged() { syncSelection(); } function treeViewContentReady() { syncSelection(); } function syncSelection() { selectedEmployees.value = treeViewRef.value.instance .getSelectedNodes() .map((node) => node.itemData); } function showCheckBoxesModeValueChanged(e) { if (e.value === 'selectAll') { selectionModeValue.value = 'multiple'; isRecursiveDisabled.value = false; } isSelectionModeDisabled.value = e.value === 'selectAll'; } function selectionModeValueChanged(e) { if (e.value === 'single') { selectNodesRecursiveValue.value = false; treeViewRef.value.instance.unselectAll(); } isRecursiveDisabled.value = e.value === 'single'; } </script> <style scoped> .form > h4 { margin-bottom: 20px; } .form > div, #treeview { display: inline-block; vertical-align: top; } .selected-container { padding: 20px; margin-left: 20px; background-color: rgba(191, 191, 191, 0.15); font-size: 115%; font-weight: bold; } #selected-employees { margin-top: 20px; } .selected-container .dx-list-item-content { padding-left: 0; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; box-sizing: border-box; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; margin-top: 10px; margin-right: 9px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .options-container { display: flex; justify-content: space-between; align-items: stretch; } .editor-container { height: 100%; display: flex; align-items: center; } .editor-container > * { width: 100%; } .option:last-of-type { margin-right: 0; } </style>

export const employees = [{ id: 1, fullName: 'John Heart', prefix: 'Dr.', position: 'CEO', expanded: true, items: [{ id: 2, fullName: 'Samantha Bright', prefix: 'Dr.', position: 'COO', expanded: true, items: [{ id: 3, fullName: 'Kevin Carter', prefix: 'Mr.', position: 'Shipping Manager', }, { id: 14, fullName: 'Victor Norris', prefix: 'Mr.', selected: true, position: 'Shipping Assistant', }], }, { id: 4, fullName: 'Brett Wade', prefix: 'Mr.', position: 'IT Manager', expanded: true, items: [{ id: 5, fullName: 'Amelia Harper', prefix: 'Mrs.', position: 'Network Admin', }, { id: 6, fullName: 'Wally Hobbs', prefix: 'Mr.', position: 'Programmer', }, { id: 7, fullName: 'Brad Jameson', prefix: 'Mr.', position: 'Programmer', }, { id: 8, fullName: 'Violet Bailey', prefix: 'Ms.', position: 'Jr Graphic Designer', }], }, { id: 9, fullName: 'Barb Banks', prefix: 'Mrs.', position: 'Support Manager', expanded: true, items: [{ id: 10, fullName: 'Kelly Rodriguez', prefix: 'Ms.', position: 'Support Assistant', }, { id: 11, fullName: 'James Anderson', prefix: 'Mr.', position: 'Support Assistant', }], }], }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.5/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

Use the following TreeView properties to adjust selection:

selectionMode
Specifies whether multiple node selection is allowed.
selectNodesRecursive
Specifies whether nested nodes are selected together with their parent.
selectedExpr
A data field that allows you to pre-select a node. In this demo, the data field is called selected, and it is set to true for the "Victor Norris" node (see the data source).
onSelectionChanged
A function that allows you to handle selection changes. In this demo, it is used to synchronize the List with the TreeView.

The TreeView also provides the following methods to manage selection programmatically:

selectItem / unselectItem
Selects or unselects a single node. Accepts the node key, data object, or DOM node.
selectAll() / unselectAll()
Selects or unselects all nodes.
getSelectedNodes() / getSelectedNodeKeys()
Gets the selected nodes or their keys. In this demo, getSelectedNodes() is used to prepare data for the List.

This demo also shows how to specify an itemTemplate for node customization. Node data is passed to the template as an argument.