Use UserControl for Editing Custom Property Types
First of all, read this article by Ted Nyberg about using ETF. When I first started using EpiServer (not very long ago) I was wondering why can’t I find any examples of using UserControls in custom properties. I’m pretty sure I’m inventing my own wheel but hopefully my note will be better indexed than existing ones (I found none of them).
So, let’s create property MyPropertyString extending PropertyString.
[Serializable]
[PageDefinitionTypePlugIn]
public class MyPropertyString : PropertyString {
}
[PageDefinitionTypePlugIn]
public class MyPropertyString : PropertyString {
}
Looks like pretty useful property. Let’s add it to some PageType and ensure it’s displayed.
Then, we’ll add new Web User Control
Layout
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPropertyStringControl.ascx.cs" Inherits="EPiServer1.MyPropertyStringControl" %>
<asp:TextBox runat="server" ID="txtValue" />
<input type="button" value="Clear"
onclick="document.getElementById('<%= txtValue.ClientID %>').value = ''; return false;" />
<asp:TextBox runat="server" ID="txtValue" />
<input type="button" value="Clear"
onclick="document.getElementById('<%= txtValue.ClientID %>').value = ''; return false;" />
Code-behind
public partial class MyPropertyStringControl : UserControlBase, IPropertyControl {
public MyPropertyStringControl() {
Enabled = true; // Do not forget this!
}
public void SetupControl() {
txtValue.Text = (string)PropertyData.Value;
}
public void ApplyChanges() {
PropertyData.Value = txtValue.Text;
}
public bool DisplayEditUI {
get { return PropertyData.DisplayEditUI; }
}
public PropertyData PropertyData { get; set; }
public PropertyDataCollection Properties { get; set; }
public RenderType RenderType { get; set; }
public TableRowLayout RowLayout {
get { return TableRowLayout.Default; }
}
public string ValidationGroup { get; set; }
public bool Enabled { get; set; }
}
public MyPropertyStringControl() {
Enabled = true; // Do not forget this!
}
public void SetupControl() {
txtValue.Text = (string)PropertyData.Value;
}
public void ApplyChanges() {
PropertyData.Value = txtValue.Text;
}
public bool DisplayEditUI {
get { return PropertyData.DisplayEditUI; }
}
public PropertyData PropertyData { get; set; }
public PropertyDataCollection Properties { get; set; }
public RenderType RenderType { get; set; }
public TableRowLayout RowLayout {
get { return TableRowLayout.Default; }
}
public string ValidationGroup { get; set; }
public bool Enabled { get; set; }
}
And the last line which this post is about:
[Serializable]
[PageDefinitionTypePlugIn]
public class MyPropertyString : PropertyString {
public override IPropertyControl CreatePropertyControl() {
return (IPropertyControl)BuildManager.CreateInstanceFromVirtualPath("~/MyPropertyStringControl.ascx", typeof(MyPropertyStringControl));
}
}
[PageDefinitionTypePlugIn]
public class MyPropertyString : PropertyString {
public override IPropertyControl CreatePropertyControl() {
return (IPropertyControl)BuildManager.CreateInstanceFromVirtualPath("~/MyPropertyStringControl.ascx", typeof(MyPropertyStringControl));
}
}
Voila – we’ve got ‘clear’ button near our textbox.
P.S. Guys, is there any good code-pasting plug-in for Live Writer?
Sep 17, 2010
I have done something simular like this
http://labs.episerver.com/en/Blogs/Anders-Hattestad/Dates/2008/10/User-control-as-a-Property/
Great article. Really helpful, thanks!