How to: Customize a Built-in Property Editor (Blazor)

• Jan 21, 2021
• 3 minutes to read

This topic describes two options you can use to customize a built-in XAF Property Editor for 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

In the Blazor module project, create a new Controller. 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) {
        switch (propertyEditor.Control) {
            case DxDateEditAdapter<DateTime?> adapter:
                adapter.ComponentModel.TimeSectionVisible = true;
                break;
            case DxDateEditAdapter<DateTime> adapter:
                adapter.ComponentModel.TimeSectionVisible = true;
                break;
        }
    }
}

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. In the Blazor module project, inherit the DateTimePropertyEditor class. 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();
           switch (Control) {
               case DxDateEditAdapter<DateTime?> adapter:
                   adapter.ComponentModel.TimeSectionVisible = true;
                   break;
               case DxDateEditAdapter<DateTime> adapter:
                   adapter.ComponentModel.TimeSectionVisible = true;
                   break;
           }
       }
   }
   

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

   Tip

   To use the implemented Property Editor for all DateTime properties, set the PropertyEditorAttribute constructor’s defaultEditor parameter to true in the code above.

Note that the business class’ property value associated with the created Property Editor should be formatted in order to display the time part of the DateTime value

C#

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

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 details, refer to the Format a Property Value topic.