RadEditor Docked Toolbar Rendering Issue

[Kyle schultz]

Greetings Telerik Team,

I am using the latest release of the ASP.NET AJAX Q2 2013. Since the upgrade, i have been having an issue with the RadEditor Toolbar. I have built an application that utilizes multiple RadEditors with Docked Toolbars. Each toolbar has a dedicated <DIV> container. On each editor click (when user clicks in each editor, the respective docked toolbar is shown and the others are hidden).

This is working great and is still working from a functionality standpoint, but since the update the Docked Toolbar is rendered incompletely, meaning that the icons show but the background skin graphics are missing except for the end caps and the separators for each editor tool group. I have attached a screenshot of this. The toolbar buttons still work but the user cannot tell if a certain style is active (like bold etc) because the buttons will not show (the background shows through).

I am using the built in Windows7 skin. I tried it also with the Default skin with the same results.

Any assistance would be appreciated. We are close to launching this application, but we cannot do this until it is fixed.

Thanks in advance!

[Marin Bratanov]

Hello Kyle,

We have already answered your support ticket on the same matter and I am adding the same information here for anyone else that may have the same issue:


In Q2 2012 we reduced the CSS used by RadEditor by adding more cascades instead of duplicating code and so the external HTML element that hosts the toolbar needs the RadEditor and <RadEditorSkin> CSS classes applied to it. In the common case, these classes are present in the main RadEditor wrapping element, so in the custom case when the toolbar is outside of the RadEidtor built-in rendering the developer has to add them.
You can see this in action in the following demo: http://demos.telerik.com/aspnet-ajax/editor/examples/dockingzone/defaultcs.aspx and here is the sample code that does this:

function OnClientLoad(editor) {
     var skin = editor.get_skin();
     var toolbarDiv = $get("outerdiv");
     toolbarDiv.className = "RadEditor " + skin;
}

where this is attached to the OnClientLoad event of the RadEditor control and the "outerdiv" is the client-side ID of the targeted HTML element.

Regards,
Marin Bratanov
Telerik