JavaScript/jQuery Tree View - Selection and Customization

The DevExtreme JavaScript TreeView allows users to select individual tree nodes (on click or using checkboxes). In this demo, selected items appear as a flat (non-hierarchical) List.

Also available for:

ASP.NET Core ASP.NET MVC 5

Backend API

$(() => { const selectedEmployeesList = $('#selected-employees').dxList({ width: 400, height: 200, showScrollbar: 'always', itemTemplate(item) { return `<div>${item.prefix} ${item.fullName} (${item.position})</div>`; }, }).dxList('instance'); const treeView = $('#treeview').dxTreeView({ items: employees, width: 340, height: 320, showCheckBoxesMode: 'normal', disabledNodeSelectionMode: 'never', onSelectionChanged(e) { syncSelection(e.component); }, onContentReady(e) { syncSelection(e.component); }, itemTemplate(item) { return `<div>${item.fullName} (${item.position})</div>`; }, }).dxTreeView('instance'); function syncSelection(treeViewInstance) { const selectedEmployees = treeViewInstance.getSelectedNodes() .map((node) => node.itemData); selectedEmployeesList.option('items', selectedEmployees); } $('#checkBoxVisibility').dxSelectBox({ items: ['normal', 'selectAll', 'none'], inputAttr: { 'aria-label': 'Show Checkboxes Mode' }, value: 'normal', onValueChanged(e) { treeView.option('showCheckBoxesMode', e.value); if (e.value === 'selectAll') { selectionModeSelectBox.option('value', 'multiple'); recursiveCheckBox.option('disabled', false); } selectionModeSelectBox.option('disabled', e.value === 'selectAll'); }, }); const selectionModeSelectBox = $('#selectionMode').dxSelectBox({ items: ['multiple', 'single'], value: 'multiple', inputAttr: { 'aria-label': 'Selection Mode' }, onValueChanged(e) { treeView.option('selectionMode', e.value); if (e.value === 'single') { recursiveCheckBox.option('value', false); treeView.unselectAll(); } recursiveCheckBox.option('disabled', e.value === 'single'); }, }).dxSelectBox('instance'); $('#disabledNodeSelectionMode').dxSelectBox({ items: ['never', 'recursiveAndAll'], inputAttr: { 'aria-label': 'Disabled Node Selection Mode' }, value: 'never', onValueChanged(e) { treeView.option('disabledNodeSelectionMode', e.value); }, }); const recursiveCheckBox = $('#recursiveSelection').dxCheckBox({ text: 'Recursive Selection', value: true, onValueChanged(e) { treeView.option('selectNodesRecursive', e.value); }, }).dxCheckBox('instance'); $('#selectOnClick').dxCheckBox({ text: 'Select on Click', value: false, onValueChanged(e) { treeView.option('selectByClick', e.value); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.3/css/dx.light.css" /> <script src="js/dx.all.js?v=26.1.3"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="form"> <h4>Employees</h4> <div id="treeview"></div> <div class="selected-container"> Selected employees <div id="selected-employees"></div> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="options-section"> <div class="option"> <span>Checkbox Visibility:</span> <div class="editor-container"> <div id="checkBoxVisibility"></div> </div> </div> <div class="option"> <span>Selection Mode:</span> <div class="editor-container"> <div id="selectionMode"></div> </div> </div> <div class="option"> <span>Disabled Node Selection Mode:</span> <div class="editor-container"> <div id="disabledNodeSelectionMode"></div> </div> </div> </div> <div class="options-section"> <div class="option"> <div class="caption-placeholder"> </div> <div class="editor-container"> <div id="recursiveSelection"></div> </div> </div> <div class="option"> <div class="caption-placeholder"> </div> <div class="editor-container"> <div id="selectOnClick"></div> </div> </div> </div> </div> </div> </div> </body> </html>

.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: 30%; margin-top: 10px; margin-right: 9px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .options-container { display: flex; flex-direction: column; } .options-section { display: flex; } .editor-container { height: 100%; display: flex; align-items: center; } .editor-container > * { width: 100%; } .option:last-of-type { margin-right: 0; }

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, disabled: 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', }], }], }];

Use the options pane below the JavaScript TreeView to modify selection behavior as follows:

Specify selection mode for enabled and disabled nodes.
Toggle visibility of selection checkboxes (including the Select All option).
Allow selection on click.
Disable recursive selection.

The JavaScript TreeView allows you to update node selection states programmatically. You can select/deselect items by node keys, data objects, or DOM elements. To initially select nodes, configure selection fields within item objects (default: selected).

You can use data fields to customize items as your requirements dictate. This demo implements itemTemplate to merge text from multiple fields: you do not need to specify the text field for your JavaScript TreeView data source.