How to add new table styles

[George]

Hi,

I am trying to find out how to add table styles to the RadEditor for SharePoint.

We are on version "5.5.0.0". (or at least that's what the folder says)

When I right-click on a table and choose "Table Properties" there is a "CSS Class layout" section that allows you to select different styles for a table like: telerik-reTable-1, telerik-reTable-2, etc.

Is there a way to add a new style to this or, if not, how do I change one of the current styles?

Thanks,

George 

[Stanimir]

Hi George,

Review the following online demo: http://demos.telerik.com/aspnet-ajax/editor/examples/tablelayoutcssfile/defaultcs.aspx.

What you need to do is add a TableLayoutCss.css file, such as the one that I attached to the tread, to the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder and set the TableLayoutCssFile property in the respective ConfigFile.xml or ListConfigFile.xml, which are located in the same folder.
For example:

<property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/TableLayoutCss.css</property>

Best wishes,
Stanimir
the Telerik team

[George]

Okay, thank you for the thorough instructions.

I am now able to see the new style options in the dropdown menu under Table Properties.

I can even select a style, and see it applied on the table in the editor window.

However, when I go to "Check in" the page, the style has disappeared.

When I view the source on the page, it has the classes applied to the table elements, but it does not seem to "see" any CSS that should be attributed with those classes.

Does that make sense?

[Stanimir]

Hi George,

When you set the TableLayoutCssFile property the css file is loaded only in the content are of the editor. You have to manually add it to the page when it is in presentation mode. You can do this by modifying the master page in SharePoint Designer.
For example add the following line:

<link rel="stylesheet" type="text/css" href="/_wpresources/RadEditorSharePoint/5.x.x.x__1f131a624888eeed/Resources/TableLayoutCss.css"/>

where 5.x.x.x is the version of RadEditor for MOSS, which you are using.

I logged this behavior in our pits system, so we intent to fix this (at least in web part scenario). You can follow the PITS Issue by its ID: 2473

Sincerely yours,
Stanimir
the Telerik team

[George]

Thanks again. I was able to manipulate your instructions a little bit to make sure this doesn't break through subsequent upgrades.

I'm only posting this in case this helps other users.

I already have a stylesheet being referenced in my master pages, and we have MANY master pages across various sites. So I didn't want to have to go add a new <link> tag to each one.

So, I opened up the one stylesheet they all reference, and added an "@import" line to the beginning of it.

That line looks in the "/_layouts/<rest of my path here>" folder where the current stylesheet is housed.

Then I altered the RadEditor's ConfigFile.xml to look at that same path using just "/_layouts/<rest of my path here>/MyNewCSSFile.css". This worked great and it won't break if we upgrade the RadEditor and the path changes to something other than "/_wpresources/RadEditorSharePoint/5.x.x.x__1f131a624888eeed/Resources/".

Another question I have, still concerning this, though:

When I apply one of the styles you suggested, like ".purpleTable", inside of the Table Properties window, how does it get the classes written to the table automatically? As in "purpletableTableHeaderRow" or "purpletableTableHeaderFirstCol". Will it always automatically add the <whatever>TableHeaderRow class, no matter if you've declared something for TableHeaderRow?

Or maybe a better way to phrase the question is:

How do I just apply styles for alternating rows and not have to code for the HeaderRow and FooterRow? Because if I remove the CSS styles for HeaderRow and FooterRow, it does not grab the normal Odd and Even row styles. It just keeps the HeaderRow and FooterRow without styling. 

Thanks for all your insight so far!

[George]

Did you have some time to find an answer to my last question?

[Stanimir]

Hi George,

Will it always automatically add the <whatever>TableHeaderRow class, no matter if you've declared something for TableHeaderRow? - The <whatever>TableHeaderRow is added if the user checks the Heading Row check-box which is in the Apply special formats to section. You achieve the alternating rows functionality when all the check-boxes are not checked.

If you wish to modify the functionality of CSS Class Layout dialog review the following online help article: http://www.telerik.com/help/aspnet-ajax/moss_externaldialogspath_property.html. Execute the first two steps then modify the TableBorder.ascx file.

Best wishes,
Stanimir
the Telerik team

[George]

Fantastic! Thank you so much for all of your help on this!