<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.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 SuperMartOfTheWest(DataSourceLoadOptions loadOptions) {
var superMartProducts = TreeViewHierarchicalData.SuperMartOfTheWest.Items.ToArray();
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(new[] {
superMartProducts[0],
superMartProducts[1],
superMartProducts[3]
}, loadOptions)), "application/json");
}
[HttpGet]
public ActionResult Employees(DataSourceLoadOptions loadOptions) {
var serializedEmployees = JsonConvert.SerializeObject(DataSourceLoader.Load(TreeViewHierarchicalData.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 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 = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 270,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Expanded = true,
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1200,
Image = "../../Content/Images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1450,
Image = "../../Content/Images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1600,
Image = "../../Content/Images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1350,
Image = "../../Content/Images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../Content/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 = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../Content/Images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 175,
Image = "../../Content/Images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../Content/Images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../Content/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 = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 300,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperPlasma 50",
Price = 1800,
Image = "../../Content/Images/ProductsLarge/3.png"
},
new Product {
Text = "SuperPlasma 65",
Price = 3500,
Image = "../../Content/Images/ProductsLarge/8.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 170,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 180,
Image = "../../Content/Images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 190,
Image = "../../Content/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 = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 275,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 165,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 175,
Image = "../../Content/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 = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 250,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1100,
Image = "../../Content/Images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1400,
Image = "../../Content/Images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1500,
Image = "../../Content/Images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1300,
Image = "../../Content/Images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../Content/Images/ProductsLarge/9.png"
},
new Product {
Text = "SuperPlasma 50",
Price = 1700,
Image = "../../Content/Images/ProductsLarge/3.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../Content/Images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 180,
Image = "../../Content/Images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../Content/Images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../Content/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;
}