Telerik Admin
Top achievements
Rank 1
Iron
Rank 1
Iron
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:
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():
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
0
Martin
Top achievements
Rank 1
Rank 1
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"):
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>0
Accepted
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.:
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
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.
0
Accepted
Hi everyone,
The links pointing to embedded CSS resources can be combined in a single link file using the RadStyleSheetManager, as shown below:
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:
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
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
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.
0
Todd A
Top achievements
Rank 1
Rank 1
answered on 19 Jul 2011, 04:48 AM
I had this same issue. We use the skin manager so the skins are changing based on the user signed in.
Our workaround was to add another RadEditor in a hidden div tag and it solved the problem.
Not elegant but it worked. Anything wrong with this approach?
Thanks,
Todd.
Our workaround was to add another RadEditor in a hidden div tag and it solved the problem.
Not elegant but it worked. Anything wrong with this approach?
Thanks,
Todd.
0
Hello Todd,
You should not experience any problems with your approach. The second hidden editor will not slow down the page loading.
Kind regards,
Rumen
the Telerik team
You should not experience any problems with your approach. The second hidden editor will not slow down the page loading.
Kind regards,
Rumen
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 11 Sep 2011, 10:33 PM
Thanks Todd! That was a perfect quick fix to something that has been irritating me for months.
Cheers!
Cheers!
0
Joel
Top achievements
Rank 1
Rank 1
answered on 09 May 2012, 12:46 AM
I went with Todd A's approach, and just added a "visibility:hidden;display:none;" div tag, with the RadEditor inside.
Width works great now.
Thanks for the simple idea Todd.
0
Moon
Top achievements
Rank 2
Rank 2
answered on 20 Nov 2012, 10:01 PM
I also used Todd's solution. He deserves some Telerik points! :)
I didn't want this on my MasterPage because I only have a couple of RadEditors on the entire. So I just put it on the controls on the tab panels.
Thanks Todd!
I didn't want this on my MasterPage because I only have a couple of RadEditors on the entire. So I just put it on the controls on the tab panels.
Thanks Todd!