Tree View

• Jul 17, 2026
• 3 minutes to read

TreeView is a UI component that displays a tree of text nodes.

Run Demo: TreeView Read Tutorial

Getting Started

The TreeView UI Control is based on the DevExtreme TreeView component.

The following help topics explain how to add this control to your project:

• Add DevExtreme to a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

TreeViewBasics.cshtml

@using ASP.NET_Core.Models.TreeView
@model IEnumerable<Employee>

@(Html.DevExtreme().TreeView()
    .DataSource(Model)
    .DataStructure(TreeViewDataStructure.Plain)
    .KeyExpr("ID")
    .ParentIdExpr("Head_ID")
    .ExpandedExpr("Expanded")
    .ItemTemplate("<div><%- Full_Name %> (<%- Title %>)</div>")
)

TreeViewController.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ASP.NET_Core.Models.TreeView;

namespace ASP_NET_Core.Controllers {
    public class TreeViewController : Controller {
        public IActionResult GettingStarted() {
            var model = new List<Employee>() {
                new Employee { ID = 1, Head_ID = 0, Full_Name = "John Heart", Title = "CEO", Expanded = true },
                new Employee { ID = 2, Head_ID = 1, Full_Name = "Samantha Bright", Title = "COO" },
                new Employee { ID = 3, Head_ID = 1, Full_Name = "Arthur Miller", Title = "CTO" },
                new Employee { ID = 4, Head_ID = 2, Full_Name = "Greta Sims", Title = "HR Manager" },
                new Employee { ID = 5, Head_ID = 2, Full_Name = "Brett Wade", Title = "IT Manager" },
            };
            return View(model);
        }
    }
}

TreeViewModels.cs

using System;

namespace ASP.NET_Core.Models.TreeView {
    public class Employee {
        public int ID { get; set; }
        public int Head_ID { get; set; }
        public bool? Expanded { get; set; }
        public string Full_Name { get; set; }
        public string Title { get; set; }
    }
}

Built-in Capabilities and Configuration Guides

• Data Binding
  TreeView can load and update data from different data source types. You can define data as plain or hierarchical. If you choose plain data, you can load it in a virtual mode to improve performance with large datasets.

• Search
  You can enable search in the TreeView component, allowing node searches if they are loaded.

• Selection
  When selection is enabled, TreeView displays check boxes. You can specify various selection modes. To handle selection, use event handlers such as onSelectionChanged, onSelectAllValueChanged, and onItemSelectionChanged.

• Customization
  You can customize TreeView appearance. Set custom collapse and expand icons. Specify a custom template for all items or individually for each item.

API

Server-Side API

Initialization

Call the TreeView() method to create a TreeView control. This action initializes a TreeViewBuilder instance. Use the instance methods to specify TreeView options and event handlers.

Options

For a complete option list, see TreeViewBuilder Members. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the TreeView options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme TreeView options.

Methods

For a list of available methods, see DevExtreme TreeView methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on TreeView accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: TreeView