Your search did not match any results.
Documentation

The TreeView widget can display both hierarchical and plain data. In this demo, the TreeView data source is defined using a plain object. Notice that an image can be specified within an item of the data source. The default item template contains a specific field that allows displaying images without a custom item template.

@(Html.DevExtreme().TreeView() .ID("simple-treeview") .DataSource(d => d.Mvc().LoadAction("GetPlainData")) .DataSourceOptions(o => o.Map("mapData")) .DataStructure(TreeViewDataStructure.Plain) .ParentIdExpr("CategoryId") .KeyExpr("ID") .DisplayExpr("Text") .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 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"); } } function mapData(item) { if(item.Image) { item.icon = item.Image; } return item; } </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 FlatDataStructure() { return View(); } [HttpGet] public ActionResult GetPlainData(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(TreeViewPlainData.Products, loadOptions)), "application/json"); } } }
using System; using System.Linq; using System.Collections.Generic; using System.Net.Http; using Microsoft.AspNetCore.Mvc; using DevExtreme.AspNet.Mvc; using DevExtreme.AspNet.Data; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class TreeViewPlainDataController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(TreeViewPlainData.Products, loadOptions); } } }
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 TreeViewPlainData { public static List<Product> Products = new List<Product> { new Product { ID = "1", Text = "Stores", Expanded = true }, new Product { ID = "1_1", CategoryId = "1", Text = "Super Mart of the West", Expanded = true }, new Product { ID = "1_1_1", CategoryId = "1_1", Text = "Video Players" }, new Product { ID = "1_1_1_1", CategoryId = "1_1_1", Text = "HD Video Player", Image = "../../images/ProductsLarge/1.png", Price = 220 }, new Product { ID = "1_1_1_2", CategoryId = "1_1_1", Text = "SuperHD Video Player", Image = "../../images/ProductsLarge/2.png", Price = 270 }, new Product { ID = "1_1_2", CategoryId = "1_1", Text = "Televisions", Expanded = true }, new Product { ID = "1_1_2_1", CategoryId = "1_1_2", Text = "SuperLCD 42", Image = "../../images/ProductsLarge/7.png", Price = 1200 }, new Product { ID = "1_1_2_2", CategoryId = "1_1_2", Text = "SuperLED 42", Image = "../../images/ProductsLarge/5.png", Price = 1450 }, new Product { ID = "1_1_2_3", CategoryId = "1_1_2", Text = "SuperLED 50", Image = "../../images/ProductsLarge/4.png", Price = 1600 }, new Product { ID = "1_1_2_4", CategoryId = "1_1_2", Text = "SuperLCD 55", Image = "../../images/ProductsLarge/6.png", Price = 1750 }, new Product { ID = "1_1_2_5", CategoryId = "1_1_2", Text = "SuperLCD 70", Image = "../../images/ProductsLarge/9.png", Price = 4000 }, new Product { ID = "1_1_3", CategoryId = "1_1", Text = "Monitors" }, new Product { ID = "1_1_3_1", CategoryId = "1_1_3", Text = "19\"" }, new Product { ID = "1_1_3_1_1", CategoryId = "1_1_3_1", Text = "DesktopLCD 19", Image = "../../images/ProductsLarge/10.png", Price = 160 }, new Product { ID = "1_1_4", CategoryId = "1_1", Text = "Projectors" }, new Product { ID = "1_1_4_1", CategoryId = "1_1_4", Text = "Projector Plus", Image = "../../images/ProductsLarge/14.png", Price = 550 }, new Product { ID = "1_1_4_2", CategoryId = "1_1_4", Text = "Projector PlusHD", Image = "../../images/ProductsLarge/15.png", Price = 750 } }; } }
#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; }