Free Trial Buy
    Your search did not match any results.
    Tree View

    Plain Data Structure

    Documentation

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.productName = ''; $scope.productPrice = ''; $scope.productImage = ''; $scope.treeViewOptions = { items: products, dataStructure: 'plain', parentIdExpr: 'categoryId', keyExpr: 'ID', displayExpr: 'name', width: 300, onItemClick(e) { const item = e.itemData; if (item.price) { $scope.productName = item.name; $scope.productPrice = `$${item.price}`; $scope.productImage = item.icon; } else { $scope.productPrice = ''; } }, }; });
    <!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/22.2.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.3/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" ng-app="DemoApp" ng-controller="DemoController"> <div class="form"> <div id="simple-treeview" dx-tree-view="treeViewOptions"></div> <div id="product-details" ng-if="productPrice"> <img ng-src="{{productImage}}" /> <div class="name">{{productName}}</div> <div class="price">{{productPrice}}</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; }
    const 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, }, ];