Your search did not match any results.
TreeView

Hierarchical Data Structure

Documentation
The TreeView widget displays a hierarchical collection of items using a traditional tree structure. TreeView nodes can be expanded and collapsed to display sub-items.
@(Html.DevExtreme().TextBox() .Placeholder("Search") .Width(300) .Mode(TextBoxMode.Search) .ValueChangeEvent("keyup") .OnValueChanged("textBoxValueChaged") ) @(Html.DevExtreme().TreeView() .ID("simple-treeview") .DataSource(d => d.Mvc().Controller("TreeView").LoadAction("GetHierarchicalData")) .DisplayExpr("Text") .ItemsExpr("Items") .ExpandedExpr("Expanded") .Width(300) .OnItemClick("treeViewItemClick") ) <div id="product-details" class="hidden"> <img src="" /> <div class="name"></div> <div class="price"></div> </div> <script> function textBoxValueChaged(e) { $("#simple-treeview").dxTreeView("instance").option("searchValue", e.value); } function treeViewItemClick(e) { var item = e.itemData; if(item.Price) { $("#product-details").removeClass("hidden"); $("#product-details > img").attr("src", item.Image); $("#product-details > .price").text("$" + item.Price); $("#product-details > .name").text(item.Text); } else { $("#product-details").addClass("hidden"); } } </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 HierarchicalDataStructure() { return View(); } [HttpGet] public ActionResult GetHierarchicalData(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(TreeViewHierarchicalData.Products, 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 } } }; } }
#simple-treeview, #product-details { display: inline-block; } #product-details { vertical-align: top; width: 400px; height: 420px; margin-left: 20px; } #product-details > img { border: none; height: 300px; width: 400px; } #product-details > .name { text-align: center; font-size: 20px; } #product-details > .price { text-align: center; font-size: 24px; } .dark #product-details > div { color: #f0f0f0; } .hidden { visibility: hidden; }