KB Article T551301
Visible to All Users

How to: Access the ASPxImagePropertyEditor controls in View and Edit modes

Scenario:
We have a business object that contains the byte array property with the ImageEditorAttribute:

C#
public class ImageObject : BaseObject { public ImageObject(Session session) : base(session) { } private byte[] image; [ImageEditor] public byte[] Image { get { return image; } set { SetPropertyValue("Image", ref image, value); } } }
Visual Basic
Public Class ImageObject Inherits BaseObject Public Sub New(session As Session) MyBase.New(session) End Sub Private m_image As Byte() <ImageEditor> _ Public Property Image() As Byte() Get Return m_image End Get Set SetPropertyValue("Image", m_image, value) End Set End Property End Class

This article describes how to access ASPxImagePropertyEditor's controls and customize it. In the case of ASPxUploadControl, we will set the maximum file size and allowed file extensions for uploaded images. In the case of the System.Web.UI.WebControls.Image control, we will set a custom JavaScript handler.

Prerequisites:
This approach works in version 17.1.6 and higher.

Implementation details:
To accomplish this task, we can perform the following steps:
- Add a new View Controller to the YourSolutionName.Module.Web project;
- Locate ASPxImagePropertyEditor, which has the "Image" identifier using the CompositeView.FindItem method.
- Handle the Property Editor's ControlCreated event and get access to ASPxImagePropertyEditor's editor. The Editor can be of the following types: ImageEdit or DropDownImageEdit  depending on the ImageEditorAttribute.DetailViewImageEditorMode value. For more details, refer to the BLOB Image Properties article.
- Get access to ASPxUploadControl  using the ImageEdit.UploadControl or DropDownImageEdit.ImageEdit.UploadControl properties and customize it.
- Get access to System.Web.UI.WebControls.Image  using the ImageEdit.ImageControl or DropDownImageEdit.ImageEdit.ImageControl properties and set the "onclick" attribute.

Below is the controller that implements this behavior.

C#
using System; using DevExpress.ExpressApp; using DevExpress.ExpressApp.Web.Editors.ASPx; using DevExpress.Web; using PropertyEditorsApplication.Module.BusinessObjects; namespace PropertyEditorsApplication.Module.Editors.Web { public class UploadImageController : ObjectViewController<DetailView, ImageObject> { ASPxImagePropertyEditor propertyEditor; protected override void OnActivated() { base.OnActivated(); propertyEditor = View.FindItem("Image") as ASPxImagePropertyEditor; if(propertyEditor != null) propertyEditor.ControlCreated += PropertyEditor_ControlCreated; } protected override void OnDeactivated() { base.OnDeactivated(); if(propertyEditor != null) propertyEditor.ControlCreated -= PropertyEditor_ControlCreated; } private void PropertyEditor_ControlCreated(object sender, EventArgs e) { ImageEdit imageEdit = ((ASPxImagePropertyEditor)sender).Editor as ImageEdit; if(imageEdit != null) { SetupUploadControl(imageEdit.UploadControl); SetupImageControl(imageEdit.ImageControl); } else { DropDownImageEdit dropDownImageEdit = ((ASPxImagePropertyEditor)sender).Editor as DropDownImageEdit; if(dropDownImageEdit != null) { SetupUploadControl(dropDownImageEdit.ImageEdit.UploadControl); SetupImageControl(dropDownImageEdit.ImageEdit.ImageControl); } } } private void SetupImageControl(System.Web.UI.WebControls.Image imageControl) { imageControl.Attributes.Add("onclick", "alert('Clicked!');"); } private void SetupUploadControl(ASPxUploadControl uploadControl) { uploadControl.ValidationSettings.MaxFileSize = 1024 * 1024; // 1Mb uploadControl.ValidationSettings.AllowedFileExtensions = new String[] { ".jpg", ".png" }; } } }
Visual Basic
Imports DevExpress.ExpressApp Imports DevExpress.ExpressApp.Web.Editors.ASPx Imports DevExpress.Web Imports PropertyEditorsApplication.Module.BusinessObjects Namespace PropertyEditorsApplication.Module.Editors.Web Public Class UploadImageController Inherits ObjectViewController(Of DetailView, ImageObject) Private propertyEditor As ASPxImagePropertyEditor Protected Overrides Sub OnActivated() MyBase.OnActivated() propertyEditor = TryCast(View.FindItem("Image"), ASPxImagePropertyEditor) If propertyEditor IsNot Nothing Then AddHandler propertyEditor.ControlCreated, AddressOf PropertyEditor_ControlCreated End If End Sub Protected Overrides Sub OnDeactivated() MyBase.OnDeactivated() If propertyEditor IsNot Nothing Then RemoveHandler propertyEditor.ControlCreated, AddressOf PropertyEditor_ControlCreated End If End Sub Private Sub PropertyEditor_ControlCreated(sender As Object, e As EventArgs) Dim imageEdit As ImageEdit = TryCast(DirectCast(sender, ASPxImagePropertyEditor).Editor, ImageEdit) If imageEdit IsNot Nothing Then SetupUploadControl(imageEdit.UploadControl) SetupImageControl(imageEdit.ImageControl) Else Dim dropDownImageEdit As DropDownImageEdit = TryCast(DirectCast(sender, ASPxImagePropertyEditor).Editor, DropDownImageEdit) If dropDownImageEdit IsNot Nothing Then SetupUploadControl(dropDownImageEdit.ImageEdit.UploadControl) SetupImageControl(dropDownImageEdit.ImageEdit.ImageControl) End If End If End Sub Private Sub SetupImageControl(imageControl As System.Web.UI.WebControls.Image) imageControl.Attributes.Add("onclick", "alert('Clicked!');") End Sub Private Sub SetupUploadControl(uploadControl As ASPxUploadControl) uploadControl.ValidationSettings.MaxFileSize = 1024 * 1024 ' 1Mb uploadControl.ValidationSettings.AllowedFileExtensions = New [String]() {".jpg", ".png"} End Sub End Class End Namespace

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.