JavaScript/jQuery TreeView - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The TreeView component displays a tree of text nodes from a local or remote source.

This tutorial shows how to create and configure the TreeView. The demo below shows the resulting UI:

Refer to the following sections for information on each configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create a TreeView

Add DevExtreme to your jQuery application and use the following code to create a TreeView:

index.js
index.html
index.css
  • $(function() {
  • $("#treeView").dxTreeView({
  • // Configuration goes here
  • });
  • });
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <!-- ... -->
  • <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  •  
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
  • <link rel="stylesheet" href="index.css">
  •  
  • <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
  • <script type="text/javascript" src="index.js"></script>
  • </head>
  • <body class="dx-viewport">
  • <div id="treeView"></div>
  • </body>
  • </html>
  • #treeView {
  • width: 300px;
  • }

Bind the TreeView to Data

To bind the TreeView to a local array, use the dataSource property. Refer to the articles listed below for instructions on how to do this for other storage types:

The TreeView supports plain and hierarchical data structures. To use plain data, set the dataStructure property to "plain". In this case, each data object should contain the id, text, and parentId fields. If objects use custom field names, use the keyExpr, displayExpr, and parentIdExpr properties to specify them:

index.js
products.js
  • $(function() {
  • $("#treeView").dxTreeView({
  • // ...
  • dataSource: products,
  • dataStructure: "plain",
  • keyExpr: "ID",
  • displayExpr: "name",
  • parentIdExpr: "categoryId",
  • });
  • });
  • const IMAGE_URL = "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/";
  •  
  • const products = [
  • {
  • ID: "1",
  • name: "Stores"
  • }, {
  • ID: "1_1",
  • categoryId: "1",
  • name: "Super Mart of the West"
  • }, {
  • ID: "1_1_1",
  • categoryId: "1_1",
  • name: "Video Players"
  • }, {
  • ID: "1_1_1_1",
  • categoryId: "1_1_1",
  • name: "HD Video Player",
  • image: IMAGE_URL + "1.png",
  • price: 220
  • }, {
  • ID: "1_1_1_2",
  • categoryId: "1_1_1",
  • name: "SuperHD Video Player",
  • image: IMAGE_URL + "2.png",
  • price: 270
  • }, {
  • ID: "1_1_2",
  • categoryId: "1_1",
  • name: "Televisions"
  • }, {
  • ID: "1_1_2_1",
  • categoryId: "1_1_2",
  • name: "SuperLCD 42",
  • image: IMAGE_URL + "7.png",
  • price: 1200
  • }, {
  • ID: "1_1_2_2",
  • categoryId: "1_1_2",
  • name: "SuperLED 42",
  • image: IMAGE_URL + "5.png",
  • price: 1450
  • }, {
  • ID: "1_1_2_3",
  • categoryId: "1_1_2",
  • name: "SuperLED 50",
  • image: IMAGE_URL + "4.png",
  • price: 1600
  • }, {
  • ID: "1_1_2_4",
  • categoryId: "1_1_2",
  • name: "SuperLCD 55",
  • image: IMAGE_URL + "6.png",
  • price: 1750
  • }, {
  • ID: "1_1_2_5",
  • categoryId: "1_1_2",
  • name: "SuperLCD 70",
  • image: IMAGE_URL + "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",
  • image: IMAGE_URL + "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",
  • image: IMAGE_URL + "14.png",
  • price: 550
  • }, {
  • ID: "1_1_4_2",
  • categoryId: "1_1_4",
  • name: "Projector PlusHD",
  • image: IMAGE_URL + "15.png",
  • price: 750
  • }
  • ];

If your dataset has a hierarchical structure, refer to the following demo for details: Hierarchical Data Structure.

Customize Node Appearance

Use the itemTemplate property to specify a template for all nodes as shown in this tutorial. If you want to add a template for a specific node, use the template node's property. This setting overrides the global template.

You can also use additional fields to customize node appearance. For example, you can enable the expanded field for those nodes that should be expanded on startup:

index.js
products.js
  • $(function(){
  • $("#treeView").dxTreeView({
  • // ...
  • itemTemplate: function(item) {
  • if (item.price) {
  • return `<div> ${item.name} ($${item.price}) </div>`;
  • } else {
  • return `<div> ${item.name} </div>`;
  • }
  • },
  • });
  • });
  • // ...
  •  
  • const products = [
  • {
  • ID: "1",
  • name: "Stores",
  • expanded: true
  • }, {
  • ID: "1_1",
  • categoryId: "1",
  • name: "Super Mart of the West",
  • expanded: true
  • },
  • // ...
  • {
  • ID: "1_1_2",
  • categoryId: "1_1",
  • name: "Televisions",
  • expanded: true
  • },
  • // ...
  • ];

Search Data

The TreeView can display a search bar that allows users to search nodes. Enable the searchEnabled property to add the search bar. Use the searchMode property to specify whether nodes should contain (default), start with, or match the search string. In this tutorial, search results include only nodes that start with the search string:

index.js
  • $(function(){
  • $("#treeView").dxTreeView({
  • // ...
  • searchEnabled: true,
  • searchMode: "startswith"
  • });
  • });

Select Nodes

To configure node selection, use the following properties:

  • selectByClick
    Enables selection by a click.

  • showCheckBoxesMode
    Adds checkboxes if you set this property to "normal" or "selectAll". The latter mode additionally displays the "Select All" checkbox at the top of the TreeView.

  • selectionMode
    Sets the selection mode to "single" or "multiple" (default).

  • onItemSelectionChanged
    Specifies a function that is executed when a single node is selected or deselected.

In this tutorial, we enable selection by a click and use the single-node selection mode. Also, we specify the onItemSelectionChanged function to display the selected product, its picture, and price.

index.js
index.html
index.css
  • $(function(){
  • $("#treeView").dxTreeView({
  • // ...
  • selectionMode: "single",
  • selectByClick: true,
  • onItemSelectionChanged: function(e) {
  • const selectedProduct = e.itemData;
  • if(selectedProduct.price) {
  • $("#product-details").removeClass("hidden");
  • $("#product-details > img").attr("src", selectedProduct.image);
  • $("#product-details > .price").text("$" + selectedProduct.price);
  • $("#product-details > .name").text(selectedProduct.name);
  • } else {
  • $("#product-details").addClass("hidden");
  • }
  • }
  • });
  • });
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <!-- ... -->
  • </head>
  • <body class="dx-viewport">
  • <div id="treeView"></div>
  • <div id="product-details" class="hidden">
  • <img src="" />
  • <div class="name"></div>
  • <div class="price"></div>
  • </div>
  • </body>
  • </html>
  • #treeView, #product-details {
  • display: inline-block;
  • width: 300px;
  • }
  •  
  • #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;
  • }
  •  
  • .hidden {
  • visibility: hidden;
  • }

Enable Node Drag & Drop

Users can drag and drop nodes to rearrange them and change the data hierarchy. This functionality is not used in this tutorial. For more information, refer to the following demos: Drag & Drop for Plain Data Structure and Drag & Drop for Hierarchical Data Structure.

Enhance Performance on Large Datasets

If the TreeView is bound to a large dataset, the component can load data and render nodes on demand as a user expands them. This functionality is not demonstrated in this tutorial because it uses only a small dataset. You can refer to the following demos for information on how to load data on demand: Virtual Mode and Load Data on Demand.

For further information on the TreeView component, refer to the following resources: