Skip to main content
.NET Standard 2.0+

Customize a Built-in Property Editor (ASP.NET Web Forms)

  • 3 minutes to read

This topic describes how to customize a built-in XAF Property Editor for ASP.NET Web Forms 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:



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 22.1\Components\XAF\FeatureCenter.NETFramework.XPO. The ASP.NET Web Forms version of this demo is available online at

Inherit the Property Editor

In the ASP.NET Web Forms 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:

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) {
        if(ViewEditMode == ViewEditMode.Edit) {
            ASPxDateEdit dateEdit = (ASPxDateEdit)control;
            dateEdit.TimeSectionProperties.Visible = true;
            dateEdit.UseMaskBehavior = true;

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.


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