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.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
$(function(){
var checkedItems = [];
$("#selection-treeview").dxTreeView({
items: products,
width: 320,
showCheckBoxesMode: "normal",
onItemSelectionChanged: function(e) {
var item = e.node;
if(isProduct(item)) {
processProduct($.extend({
category: item.parent.text
}, item));
} else {
$.each(item.items, function(index, product) {
processProduct($.extend({
category: item.text
}, product));
});
}
checkedItemsList.option("items", checkedItems);
},
itemTemplate: function(data) {
return "<div>" + data.text +
((data.price) ? (" ($" + data.price + ")") : "") +
"</div>";
}
});
var checkedItemsList = $("#checked-items").dxList({
width: 400,
items: checkedItems,
itemTemplate: function(data) {
return "<div>" + data.text + " (" +
data.category + ") - $" + data.itemData.price + "</div>";
}
}).dxList("instance");
function isProduct(data) {
return !data.items.length;
}
function processProduct(product) {
var itemIndex = -1;
$.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);
}
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/18.2.7/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="form">
<h4>Store: Super Mart of the West</h4>
<div id="selection-treeview"></div>
<div class="selected-data">
Selected Products
<div id="checked-items"></div>
</div>
</div>
</div>
</body>
</html>
.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: #f5f5f5;
font-size: 115%;
font-weight: bold;
}
.dx-list-item-content {
padding-left: 0;
}
var products = [{
id: "1_1_1",
text: "Video Players",
items: [{
id: "1_1_1_1",
text: "HD Video Player",
price: 220
}, {
id: "1_1_1_2",
text: "SuperHD Video Player",
price: 270
}]
}, {
id: "1_1_2",
text: "Televisions",
expanded: true,
items: [{
id: "1_1_2_1",
text: "SuperLCD 42",
price: 1200
}, {
id: "1_1_2_2",
text: "SuperLED 42",
price: 1450
}, {
id: "1_1_2_3",
text: "SuperLED 50",
price: 1600
}, {
id: "1_1_2_4",
text: "SuperLCD 55",
price: 1350
}, {
id: "1_1_2_5",
text: "SuperLCD 70",
price: 4000
}]
}, {
id: "1_1_4",
text: "Projectors",
items: [{
id: "1_1_4_1",
text: "Projector Plus",
price: 550
}, {
id: "1_1_4_2",
text: "Projector PlusHD",
price: 750
}]
}];