Editor in UpdatePanel Problem

[Brian Limkemann]

The code sample below produces strange results in all non-IE browsers (actually, it does so in IE6 as well, just not IE7). The first time the "Edit" button is clicked the editor appears but the content area is only about 10 pixels high. Once the "Cancel" button is clicked then all subsequent clicks of the "edit" button result in the editor being rendered properly. I am using VS 2008, ASP.net 3.5 SP1, and Telerik build 2008.03.1314.35

ASPX:
 <asp:UpdatePanel runat="server">
  <ContentTemplate>
   <asp:Button runat="server" ID="edit" Text="edit" OnClick="edit_Click" /><asp:Button runat="server" ID="save" Text="save" OnClick="edit_Click" />
   <asp:Panel runat="server" ID="cnt">
    <asp:Literal runat="server" ID="txt" Text="testing." />
    <telerik:RadEditor runat="server" ID="ed" Width="500px" Visible="false" />
   </asp:Panel>
  </ContentTemplate>
 </asp:UpdatePanel>


Code-Behind:

protected void edit_Click(object sender, EventArgs e)
  {
   ed.Visible = false;
   txt.Visible = true;

   if (sender == edit)
   {
    ed.Visible = true;
    ed.Content = txt.Text;
    txt.Visible = false;
   }
  }

[Rumen]

Hello Brian,

Could you please, try the solution provided in the following KB article on the subject: Registering an external skin of RadEditor? You should also read the following sticky note: Images not displayed in Firefox & IE7 when using external skins.

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rumen]

Hi Brian Limkemann,

This is a quick follow-up: To avoid the appearance problem with the missing images, do not disable the embedded skin, but only register the css files of the external skin.

The KB article suggests to disable the embedded skins by setting the EnableEmbeddedSkins property to false , but you should avoid this step. You should only register the external skins by adding the external css files to the page, but not disable the embedded skin:

<link href="Skins/Window.css" rel="stylesheet" type="text/css" />   
<link href="Skins/Editor.css" rel="stylesheet" type="text/css" />   
<link href="Skins/WebBlue/Window.WebBlue.css" rel="stylesheet" type="text/css" />  
<link href="Skins/WebBlue/Editor.WebBlue.css" rel="stylesheet" type="text/css" />

This will fix the incorrect size problem.

Regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Brian Limkemann]

Actually, it looks like I only needed Editor.css and Window.css. Thanks for the help - it works perfectly now!

[Paul]

I was having similar problems whenever I tried to show an editor the first time on an ajax postback.  Often times the editor text area would be grayed out in firefox or the editor would blow out my layout in IE (the editor would be way too wide and not constrained to the width of a containing div.)

I found another way to solve this problem is to just include a radeditor control inside a hidden div on the page.  That way when an ajax postback occurs, the correct stylesheets are already loaded automatically.

So, using the example code above, you would change it to look like:

<div>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Button runat="server" ID="edit" Text="edit" OnClick="edit_Click" /><asp:Button
                    runat="server" ID="save" Text="save" OnClick="edit_Click" />
                <asp:Panel runat="server" ID="cnt">
                    <asp:Literal runat="server" ID="txt" Text="testing." />
                    <telerik:RadEditor runat="server" ID="ed" Width="500px" Visible="false" />
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div style="visibility: hidden;">
        <telerik:RadEditor ID="hiddenEditor" runat="server">
        </telerik:RadEditor>
    </div>

Then when you click on the edit button, the editor loads correctly.

Paul