How to: Implement a Property Editor Based on Custom Controls (ASP.NET)
- 5 minutes to read
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 20.2\Components.NET Core Desktop Libraries\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.
- In an ASP.NET module project, inherit the WebPropertyEditor class. Note that your class should be public.
- 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.
- 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).
- 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).
- 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.
- 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.
- 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).
- 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();
}
}
Additionally, you can override the SetupControl method to change the settings of a Property Editor’s control and subscribe to its events. Override the BreakLinksToControl method to unsubscribe from these events.
You can also implement IComplexViewItem in this Property Editor. This interface allows the editor to access the XafApplication instance and use an Object Space to load data from an application database.
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.