The requested page is not available for the requested platform. You are viewing the content for Default platform.

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

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) and How to: Customize a Built-in Property Editor (Mobile) topics to see the similar examples for WinForms and Mobile). In this example, the ASPxDateTimePropertyEditor is customized to display the calendar and the clock:

WebCalendarPropertyEditor

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 18.2\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at http://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:

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

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

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

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

See Also