Customize a Built-in Property Editor (Blazor)

• Feb 02, 2024
• 3 minutes to read

This topic describes two options you can use to customize a built-in XAF Property Editor for ASP.NET Core Blazor applications (refer to the following topic to see a similar example for WinForms: How to: Customize a Built-in Property Editor (WinForms)). This example shows how to display the calendar and the clock in DateTimePropertyEditor:

Customize a Built-in Property Editor in a Controller

Create a new Controller in the ASP.NET Core Blazor module project (MySolution.Module.Blazor). If your solution does not contain this project, add this Controller to the application project (MySolution.Blazor.Server). To customize the Property Editor’s control, override the OnActivated method and use the CustomizeViewItemControl method.

C#

using System;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors;
using DevExpress.ExpressApp.Blazor.Editors.Adapters;
// ...
public class CustomizeDateEditorController : ViewController<DetailView> {
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<DateTimePropertyEditor>(this, CustomizeDateTimeEditor);
    }
    private void CustomizeDateTimeEditor(DateTimePropertyEditor propertyEditor) {
        if(propertyEditor.Control is DxDateEditAdapter adapter) {
            adapter.ComponentModel.TimeSectionVisible = true;
        }
    }
}

Create a Built-in Property Editor Descendant

Use this solution if you want to replace the default Property Editor with a custom editor for specific business object properties in the Model Editor.

1. Inherit the DateTimePropertyEditor class in the ASP.NET Core Blazor module project (MySolution.Module.Blazor). If your solution does not contain this project, add this editor to the application project (MySolution.Blazor.Server). Note that your editor should be public. Override the OnControlCreated method to customize the Property Editor’s control. To specify that the Property Editor can be used for the DateTime type properties, apply the PropertyEditorAttribute attribute.

   C#

   using System;
   using DevExpress.ExpressApp.Blazor.Editors;
   using DevExpress.ExpressApp.Blazor.Editors.Adapters;
   using DevExpress.ExpressApp.Editors;
   using DevExpress.ExpressApp.Model;
   // ...
   [PropertyEditor(typeof(DateTime), false)]
   public class CustomDateTimePropertyEditor : DateTimePropertyEditor {
       public CustomDateTimePropertyEditor(Type objectType, IModelMemberViewItem model) : base(objectType, model) { }
       protected override void OnControlCreated() {
           base.OnControlCreated();
           if(Control is DxDateEditAdapter adapter) {
               adapter.ComponentModel.TimeSectionVisible = true;
           }
       }
   }
   

2. To use this Property Editor for a specific property, run the Model Editor in the ASP.NET Core Blazor project and set the IModelCommonMemberViewItem.PropertyEditorType of the required OwnMember or ViewItem node to CustomDateTimePropertyEditor.

   Tip

   To use the implemented Property Editor with all DateTime properties, pass true as the PropertyEditorAttribute constructor’s defaultEditor parameter.

Note that the value of the business class property associated with the customized Property Editor should be formatted accordingly to display the time part of the DateTime value:

C# (EF Core)

using DevExpress.ExpressApp.Model;
//...
[ModelDefault("DisplayFormat", "{0:MM.dd.yyyy hh:mm:ss}")]
[ModelDefault("EditMask", "MM.dd.yyyy hh:mm:ss")]
public virtual DateTime CreatedOn { get; set; }

// Make sure that you use options.UseChangeTrackingProxies() in your DbContext settings.

C# (XPO)

using DevExpress.ExpressApp.Model;
//...
private DateTime createdOn;
[ModelDefault("DisplayFormat", "{0:MM.dd.yyyy hh:mm:ss}")]
[ModelDefault("EditMask", "MM.dd.yyyy hh:mm:ss")]
public DateTime CreatedOn {
    get { return createdOn; }
    set { SetPropertyValue(nameof(CreatedOn), ref createdOn, value); }
}

VB.NET (XPO)

Imports DevExpress.ExpressApp.Model
'...
Private _createdOn As Date
<ModelDefault("DisplayFormat", "{0:MM.dd.yyyy hh:mm:ss}"), _
ModelDefault("EditMask", "MM.dd.yyyy hh:mm:ss")> _
Public Property CreatedOn() As Date
    Get
        Return _createdOn
    End Get
    Set(ByVal value As Date)
        SetPropertyValue(NameOf(CreatedOn), _createdOn, value)
    End Set
End Property

For additional information, refer to the following topic: Format a Property Value.

Handle Control Events

Razor components usually have events implemented as properties of the EventCallback<T> type. Examples include DxTextBox.TextChanged or InputBase.ValueChanged.

XAF can handle some of these events. To safely add your own event handler without overriding the default XAF implementation, we recommend that you use the following pattern:

var defaultEventHandler = ComponentModel.SomeEvent;
ComponentModel.SomeEvent = EventCallback.Factory.Create<TArgument>(this, async eventArgument => {
    // Comment out the line below if you do not want XAF to handle this event.
    await defaultEventHandler.InvokeAsync(eventArgument);

    // Implement your custom logic here.
    // ...
});

See also:

• EventCallback | ASP.NET Core Blazor event handling