Posted in: Comments

Sometimes tabs isn’t enough for grouping properties. That’s where the divider property comes in.

First we have to remove all the controls. We also have to specify TableRowLayout.Wide so the divider spans the whole page width.

namespace DV.CustomProperties
{
    using EPiServer.Core;
    using EPiServer.Web.PropertyControls;

    public class PropertyDividerControl : PropertyNumberControl
    {
        public override void CreateEditControls()
        {
            this.Controls.Clear();
        }

        public override void ApplyChanges()
        {

        }

        public override TableRowLayout RowLayout
        {
            get { return TableRowLayout.Wide; }
        }

        public PropertyDivider PropertyDivider
        {
            get { return PropertyData as PropertyDivider; }
        }
    }
}

And then we return a nicely styled display name.

namespace DV.CustomProperties
{
    using System;
    using EPiServer.Core;
    using EPiServer.PlugIn;

    [PageDefinitionTypePlugIn(DisplayName = "Divider", Description = "Divider")]
    public class PropertyDivider : PropertyNumber
    {
        public override string TranslateDisplayName()
        {
            return string.Format("<h2 style=\"margin:2em 0 0.4em 0; padding:0 0 0.3em 0; border:1px solid #666; border-width:0 0 1px 0; font:bold 13px sans-serif;\">{0}</h2>",
                base.TranslateDisplayName());
        }

        public override EPiServer.Core.IPropertyControl CreatePropertyControl()
        {
            return new PropertyDividerControl();
        }
    }
}