Your search did not match any results.
Tree View

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.
<div class="form"> <h4>Store: Super Mart of the West</h4> @(Html.DevExtreme().TreeView() .DataSource(d => d.Mvc().Controller("TreeView").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: #f5f5f5; font-size: 115%; font-weight: bold; } .dx-list-item-content { padding-left: 0; }