Your search did not match any results.
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:

  • id
    Unique item identifier.

  • parentId
    Identifier of the parent item.

  • text
    Text displayed by the item.

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.

Backend API
Copy to CodePen
Apply
Reset
$(function(){ $("#simple-treeview").dxTreeView({ items: products, dataStructure: "plain", parentIdExpr: "categoryId", keyExpr: "ID", displayExpr: "name", width: 300, onItemClick: function(e) { var item = e.itemData; if(item.price) { $("#product-details").removeClass("hidden"); $("#product-details > img").attr("src", item.icon); $("#product-details > .price").text("$" + item.price); $("#product-details > .name").text(item.name); } else { $("#product-details").addClass("hidden"); } } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="form"> <div id="simple-treeview"></div> <div id="product-details" class="hidden"> <img src="" /> <div class="name"></div> <div class="price"></div> </div> </div> </div> </body> </html>
#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; }
var products = [{ ID: "1", name: "Stores", expanded: true }, { ID: "1_1", categoryId: "1", name: "Super Mart of the West", expanded: true }, { ID: "1_1_1", categoryId: "1_1", name: "Video Players" }, { ID: "1_1_1_1", categoryId: "1_1_1", name: "HD Video Player", icon: "../../../../images/products/1.png", price: 220 }, { ID: "1_1_1_2", categoryId: "1_1_1", name: "SuperHD Video Player", icon: "../../../../images/products/2.png", price: 270 }, { ID: "1_1_2", categoryId: "1_1", name: "Televisions", expanded: true }, { ID: "1_1_2_1", categoryId: "1_1_2", name: "SuperLCD 42", icon: "../../../../images/products/7.png", price: 1200 }, { ID: "1_1_2_2", categoryId: "1_1_2", name: "SuperLED 42", icon: "../../../../images/products/5.png", price: 1450 }, { ID: "1_1_2_3", categoryId: "1_1_2", name: "SuperLED 50", icon: "../../../../images/products/4.png", price: 1600 }, { ID: "1_1_2_4", categoryId: "1_1_2", name: "SuperLCD 55", icon: "../../../../images/products/6.png", price: 1750 }, { ID: "1_1_2_5", categoryId: "1_1_2", name: "SuperLCD 70", icon: "../../../../images/products/9.png", price: 4000 }, { ID: "1_1_3", categoryId: "1_1", name: "Monitors" }, { ID: "1_1_3_1", categoryId: "1_1_3", name: "19\"", }, { ID: "1_1_3_1_1", categoryId: "1_1_3_1", name: "DesktopLCD 19", icon: "../../../../images/products/10.png", price: 160 }, { ID: "1_1_4", categoryId: "1_1", name: "Projectors" }, { ID: "1_1_4_1", categoryId: "1_1_4", name: "Projector Plus", icon: "../../../../images/products/14.png", price: 550 }, { ID: "1_1_4_2", categoryId: "1_1_4", name: "Projector PlusHD", icon: "../../../../images/products/15.png", price: 750 } ];