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

[Solved] RadEditor rendering problem with RadAjaxPanel

3 Answers 195 Views

Editor

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

Timothy Kruszewski asked on 03 Oct 2011, 08:07 PM

RadEditor-Step-1.png

RadEditor-Step-2.png

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>

</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;

}

3 Answers, 1 is accepted

answered on 05 Oct 2011, 07:25 PM

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>

answered on 06 Oct 2011, 10:14 AM

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now