How to: Customize a Built-in Property Editor (ASP.NET)

• Oct 07, 2019
• 3 minutes to read

This topic describes how to customize a built-in XAF Property Editor for ASP.NET applications (refer to the How to: Customize a Built-in Property Editor (WinForms) topic to see the similar example for WinForms). In this example, the ASPxDateTimePropertyEditor is customized to display the calendar and the clock:

Note

You can see the code demonstrated here along with more examples on custom property editors in the Feature Center Demo installed with XAF. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 19.2\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at https://demos.devexpress.com/XAF/FeatureCenter/.

Inherit the Property Editor

In the ASP.NET module project, inherit the ASPxDateTimePropertyEditor class. Note that your editor should be public. To customize the Property Editor’s control used in the edit mode, override the SetupControl method. To specify that the Property Editor can be used for the DateTime type properties, apply the PropertyEditorAttribute attribute:

C#

using System;
using System.Web.UI.WebControls;
using DevExpress.Web;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Web.Editors.ASPx;
//...
[PropertyEditor(typeof(DateTime), false)]
public class CustomDateTimeEditor : ASPxDateTimePropertyEditor {
    public CustomDateTimeEditor(Type objectType, IModelMemberViewItem info) : 
        base(objectType, info) { }
    protected override void SetupControl(WebControl control) {
        base.SetupControl(control);
        if(ViewEditMode == ViewEditMode.Edit) {
            ASPxDateEdit dateEdit = (ASPxDateEdit)control;
            dateEdit.TimeSectionProperties.Visible = true;
            dateEdit.UseMaskBehavior = true;
        }
    }
}

VB.NET

Imports System.Web.UI.WebControls
Imports DevExpress.Web
Imports DevExpress.ExpressApp.Model
Imports DevExpress.ExpressApp.Editors
Imports DevExpress.ExpressApp.Web.Editors.ASPx
'...
<PropertyEditor(GetType(Date), False)> _
Public Class CustomDateTimeEditor
    Inherits ASPxDateTimePropertyEditor
    Public Sub New(ByVal objectType As Type, ByVal info As IModelMemberViewItem)
        MyBase.New(objectType, info)
    End Sub
    Protected Overrides Sub SetupControl(ByVal control As WebControl)
        MyBase.SetupControl(control)
        If ViewEditMode = ViewEditMode.Edit Then
            Dim dateEdit As ASPxDateEdit = CType(control, ASPxDateEdit)
            dateEdit.TimeSectionProperties.Visible = True
            dateEdit.UseMaskBehavior = True
        End If
    End Sub
End Class

Use the Customized Property Editor

To use the implemented Property Editor for a specific property, run the Model Editor in the APP.NET project and set the IModelCommonMemberViewItem.PropertyEditorType of the required OwnMember or ViewItem node to CustomDateTimeEditor.

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;
//...
[ModelDefault("DisplayFormat", "{0:MM.dd.yyyy hh:mm:ss}")]
[ModelDefault("EditMask", "MM.dd.yyyy hh:mm:ss")]
public DateTime CreatedOn { get; set;}

VB.NET

Imports DevExpress.ExpressApp.Model
'...
<ModelDefault("DisplayFormat", "{0:MM.dd.yyyy hh:mm:ss}"), _
ModelDefault("EditMask", "MM.dd.yyyy hh:mm:ss")> _
Public Property CreatedOn() As Date

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