Initially
If a node is supposed to be selected initially, set its selected field to true. If another field specifies whether a node is selected or not, assign its name to the selectedExpr option as shown in the following code.
- <template>
- <DxTreeView
- key-expr="name"
- display-expr="name"
- show-check-boxes-mode="normal"
- selected-expr="isSelected"
- :items="hierarchicalData"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const hierarchicalData = [{
- name: 'Fruits',
- isSelected: true,
- items: [
- { name: 'Apples' },
- { name: 'Oranges' }
- ]
- }, {
- name: 'Vegetables',
- isSelected: true,
- items: [
- { name: 'Cucumbers' },
- { name: 'Tomatoes' }
- ]
- }];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- hierarchicalData
- };
- },
- };
- </script>
Using the API
To select or cancel the selection of a node programmatically, call the selectItem(itemElement) or unselectItem(itemElement) method passing the key of the node as a parameter.
- <template>
- <dx-tree-view
- :ref="treeViewRef"
- :items="data"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const treeViewRef = 'treeView';
- const data = [ ... ];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data,
- treeViewRef
- };
- },
- computed: {
- treeView: function() {
- return this.$refs[treeViewRef].instance;
- }
- },
- methods: {
- selectNode(key) {
- this.treeView.selectItem(key);
- },
- unselectNode(key) {
- this.treeView.unselectItem(key);
- }
- }
- };
- </script>
To select or cancel the selection of all nodes programmatically, call the selectAll() or unselectAll() method.
- <template>
- <dx-tree-view
- :ref="treeViewRef"
- :items="data"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const treeViewRef = 'treeView';
- const data = [ ... ];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data,
- treeViewRef
- };
- },
- computed: {
- treeView: function() {
- return this.$refs[treeViewRef].instance;
- }
- },
- methods: {
- selectAllNodes() {
- this.treeView.selectAll();
- },
- unselectAllNodes() {
- this.treeView.unselectAll();
- }
- }
- };
- </script>
User Interaction
If only a single node should be in the selected state at a time, set the selectByClick option to true. In this case, an end user can click a node to select it.
- <template>
- <DxTreeView
- :data-source="data"
- :select-by-click="true"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const data = [ ... ];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data
- };
- }
- };
- </script>
To select several nodes simultaneously, set the showCheckBoxesMode option to "normal". This adds a check box to each node that enables you to select these nodes. You can also set the showCheckBoxesMode option to "selectAll" to allow a user to select all nodes.
- <template>
- <DxTreeView
- :data-source="data"
- show-check-boxes-mode="normal" /> <!-- or "selectAll" -->
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const data = [...];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data
- };
- }
- };
- </script>
Events
The TreeView raises the following selection-related events:
itemSelectionChanged
Raised after a node's selection state changes.selectionChanged
Raised after the tree view's selection state changes.selectAllValueChanged
Raised after the "Select All" check box's state changes.
You can handle these events with functions. Assign the handling functions to the onItemSelectionChanged and onSelectAllValueChanged options when you configure the widget if they are going to remain unchanged at runtime.
- <template>
- <DxTreeView
- :data-source="data"
- show-check-boxes-mode="normal"
- @item-selection-changed="onItemSelectionChanged"
- @selection-changed="onSelectionChanged"
- @select-all-value-changed="onSelectAllValueChanged"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const data = [ ... ];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data
- };
- },
- methods: {
- onItemSelectionChanged(e) {
- // Handler of the "itemSelectionChanged" event
- }
- onSelectionChanged(e) {
- // Handler of the "selectionChanged" event
- }
- onSelectAllValueChanged(e) {
- // Handler of the "selectAllValueChanged" event
- }
- }
- };
- </script>
If you are going to change the event handler at runtime, or if you need to attach several handlers to the event, subscribe to it using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
- var itemSelectionChangedHandler1 = function (e) {
- // First handler of the "itemSelectionChanged" event
- };
- var itemSelectionChangedHandler2 = function (e) {
- // Second handler of the "itemSelectionChanged" event
- };
- $("#treeViewContainer").dxTreeView("instance")
- .on("itemSelectionChanged", itemSelectionChangedHandler1)
- .on("itemSelectionChanged", itemSelectionChangedHandler2);
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.