TreeList

• Sep 29, 2025
• 4 minutes to read

TreeList is a UI component for displaying hierarchical data in a grid. It can handle a collection of linked plain objects and build a tree hierarchy. Key features include data editing and validation, sorting, filtering, searching, and adaptability.

Run Demo: TreeList Read Tutorial

Getting Started

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

To add this control to your project, follow instructions in the following help topics:

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

Basic Syntax

TreeListBasics.cshtml

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

@(Html.DevExtreme().TreeList<Employee>()
    .DataSource(Model)
    .KeyExpr("ID")
    .ParentIdExpr("Head_ID")
    .RootValue(-1)
    .ExpandedRowKeys(new[] { 1 })
    .Columns(c => {
        c.AddFor(m => m.Title).Caption("Position");
        c.AddFor(m => m.Full_Name);
        c.AddFor(m => m.City);
    })
)

TreeListController.cs

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

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

TreeListModels.cs

using System;

namespace ASP.NET_Core.Models.TreeList {
    public class Employee {
        public int ID { get; set; }
        public int Head_ID { get; set; }
        public string Title { get; set; }
        public string Full_Name { get; set; }
        public string City { get; set; }
    }
}

Built-in Capabilities and Configuration Guides

• Data Binding
  TreeList 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 on demand. For large datasets, you can use server-side data processing.

• Various Edit Modes
  Edit TreeList data in multiple modes, including form and popup modes.

• Filtering, Sorting, and Searching
  Set up a filter row and a header filter to filter data by column values. You can sort TreeList by single or multiple columns initially or at runtime. Enable search panel to allow users searching values in multiple columns at once.

• Rich Customization
  TreeList offers extensive appearance customization for cells, edit buttons, and so on.

• Nodes Drag and Drop
  You can drag and drop rows to reorder them or change their hierarchy. You can also enable column reordering.

• State Persistence
  TreeList can persist user changes to sorting, filtering, grouping, and column settings. It restores these changes when the page reloads.

API

Server-Side API

Initialization

Call the TreeList() method to create a TreeList control. This action initializes a TreeListBuilder<T> instance. Use the instance methods to specify TreeList options and event handlers.

Options

For a complete option list, see Options. 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 TreeList options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme TreeList options.

Methods

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

Accessibility

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

Demos

Run Demo: TreeList