Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Node Selection and Customization
Documentation
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 properties 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:
-
selectItem / unselectItem
Selects or unselects a single node. Accepts the node key, data object, or DOM node. -
selectAll() / unselectAll()
Selects or unselects all nodes. -
getSelectedNodes() / getSelectedNodeKeys()
Gets the selected nodes or their keys. In this demo, getSelectedNodes() is used to prepare data for the List.
This demo also shows how to specify an itemTemplate for node customization. Node data is passed to the template as an argument.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<div class="form">
<h4>Employees</h4>
@(Html.DevExtreme().TreeView()
.ID("treeview")
.DataSource(d => d.Mvc().LoadAction("Employees"))
.ItemsExpr("Items")
.SelectedExpr("Selected")
.ExpandedExpr("Expanded")
.Width(340)
.Height(320)
.ShowCheckBoxesMode(TreeViewCheckBoxMode.Normal)
.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="option">
<span>Show Check Boxes Mode:</span>
@(Html.DevExtreme().SelectBox()
.ID("showCheckBoxesMode")
.Items(new List<string> { "selectAll", "normal", "none" })
.Value("normal")
.OnValueChanged("showCheckBoxesModeValueChanged"))
</div>
<div class="option">
<span>Selection Mode:</span>
@(Html.DevExtreme().SelectBox()
.ID("selectionMode")
.Items(new List<string> { "multiple", "single" })
.Value("multiple")
.OnValueChanged("selectionModeValueChanged"))
</div>
<div class="option recursive-option">
@(Html.DevExtreme().CheckBox()
.ID("selectNodesRecursive")
.Text("Select Nodes Recursive")
.Value(true)
.OnValueChanged("selectNodesRecursiveValueChanged"))
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("selectByClick")
.Text("Select By Click")
.Value(false)
.OnValueChanged("selectByClickValueChanged"))
</div>
</div>
<script>
function syncSelection(treeView) {
var selectedEmployees = treeView.component.getSelectedNodes()
.map(function (node) { return node.itemData; });
getSelectedEmployeesList().option("items", selectedEmployees);
}
function showCheckBoxesModeValueChanged(e) {
getTreeView().option("showCheckBoxesMode", e.value);
if(e.value === 'selectAll') {
getSelectionsModeSelectBox().option('value', 'multiple');
getRecursiveCheckBox().option('disabled', false);
}
getSelectionsModeSelectBox().option('disabled', e.value === 'selectAll');
}
function selectionModeValueChanged(e) {
getTreeView().option("selectionMode", e.value);
if(e.value === 'single') {
getRecursiveCheckBox().option('value', false);
getTreeView().unselectAll();
}
getRecursiveCheckBox().option('disabled', e.value === 'single');
}
function selectNodesRecursiveValueChanged(e) {
getTreeView().option("selectNodesRecursive", e.value);
}
function selectByClickValueChanged(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 getRecursiveCheckBox() {
return $("#selectNodesRecursive").dxCheckBox("instance");
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TreeViewController : Controller {
public ActionResult ItemSelectionAndCustomization() {
return View();
}
[HttpGet]
public ActionResult Employees(DataSourceLoadOptions loadOptions) {
var serializedEmployees = JsonConvert.SerializeObject(DataSourceLoader.Load(TreeViewHierarchicalData.Employees, loadOptions));
return Content(serializedEmployees, "application/json");
}
[HttpGet]
public object SuperMartOfTheWest(DataSourceLoadOptions loadOptions) {
var superMartProducts = TreeViewHierarchicalData.SuperMartOfTheWest.Items.ToArray();
return DataSourceLoader.Load(new[] {
superMartProducts[0],
superMartProducts[1],
superMartProducts[3]
}, loadOptions);
}
}
}
using System.Collections.Generic;
namespace DevExtreme.NETCore.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 IEnumerable<Employee> Items { get; set; }
}
}
using System;
using System.Linq;
using System.Collections.Generic;
using DevExtreme.NETCore.Demos.Models.TreeView;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public static class TreeViewHierarchicalData {
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,
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"
}
}
}
}
}
};
public static readonly Product SuperMartOfTheWest = new Product {
Text = "Super Mart of the West",
Expanded = true,
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 220,
Image = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 270,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Expanded = true,
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1200,
Image = "../../images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1450,
Image = "../../images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1600,
Image = "../../images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1350,
Image = "../../images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../images/ProductsLarge/9.png"
}
}
},
new Product {
Text = "Monitors",
Expanded = true,
Items = new[] {
new Product {
Text = "19\"",
Expanded = true,
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 175,
Image = "../../images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../images/ProductsLarge/15.png"
}
}
}
}
};
public static readonly Product Braeburn = new Product {
Text = "Braeburn",
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 240,
Image = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 300,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperPlasma 50",
Price = 1800,
Image = "../../images/ProductsLarge/3.png"
},
new Product {
Text = "SuperPlasma 65",
Price = 3500,
Image = "../../images/ProductsLarge/8.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 170,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 180,
Image = "../../images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 190,
Image = "../../images/ProductsLarge/13.png"
}
}
}
}
}
}
};
public static readonly Product EMart = new Product {
Text = "E-Mart",
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 220,
Image = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 275,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 165,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 175,
Image = "../../images/ProductsLarge/12.png"
}
}
}
}
}
}
};
public static readonly Product Walters = new Product {
Text = "Walters",
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 210,
Image = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 250,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1100,
Image = "../../images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1400,
Image = "../../images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1500,
Image = "../../images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1300,
Image = "../../images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../images/ProductsLarge/9.png"
},
new Product {
Text = "SuperPlasma 50",
Price = 1700,
Image = "../../images/ProductsLarge/3.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 180,
Image = "../../images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../images/ProductsLarge/15.png"
}
}
}
}
};
public static readonly IEnumerable<Product> Products = new[] {
new Product {
Text = "Stores",
Expanded = true,
Items = new[] {
SuperMartOfTheWest,
Braeburn,
EMart,
Walters
}
}
};
}
}
.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;
}
.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;
}