Your search did not match any results.
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.

Use the following TreeView options 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:

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

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import TreeView from 'devextreme-react/tree-view'; import List from 'devextreme-react/list'; import SelectBox from 'devextreme-react/select-box'; import CheckBox from 'devextreme-react/check-box'; import { employees } from './data.js'; class App extends React.Component { constructor() { super(); this.treeViewRef = React.createRef(); const showCheckBoxesModes = ['normal', 'selectAll', 'none']; const selectionModes = ['multiple', 'single']; const showCheckBoxesMode = showCheckBoxesModes[0]; const selectionMode = selectionModes[0]; this.state = { employees, selectedEmployees: [], selectNodesRecursive: true, selectByClick: false, showCheckBoxesModes, showCheckBoxesMode, selectionModes, selectionMode, isSelectionModeDisabled: false, isRecursiveDisabled: false }; this.treeViewSelectionChanged = this.treeViewSelectionChanged.bind(this); this.treeViewContentReady = this.treeViewContentReady.bind(this); this.showCheckBoxesModeValueChanged = this.showCheckBoxesModeValueChanged.bind(this); this.selectionModeValueChanged = this.selectionModeValueChanged.bind(this); this.selectNodesRecursiveValueChanged = this.selectNodesRecursiveValueChanged.bind(this); this.selectByClickValueChanged = this.selectByClickValueChanged.bind(this); } render() { return ( <div> <div className="form"> <h4>Employees</h4> <TreeView id="treeview" ref={this.treeViewRef} width={340} height={320} items={this.state.employees} selectNodesRecursive={this.state.selectNodesRecursive} selectByClick={this.state.selectByClick} showCheckBoxesMode={this.state.showCheckBoxesMode} selectionMode={this.state.selectionMode} onSelectionChanged={this.treeViewSelectionChanged} onContentReady={this.treeViewContentReady} itemRender={renderTreeViewItem} /> {' '} <div className="selected-container">Selected employees <List id="selected-employees" width={400} height={200} showScrollbar="always" items={this.state.selectedEmployees} itemRender={renderListItem} /> </div> </div> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Show Check Boxes Mode:</span> <SelectBox items={this.state.showCheckBoxesModes} value={this.state.showCheckBoxesMode} onValueChanged={this.showCheckBoxesModeValueChanged} /> </div> &nbsp; <div className="option"> <span>Selection Mode:</span> <SelectBox items={this.state.selectionModes} value={this.state.selectionMode} disabled={this.state.isSelectionModeDisabled} onValueChanged={this.selectionModeValueChanged} /> </div> &nbsp; <div className="option recursive-option"> <CheckBox text="Select Nodes Recursive" value={this.state.selectNodesRecursive} disabled={this.state.isRecursiveDisabled} onValueChanged={this.selectNodesRecursiveValueChanged} /> </div> &nbsp; <div className="option"> <CheckBox text="Select By Click" value={this.state.selectByClick} onValueChanged={this.selectByClickValueChanged} /> </div> </div> </div> ); } treeViewSelectionChanged(e) { this.syncSelection(e.component); } treeViewContentReady(e) { this.syncSelection(e.component); } syncSelection(treeView) { const selectedEmployees = treeView.getSelectedNodes() .map((node) => { return { fullName: node.itemData.fullName, prefix: node.itemData.prefix, position: node.itemData.position }; }); this.setState(() => { return { selectedEmployees: selectedEmployees }; }); } showCheckBoxesModeValueChanged(e) { let state = { showCheckBoxesMode: e.value }; if(e.value === 'selectAll') { state.selectionMode = 'multiple'; state.isRecursiveDisabled = false; } state.isSelectionModeDisabled = e.value === 'selectAll'; this.setState(state); } selectionModeValueChanged(e) { let state = { selectionMode: e.value }; if(e.value === 'single') { state.selectNodesRecursive = false; this.treeView.unselectAll(); } state.isRecursiveDisabled = e.value === 'single'; this.setState(state); } selectNodesRecursiveValueChanged(e) { this.setState({ selectNodesRecursive: e.value }); } selectByClickValueChanged(e) { this.setState({ selectByClick: e.value }); } get treeView() { return this.treeViewRef.current.instance; } } function renderTreeViewItem(item) { return `${item.fullName} (${item.position})`; } function renderListItem(item) { return `${item.prefix} ${item.fullName} (${item.position})`; } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.form>h4 { margin-bottom: 20px; } .form>div, #treeview { display: inline-block; vertical-align: top; } #selected-employees { margin-top: 20px; } .selected-container { padding: 20px; margin-left: 20px; background-color: rgba(191, 191, 191, 0.15); font-size: 115%; font-weight: bold; } .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%; display: inline-block; margin-top: 10px; margin-right: 5px; box-sizing: border-box; } .recursive-option { padding-left: 10px; } .option:last-of-type { margin-right: 0px; }
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' }] }] }];
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@20.1', 'devextreme-react': 'npm:devextreme-react@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.0', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.0', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true, react: true } });