All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

How to: 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 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

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.

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.

    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

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