Skip to main content
All docs
V22.1
.NET Standard 2.0+

Customize a Built-in Property Editor (Blazor)

  • 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:

BlazorCalendarPropertyEditor

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.

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.

    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 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

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); }
}

For details, refer to the Format a Property Value topic.

See Also