Item Selection and Customization
Documentation
The TreeView widget supports multi-selection. In this demo, the showCheckBoxesMode option is set to «normal» allowing multiple items to be marked as selected. In addition, a custom item template is utilized to display price per item in brackets.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
<div class="form">
<h4>Store: Super Mart of the West</h4>
@(Html.DevExtreme().TreeView()
.DataSource(d => d.Mvc().LoadAction("SuperMartOfTheWest"))
.DisplayExpr("Text")
.ItemsExpr("Items")
.ExpandedExpr("Expanded")
.Width(320)
.ShowCheckBoxesMode(TreeViewCheckBoxMode.Normal)
.OnItemSelectionChanged("treeViewItem_selectionChanged")
.ItemTemplate(@<text>
<div>
<%= Text %>
<% if(Price) { %>
($<%= Price %>)
<% } %>
</div>
</text>)
)
<div class="selected-data">
Selected Products
@(Html.DevExtreme().List()
.ID("checked-items")
.Width(400)
.ItemTemplate(@<text>
<div>
<%= itemData.Text %> (<%= Category %>) - $<%= itemData.Price %>
</div>
</text>)
)
<div id="checked-items"></div>
</div>
</div>
<script>
function getListInstance() {
return $("#checked-items").dxList("instance");
}
function treeViewItem_selectionChanged(e) {
var item = e.node,
checkedItems = [];
if(isProduct(item)) {
checkedItems = processProduct($.extend({
Category: item.parent.text
}, item));
} else {
$.each(item.items, function (index, product) {
checkedItems = processProduct($.extend({
Category: item.text
}, product));
});
}
getListInstance().option("items", checkedItems);
}
function isProduct(data) {
return !data.items.length;
}
function processProduct(product) {
var itemIndex = -1,
checkedItems = getListInstance().option("items");
$.each(checkedItems, function (index, item) {
if(item.key === product.key) {
itemIndex = index;
return false;
}
});
if(product.selected && itemIndex === -1) {
checkedItems.push(product);
} else if(!product.selected) {
checkedItems.splice(itemIndex, 1);
}
return checkedItems;
}
</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;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TreeViewController : Controller {
public ActionResult ItemSelectionAndCustomization() {
return View();
}
[HttpGet]
public ActionResult SuperMartOfTheWest(DataSourceLoadOptions loadOptions) {
var currentStore = TreeViewHierarchicalData.SuperMartOfTheWest.Items;
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(new List<Product> {
currentStore[0],
currentStore[1],
currentStore[3]
}, loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class Product {
public string ID { get; set; }
public string CategoryId { get; set; }
public string Text { get; set; }
public bool Expanded { get; set; }
public List<Product> Items { get; set; }
public int Price { get; set; }
public string Image { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public static class TreeViewHierarchicalData {
public static Product SuperMartOfTheWest = new Product {
Text = "Super Mart of the West",
Expanded = true,
Items = new List<Product> {
new Product {
Text = "Video Players",
Items = new List<Product> {
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 List<Product> {
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 List<Product> {
new Product {
Text = "19\"",
Expanded = true,
Items = new List<Product> {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new List<Product> {
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 List<Product> {
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 Product Braeburn = new Product {
Text = "Braeburn",
Items = new List<Product> {
new Product {
Text = "Video Players",
Items = new List<Product> {
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 List<Product> {
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 List<Product> {
new Product {
Text = "19\"",
Items = new List<Product> {
new Product {
Text = "DesktopLCD 19",
Price = 170,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new List<Product> {
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 Product EMart = new Product {
Text = "E-Mart",
Items = new List<Product> {
new Product {
Text = "Video Players",
Items = new List<Product> {
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 List<Product> {
new Product {
Text = "19\"",
Items = new List<Product> {
new Product {
Text = "DesktopLCD 19",
Price = 165,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new List<Product> {
new Product {
Text = "DesktopLCD 21",
Price = 175,
Image = "../../images/ProductsLarge/12.png"
}
}
}
}
}
}
};
public static Product Walters = new Product {
Text = "Walters",
Items = new List<Product> {
new Product {
Text = "Video Players",
Items = new List<Product> {
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 List<Product> {
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 List<Product> {
new Product {
Text = "19\"",
Items = new List<Product> {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new List<Product> {
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 List<Product> {
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 List<Product> Products = new List<Product> {
new Product {
Text = "Stores",
Expanded = true,
Items = new List<Product> {
SuperMartOfTheWest,
Braeburn,
EMart,
Walters
}
}
};
}
}
.form > h4 {
margin-bottom: 20px;
}
.form > div, #selection-treeview {
display: inline-block;
vertical-align: top;
}
#checked-items {
margin-top: 20px;
}
.selected-data {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
font-size: 115%;
font-weight: bold;
}
.dx-list-item-content {
padding-left: 0;
}