DevExtreme React - Select Nodes

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.

jQuery
JavaScript
var hierarchicalData = [{
    name: 'Fruits',
    isSelected: true,
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    isSelected: true,
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: hierarchicalData,
        keyExpr: 'name',
        displayExpr: 'name',
        selectedExpr: 'isSelected',
        showCheckBoxesMode: 'normal'
    });
});
Angular
HTML
TypeScript
<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name"
    selectedExpr="isSelected"
    showCheckBoxesMode="normal">
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        name: 'Fruits',
        isSelected: true,
        items: [
            { name: 'Apples' },
            { name: 'Oranges' }
        ]
    }, {
        name: 'Vegetables',
        isSelected: true,
        items: [
            { name: 'Cucumbers' },
            { name: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';

const hierarchicalData = [{
    name: 'Fruits',
    isSelected: true,
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    isSelected: true,
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

class App extends React.Component {
    render() {
        return (
            <TreeView
                keyExpr="name"
                displayExpr="name"
                showCheckBoxesMode="normal"
                selectedExpr="isSelected"
                items={hierarchicalData} />
        );
    }
}

export default App;

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.

jQuery
JavaScript
$("#treeViewContainer").dxTreeView("selectItem", nodeKey);
// $("#treeViewContainer").dxTreeView("unselectItem", nodeKey);
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent, { static: false }) treeView: DxTreeViewComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    selectNode (key) {
        this.treeView.instance.selectItem(key);
    }
    unselectNode (key) {
        this.treeView.instance.unselectItem(key);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';
const data = [ ... ];

class App extends React.Component {
    constructor() {
        super();
        this.treeViewRef = React.createRef();
        this.selectNode = this.selectNode.bind(this);
        this.unselectNode = this.unselectNode.bind(this);            
    }

    render() {
        return (
            <TreeView
                items={data}
                ref={this.treeViewRef} />
        );
    }

    selectNode(key) {
        this.treeView.selectItem(key);
    }

    unselectNode(key) {
        this.treeView.unselectItem(key);
    }  

    get treeView() {
        return this.treeViewRef.current.instance;
    }    
}

export default App;

To select or cancel the selection of all nodes programmatically, call the selectAll() or unselectAll() method.

jQuery
JavaScript
$("#treeViewContainer").dxTreeView("selectAll");
// $("#treeViewContainer").dxTreeView("unselectAll");
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent, { static: false }) treeView: DxTreeViewComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    selectAllNodes () {
        this.treeView.instance.selectAll();
    }
    unselectAllNodes () {
        this.treeView.instance.unselectAll();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';
const data = [ ... ];

class App extends React.Component {
    constructor() {
        super();
        this.treeViewRef = React.createRef();
        this.selectAllNodes = this.selectAllNodes.bind(this);
        this.unselectAllNodes = this.unselectAllNodes.bind(this);                
    }

    render() {
        return (
            <TreeView
                items={data}
                ref={this.treeViewRef} />
        );
    }

    selectAllNodes(e) {
        this.treeView.selectAll();
    }

    unselectAllNodes(e) {
        this.treeView.unselectAll();
    }  

    get treeView() {
        return this.treeViewRef.current.instance;
    }    
}

export default App;
NOTE
If the showCheckBoxesMode is "none", nodes selected using the API do not differ from unselected nodes in appearance.

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.

jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        // ...
        selectByClick: true
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    [selectByClick]="true">
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';

const data = [ ... ];

class App extends React.Component {
    render() {
        return (
            <TreeView
                dataSource={data} 
                selectByClick={true} />
        );
    }
}

export default App;

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.

jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        // ...
        showCheckBoxesMode: 'normal' // or 'selectAll'
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    showCheckBoxesMode="normal"> <!-- or "selectAll" -->
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';

const data = [...];

class App extends React.Component {
    render() {
        return (
            <TreeView
                dataSource={data} 
                showCheckBoxesMode="normal" /> {/* or 'selectAll' */}
        );
    }
}

export default App;

View Demo

Events

The TreeView raises the following selection-related events:

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.

jQuery
JavaScript
$(function() {
    $("#treeViewContainer").dxTreeView({
        onItemSelectionChanged: function (e) {
            // Handler of the "itemSelectionChanged" event
        },
        onSelectionChanged: function (e) {
            // Handler of the "selectionChanged" event
        },            
        onSelectAllValueChanged: function (e) {
            // Handler of the "selectAllValueChanged" event
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-view ...
    (onItemSelectionChanged)="onItemSelectionChanged($event)"
    (onSelectionChanged)="onSelectionChanged($event)"
    (onSelectAllValueChanged)="onSelectAllValueChanged($event)>
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    onItemSelectionChanged (e) {
        // Handler of the "itemSelectionChanged" event
    }
    onSelectionChanged (e) {
        // Handler of the "selectionChanged" event
    }        
    onSelectAllValueChanged (e) {
        // Handler of the "selectAllValueChanged" event
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
Vue
App.vue
<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>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';

const data = [ ... ];

class App extends React.Component {
    render() {
        return (
            <TreeView
                dataSource={data} 
                showCheckBoxesMode="normal"
                onItemSelectionChanged={this.onItemSelectionChanged}
                onSelectionChanged={this.onSelectionChanged} 
                onSelectAllValueChanged={this.onSelectAllValueChanged}/>
        );
    }

    onItemSelectionChanged(e) {
        // Handler of the "itemSelectionChanged" event
    }

    onSelectionChanged(e) {
        // Handler of the "selectionChanged" event
    }

    onSelectAllValueChanged(e) {
        // Handler of the "selectAllValueChanged" event
    }
}

export default App;

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.

JavaScript
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);

View Demo

See Also