XAF Blazor - How to Implement a TreeList Editor

Implement the following components to add the TreeList Editor to your ASP.NET Core Blazor application:

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

The following image demonstrates the result:

Files to Look at

• 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

Implementation Details

Razor Component

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	Encapsulates a method that handles an event when users click a row.
   SelectionChanged	parameter	Encapsulates 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 the 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

Component Model

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.

Component Renderer

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.

List Editor

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:

API	Type	Description
SelectionType	property	Returns SelectionType.Full. This setting allows users to open the Detail View by click.
CreateControlsCore	method	Returns an instance of the TreeList component.
AssignDataSourceToControl	method	Assigns the List Editor’s data source to the component model. If the data source implements the IBindingList interface, this method handles data change notifications.
OnControlsCreated	method	Passes methods to the created delegates, initializes the arrays of field names, and subscribes to the component model’s RowClick and SelectionChanged events.
BreakLinksToControls	method	Unsubscribes from the component model’s events and resets its data to release resources.
Refresh	method	Calls the component model's Refresh method to update the List Editor layout when its data is changed.
GetSelectedObjects	method	Returns an array of selected objects.

Documentation

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

More Examples

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