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

Editor in UpdatePanel Problem

4 Answers 72 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Brian Limkemann
Top achievements
Rank 2
Brian Limkemann asked on 05 Mar 2009, 12:04 PM

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

4 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 05 Mar 2009, 04:54 PM
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.
0
Rumen
Telerik team
answered on 05 Mar 2009, 05:18 PM
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.
0
Brian Limkemann
Top achievements
Rank 2
answered on 08 Mar 2009, 01:37 PM
Actually, it looks like I only needed Editor.css and Window.css. Thanks for the help - it works perfectly now!
0
Paul
Top achievements
Rank 1
answered on 29 Apr 2009, 11:39 AM
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



Tags
Editor
Asked by
Brian Limkemann
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Brian Limkemann
Top achievements
Rank 2
Paul
Top achievements
Rank 1
Share this question
or