Creating a Property WebEditor from a UserControl

In my last post, I created a custom WebEditor by creating a class that inherited from the WebUITypeEditor class.  The WebUITypeEditor class inherits from the ASP.NET CompositeControl class.  Thus, to create a WebEditor I created a CompositeControl.

I personally dislike working with CompositeControls though.  They're useful, but it's often cumbersome to manually add lots of HTML, Javascript or controls via the CreateChildControls() method.  I prefer ASP.NET UserControls and use them when I have the option; there are times to avoid them though. 

I originally thought UserControls weren't an option for WebEditors; I was delighted to discover otherwise.

Making Things Way Too Complicated

I spent almost an entire day trying to figure out an elegant way to avoid using CompositeControls.  The problem, as I saw it, was in attaching the WebEditor attribute to a Control property:

[Telerik.Cms.Web.UI.WebEditor("BasicWebEditor, App_Code")]
public string Text
{
    get { return _text; }
    set { _text = value; }
}

The WebEditor was accepting two attributes (Class Name, Assembly).  ASP.NET UserControls are compiled dynamically and I wasn't sure what to use for the Assembly.   I burned (wasted?) hours trying to figure this out.  Then, on a whim, I tried this:

[Telerik.Cms.Web.UI.WebEditor("~/Custom/Admin/WebEditors/BasicWebEditor.ascx")]
public string Text
{
    get { return _text; }
    set { _text = value; }
}

It worked!  I sat there in my chair feeling simultaneously happy and angry for not trying this hours ago.  Being a programmer means banging your head against a wall for hours and then realizing there is a window 3-feet to your left.

Introducing the IWebUITypeEditor Interface

When I say "It worked!" I mean Sitefinity attempted to load the WebEditor from a UserControl.  However, I was promptly shown the following error:

Unable to cast object of type 'ASP.custom_admin_webeditors_basicwebeditor_ascx' to type 'Telerik.Cms.Web.UI.IWebUITypeEditor'.

In my previous blog post, I created a new WebEditor by inheriting from the WebUITypeEditor class.  The WebUITypeEditor class inherits from the CompositeControl class and implements the IWebUITypeEditor interface. (Understanding Interfaces in .NET)

By creating a UserControl that implements the IWebUITypeEditor interface, we can create a WebEditor from a UserControl.  Implementing the IWebUITypeEditor interfaces requires the following methods & properties:

• Title
• Value
• AutoSelect
• EditValue
• GetEditStyle
• HostControl
• TypeContainer
• EventHandler<ValueChangedEventArgs>

For help implementing the IWebUITypeEdito interface, I referenced the Implementing Rich Text Property Editor KB article.

Implementing IWebUITypeEditor inside a UserControl

Below I've created a really basic UserControl that implements the IWebUITypeEditor interface.  

Create ~/Custom/Admin/WebEditors/BasicWebEditor.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BasicWebEditor.ascx.cs" Inherits="Custom_Admin_WebEditors_BasicWebEditor" %>
<div>
    <asp:Label AssociatedControlID="TextBox1" runat="server">Enter some text: </asp:Label>
    <asp:TextBox ID="TextBox1" runat="server" />
</div>

Create ~/Custom/Admin/WebEditors/BasicWebEditor.ascx.cs:

using System;
using System.Web.UI;
using Telerik.Cms.Web.UI;

public partial class Custom_Admin_WebEditors_BasicWebEditor : UserControl, IWebUITypeEditor
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    public string Title
    {
        get { return "UserControl WebEditor Title"; }
    }

    public object Value
    {
        get
        {
            return TextBox1.Text;
        }
        set
        {
            TextBox1.Text = value.ToString();
        }
    }

    public bool AutoSelect
    {
        get
        {
            return false;
        }
        set
        {
        }
    }

    public void EditValue(object value)
    {
        TextBox1.Text = (string) value;
    }

    public System.Drawing.Design.UITypeEditorEditStyle GetEditStyle()
    {
        return System.Drawing.Design.UITypeEditorEditStyle.Modal;
    }

    public Control HostControl
    {
        get
        {
            return _hostControl;
        }
        set
        {
            _hostControl = value;
        }
    }

    public object TypeContainer
    {
        get
        {
            return _typeContainer;
        }
        set
        {
            _typeContainer = value;
        }
    }

    public event EventHandler<ValueChangedEventArgs> ValueChanged;

    private Control _hostControl;
    private object _typeContainer; 
}

This WebEditor can be attached to a property using the following code:

[Telerik.Cms.Web.UI.WebEditor("~/Custom/Admin/WebEditors/BasicWebEditor.ascx")]
public string Text
{
    get { return _text; }
    set { _text = value; }
}

Here is how this WebEditor looks in action:

Not much to see here; I know this example isn't very practical.  This does demonstrate how to use an ASP.NET UserControl to build a custom WebEditor though. 

The UserControl can do as much or as little as you want.  Just remember to put the final result into the Value property.  When the I'm done button is clicked, the Value property will be used by the parent Sitefinity Control Editor to get the WebEditor's output.