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

Editor not Initializing in AJAX Panel?

15 Answers 208 Views

Editor

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

Gold Systems asked on 26 Feb 2009, 08:54 PM

I am having an issue which I would guess has to do with initialization of the editor in a hidden panel. This issue occurs without fail in Chrome, intermittently in FireFox3, and not at all in IE7.

What happens is if a Rad Editor is on a page where it is loaded and displayed on first hit to a page, it works fine. However, if the editor is in an AJAX panel which is displayed later on (i.e., after a user clicks a link to display the editor), the first time it is displayed the toolbars show up, but the editor area is very tiny and cannot be clicked in, typed in, or otherwise used. If I click the same link to redisplay that same AJAX panel, the editor shows up and functions just dandy.

We used a previous editor which exhibited the same type of behavior and it was related to the Javascript initialization of the control, so that's the only reason I suggest an initialization issue.

Any ideas?

15 Answers, 1 is accepted

answered on 23 Mar 2009, 07:40 PM

Thanks for the reply. Although that didn't seem to help, I've been able to create an isolated test page that illustrates the issue just so it's apparent what we're experiencing.

The following test page starts out with 2 links at the top and simply changes the active state of a MultiView control. In Chrome and FireFox, clicking on the "Go To Editor" link the first time shows the full editor with icons, but with a shrunken editing area which is not accessible by clicking. If you click on either of the 2 links at the top, then back to the editor, it functions great.

In IE, this is not an issue.

Below is the .aspx page's code:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<html>

protected void Page_Load(object sender, EventArgs e)

{

}

protected void ShowEditor_Click(object sender, EventArgs e)

{

MultiView.SetActiveView(Editor);

}

protected void HideEditor_Click(object sender, EventArgs e)

{

MultiView.SetActiveView(NoEditor);

}

protected void Other_Click(object sender, EventArgs e)

{

MultiView.SetActiveView(OtherView);

}

</script>

<body>

<div>

<asp:ScriptManager ID="sm" runat="server" />

<telerik:RadAjaxPanel ID="rap" runat="server" EnableAJAX="true">

<asp:MultiView ID="MultiView" runat="server" ActiveViewIndex="0">

<asp:View ID="NoEditor" runat="server">

<asp:LinkButton ID="ShowEditor" runat="server" OnClick="ShowEditor_Click" Text="Go to Editor" />

<asp:LinkButton ID="Other" runat="server" OnClick="Other_Click" Text="Go to the other view" />

</asp:View>

<asp:View ID="Editor" runat="server">

<asp:LinkButton ID="HideEditor" runat="server" OnClick="HideEditor_Click" Text="Back to Non-Editor" />

<asp:LinkButton ID="LinkButton3" runat="server" OnClick="Other_Click" Text="Go to the other view" />

<telerik:radeditor runat="server" ID="MessageEditor"></telerik:radeditor>

</asp:View>

<asp:View ID="OtherView" runat="server">

Some other view.

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="ShowEditor_Click" Text="Go to Editor" />

<asp:LinkButton ID="LinkButton2" runat="server" OnClick="HideEditor_Click" Text="Back to Non-Editor" />

</asp:View>

</asp:MultiView>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

answered on 26 Mar 2009, 04:33 PM

latestradeditortestvideo.zip

Hi Bryson,

I made a test with the latest Q1 2009 version of RadEditor and noticed that the problem does not appears in Firefox. The editor is rendered properly without external skins and its content area is editable. For your convenience I have attached a video demonstrating my test.

My recommendation is to upgrade your project to the latest version and test the editor in Firefox.

Greetings,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

answered on 01 Apr 2009, 04:44 PM

Alright, to eliminate the possibility of our local configuration files, I attempted the same test with the Live Demo examples that come with the package. I opened the /editor/examples/default/defaultcs.aspx file (and codebehind) and added/changed the following:

DefaultCS.aspx

<asp:MultiView ID="MultiView" runat="server" ActiveViewIndex="0">

<asp:View ID="NoEditor" runat="server">

<asp:LinkButton ID="ShowEditor" runat="server" OnClick="ShowEditor_Click" Text="Go to Editor" />

</asp:View>

<asp:View ID="Editor" runat="server">

<asp:LinkButton ID="HideEditor" runat="server" OnClick="HideEditor_Click" Text="Back to Non-Editor" />

<telerik:radeditor runat="server" ID="RadEditor1"

SkinID="DefaultSetOfTools"

Height="515" Width="500">

<ImageManager

ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"

UploadPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"

DeletePaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations">

</ImageManager>

</telerik:radeditor>

</asp:View>

</asp:MultiView>

</ContentTemplate>

DefaultCS.aspx.cs

protected void ShowEditor_Click(object sender, EventArgs e)

{

MultiView.SetActiveView(Editor);

}

protected void HideEditor_Click(object sender, EventArgs e)

{

MultiView.SetActiveView(NoEditor);

}

Upon doing this, I ran the StartExamples.exe file that comes with the Live Demos and navigated to the aforementioned file. Following are the results of clickong on the "Go to the Editor" link:

IE7: Works (http://unabled.com/temp/rad/IE7.png)

Opera: Did not work first time, but worked all subsequent times (http://unabled.com/temp/rad/Opera.png)

FireFox 3: Does not work (http://unabled.com/temp/rad/FireFox.png)

Chrome: Does not work (http://unabled.com/temp/rad/Chrome.png)

Safari: Does not work (http://unabled.com/temp/rad/Safari.png)

The version of the DLL in the Live Demos appears to be the correct, recent version. http://unabled.com/temp/rad/version.png As another note, this occurs on any combination of browser and OS we have tried (XP, Vista, Vista64, Server 2003, Server 2008 64 bit, OS-X).

Any suggestions as to what could be tried next? I was experimenting with local configuration until I attempted the Telerik demos locally and found the same problem exists (assuming that the demos have basically the same configuration you have used in your previous video link).

Thanks in advance - I wish I could be more helpful in troubleshooting.

answered on 03 Apr 2009, 03:42 PM

Thanks for the suggestions once again. I tried the .reContentCell CSS definition and had some mixed improvement. If I use the <telerik:RadAjaxPanel>, it seems to work in all the browsers except FireFox 3. FireFox 3 now appears to display correctly (the edit box is the right height), but the editor still does not function (can't click, can't type, other buttons on the page don't even work). In Opera, the editor functions, but the height is rendered in such a way that scrollbars appear and the bottom of the edit box cannot be seen when typing.

However, when using an <asp:UpdatePanel>, none of the browsers except IE function again. Using the Telerik AJAX panel causes other weird side effects on other areas of the site (such as lists being duplicated, content disappearing randomly) so it's not a convenient choice. And if it were, we still need FireFox support anyway.

At least we're making progress though - any suggestions on the next step? Thanks once again!

answered on 13 Apr 2009, 03:25 PM

Hi All

Also having the same problem with version Q1 2009 402, in my case i have a basic user control with only the radeditor and a couple of other textboxes. Upon clicking a link in my aspx page i dynamically load the user control into a placeholder (also tried ajax panel and asp:panel) using the ajax manager to remove the full postback with an update setting for the placeholder i get the exact description of Bryson

"What happens is if a Rad Editor is on a page where it is loaded and displayed on first hit to a page, it works fine. However, if the editor is in an AJAX panel which is displayed later on (i.e., after a user clicks a link to display the editor), the first time it is displayed the toolbars show up, but the editor area is very tiny and cannot be clicked in, typed in, or otherwise used. If I click the same link to redisplay that same AJAX panel, the editor shows up and functions just dandy."

Could you please keep me posted hotfixes for any support jobs related to this request.

Regards Marcus

answered on 16 Apr 2009, 12:06 PM

Hi Marcus,

Registering the external CSS of the editor manually on the page should do the trick. The following forum post discusses how to register an external skin for the editor:
http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-q3-2008-skins-available-for-download.aspx

If you still experience any problems, please open a support ticket and send a sample fully working project that demonstrates the problem. I will examine it and provide a solution.

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.

answered on 07 May 2009, 03:06 PM

Hi all,
i have solved with this work-around.

I have put this code at the top of page (out of the ajaxified panels)

    
                   <div style="position:absolute;top:-10000px;left:-1000px"> 
        
                        <telerik:RadEditor ID="RadEditor1" runat="server"  
        
                                            SkinID="ArticleEdit"  
        
                                            Width="490px"  
        
                                            AutoResizeHeight="false">  
        
                        </telerik:RadEditor>                                    
        
                   </div>

The RadEditor1 is used only to load automatically the right css files.

Note that the skinID must be the same of the editor in the ajaxified panel.

RadEditor.skin

    
            <telerik:RadEditor 
        
                Runat="server"  
        
                Skin="Default"   
        
                SkinID="ArticleEdit" 
        
                EnableEmbeddedSkins="True" 
        
                Language="it-IT"> 
        
            .... 
        
            .... 
        
            ...

Hope this helps

Best regards,
Flavio

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Editor not Initializing in AJAX Panel?

15 Answers, 1 is accepted