This is a migrated thread and some comments may be shown as answers.

Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent

8 Answers 1081 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Telerik Admin asked on 04 Feb 2011, 03:48 PM

In case where RadEditor is initially hidden and displayed using AJAX is causing the editor to render with incorrect width on the first show. This scenario applies for RadGrid edit template, RadEditor inside a RadPageView, etc.
This problem occurs due to the fact that RadEditor CSS files are not fully loaded when the editor calculates its’ toolbar size.
To avoid this problem you need to register the RadEditor’s CSS files manually on the page:

Since Q2 2011 you need to use the Telerik.Web.SkinRegistrar.GetWebResourceUrl() method:

<head id="Head1" runat="server">

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'

rel="stylesheet" type="text/css" />

<link

href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'

rel="stylesheet" type="text/css" />

<link

href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadWindow), "Telerik.Web.UI.Skins.Default.Window.Default.css") %>'

rel="stylesheet" type="text/css" />

</telerik:RadCodeBlock>

</head>

If you are using VB you should, of course, replace the this keyword with Me as this is its VB counterpart.

If you are using an older version you can still use ClientScript.GetWebResourceUrl():

<head id="Head1" runat="server">

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Default.Window.Default.css") %>'

rel="stylesheet" type="text/css" />

</telerik:RadCodeBlock>

</head>

....................

<telerik:RadEditor runat="server" ID="RadEditor1" Skin="Default" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

</telerik:RadEditor>

8 Answers, 1 is accepted

answered on 08 Feb 2011, 05:13 AM

Hello,
This problem occours with RadEditor and GridHTMLEditorColumnEditor.
Where do I place the code to register the RadEditor’s CSS files manually when I have a structure with one masterpage?
On the Masterpage, or on the my task.aspx? I am getting errors everywhere!
Here is my code example from task.aspx (skin="black"):


<%

@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Task.aspx.vb" Inherits="Project.Task" %>

<

asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<telerik:RadGrid ID="RadGrid1" runat="server" .... Skin="Black" >

...

<Columns>

<telerik:GridTemplateColumn DataField="TaskText" HeaderText=

"TaskText"

SortExpression="TaskText" UniqueName="TaskText">

<EditItemTemplate>

<telerik:RadEditor ID="TaskTextTextBox" runat="server"
Language="de-DE" Skin="Black"

Content='<%# Bind("TaskText") %>'

                             SpellCheckSettings-DictionaryLanguage="de-DE" EditModes="Design">

</telerik:RadEditor>

</EditItemTemplate>

<ItemTemplate>

<asp:Label ID="TaskTextLabel" runat="server"

Text='<%# Eval("TaskText") %>'>

                           </

asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</telerik:RadGrid>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadComboBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</asp:Content>

Accepted

answered on 10 Feb 2011, 11:10 AM

Hi Martin,

You need register the <link> tags in the page's <head>, thus in the master page. Also, since you are using Black skin you need to change the href attributes accordingly, e.g.:

<head id="Head1" runat="server">

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Black.Editor.Black.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Black.Window.Black.css") %>'

rel="stylesheet" type="text/css" />

</telerik:RadCodeBlock>

</head>

If this does not solve the problem could you please open a formal support ticket and provide a sample project reproducing the issue? Also, could you please provide more detailed information about the error that occurs?

All the best,
Dobromir
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Accepted

answered on 08 Apr 2011, 12:25 PM

Hi everyone,

The links pointing to embedded CSS resources can be combined in a single link file using the RadStyleSheetManager, as shown below:

<Telerik:RadStyleSheetManager ID="SSH1" EnableStyleSheetCombine="true" runat="server">

<StyleSheets>

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Editor.Default.css" />

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Window.Default.css" />

</StyleSheets>

</Telerik:RadStyleSheetManager>

Since Q3 2011 (2011.3.1115) all Telerik skins (except the Default skin) moved to Telerik.Web.UI.Skins assembly (see this blog post for details). So if you use a skin different to the Default one, use this approach to load and combine its CSS files:

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

<StyleSheets>

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI.Skins" Name="Telerik.Web.UI.Skins.Web20.Editor.Web20.css" />

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />

<Telerik:StyleSheetReference Assembly="Telerik.Web.UI.Skins" Name="Telerik.Web.UI.Skins.Web20.Window.Web20.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

You can use the above approach to avoid the CSS limitations of Internet Explorer. You can see this blog post for more information: Internet Explorer CSS limits.

Kind regards,
Rumen
the Telerik team