The DevExtreme 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.
Use the options pane below the TreeView to modify selection behavior as follows:
The 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 TreeView data source.
<div class="form">
<h4>Employees</h4>
@(Html.DevExtreme().TreeView()
.ID("treeview")
.DataSource(d => d.Mvc().LoadAction("Employees"))
.ItemsExpr("Items")
.SelectedExpr("Selected")
.ExpandedExpr("Expanded")
.DisabledExpr("Disabled")
.Width(340)
.Height(320)
.ShowCheckBoxesMode(TreeViewCheckBoxMode.Normal)
.DisabledNodeSelectionMode(DisabledNodeSelectionMode.Never)
.OnSelectionChanged("syncSelection")
.OnContentReady("syncSelection")
.ItemTemplate(@<text>
<div>
<%- FullName %>
(<%- Position %>)
</div>
</text>)
)
<div class="selected-container">
Selected employees
@(Html.DevExtreme().List()
.ID("selected-employees")
.Width(400)
.Height(200)
.ShowScrollbar(ShowScrollbarMode.Always)
.ItemTemplate(@<text>
<div>
<%- Prefix %> <%- FullName %> (<%- Position %>)
</div>
</text>)
)
</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">
@(Html.DevExtreme().SelectBox()
.ID("checkboxVisibility")
.InputAttr("aria-label", "Checkbox Visibility")
.Items(new List<string> { "normal", "selectAll", "none" })
.Value("normal")
.OnValueChanged("checkboxVisibilityValueChanged"))
</div>
</div>
<div class="option">
<span>Selection Mode:</span>
<div class="editor-container">
@(Html.DevExtreme().SelectBox()
.ID("selectionMode")
.InputAttr("aria-label", "Selection Mode")
.Items(new List<string> { "multiple", "single" })
.Value("multiple")
.OnValueChanged("selectionModeValueChanged"))
</div>
</div>
<div class="option">
<span>Disabled Node Selection Mode:</span>
<div class="editor-container">
@(Html.DevExtreme().SelectBox()
.ID("disabledNodeSelectionMode")
.Items(new List<string> { "never", "recursiveAndAll" })
.InputAttr("aria-label", "Disabled Node Selection Mode")
.Value("never")
.OnValueChanged("disabledNodeSelectionModeValueChanged"))
</div>
</div>
</div>
<div class="options-section">
<div class="option">
<div class="caption-placeholder"> </div>
<div class="editor-container">
@(Html.DevExtreme().CheckBox()
.ID("recursiveSelection")
.Text("Recursive Selection")
.Value(true)
.OnValueChanged("recursiveSelectionValueChanged"))
</div>
</div>
<div class="option">
<div class="caption-placeholder"> </div>
<div class="editor-container">
@(Html.DevExtreme().CheckBox()
.ID("selectOnClick")
.Text("Select on Click")
.Value(false)
.OnValueChanged("selectOnClickValueChanged"))
</div>
</div>
</div>
</div>
</div>
<script>
function syncSelection(treeView) {
var selectedEmployees = treeView.component.getSelectedNodes()
.map(function (node) { return node.itemData; });
getSelectedEmployeesList().option("items", selectedEmployees);
}
function checkboxVisibilityValueChanged(e) {
getTreeView().option("showCheckBoxesMode", e.value);
if (e.value === 'selectAll') {
getSelectionsModeSelectBox().option('value', 'multiple');
getRecursiveSelectionCheckBox().option('disabled', false);
}
getSelectionsModeSelectBox().option('disabled', e.value === 'selectAll');
}
function selectionModeValueChanged(e) {
getTreeView().option("selectionMode", e.value);
if (e.value === 'single') {
getRecursiveSelectionCheckBox().option('value', false);
getTreeView().unselectAll();
}
getRecursiveSelectionCheckBox().option('disabled', e.value === 'single');
}
function disabledNodeSelectionModeValueChanged(e) {
getTreeView().option("disabledNodeSelectionMode", e.value);
}
function recursiveSelectionValueChanged(e) {
getTreeView().option("selectNodesRecursive", e.value);
}
function selectOnClickValueChanged(e) {
getTreeView().option("selectByClick", e.value);
}
function getTreeView() {
return $("#treeview").dxTreeView("instance");
}
function getSelectedEmployeesList() {
return $("#selected-employees").dxList("instance");
}
function getSelectionsModeSelectBox() {
return $("#selectionMode").dxSelectBox("instance");
}
function getRecursiveSelectionCheckBox() {
return $("#recursiveSelection").dxCheckBox("instance");
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class TreeViewController : Controller {
public ActionResult ItemSelectionAndCustomization() {
return View();
}
}
}using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.TreeView {
public class Employee {
public int ID { get; set; }
public string Prefix { get; set; }
public string FullName { get; set; }
public string Position { get; set; }
public bool Expanded { get; set; }
public bool Selected { get; set; }
public bool Disabled { get; set; }
public IEnumerable<Employee> Items { get; set; }
}
}
using System;
using System.Collections.Generic;
using DevExtreme.MVC.Demos.Models.TreeView;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public static class TreeViewHierarchicalDataForSelection {
public static readonly IEnumerable<Employee> Employees = new List<Employee> {
new Employee {
ID = 1,
FullName= "John Heart",
Prefix = "Dr.",
Position = "CEO",
Expanded = true,
Items = new List<Employee> {
new Employee {
ID = 2,
FullName= "Samantha Bright",
Prefix = "Dr.",
Position = "COO",
Expanded = true,
Disabled = true,
Items = new List<Employee> {
new Employee {
ID = 3,
FullName= "Kevin Carter",
Prefix = "Mr.",
Position = "Shipping Manager",
},
new Employee {
ID = 14,
FullName= "Victor Norris",
Prefix = "Mr.",
Selected = true,
Position = "Shipping Assistant"
}
}
},
new Employee {
ID = 4,
FullName= "Brett Wade",
Prefix = "Mr.",
Position = "IT Manager",
Expanded = true,
Items = new List<Employee> {
new Employee {
ID = 5,
FullName= "Amelia Harper",
Prefix = "Mrs.",
Position = "Network Admin"
},
new Employee {
ID = 6,
FullName= "Wally Hobbs",
Prefix = "Mr.",
Position = "Programmer"
},
new Employee {
ID = 7,
FullName= "Brad Jameson",
Prefix = "Mr.",
Position = "Programmer"
},
new Employee {
ID = 8,
FullName= "Violet Bailey",
Prefix = "Ms.",
Position = "Jr Graphic Designer",
}
}
},
new Employee {
ID = 9,
FullName= "Barb Banks",
Prefix = "Mrs.",
Position = "Support Manager",
Expanded = true,
Items = new List<Employee> {
new Employee {
ID = 10,
FullName= "Kelly Rodriguez",
Prefix = "Ms.",
Position = "Support Assistant"
},
new Employee {
ID = 11,
FullName= "James Anderson",
Prefix = "Mr.",
Position = "Support Assistant"
}
}
}
}
}
};
}
}
.form > h4 {
margin-bottom: 20px;
}
.form > div, #treeview {
display: inline-block;
vertical-align: top;
}
#selected-employees {
margin-top: 20px;
}
.selected-container {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-left: 20px;
font-size: 115%;
font-weight: bold;
}
.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;
}