<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="options-container">
<div class="option">
<span>Show Check Boxes Mode:</span>
<div class="editor-container">
@(Html.DevExtreme().SelectBox()
.ID("showCheckBoxesMode")
.InputAttr("aria-label", "Show Checkboxes Mode")
.Items(new List<string> { "selectAll", "normal", "none" })
.Value("normal")
.OnValueChanged("showCheckBoxesModeValueChanged"))
</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">
<div class="caption-placeholder"> </div>
<div class="editor-container">
@(Html.DevExtreme().CheckBox()
.ID("selectNodesRecursive")
.Text("Select Nodes Recursive")
.Value(true)
.OnValueChanged("selectNodesRecursiveValueChanged"))
</div>
</div>
<div class="option">
<div class="caption-placeholder"> </div>
<div class="editor-container">
@(Html.DevExtreme().CheckBox()
.ID("selectByClick")
.Text("Select By Click")
.Value(false)
.OnValueChanged("selectByClickValueChanged"))
</div>
</div>
</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.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class TreeViewController : Controller {
public ActionResult ItemSelectionAndCustomization() {
return View();
}
[HttpGet]
public ActionResult Employees(DataSourceLoadOptions loadOptions) {
var serializedEmployees = JsonConvert.SerializeObject(DataSourceLoader.Load(TreeViewHierarchicalDataForSelection.Employees, loadOptions));
return Content(serializedEmployees, "application/json");
}
}
}
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 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,
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;
}
.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%;
margin-top: 10px;
margin-right: 9px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.options-container {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.editor-container {
height: 100%;
display: flex;
align-items: center;
}
.editor-container>*{
width: 100%;
}
.option:last-of-type {
margin-right: 0px;
}