Tree List Overview

CollapseCorporate Headquarters$1,000,000.00Monterey
 CollapseSales and Marketing$22,000.00San Francisco
   Field Office: Canada$500,000.00Toronto
   Field Office: East Coast$500,000.00Boston
  ExpandPacific Rim Headquarters$600,000.00Kuaui
   Marketing$1,500,000.00San Francisco
  ExpandConsumer Electronics Div.$1,150,000.00Burlington, VT
  ExpandSoftware Products Div.$1,200,000.00Monterey
About the Tree List

The DevExpress ASP.NET MVC TreeList extension combines the power of the Grid with the hierarchical structure of the TreeView. Like the GridView, the TreeList supports binding to data, editing data, sorting, and more.

Follow the three simple steps below to add a DevExpress TreeList extension and bind it to your data. It's easy as “M”, “V”, and “C”.

1. Model (the "M" in MVC). First, we need a Model object for the DevExpress TreeList to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. However, you can use any model that supports the IEnumerable or IQueryable interface. Since the TreeList is designed to display information in a tree structure, its data source needs two additional fields to build a tree structure. The first is a "Key Field" that must contain unique values. And the second is a "Parent Field" that must contain values that indicate parent nodes for the current node (learn more in our online documentation).

2. View (the "V" in MVC). Next declare the TreeList extension inside of the View. Specifically, you will create a Partial View because the DevExpress TreeList extension provides AJAX callbacks by default, to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the TreeList extension inside of a Partial View and define how the callbacks will be routed back to your controller using the CallbackRouteValues property:

Partial View code:

@Html.DevExpress().TreeList(settings => {
    settings.Name = "treeList";
    settings.CallbackRouteValues = new { Controller = "Overview", Action = "OverviewPartial" };
    settings.KeyFieldName = "ID";
    settings.ParentFieldName = "ParentID";
    settings.Settings.ScrollableHeight = 250;
    settings.Settings.VerticalScrollBarMode =
    settings.Columns.Add(column => {
        column.FieldName = "Budget";
        column.PropertiesEdit.DisplayFormatString = "{0:C}";

3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that will handle TreeList's callbacks. The "OverviewPartial" action method below handles the callbacks. The DepartmentsModel.GetData method gets the data from the data source to pass to the View. As you can see, the native DevExpress TreeList extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.

Controller code:

public class HomeController: Controller {
  public ActionResult Index() {
    return View("Overview", DepartmentsModel.GetData());
  public ActionResult OverviewPartial() {
    return PartialView("OverviewPartial", DepartmentsModel.GetData());

Watch a short nine-minute getting started video now to learn about the DevExpress TreeList extension for ASP.NET MVC.

Key Features
  • Binding to Data
    The TreeList can easily be populated with data by binding to any standard data source type. You can also bind the TreeList to any object that represents a tree structure, or manually create a tree in code.
  • Virtual Mode
    The TreeList can operate in Virtual Mode. This mode can be useful when binding to large data sets. In virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded.
  • Built-in Edit Modes
    TreeList provides multiple edit modes: in-line data editing, and editing via the edit form and popup edit form. End-users can switch the TreeList extension to an edit mode by clicking the Edit command.
  • Full Data Summaries
    The TreeList enables you to calculate summary values for all values within a column or within a group of nodes, and display the results inside footer cells. The TreeList provides five built-in aggregate functions (COUNT, MAX, MIN, etc.) and events to manually implement custom aggregate functions.
  • Preview Nodes
    With preview rows, you can let your end-users view large text or memo fields directly in the TreeList, without the need to open an external editor or drop-down window.
  • Runtime Column Customization
    End-users can manage the layout of tree list columns by rearranging, adding and removing columns by drag-and-drop.
  • Built-in Pager
    The TreeList can automatically split content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
  • Nodes Iterator
    The Nodes Iterator allows you to avoid writing recursive code to visit all nodes contained in a TreeList. It simplifies the task of traversing through the nodes.
  • Template Technology
    Templates are fully supported. For each element within the TreeList, you can customize the appearance or layout using any HTML content or server-side extension.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for the TreeList.
Version: v2017 vol 1.7
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.