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

• Mar 20, 2026
• 6 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.

Note

• If you make this property persistent, XAF initially queries only visible nodes from the database.

• If this property is calculated, XAF loads the next level to allow the Tree List to evaluate whether nodes have children.

• C# (EF Core)

• C# (XPO)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl.EF;
using System.Collections.ObjectModel;

namespace SolutionName.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>();
}

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

namespace SolutionName.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("[<SolutionName.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)

• C# (XPO)

//...
[HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
public virtual bool HasChildren { get; set; }

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

If your application uses EF Core Framework, register the Category class in the DBContext.

File: SolutionName.Module\BusinessObjects\SolutionNameDbContext.cs

• C#

using DevExpress.ExpressApp.EFCore.Updating;
using DevExpress.Persistent.BaseImpl.EF;
using Microsoft.EntityFrameworkCore;

namespace SolutionName.Module.BusinessObjects;
// ...
public class SolutionNameDbContext : DbContext {
    // ...
    public SolutionNameDbContext(DbContextOptions<SolutionNameDbContext> options)
        : base(options) {
    }
    // ...
    public DbSet<Category> Categories { get; set; }

}

Step-by-Step Scenario

1. In your ASP.NET Core Blazor project (SolutionName.Blazor.Server), 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:

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, select the parent object in the tree list and click the New action.

Set Up One-To-Many Relationship (EF Core)

1. Add the ParentObject and Children properties to the Category class. Make ParentObjectId nullable to use it as a foreign key.

2. To configure the One-to-Many relationship between objects of the Category type, use the OnModelCreating method of your DbContext descendant.

3. In your ASP.NET Core Blazor project (SolutionName.Blazor.Server), open Model Editor and navigate to the Category_Children_ListView node.

4. In the EditorType property, specify the DevExpress.ExpressApp.Blazor.Editors.DxTreeListEditor value.

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

Set Up One-To-Many Relationship (XPO)

1. Add the ParentObject and Children properties to the Category class.

2. To configure the One-to-Many relationship between objects of the Category type, use the Association attribute.

3. Handle the CollectionChanged event of the Children collection to update the HasChildren property when child objects are removed.

4. Create a controller to handle the assignment of the ParentObject property when new child objects are created or existing child objects are orphaned.

5. In your ASP.NET Core Blazor project (SolutionName.Blazor.Server), open Model Editor and navigate to the Category_Children_ListView node.

6. In the EditorType property, specify the DevExpress.ExpressApp.Blazor.Editors.DxTreeListEditor value.

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