Editor not Initializing in AJAX Panel?

16 posts, 0 answers
  1. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 26 Feb 2009 Link to this post

    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?
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 03 Mar 2009 Link to this post

    Hi Bryson,

    Please, see the following help article on the subject: Registering an external skin of RadEditor.
    If you are using the latest Q3 SP2 version of RadControls for ASP.NET AJAX see also the following sticky note on the subject: Images not displayed in Firefox & IE7 when using external skins

    Kind 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 23 Mar 2009 Link to this post

    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>
    <head runat="server"></head>
    <script runat="server">
        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>
        <form id="form1" runat="server">
        <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>

  5. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 23 Mar 2009 Link to this post

    Oh yeah, and I should also mention that if you change "EnableAJAX" to 'false' so that a full server postback occurs when you click the links, the editor initializes fine.  This issue only exhibits itself in an AJAX Panel (Microsoft's built-in UpdatePanel, or the RadAjaxPanel).
  6. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 26 Mar 2009 Link to this post

    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.
  7. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 31 Mar 2009 Link to this post

    That fixed it!  Thank you!  We are going to do a run-through of all the other issues we've encountered and see how many we can get knocked off with the new update.

    Thanks for your time and help.
  8. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 01 Apr 2009 Link to this post

    Darnit, nevermind - I had EnableAJAX="false" when I retested it.  We're still having the same issues with FireFox and Chrome.  I see in your video that it works great though, just as expected.

    Is there a chance I have a web.config setting missing and/or wrong?  Can you provide the web.config for the sample project in your video?

    I will continue to troubleshoot to try to isolate the issue.

    Edit:  The same issue occurs in Safari (for PC), but works correctly in Opera.
  9. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 01 Apr 2009 Link to this post

    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
                            <ContentTemplate>
                <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:

    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.
  10. Martin
    Admin
    Martin avatar
    585 posts

    Posted 02 Apr 2009 Link to this post

    Hello Bryson Ockey,

    We are aware of the problem with resizing the content cell of RadEditor when it's loaded with AJAX. However, I beleive that I found a solution for this. Please, add the following CSS in the head section of your webpage, where the editor is or in your external stylesheets:

    <style type="text/css">
    .reContentCell
    {
        
    height: 100% !important
    ;
    }
    </style>


    Greetings,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  11. bug0r
    bug0r avatar
    1 posts
    Member since:
    Apr 2009

    Posted 02 Apr 2009 Link to this post

    Try to set Height="100%" in the following string 
    <telerik:radeditor runat="server" ID="RadEditor1"  SkinID="DefaultSetOfTools" Height="515" Width="500">

    And It will be not working in Opera 9.64 anyway. empty content field.
    There are errors in height calculating from time to time in Mozilla 3.0.8, Opera 9.64, Chrome and Safari. Only in IE it is working stable.

    P.S. latest release used (2009 q1)
    P.P.S. I could not write reply from opera 9.64 - no blinking cursor visible, no reaction when pressing keys.
  12. Gold Systems
    Gold Systems avatar
    9 posts
    Member since:
    Feb 2009

    Posted 03 Apr 2009 Link to this post

    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!
  13. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 06 Apr 2009 Link to this post

    Hello Bryson,

    The best suggestion that we could give you at this point is to open a support ticket and send us a full project that could be run locally and where these problems could be reproduced. This would allow us to have a better view over your exact case and work directly on your code.

    Please send us such project and we will check it right away.


    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  14. Marcus Eddy
    Marcus Eddy avatar
    26 posts
    Member since:
    Jun 2008

    Posted 13 Apr 2009 Link to this post

    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
  15. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 16 Apr 2009 Link to this post

    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.
  16. solutionfactory
    solutionfactory avatar
    45 posts
    Member since:
    Apr 2007

    Posted 07 May 2009 Link to this post

    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


  17. Marcus Eddy
    Marcus Eddy avatar
    26 posts
    Member since:
    Jun 2008

    Posted 07 May 2009 Link to this post

    Thanks Flavio,

    I may give this a go, however i got around the issue by dropping a multipage on with renderselectedpage= true and having my user controls inside those, that way it was already loaded on page load and i didn't have the issues any more.

    Regards Marcus
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017