Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Collapse]Property Editors
    How to: Customize a Built-in Property Editor (ASP.NET)
    How to: Customize a Built-in Property Editor (WinForms)
    How to: Disable and Hide Property Editors Based on a Business Rule
    How to: Display an Integer Property as an Enumeration
    How to: Implement a Property Editor Based on a Custom Control (WinForms)
    How to: Implement a Property Editor based on Custom Controls (ASP.NET)
    How to: Implement a Property Editor Using a DevExpress WinForms Control
    How to: Supply Predefined Values for the String Property Editor Dynamically (ASP.NET)
    How to: Supply Predefined Values for the String Property Editor Dynamically (WinForms)
    How to: Use Criteria Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Expand]Miscellaneous UI Customizations
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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 17.1\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.

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 | Member node. 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.

Expanded See Also

How would you rate this topic?​​​​​​​