DevTools for .NET

Products Dropdown menu
The Ultimate toolbox for developers
WEB UI CONTROLS & COMPONENTS
DESKTOP UI CONTROLS & COMPONENTS
- WPF
- WinForms
VISUAL STUDIO PRODUCTIVITY TOOLS
HTML5 / JavaScript Widgets
DATA TOOLS
- Reporting
- OpenAccess
MOBILE UI CONTROLS
- Windows Phone
Unit & Functional Testing
- Test Studio Express
- JustMock
Download Free Trial With dedicated support.
Online demos
Free trials
Purchase Dropdown menu
Buy the Ultimate toolbox for developers
Buy Online
Call us
- USA:+1-888-365-2779
- UK:+44-20-7291-0580
- Bulgaria:+359-2-8099850
- Germany:+49-89-2441642-70
Community & Support Dropdown menu
Welcome to the Telerik community
Community programs
Like us on facebook Follow us on twitter
Services
Blogs

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAXEditorIncorrect rendering of RadEditor when shown with AJAX in initially hidden parent

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

Feed from this thread

Telerik Admin Master

Posted on Feb 4, 2011 (permalink)

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>

Reply

Martin

Posted on Feb 7, 2011 (permalink)

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>

Reply

Answer Dobromir Dobromir

Posted on Feb 10, 2011 (permalink)

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.

Reply

Answer Rumen Rumen

Posted on Apr 8, 2011 (permalink)

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

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.

Reply

Todd A

Posted on Jul 18, 2011 (permalink)

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.

Reply

Rumen Rumen

Posted on Jul 20, 2011 (permalink)

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

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!

Reply

Daniel

Posted on Sep 11, 2011 (permalink)

Thanks Todd! That was a perfect quick fix to something that has been irritating me for months.

Cheers!

Reply

Joel

Posted on May 8, 2012 (permalink)

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.

Reply