Your search did not match any results.
Tree View

Plain Data Structure

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.WebApi().Controller("TreeViewPlainData").LoadAction("Get")) .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.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class TreeViewController : Controller { public ActionResult FlatDataStructure() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class TreeViewPlainDataController : ApiController { [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(TreeViewPlainData.Products, loadOptions)); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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; using System.Web; namespace DevExtreme.MVC.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 = "../../Content/Images/ProductsLarge/1.png", Price = 220 }, new Product { ID = "1_1_1_2", CategoryId = "1_1_1", Text = "SuperHD Video Player", Image = "../../Content/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 = "../../Content/Images/ProductsLarge/7.png", Price = 1200 }, new Product { ID = "1_1_2_2", CategoryId = "1_1_2", Text = "SuperLED 42", Image = "../../Content/Images/ProductsLarge/5.png", Price = 1450 }, new Product { ID = "1_1_2_3", CategoryId = "1_1_2", Text = "SuperLED 50", Image = "../../Content/Images/ProductsLarge/4.png", Price = 1600 }, new Product { ID = "1_1_2_4", CategoryId = "1_1_2", Text = "SuperLCD 55", Image = "../../Content/Images/ProductsLarge/6.png", Price = 1750 }, new Product { ID = "1_1_2_5", CategoryId = "1_1_2", Text = "SuperLCD 70", Image = "../../Content/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 = "../../Content/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 = "../../Content/Images/ProductsLarge/14.png", Price = 550 }, new Product { ID = "1_1_4_2", CategoryId = "1_1_4", Text = "Projector PlusHD", Image = "../../Content/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; }