Editor does not work correctly in RadWindow

4 posts, 0 answers
  1. Arkadiusz
    Arkadiusz avatar
    7 posts
    Member since:
    Oct 2010

    Posted 15 Apr 2011 Link to this post

    Hi,

    When RadEditor is placed inside RadWindow following problems occur:
    1) IE9 (9.0.8112.16421) + Chrome (10.0.648.205)  + Safari (5.0.5 [7533.21.1]):
     - cannot type in the Design mode
     - test entered in the HTML mode does not appear in the Design mode
     - toolbar buttons don't work
    2) IE9 Compatibility View:
     - toolbar does not appear
    3) FF 4.0:
    - toolbar buttons don't work
    1) + 2) + 3): switching between Design / Preview / HTML mode does not work correctly

    Example to reproduce those issues:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="akUITest.aspx.vb" Inherits="Testing_akUITest" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="sm" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadWindowManager ID="radWindowManager" runat="server">
                <Windows>
                    <telerik:RadWindow ID="radWindowEditor" runat="server" VisibleOnPageLoad="true">
                        <ContentTemplate>
                            <telerik:RadEditor ID="radEditor" runat="server">
                            </telerik:RadEditor>
                        </ContentTemplate>
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
        </div>
        </form>
    </body>
    </html>

    Code behind is empty - just class declaration.

    Additional information:
    - Telerik v. 2011.1.413.40
    - Windows 7 64-bit
    - .Net Framework 4

    Attached screenshot from IE9 Compatibility View.

    Please provide solution for those problems.

    Thanks,
    Arek
     
  2. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 18 Apr 2011 Link to this post

    Hello Arkadiusz,

    The problem and the solution are discussed in the following PITS item: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/4889, e.g.

    FIX RadEditor is unusable when inside a control containter of RadWindow

    If you use RadWindow to display a RadEditor instance the buttons in RadEditor do not work (rendering it unusable). The issue only arises when RadWindow is used as a control containter (i.e. the RadEditor is within the <ContentTemplate> of RadWindow).

    To fix the problem you must execute the onParentNodeChanged() method of the RadEditor object after it is shown.



    Best regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Arkadiusz
    Arkadiusz avatar
    7 posts
    Member since:
    Oct 2010

    Posted 18 Apr 2011 Link to this post

    Hi Rumen,

    Thanks for reply. Do you you know solution (bypass) for that problem when visibility of the RadEditor / RadWindow  is controlled by code-behind?

    I tried to use trigger onParentNodeChanged() using both RadAjaxManager.ResponseScripts.Add and ScriptManager.RegisterStartupScript without any luck. The RadAjaxManager.ResponseScripts.Add doesn't seem to do anything and ScriptManager.RegisterStartupScript throws following error: Unable to get value of the property 'onParentNodeChanged': object is null or undefined.

    In that particular scenario users need to enter some data before they will get to the editor.

    Please review included code - added RadAjaxManager and simple button

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="akUITest.aspx.vb" Inherits="Testing_akUITest" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="sm" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="ajaxMgr" runat="server" UpdatePanelsRenderMode="Inline">
        </telerik:RadAjaxManager>
        <div>
            <asp:Button ID="btnShowWnd" runat="server" Text="show Wnd" />
            <telerik:RadWindowManager ID="radWindowManager" runat="server">
                <Windows>
                    <telerik:RadWindow ID="radWindowEditor" runat="server">
                        <ContentTemplate>
                            <telerik:RadEditor ID="radEditor" runat="server">
                            </telerik:RadEditor>
                        </ContentTemplate>
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
        </div>
        </form>
    </body>
    </html>

    Partial Class Testing_akUITest
        Inherits System.Web.UI.Page
     
        Protected Sub btnShowWnd_Click(sender As Object, e As System.EventArgs) Handles btnShowWnd.Click
            Me.radWindowManager.Windows(0).VisibleOnPageLoad = True
     
            'Me.ajaxMgr.ResponseScripts.Add("try {var editor = $find('" & radEditor.ClientID & _
            '    "'); editor.onParentNodeChanged(); alert('shown');} catch(e) {alert(e);}")
     
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), _
                "Editor_onParentNodeChanged", "<script>try {setTimeout(function(){$find('" & radEditor.ClientID & _
                "').onParentNodeChanged();}, 1000); alert('shown');} catch(e) {alert(e);}</script>", False)
        End Sub
    End Class

    Thanks,
    Arek
  4. Eric
    Eric avatar
    1 posts
    Member since:
    Jul 2012

    Posted 20 Apr 2011 Link to this post

    A little annoying but i figured it out, hope it gets fixed though.

    You don't want to do anything from the code behind. essentially:

    1. Create a new JS function in your code block like this

    function setupEditor() {
    var editor = $find("<%=myEditor.ClientID%>");
    editor.onParentNodeChanged();
    };

    2. Then within your radWindow properties, set this:

    <telerik:RadWindow ID="myEditor" runat="server" EnableEmbeddedScripts="true" OnClientShow="setupEditor">

    Worked for me finally, hope it helps.

    Eric
Back to Top