Tree View ▸ Plain Data Structure
The TreeView's plain (one-dimensional) array contains items each of which references its parent item.
Use either of the following properties to bind the component to plain data:
-
items[]
Assigns a local array as shown in this demo. -
dataSource
Assigns a DataSource object that allows you to perform data shaping operations and use a remote source.
Each object in the TreeView's plain data structure should include the following fields:
You can respectively use the keyExpr, parentIdExpr, and displayExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].
In this demo, nodes use the icon and expanded properties. These properties specify the icon and whether a node is collapsed or expanded. Some nodes also include the developer-defined price field.
@(Html.DevExtreme().TreeView()
.ID("simple-treeview")
.DataSource(d => d.WebApi().Controller("TreeViewPlainData"))
.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 alt="Product details" 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("alt", item.Text).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.SampleData;
using System.Text.Json;
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 {
[Route("api/TreeViewPlainData/{action}", Name = "TreeViewPlainData")]
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 IEnumerable<Product> Items { get; set; }
public int Price { get; set; }
public string Image { get; set; }
public bool IsGroup { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public static class TreeViewPlainData {
public static readonly IEnumerable<Product> Products = new[] {
new Product {
ID = "1",
Text = "Stores",
Expanded = true,
IsGroup = true
},
new Product {
ID = "1_1",
CategoryId = "1",
Text = "Super Mart of the West",
Expanded = true,
IsGroup = true
},
new Product {
ID = "1_1_1",
CategoryId = "1_1",
Text = "Video Players",
IsGroup = true
},
new Product {
ID = "1_1_1_1",
CategoryId = "1_1_1",
Text = "HD Video Player",
Image = "../../Content/Images/ProductsLarge/1.png",
Price = 220,
IsGroup = false
},
new Product {
ID = "1_1_1_2",
CategoryId = "1_1_1",
Text = "SuperHD Video Player",
Image = "../../Content/Images/ProductsLarge/2.png",
Price = 270,
IsGroup = false
},
new Product {
ID = "1_1_2",
CategoryId = "1_1",
Text = "Televisions",
Expanded = true,
IsGroup = true
},
new Product {
ID = "1_1_2_1",
CategoryId = "1_1_2",
Text = "SuperLCD 42",
Image = "../../Content/Images/ProductsLarge/7.png",
Price = 1200,
IsGroup = false
},
new Product {
ID = "1_1_2_2",
CategoryId = "1_1_2",
Text = "SuperLED 42",
Image = "../../Content/Images/ProductsLarge/5.png",
Price = 1450,
IsGroup = false
},
new Product {
ID = "1_1_2_3",
CategoryId = "1_1_2",
Text = "SuperLED 50",
Image = "../../Content/Images/ProductsLarge/4.png",
Price = 1600,
IsGroup = false
},
new Product {
ID = "1_1_2_4",
CategoryId = "1_1_2",
Text = "SuperLCD 55",
Image = "../../Content/Images/ProductsLarge/6.png",
Price = 1750,
IsGroup = false
},
new Product {
ID = "1_1_2_5",
CategoryId = "1_1_2",
Text = "SuperLCD 70",
Image = "../../Content/Images/ProductsLarge/9.png",
Price = 4000,
IsGroup = false
},
new Product {
ID = "1_1_3",
CategoryId = "1_1",
Text = "Monitors",
IsGroup = true
},
new Product {
ID = "1_1_3_1",
CategoryId = "1_1_3",
Text = "19\"",
IsGroup = true
},
new Product {
ID = "1_1_3_1_1",
CategoryId = "1_1_3_1",
Text = "DesktopLCD 19",
Image = "../../Content/Images/ProductsLarge/10.png",
Price = 160,
IsGroup = false
},
new Product {
ID = "1_1_4",
CategoryId = "1_1",
Text = "Projectors",
IsGroup = true
},
new Product {
ID = "1_1_4_1",
CategoryId = "1_1_4",
Text = "Projector Plus",
Image = "../../Content/Images/ProductsLarge/14.png",
Price = 550,
IsGroup = false
},
new Product {
ID = "1_1_4_2",
CategoryId = "1_1_4",
Text = "Projector PlusHD",
Image = "../../Content/Images/ProductsLarge/15.png",
Price = 750,
IsGroup = false
}
};
}
}
#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;
}