attachEventHandler not working when RadEditor inside a RadWindow

[Alex]

Hi,

    There is a problem with adding an event handler to a RadEditor when combined with a RadWindow. First I had some issues with the toolbar, and fixed them with the proposed workaround here http://www.telerik.com/community/forums/aspnet-ajax/window/radeditor-toolbars-not-working-when-use-radwindow-as-the-container.aspx

    Unfortunately, this does not solve the issue with the registered event handlers. 

    I need to capture whatever the user types in the RadEditor. It works fine when the RadEditor is not inside a RadWindow... Is there any solution to this issue? 

  Here is an example to reproduce the problem. One RadEditor outside the RadWindow and another inside one. I tried several things, like adding a <div> as a wrapper, add an space in the Content tag, etc... but nothing works.

   Any idea how to solve this?

<form id="form1" runat="server">
     <asp:ScriptManager ID="MyScriptManager" runat="server"></asp:ScriptManager>
    <div>

    <telerik:RadWindow ID="RadWindow1" Width="750" Height="500" OnClientShow="OnClientShow"
    runat="server" VisibleOnPageLoad="true">
    <ContentTemplate>
        <div id="editorWrapper" style="padding: 5px; display: none;">
           <telerik:RadEditor ID="RadEditorWithRadWindow"  OnClientLoad="RadEditorWithRadWindowOnClientLoad"
           runat="server" Width="600px" Height="250px" Visible="true"
            EnableEmbeddedScripts="true">
             <Content> </Content>
        </telerik:RadEditor>
        </div>
    </ContentTemplate>
    </telerik:RadWindow>
       <telerik:RadEditor ID="RadEditorNoRadWindow"  OnClientLoad="RadEditorNoRadWindowOnClientLoad"
       runat="server" Width="600px" Height="250px" Visible="true"
        EnableEmbeddedScripts="true">
             <Content> </Content>
        </telerik:RadEditor>

     <script type="text/javascript">
         function RadEditorWithRadWindowOnClientLoad(editor, args) {
             editor.attachEventHandler("onkeypress", function (e) {
                 alert('We CANNOT reach this one');
             }
            );
         }
         function RadEditorNoRadWindowOnClientLoad(editor, args) {
             editor.attachEventHandler("onkeypress", function (e) {
                 alert('We CAN reach this one');
             }
            );
         }
       function OnClientShow(sender, args) {
           // Fix the size problem in IE.
           var editorParent = $get('editorWrapper');
           editorParent.style.display = '';
           // Fixes the problem with the content area in FF and Safari
           var editor = $find('<%= RadWindow1.ContentContainer.FindControl("RadEditorWithRadWindow").ClientID %>');
           editor.onParentNodeChanged();
           var style = editor.get_contentArea().style;
           style.backgroundImage = "none";
           style.backgroundColor = "white";
       }
   </script>
    </div>

    </form>

Many thanks!

[Marin Bratanov]

Hello,

You need to attach the handlers after you call the onParentNodeChanged() method, because the elements have been moved, i.e.:

function OnClientShow(sender, args)
{
    // Fix the size problem in IE.
    var editorParent = $get('editorWrapper');
    editorParent.style.display = '';
    // Fixes the problem with the content area in FF and Safari
    var editor = $find('<%= RadWindow1.ContentContainer.FindControl("RadEditorWithRadWindow").ClientID %>');
    editor.onParentNodeChanged();
    var style = editor.get_contentArea().style;
    style.backgroundImage = "none";
    style.backgroundColor = "white";
    setTimeout(function ()
    {
        editor.attachEventHandler("onkeypress", function (e)
            {
                alert('Now we CAN reach this one as well');
            }
        );
    }, 0);
}

which makes the OnClientLoad handler in the markup unnecessary in this case for the RadEditor in the RadWindow.

Greetings,
Marin Bratanov
the Telerik team

[Alex]

Thanks Marin, your solution works fine.

There is yet another issue that appears when using RadWindow with RadEditor.
When the RadEditor is inside the RadWindow, some of the Toolbar work (e.g. changing text to bold, adding color, etc..) but Tables edition does not work correctly in Firefox (the dotted borders of the table are missing).  It works fine with IE...
Is there a fix or workaround for that? 

Thanks again. 

Alex

[Marin Bratanov]

Hi Alex,

The RadWindow moves its contents in the DOM which means that a lot of the properties, handlers and additional files will get lost in this case. This is the reason why the onParentNodeChanged() method of the RadEditor must be called and this is also the reason why the styles for the content area get lost.

You can easily get them back by creating a stylesheet reference when you show the editor and this approach is shown in this KB article. I am attaching here a simple page that shows this in action along with the basic stylesheet. You can obtain the full document from this online demo (it includes the styles for the TrackChanges functionality).


All the best,
Marin Bratanov
the Telerik team