Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

  • 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.

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

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

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

#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:

    XAF Model Editor Options To Enable Tree List with Flat Data Objects, DevExpress

  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:

    XAF Tree List View with Flat Data Objects, DevExpress