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

9 posts, 2 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 04 Feb 2011 Link to this post

    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>
  2. Martin
    Martin avatar
    1 posts
    Member since:
    Sep 2010

    Posted 07 Feb 2011 Link to this post

    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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 10 Feb 2011 Link to this post

    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.
  5. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 08 Apr 2011 Link to this post

    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.
  6. Todd A
    Todd A avatar
    43 posts
    Member since:
    Sep 2009

    Posted 18 Jul 2011 Link to this post

    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.
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 20 Jul 2011 Link to this post

    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!

  8. Daniel
    Daniel avatar
    7 posts
    Member since:
    Nov 2010

    Posted 11 Sep 2011 Link to this post

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

    Cheers!
  9. Joel
    Joel avatar
    1 posts
    Member since:
    May 2012

    Posted 08 May 2012 Link to this post

    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.

  10. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 20 Nov 2012 Link to this post

    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!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017