attachEventHandler not working when RadEditor inside a RadWindow

4 posts, 0 answers
  1. Alex
    Alex avatar
    2 posts
    Member since:
    May 2012

    Posted 28 May 2012 Link to this post

    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!
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5704 posts

    Posted 30 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Alex
    Alex avatar
    2 posts
    Member since:
    May 2012

    Posted 07 Jun 2012 Link to this post

    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
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5704 posts

    Posted 11 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top