Display a Tree List With Flat Data Objects (ASP.NET Core Blazor)

• Dec 19, 2025
• 3 minutes to read

ASP.NET Core Blazor DxTreeListEditor component can display a flat data object collection as a tree-like structure. To make this possible, objects in the data source should have relationships defined by Key and Parent Key properties. This topic shows an example of such implementation.

Note

In this scenario, classes do not need to implement the ITreeNode interface.

Initial Data Model Implementation

First, implement a simple class with a ParentObjectId property that targets a parent node’s key value.

HasChildren property allows you to use Queryable data access mode. In this mode, Tree List loads child nodes from the database only when you expand the parent node. The HasChildren property shows whether the parent object should contain children.

C# (EF Core)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.Base.General;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace YourSolutionName.Module.BusinessObjects;
[DefaultClassOptions]
public class Category : BaseObject {
   public virtual string Name { get; set; }
   [HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
   public virtual Guid ParentObjectId { get; set; }

   // Add this property if you use Queryable data access mode.
   [HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
   [PersistentAlias("[<MyApplication.Module.BusinessObjects.Category>][ParentObjectId = ^.ID and ID != ^.ID]")]
   public bool HasChildren => EvaluateAlias<bool>();
}

C# (XPO)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
using DevExpress.Xpo;

namespace YourSolutionName.Module.BusinessObjects;
[DefaultClassOptions]
    public class Category : BaseObject {
        public Category(Session session) : base(session) { }

        private string name;
        public string Name {
            get => name;
            set => SetPropertyValue(nameof(Name), ref name, value);
        }

        private Guid parentObjectId;
        [HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
        public Guid ParentObjectId {
            get => parentObjectId;
            set => SetPropertyValue(nameof(ParentObjectId), ref parentObjectId, value);
        }

        // Add this property if you use Queryable data access mode.
        [HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
        [PersistentAlias("[<MyApplication.Module.BusinessObjects.Category>][ParentObjectId = ^.Oid and Oid != ^.Oid]")]
        public bool HasChildren => Convert.ToBoolean(EvaluateAlias("HasChildren"));
    }

}

You can make the HasChildren property persistent (stored in the database):

• Add a getter and setter
• Remove the PersistentAlias attribute

C# (EF Core)

//...
public virtual bool HasChildren { get; set; }

C# (XPO)

//...
private bool hasChildren;
[HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
public bool HasChildren {
    get {
        return hasChildren;
    }
    set {
        SetPropertyValue(nameof(HasChildren), ref hasChildren, value);
    }
}

Step-by-Step Scenario

1. Open Model Editor and navigate to the Category_ListView node.
2. In the EditorType property, specify the DevExpress.ExpressApp.Blazor.Editors.DxTreeListEditor value.

3. Specify the KeyFieldName, ParentKeyFieldName, and HasChildrenFieldName properties as follows:

   Property	EF Core	XPO
   HasChildrenFieldName	HasChildren	HasChildren
   KeyFieldName	ID	Oid
   ParentKeyFieldName	ParentObjectId	ParentObjectId

4. Run the ASP.NET Core Blazor application and click the Category item in the navigation control.
5. To create a top-level Category object, use the New Action.

6. To create a child object in EF Core applications, select the parent object in the tree list and click the New action. In XPO applications, specify the parent object in the drop-down Parent Category menu.

   XAF displays these objects as a tree in the Category List View: