Design and CSS styles
Version 5.x > Design and CSS styles > Splt Editable Region (two columns) View modes: 
User avatar
Member
Member
uiterwijkjorik-gmail - 9/9/2011 4:14:51 AM
   
Splt Editable Region (two columns)
Hi there,

Does anyone know how to split 1 editableRegion in two columns.
So in the CMSDesk there's only one text field for the user.

On the website it is seperated evenly.

Like this:
User image


User avatar
Kentico Support
Kentico Support
janh-kentico - 9/9/2011 5:12:28 AM
   
RE:Splt Editable Region (two columns)
Hi Jorik,

You can insert table with one row, two columns (and if you don't want to display a border, then also set the border size to zero) into your editable text. After this you will be able to write and format text in each column separately.

Best regards,
Jan Hermann
Support Engineer

User avatar
Member
Member
uiterwijkjorik-gmail - 9/9/2011 6:07:25 AM
   
RE:Splt Editable Region (two columns)
What do you mean with 'insert a table'. Where can I find this table? Or do you mean html-table?

I want to have 1 textfield in the CMSDesk. So the user doesn't have to worry about seperating the text equally. Just one textfield that does it automatically.

Is this possible?

User avatar
Kentico Support
Kentico Support
janh-kentico - 9/12/2011 2:08:08 AM
   
RE:Splt Editable Region (two columns)
Oh, now I've got it. It is possible to do that, but not only with a editable text web part.

Could you please make your editable text web part visible only in the page/edit tab? If you don't know, how to set this, here is an approach:

Please open properties of that web part and click on that little black arrow next to the "Visible" property. Please insert the following macro:
{%portalcontext.viewmode == "Edit"%}

After this, your text disapears from a live site, so how to bring it back in two columns?
I create a custom web part for you. You can download it from the link below:

Two Columns Web Part

Please import this web part into your site and insert it under the editable text webpart. As you can see, properties of that "Two columns" web part contain two required fields. You have to select path to the page, which contains your editable text and the Web part control ID of that editable text webpart.

If you do this right, the original editable text web part will be invisible on the page, but its text will be displayed by the two columns web part in two columns.

Jan Hermann

User avatar
Member
Member
uiterwijkjorik-gmail - 9/16/2011 3:00:03 AM
   
RE:Splt Editable Region (two columns)
Thanks voor your good help!

But I cannot fix it, so I have a couple of questions:
- You insert the webpart through the Portal Engine. But I'm making a page template through an ASPX-file. I can't find the right properties to set (page path and web part control id).

- The visible property of the editable text web part can only be set in true or false mode.

I hope you can help me further with this. I think your solution is very close to what I'm looking for.

User avatar
Member
Member
Snarrak - 9/16/2011 3:13:33 AM
   
RE:Splt Editable Region (two columns)
Also, when I do it through the portal engine...
In debug mode, the path and name are filled (so to get the value of those is ok), but I still get a null-reference on the content..

User avatar
Kentico Support
Kentico Support
janh-kentico - 9/16/2011 5:54:47 AM
   
RE:Splt Editable Region (two columns)
Hm, that is wierd... I have tried it also on aspx template solution and it worked fine.

Please make sure, that you registred appropriate web part in your aspx template:
<%@ Register Src="~/CMSWebParts/MyWebParts/twoColumns.ascx" TagName="twocolumns" TagPrefix="uc1" %> 

and that you place it right:
<uc1:twocolumns runat="server" ID="twoC" />


Please also check, if you set its variables right in a code behind:
protected void Page_Load(object sender, EventArgs e)
{
twoC.SetValue("PagePath", "/Home");
twoC.SetValue("EditableTextName", "MainContentText");
}


Best regards,
Jan Hermann

User avatar
Member
Member
Snarrak - 9/16/2011 9:25:11 AM
   
RE:Splt Editable Region (two columns)
I still get a page error.
But I also need to set the page dynamically. Because it's a template, this should work for every page that has this template.

User avatar
Kentico Support
Kentico Support
janh-kentico - 9/16/2011 9:47:56 AM
   
RE:Splt Editable Region (two columns)
Thank you for your message.

What kind of error do you get?
Which version of Kentico (and hotfix) are you using?
Could you please show me the source code of your aspx template and its code behind?

Best regards,
Jan Hermann

User avatar
Member
Member
Snarrak - 9/16/2011 10:19:39 AM
   
RE:Splt Editable Region (two columns)

in ascx file:

<%@ Register src="~/CMSWebParts/MyWebParts/TwoColumns.ascx" TagName="WP_TwoColumns" tagprefix="wp"%>
<asp:Content ID="Content1" ContentPlaceHolderID="_contentPlaceHolderContent" Runat="Server">
<cms:CMSEditableRegion ID="_editableRegionCeco" RegionType="HtmlEditor" runat="server" RegionTitle="Tekst voor Ceco"/>
<wp:WP_EditableText runat="server" ID="EditableTextCeco" DefaultText="Hi"/>
<wp:WP_TwoColumns runat="server" ID="WPTwoColumns" />
</asp:Content>

In code behind:
WPTwoColumns.SetValue("PagePath", "/Ceco/Home");
WPTwoColumns.SetValue("EditableTextName", "EditableTextCeco");


I have in my CMSDesk a folder called Ceco, and in there a page Home. But this template should alse be used for a couple of other pages inside Ceco.


I tried a couple of solutions but i still get an error (page not found) on this statement:
string content = CMS.PortalEngine.PageInfoProvider.GetPageInfo(CMS.CMSHelper.CMSContext.CurrentSiteName, path, CMS.CMSHelper.CMSContext.CurrentPageInfo.DocumentCulture, null, true, neco).EditableItems[name];

or sometimes a nullreference on this statement:
int halfTextLenght = content.Length / 2; (because the content is null

You have a solution?
I have no idea, so any possible solution is welcome.


User avatar
Kentico Support
Kentico Support
janh-kentico - 9/19/2011 3:17:27 AM
   
RE:Splt Editable Region (two columns)
Thank you for your message.

I see, please update the Two columns web part (/CMSWebParts/MyWebParts/twoColumns.ascx.cs) with a new if statement:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CMS.PortalControls;
using CMS.CMSHelper;
using CMS.UIControls;
using CMS.GlobalHelper;
using System.Data;
using CMS.SettingsProvider;
using CMS.TreeEngine;
using CMS.DataEngine;

public partial class CMSWebParts_MyWebParts_twoColumns : CMSAbstractWebPart
{
protected void Page_Load(object sender, EventArgs e)
{

string path = (string)this.GetValue("PagePath");
string name = (string)this.GetValue("EditableTextName");
GeneralConnection neco = ConnectionHelper.GetConnection();

string content = CMS.PortalEngine.PageInfoProvider.GetPageInfo(CMS.CMSHelper.CMSContext.CurrentSiteName, path, CMS.CMSHelper.CMSContext.CurrentPageInfo.DocumentCulture, null, true, neco).EditableItems[name];


if (content != null)
{

int halfTextLenght = content.Length / 2;
int odd = content.Length % 2;

string firstC = "<div class=\"firstC\">";
string secondC = "<div class=\"secondC\">";
firstC += content.Substring(0, halfTextLenght) + "</div>";
secondC += content.Substring(halfTextLenght, halfTextLenght + odd) + "</div>";

Lit1.Text = firstC + secondC;
}
}
}


Please don't forget, that this web part doesn't work for a default text in your editable region, so please fill some text content on the page tab in the CMS Desk and also style those firstC and secondC classes with a left float (for two columns design).

Best regards,
Jan Hermann

User avatar
Member
Member
Snarrak - 9/20/2011 2:00:43 AM
   
RE:Splt Editable Region (two columns)
Does the TwoColumn Webpart works on the Editable Region or onyl on the Editable Text?
Because I tried both, and the editable region has content.
With the editable text I filled in the default text, so to do this if-check might be a solution.
I will try, thanks!

User avatar
Kentico Support
Kentico Support
janh-kentico - 9/20/2011 8:24:36 AM
   
RE:Splt Editable Region (two columns)
Hello,

Yes, it works on both Editable text and Editable region web parts. Please make sure, that you point to the right page (node alias path).

Jan Hermann

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/10/2011 1:53:24 PM
   
RE:Splt Editable Region (two columns)
I just wanted to point out that your method of splitting the content into two parts will not work properly in most instances for the following reasons:

1. You are splitting exactly in the middle, which could be in the middle of a word, so you may end up ending the first column in the middle of a word and starting the second column at the beginning of the rest of that word. You could maybe solve this issue by finding the middle of the content and then splitting it on the last index of a space character in the first half, but that still would leave you with the following issue #2.

2. If there has been any content formatting applied (i.e. font weight, color, etc.) there will be markup in the content. You can't just split markup like that. I know the output filters will likely fix the output so that it doesn't break the layout, but it will still cause undesired effects.

If you want this to work effectively, you will likely have to get real fancy with some Regular expressions (which REALLY should NOT be used to process HTML), or XML (which would be rather difficult).

That is just my 2 cents.

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/10/2011 1:58:41 PM
   
RE:Splt Editable Region (two columns)
You can do this client-side using the Columnizer jQuery plugin found here
http://welcome.totheinter.net/columnizer-jquery-plugin/

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/10/2011 2:48:56 PM
   
RE:Splt Editable Region (two columns)
I made a quick webpart based on editable text web part that works pretty well. You can download it from here.

Editable Text Auto Columns Web Part

User avatar
Member
Member
Snarrak - 10/14/2011 2:22:25 AM
   
RE:Splt Editable Region (two columns)
Hi Jiveabillion,

Thanks for your support.

But I got an error, doesn't contain a definition for GetStylesheetUrl.
Line 536: htmlValue.EditorAreaCSS = CssStylesheetInfoProvider.GetStylesheetUrl(this.HTMLEditorCssStylesheet);


Do You know what this is about?

I'm working on a ASPX site, so can you tell me which properties I have to set for this webpart?

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/14/2011 12:59:29 PM
   
RE:Splt Editable Region (two columns)
I honestly don't know. I've never worked on an ASPX site. I do know that my web part is just a slightly modified version of the standard Editable Text web part. If that web part can't be used on ASPX pages, then my web part can't be used either.

Let me see if I can find a way to make a webpart that will work on an ASPX site.


User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/14/2011 1:51:54 PM
   
RE:Splt Editable Region (two columns)
Ok, I took a little different rout this time. I created a class that inherits from CMSEditableRegion so that it will work in place of it. I included a readme file in the zip so you can know how to use it.

AutoColumn Control

User avatar
Member
Member
Snarrak - 10/18/2011 5:58:35 AM
   
RE:Splt Editable Region (two columns)
I added your webpart and it i don't get an error anywhere. So it's seems to be working. But when i'm in the CMSDesk, the editableregion is visible, but I can't type in it.
I also tried to set some test text programmatically, but I can't find the right property. Something lik in the EditableRegion (in the API there's a method called SetValue).

I followed your notes. Do you have any idea what's causing this?
And how can I set (default)text programmatically?

Thanks.

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/18/2011 8:16:46 AM
   
RE:Splt Editable Region (two columns)
I'm not sure why it's not working for you. When I am in edit mode in the page tab I can edit the text just fine and save it.

It inherits directly from EditableRegion, so the properties and methods should be the same. However, the SetValue method does not exist on EditableRegion. The SetValue method and the DefaultValue propertie are members of the EditableText Web Part, not the EditableRegion Web part.


Note: in the first web part I posted, you may need to uncomment the line where I am registering jQuery. I had it commented out on mine because I was adding a different version of jQuery without using the Kentico API.
/*if (!ScriptHelper.IsJQueryRegistered())
{
ScriptHelper.RegisterJQuery(Page);
}*/


User avatar
Member
Member
Snarrak - 10/18/2011 8:50:23 AM
   
RE:Splt Editable Region (two columns)
The property RegionType was on HTMLEditor, I set this on TextArea and now I can typ my text in the CMSDesk.
Still nothing shown on the LiveSite.
I noticed that you put a reference to a CssClass in the control (ColumnWraperCSSClass="twoColumnsContent"). What did you put in this CSS-class?

It might be the reason that nothing is shown.

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/18/2011 9:12:47 AM
   
RE:Splt Editable Region (two columns)
ColumnWraperCSSClass doesn't really matter. It just gives you a class to use as a selector so you can style the columns with some margin or padding (they run right against eachother otherwise).

Let me try using it in a different scenario and see if it works for me or if I get the same issues as you.

User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/18/2011 9:43:03 AM
   
RE:Splt Editable Region (two columns)
I just created a new ASPX template and placed my control directly in the template (not inside a user control) and it works fine. I also tried placing it inside a user control and it worked just fine then too. I don't know why it's giving you problems.

I am using Kentico v5.5.4223 R2.

Here is a screenshot of it working (with css styles text-align:justify; on both and padding-left:1em; on the left column)

User image


User avatar
Certified Developer 8
Certified Developer 8
Jiveabillion - 10/18/2011 9:54:03 AM
   
RE:Splt Editable Region (two columns)
this is an edit to the post above (Hey Kentico folks, why can't I edit a forum post that I created?)

I actually applied padding-right:1em to the left column. and here is a link to view the image full size

Full size screenshot

1 2