RadEditor rendering problem with RadAjaxPanel

[Timothy Kruszewski]

I've been having problems with radEditors rendering properly when they are hidden inside of a div and radAjaxPanel.  In this example the page loads and the user selects a client name and hits the next button.  This saves information to the database and then sets a div to visible in which there is a rad editor.  As you can see from the images I provided the radEditor get blown out across the whole page and not to the width which I am setting it at.  Any help would be appreciated.  Thanks

<%@ Page Title="Projects" Language="C#" MasterPageFile="~/MasterPages/Default.master"
    AutoEventWireup="true" CodeBehind="Projects_New.aspx.cs" Inherits="TED.Web.Projects.Projects_New" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="server">
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        <Windows>
            <telerik:RadWindow ID="UserListDialog" runat="server" Style="z-index: 100000;" ReloadOnShow="true"
                AutoSize="true" ShowContentDuringLoad="false" Modal="false" />
        </Windows>
    </telerik:RadWindowManager>
    <asp:ValidationSummary ID="valSummary" runat="server" ValidationGroup="valSummary"
        ShowMessageBox="true" ShowSummary="false" DisplayMode="BulletList" />
    <div>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <asp:Table ID="Table1" class="commandbar" runat="server" CellPadding="0" CellSpacing="1"
                Width="100%">
                <asp:TableRow CssClass="commandbutton">
                    <asp:TableCell Width="10%" HorizontalAlign="Left">
                        <asp:LinkButton ID="lnkSave" runat="server" SkinID="LinkButton_Save" CausesValidation="True"
                            ValidationGroup="valSummary" OnClick="lnkSave_Click"></asp:LinkButton></asp:TableCell>
                    <asp:TableCell Width="80%" HorizontalAlign="Center">
                        <asp:Label ID="Label1" runat="server" SkinID="Label_Bold_10pt">Add/Edit Projects</asp:Label>
                    </asp:TableCell>
                    <asp:TableCell Width="10%" HorizontalAlign="Right">
                        <asp:LinkButton ID="LinkButton1" runat="server" SkinID="LinkButton_Cancel" CausesValidation="False"
                            OnClick="lnkCancel_Click"></asp:LinkButton></asp:TableCell>
                </asp:TableRow>
            </asp:Table>
            <div class="tableAccentFullBlue">
                <br />
                <div class="divLabel">
                    <asp:Label ID="lblProjectID" runat="server" SkinID="Label_Bold_8pt" Text="Project ID:"
                        Width="110px"></asp:Label>
                    <asp:Label ID="projectID" runat="server" SkinID="Label_Bold_8pt"></asp:Label>
                </div>
                <div class="divLabel">
                    <asp:Label ID="lblClientName" runat="server" SkinID="Label_Bold_8pt" Text="Client Name:"
                        Width="110px"></asp:Label>
                    <telerik:RadComboBox ID="ddlClientName" runat="server" Skin="Web20" AllowCustomText="false"
                        MarkFirstMatch="true" Width="300px">
                    </telerik:RadComboBox>
                    <asp:RequiredFieldValidator ID="rfvClientName" runat="server" ControlToValidate="ddlClientName"
                        ValidationGroup="valSummary" ErrorMessage="Client Name Required">*</asp:RequiredFieldValidator>
                </div>
                <div class="divLabel">
                    <asp:Button ID="btnNext" runat="server" Text="Next>>" OnClick="btnNext_Click" CausesValidation="true"
                        ValidationGroup="valSummary" Visible="false" />
                </div>
                <div id="divDetails" runat="server" visible="false">
                    <div class="divLabel">
                        <asp:Label ID="lblProjectType" runat="server" SkinID="Label_Bold_8pt" Text="Project Type:"
                            Width="110px"></asp:Label>
                        <telerik:RadComboBox ID="ddlProjectType" runat="server" Skin="Web20" AllowCustomText="false"
                            MarkFirstMatch="true" Width="200px">
                        </telerik:RadComboBox>
                        <asp:RequiredFieldValidator ID="rfvProjectType" runat="server" ControlToValidate="ddlProjectType"
                            ValidationGroup="valSummary" ErrorMessage="Project Type Required">*</asp:RequiredFieldValidator>
                    </div>
                    <div class="divLabel">
                        <asp:Label ID="lblRM" runat="server" SkinID="Label_Bold_8pt" Text="Project RM:" Width="110px"></asp:Label>
                        <telerik:RadComboBox ID="ddlRM" runat="server" Skin="Web20" AllowCustomText="false"
                            MarkFirstMatch="true" Width="200px">
                        </telerik:RadComboBox>
                        <asp:RequiredFieldValidator ID="rfvRM" runat="server" ControlToValidate="ddlRM" ValidationGroup="valSummary"
                            ErrorMessage="Project RM Required">*</asp:RequiredFieldValidator>
                    </div>
                    <div class="divLabel">
                        <asp:Label ID="lblPM" runat="server" SkinID="Label_Bold_8pt" Text="Project PM:" Width="110px"></asp:Label>
                        <telerik:RadComboBox ID="ddlPM" runat="server" Skin="Web20" AllowCustomText="false"
                            MarkFirstMatch="true" Width="200px">
                        </telerik:RadComboBox>
                        <asp:RequiredFieldValidator ID="rfvPM" runat="server" ControlToValidate="ddlPM" ValidationGroup="valSummary"
                            ErrorMessage="Project PM Required">*</asp:RequiredFieldValidator>
                    </div>
                    <div class="divLabel">
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="lblDescription" runat="server" SkinID="Label_Bold_8pt" Text="Project Desc:"
                                        Width="110px"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadEditor ID="txtDesc" runat="server" Width="600" Height="150px" StripFormattingOptions="All"
                                        AllowScripts="false">
                                        <CssFiles>
                                            <telerik:EditorCssFile Value="../App_Themes/Control Themes/EditorContentArea.css" />
                                        </CssFiles>
                                        <Tools>
                                            <telerik:EditorToolGroup>
                                                <telerik:EditorTool Name="AjaxSpellCheck" />
                                            </telerik:EditorToolGroup>
                                        </Tools>
                                    </telerik:RadEditor>
                                    <asp:RequiredFieldValidator ID="rfvDesc" runat="server" ControlToValidate="txtDesc"
                                        ErrorMessage="Project Desc Required" ValidationGroup="valSummary">*</asp:RequiredFieldValidator>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="Top"
            EnableSkinTransparency="true" Transparency="25" Skin="Web20" />
    </div>
</asp:Content>

protected void btnNext_Click(object sender, EventArgs e)
       {
           SaveProject();
           divDetails.Visible = true;
           btnNext.Visible = false;
       }

[Rumen]

Hi Timothy,

Could you please try the solution provided in the following sticky note: Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent? You can also try to solve the problem by registering the external skins of RadEditor or the CDN Skins.


Best regards,
Rumen
the Telerik team

[Timothy Kruszewski]

I get the following error with the code example.  I've tryied applying both examples to my master page.  Note, the error only happens when I set EnableEmbeddedScript="false"


Error: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: type

<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.Web20.Editor.Web20.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.Web20.Window.Web20.css") %>'
           rel="stylesheet" type="text/css" />
   </telerik:RadCodeBlock>
   <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.Web20.Editor.Web20.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.Web20.Window.Web20.css" />
       </StyleSheets>
   </telerik:RadStyleSheetManager>

[Rumen]

Hi Timothy,

If the EnableEmbeddedScript property is set to "false" than you should manually register all RadEditor's scripts on the page. See this article for more information: Disabling embedded resources.

If you do not need to specify an alternative location for JavaScript files of RadEditor set the EnableEmbeddedScript property to true (its default value).

Best regards,
Rumen
the Telerik team