Display a Tree List using the ITreeNode Interface

Dec 29, 2025
6 minutes to read

To display data in a tree-like structure, implement the ITreeNode interface in the corresponding business classes. XAF uses the DxTreeList and TreeList controls provided by the TreeList Editors module and DevExpress.ExpressApp.Blazor base module to display objects that support ITreeNode.

For more information about the ITreeNode interface, refer to the following topic: TreeList Editors Module Overview.

This topic demonstrates the implementation of the ITreeNode interface.

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e1125/xaf-how-to-use-tree-list-editors-to-display-list-views-for-asp-net-core-blazor-and.

DxTreeListEditor ships with the base DevExpress.ExpressApp.Blazor module. You do not need to add a module to an existing XAF ASP.NET Core Blazor application to start using it.

Follow instructions in this example to implement the following tree structure:

You need the following classes:

ProjectGroup
Project
ProjectArea

Derive these classes from an abstract class that implements the ITreeNode interface. To display a tree of these objects, add an item that corresponds to that abstract class to the navigation control. When you click this item, XAF organizes all objects of the types derived from the abstract class in a tree via the Tree List editors (you need to add the TreeList Editors module to the application).

Note

Business classes you implement in this example must meet the following requirements:

The parent and child classes corresponding to tree list nodes should be derived from the same persistent class that implements the ITreeNode interface. In this example, the ProjectGroup, Project, and ProjectArea classes are derived from the Category class.
It is impossible to have more than one root class in a Tree List. In this example, the ProjectGroup is the root class.

Implement an abstract Category class as the following code snippet demonstrates:
Implement the ProjectGroup, Project, and ProjectArea classes. Derive these classes from the Category class.
In a Windows Forms project, add the TreeList Editors module as described in the following topic: TreeList Editors Module Overview.
Run the application. Click the Category item in the navigation control and use the New Action to create ProjectGroup, Project, and ProjectArea objects. The Category List View displays these objects as a hierarchical tree:

ASP.NET Core Blazor Windows Forms

Note

In Windows Forms applications, Tree List nodes can have associated images. Tree List Editors display these images within the nodes. For more information, refer to the following topic: Node Images in a Tree List. In Windows Forms applications, you can also display a collection of items for each category node to the right of the Tree List. For more information, refer to the following topic: Categorized List (Windows Forms).

If you do not require the hard-coded structure as demonstrated in this example, use the HCategory class that implements the ITreeNode interface out of the box. For more information, refer to the following topic: Display a Tree List using the HCategory Class.