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

• Feb 07, 2025
• 2 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); }

   Category _parentCategory;

   public Category ParentCategory {
      get {
            return _parentCategory; }
      set {
            SetPropertyValue(nameof(ParentCategory), ref _parentCategory, value); }
   }


   private Guid parentObjectId;
   [HideInUI(HideInUI.ListViewColumn | HideInUI.DetailViewEditor)]
   public Guid ParentObjectId {
      get {
            return ParentCategory == null? Guid.Empty: ParentCategory.Oid; }
   //   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"));
}

If you want to make the HasChildren property persistent (stored in the database), remove the PersistentAlias attribute:

C# (EF Core)

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

C# (XPO)

//...
public bool HasChildren => Convert.ToBoolean(EvaluateAlias("HasChildren"));

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 the following image demonstrates:

   

4. Run the ASP.NET Core Blazor application and click the Category item in the navigation control. Use the New Action to create Category objects. XAF displays these objects as a tree in the Category List View: