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 BasicPublic 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 BasicImports 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