XAF Blazor - How to use a TagBox to view and edit a collection property in Detail Views

There are a couple of child records, and it is required to display all available records in a compact manner, and link and unlink them from the master object quickly (for example, with check boxes or tokens/tags). When an item is selected, this means that this record is associated with the master object.

Note
We created this example only for demonstration purposes. We can't guarantee that it will work in all usage scenarios. If you need to add some functionality to it, feel free to do this on your own. Researching DevExpress source code will help you with this task. Also, refer to the following help topic for more information: Debug DevExpress .NET Source Code with Debug Symbols. Unfortunately extending this example with custom code is outside the scope of our Support Service: Technical Support Scope.

Summary

We created a custom XAF Property Editor based on our DxTagBox component. For more information, review the following concepts:

• Property Editors;
• How to: Implement a Property Editor Based on a Custom Component (Blazor);
• Application Solution Components.

To simplify this task, we used our built-in Component Model (DxTagBoxModel), Component Adapter (DxTagBoxAdapter), and Component Renderer (DxTagBoxRenderer).

Implementation Steps

Create a BlazorPropertyEditorBase class descendant and follow the steps listed below:

1. Apply PropertyEditorAttribute to the editor and set the first attribute parameter to IList and the isDefaultEditor parameter to false. With these values, you can choose this Property Editor for a collection in the Model Editor , and this editor will not be marked as default.

2. Override the CreateComponentAdapter method. In this method, create a component model, create a DataItem<string> collection, populate it with object handles using the IObjectSpace.GetObjectHandle method, and then assign this collection to the component model's Data property. Then, specify the component model's ValueFieldName and TextFieldName properties. They are used to bind the DxTagBox component.

3. Override the ReadValueCore method. This method is required to obtain a collection of values from a PropertyValue, loop through this collection, and update your component model's data.

4. Override the WriteValueCore method. Use this method to obtain data from the component model and then update the collection stored in the PropertyValue property.

5. Return false in the overridden IsMemberSetterRequired method to specify that the editor should not be read-only.

6. Optional. You may wish to slightly customize the Detail View layout for better appearance by following recommendations described at Detail View Layout Customization.

Files to Review

• TagBoxPropertyEditor.cs

More Examples

• How to represent a collection property using a checked list box