Hi Grzegorz

This could solve your problem: https://gregwiechec.com/2016/05/how-to-render-line-breaks-for-string-property/

David

Hi David,

But I think it is pretty much the same solution what Joel presented in 2013 for MVC and that is what we used also on some projects in past, but now on latest EpiServer (well missing maybe last 2 updates) it behaves not fully correct: the line breaks are shown as they should in both views but the problem is that when clicking on the property in on-page mode it does not open the popup with the editable value (just like first image in Grzegorz's article), but instead it behaves quite same as editation of regular string property and even after few clicks on that field it seems to notice some changes and goes into autosave + suddenly line breaks are gone.

Maybe it is kind of side effect of some breaking changes in Epi 11? because at that time UIHint.LongString has been obsoleted and replaced with UIHint.Textarea ->> https://world.episerver.com/documentation/upgrading/Episerver-CMS/cms-11/breaking-changes-cms-11/

And as I said same solution was working just fine in Epi 10 and earlier

Hi Grzegorz

Sorry should have read your first post more closely ;). You could try using a standard Dojo widget and a custom editor descriptor:

public class ContentPage : PageData
{
    [Display(Order = 10)]
    [UIHint(CustomUiHints.TextArea)]
    public virtual string TextArea { get; set; }

    // Other code
}

[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = CustomUiHints.TextArea)]
public class LineBreakTextAreaEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        ClientEditingClass = "dijit/form/Textarea";
        base.ModifyMetadata(metadata, attributes);
    }
}

public static class CustomUiHints
{
    public const string TextArea = "TextArea";
}

Let me know how you get on

David

Hi, I've used similiar solution as David suggests. But I use custom UIHint so that it is not applied to all string properties. Also it doesn't use the inline editor but the floating editor and sets the width of the editing box.

Custom view for the libe breaks string (/views/shared/displaytemplates/LineBreakString.cshtml):

@model System.String

@{ 
    var strArr = string.IsNullOrEmpty(Model) ? new string[0] : Model.Split('\n');
}

@for (int i = 0; i < strArr.Length; i++)
{
    @strArr[i];

    if (i+1 < strArr.Length)
    {
        @Html.Raw("<br />");
    }
}

Then the editordescriptor looks like this:

[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = SiteUIHints.LineBreakString)]
public class TextareaLineBreaksEditorDescriptor : EditorDescriptor
{
	public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
	{
		ClientEditingClass = "dijit/form/Textarea";

		// open the floating editor and not the inline editing (content editable)
		metadata.CustomEditorSettings["uiWrapperType"] = EPiServer.Shell.UiWrapperType.Floating;

		// set width of the editor
		metadata.EditorConfiguration.Add("style", "width: 300px");

		base.ModifyMetadata(metadata, attributes);
	}
}

The LineBreakString constant and usage on a content type:

// constant for the linebrakstring uihint in SiteUIHints class
public const string LineBreakString = "LineBreakString";

// usage on a content property
[UIHint(SiteUIHints.LineBreakString)]
[Display(GroupName = SystemTabNames.Content, Order = 350)]
[CultureSpecific]
public virtual string MyLineBreaks { get; set; }

And rendering of the property in a content type view:

@Html.PropertyFor(x => x.CurrentPage.MyLineBreaks, new { Tag = "LineBreakString" })

All this based on Joels old post :D The tag "LineBreakString" is used to select the displaytemplate LineBreakString.cshtml to render the string.

Note, the string splitting is just something that I quickly threw in so adjust that part to your rendering needs.

Hi David and Antti,

Thank you both for your answers, now I have satisfying solution.

So:

   public class SiteUIHints
    {
        public const string LineBreakTextArea = "LineBreakTextArea";
    }

    [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = SiteUIHints.LineBreakTextArea)]
    public class TextareaLineBreaksEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "dijit/form/Textarea";

            // open the floating editor and not the inline editing (content editable)
            metadata.CustomEditorSettings["uiWrapperType"] = EPiServer.Shell.UiWrapperType.Floating;

            // set width of the editor
            metadata.EditorConfiguration.Add("style", "width: 500px");

            base.ModifyMetadata(metadata, attributes);
        }
    }

David your answer already pointed me to good direction but to show popup with better UI I set the uiWrapperType to be floating + width as Antti have it. Additionally I used other UiHint than the "TextArea" otherwise all properties with UIHint.Textarea would end up with line breaking too (might be not wanted for some cases).

and still I think there was some breaking change in latest versions which made that the old Joel's code stopped working - so head up for sites doing upgrades

<p>Bu there is even more to this ;P</p> <p>What if your property is decorated with RequiredAttribute? If the user removes all text from the textarea in the on-page edit -&gt; user can leave the field (close the editor). Next to th epublish is displayed one error that the field is required, so from editor point of view, they get feedback. But if the go to the all properties view the textarea is not highlighted with red rectangle.</p> <p>To fix the missing red rectangle in the all properties view you coul duse the following editordescriptor.</p> <pre class="brush:csharp;auto-links:false;toolbar:false" contenteditable="false">[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = SiteUIHints.LineBreakString)] public class TextareaLineBreaksEditorDescriptor : EPiServer.Cms.Shell.UI.ObjectEditing.EditorDescriptors.TextareaEditorDescriptor { public TextareaLineBreaksEditorDescriptor() { Style = "width:500px"; } public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable&lt;Attribute&gt; attributes) { base.ModifyMetadata(metadata, attributes); // open the floating editor and not the inline editing (content editable) metadata.CustomEditorSettings["uiWrapperType"] = EPiServer.Shell.UiWrapperType.Floating; } }</pre> <p>So inheriting from the default TextareaEditorDescriptor and setting the width and having the floating editor (notice that the style is set differently here).</p> <p>With this implementation you get also the red rectangle in all properties view if no text is entered (and decorated with the requiredattribute).</p> <p>Only drawback, funny ui behavior I noticed in the on-page editing mode is that when you remove all text in the editor:</p> <ul> <li>you cannot leave the editor</li> <li>the last character that was in the edito is displayed on the underlying page ;)</li> </ul>