To add the TreeList Editor to your ASP.NET Core Blazor application, implement the following components:

• Razor component based on the DevExtreme TreeList widget.
• Component model that changes the state of the component.
• Component renderer that binds the component model with the component.
• List Editor that integrates the component into your XAF application.

The following image demonstrates the result:

• BlazorComponents/TreeList.razor
• BlazorComponents/wwwroot/treeListModule.js
• XAFTreeList.Module.Blazor/Editors/TreeListModel.cs
• XAFTreeList.Module.Blazor/Editors/TreeListRenderer.razor
• XAFTreeList.Module.Blazor/Editors/TreeListEditor.cs

1. Create a Razor class library (RCL) project (BlazorComponents). Reference it in your XAFTreeList.Module.Blazor and XAFTreeList.Blazor.Server projects.

2. Register DevExtreme libraries in the XAFTreeList.Blazor.Server/Pages/_Host.cshtml page as described in the following topic: Add DevExtreme to a jQuery Application.

3. Add the TreeList.razor Razor component to the BlazorComponents project. The following table describes the APIs implemented in this component:

   API	Type	Description
   GetDataAsync	parameter	Encapsulates a method that fetches data on demand.
   FieldNames	parameter	Stores an array of field names.
   GetFieldDisplayText	parameter	Encapsulates a method that returns field captions.
   GetKey	parameter	Encapsulates a method that returns the current key value.
   HasChildren	parameter	Encapsulates a method that determines whether the currently processed node has child nodes.
   RowClick	parameter	Represents a method that handles an event when users click a row.
   SelectionChanged	parameter	Represents a method that handles an event when users change selection.
   OnRowClick and OnSelectionChanged	methods	Used to raise the RowClick and SelectionChanged events.
   OnAfterRenderAsync	method	Initializes the necessary IJSObjectReference, ElementReference, and DotNetObjectReference fields for interaction with the DevExtreme TreeList widget.
   OnGetDataAsync	method	Creates a dictionary of field name-value pairs. This method is called from JavaScript code to fetch data based on the passed parent key value.
   Refresh	method	Calls the JavaScript TreeList.refresh method.

4. Add the treeListModule.js script with TreeList API to the BlazorComponents\wwwroot folder. In the script, configure TreeList to load data on demand as described in the following article: Load Data on Demand. Use the DotNetObjectReference object to call the declared .NET OnGetDataAsync method and fetch data. Handle the TreeList.rowClick and TreeList.selectionChanged events to call the declared .NET OnRowClick and OnSelectionChanged methods.

See also:

• Call .NET methods from JavaScript functions in ASP.NET Core Blazor
• Call JavaScript functions from .NET methods in ASP.NET Core Blazor
• Tree List > Data Binding > Load Data on Demand

1. In the Blazor-specific module project (XAFTreeList.Module.Blazor), create the ComponentModelBase descendant and name it TreeListModel.cs.

   The following table describes the APIs implemented in this component:

   API	Type	Description
   GetDataAsync	property	Encapsulates a method that fetches data on demand.
   FieldNames	property	Stores an array of field names.
   GetFieldDisplayText	property	Encapsulates a method that returns field captions.
   GetKey	property	Encapsulates a method that returns the current key value.
   HasChildren	property	Encapsulates a method that determines whether the currently processed node has child nodes.
   RowClick, SelectionChanged, RefreshRequested	events	Occur when users click a row and change selection.
   OnRowClick, OnSelectionChanged, Refresh	methods	Used to raise the corresponding events.

2. Create EventArgs descendants to pass key values to the RowClick and SelectionChanged event handlers. See these classes in the following file: TreeListModel.cs.

1. In the Blazor-specific module project (XAFTreeList.Module.Blazor), create a new Razor component and name it TreeListRenderer.razor. This component renders the TreeList component from the RCL project.
2. Ensure that the component’s Build Action property is set to Content.
3. Declare the required parameters and implement the IDisposable interface.

1. Create a ListEditor descendant, apply the ListEditorAttribute to this class, and pass an ITreeNode type as a parameter.
2. Implement the IComplexListEditor interface. In the IComplexListEditor.Setup method, initialize an Object Space instance.

The following table describes the API implemented in this List Editor:

• How to: Use a Custom Component to Implement List Editor (Blazor)
• Using a Custom Control that is not Integrated by Default

How to: Use a Custom Component to Implement List Editor (Blazor)