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 ITree
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
- Open Model Editor and navigate to the Category_ListView node.
- In the
EditorType
property, specify the DevExpress.ExpressApp.Blazor.Editors.DxTreeListEditor value. Specify the
KeyFieldName
,ParentKeyFieldName
, andHasChildrenFieldName
properties as the following image demonstrates:Run the ASP.NET Core Blazor application and click the
Category
item in the navigation control. Use the New Action to createCategory
objects. XAF displays these objects as a tree in theCategory
List View: