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

attachEventHandler not working when RadEditor inside a RadWindow

3 Answers 104 Views
Window
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 28 May 2012, 08:15 PM
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!

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 30 May 2012, 04:13 PM
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.
0
Alex
Top achievements
Rank 1
answered on 07 Jun 2012, 09:01 PM
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
0
Marin Bratanov
Telerik team
answered on 11 Jun 2012, 11:11 AM
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.
Tags
Window
Asked by
Alex
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Alex
Top achievements
Rank 1
Share this question
or