How to: Implement a Property Editor Based on Custom Controls (ASP.NET)

This topic explains how to implement a Property Editor for ASP.NET applications. For demonstration purposes, an integer Property Editor is implemented in this example. It uses the DropDownList control in Edit mode and the Label control in View mode.

Tip

You can see the code implemented here in the FeatureCenter Demo installed with XAF. This demo is located in the %PUBLIC%\Documents\DevExpress Demos 18.2\Components\eXpressApp Framework\FeatureCenter folder by default.

Note

ASP.NET controls that use the ClientScriptManager.RegisterStartupScript method cannot be integrated using this example. If need to integrate such a control, feel free to contact our Support Team.

Follow these steps to implement an ASP.NET Property Editor.

  1. In an ASP.NET module project, inherit the WebPropertyEditor class. Note that your class should be public.
  2. Apply PropertyEditorAttribute to specify the data type for which the Property Editor will be used (Int32 in this example). If you set the PropertyEditor attribute's last parameter to true, the Property Editor will be used for all integer properties in any business class.
  3. Override the CreateViewModeControlCore method and return a WebControl descendant to further use it in View mode (the Label control in this example). Note that the Label control will be created by default if you don't override this method. Since in this mode, custom controls are supposed to be read-only, it is necessary to manually disable the capability to edit data if the control in use can be generally edited. For this purpose, specify the CustomWebControl.ReadOnly and ASPxWebControl.Enabled properties of the target control. In addition, make sure you specify a unique Control.ID value (see How to create controls dynamically).
  4. Override the CreateEditModeControlCore method and return a WebControl descendant to further use it in Edit mode (the DropDownList control in this example). At this stage, you can set up the created control, subscribe to required events, and provide it with a data source if necessary. Note that the technique of setting up controls may be different depending on a control in use. Make sure you specify a unique Control.ID value (see How to create controls dynamically).
  5. Determine which event of the control operating in Edit mode occurs when the edit value is changed by a user (e.g., the ListControl.SelectedIndexChanged event). Refer to the control's documentation to find the appropriate event. Subscribe to this event and call the EditValueChangedHandler method (which internally raises the PropertyEditor.ControlValueChanged event and calls the PropertyEditor.WriteValue method). The EditValueChangedHandler method should be invoked during any callback (postback) raising in case a user has changed the value on the client side (in a browser) before this callback (postback) is raised.
  6. Override the GetControlValueCore method and return the value specified by the WebPropertyEditor.Editor control used in Edit mode. Note that the returned data type should be the same as the edit property data type.
  7. Override the ReadEditModeValueCore method and pass the PropertyEditor.PropertyValue object to the property that specifies the displayed content of the WebPropertyEditor.Editor control created to operate in Edit Mode (the ListControl.SelectedValue property in this example).
  8. Override the ReadViewModeValueCore method and pass the PropertyEditor.PropertyValue object to the property that specifies the displayed content of the WebPropertyEditor.InplaceViewModeEditor control created to operate in View Mode (the Label.Text property in this example).

The following code demonstrates the CustomIntegerEditor class implementation based on the steps listed above.

using System;
using System.Drawing;
using System.Web.UI.WebControls;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Web.Editors;
//...
[PropertyEditor(typeof(Int32), false)]
public class CustomIntegerEditor : WebPropertyEditor {
    public CustomIntegerEditor(Type objectType, IModelMemberViewItem info) : base(objectType, info) { }
    protected override WebControl CreateViewModeControlCore() {
        Label control = new Label();
        control.ID = "editor";
        return control;
    }
    protected override WebControl CreateEditModeControlCore() {
        DropDownList control = new DropDownList();
        control.ID = "editor";
        control.Items.Add("0");
        control.Items.Add("1");
        control.Items.Add("2");
        control.Items.Add("3");
        control.Items.Add("4");
        control.Items.Add("5");
        control.SelectedIndexChanged += control_SelectedIndexChanged;
        return control;
    }

    void control_SelectedIndexChanged(object sender, EventArgs e) {
        EditValueChangedHandler(sender, e);
    }
    protected override object GetControlValueCore() {
        int result = 0;
        if(int.TryParse(((DropDownList)Editor).SelectedValue, out result)) {
            return result;
        }
        return 0;
    }
    protected override void ReadEditModeValueCore() {
        ((DropDownList)Editor).SelectedValue = ((int)PropertyValue).ToString();
    }
    protected override void ReadViewModeValueCore() {
        ((Label)InplaceViewModeEditor).Text = ((int)PropertyValue).ToString();
    }
}

Also, you can override the SetupControl method to instantiate and set up a control for which the customization code is provided. This method is called when the control is initialized, so it is recommended to place the control's customization code here.

To edit a particular property value using the CustomIntegerEditor Property Editor, customize the Application Model. Invoke the Model Editor for the ASP.NET module project and navigate to the required BOModel| Class| OwnMembers| Membernode. Set the node's IModelCommonMemberViewItem.PropertyEditorType property to CustomIntegerEditor. After this, the property specified by the Member node will be displayed by the CustomIntegerEditor in all Views. To use the CustomIntegerEditor Property Editor in a specific Detail View only, use the PropertyEditorType property of the Views | <DetailView> | Items | <PropertyEditor> node instead.

Note

You may need to implement the IAppearanceFormat interface and manually apply the IAppearanceFormat.BackColor, IAppearanceFormat.FontColor and IAppearanceFormat.FontStyle settings of the Conditional Appearance Module to the created control.

See Also