RadEditor in RadSplitter or RadMultipage - attached click event does not fire on the editor

2 posts, 0 answers
  1. Alan
    Alan avatar
    6 posts
    Member since:
    Jul 2010

    Posted 20 Jan 2012 Link to this post

    Hello Telerik team,
     We have discovered an issue with the RadEditor in a RadMultiPage or a RadSplitter (RadControls For Asp.NET Ajax, version 2011.3.1305.40) . In our scenario, we are attaching a click event handler to the editor as soon as it loads. The click handler fires correctly when the editor is not nested within a splitter or a multipage. We require to have the editor within a RadPageView in a RadSplitter, so please advise us on how to fix this issue.
    Below there is some test code we have used:
    <telerik:RadCodeBlock ID="rcb" runat="server">
           <script type="text/javascript">
               //TEST SCENARIO1 - editor in RadMultiPage
               function EditorOnClientLoad(editor, args) {
                   editor.attachEventHandler("onclick", function (e) {
                       alert('Editor clicked!');
                   });
               }
                //TEST SCENARIO2 - editor in RadSplitter
               function Editor1OnClientLoad(editor, args) {
                   editor.attachEventHandler("onclick", function (e) {
                       alert('Editor1 clicked!');
                   });
               }
           </script>
       </telerik:RadCodeBlock>
     
     <%--TEST SCENARIO1--%>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Office2007" MultiPageID="RadMultiPage1"
           SelectedIndex="0">
           <Tabs>
               <telerik:RadTab runat="server" Text="Description" Value="Description" PageViewID="RadPageView1">
               </telerik:RadTab>
               <telerik:RadTab runat="server" Text="Content" Value="Content" PageViewID="RadPageView2">
               </telerik:RadTab>
           </Tabs>
       </telerik:RadTabStrip>
       <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="430px">
           <telerik:RadPageView ID="RadPageView1" runat="server">
               <div id="div1" runat="server" >
                   <div id="div2" runat="server" >
                       ....
                   </div>
               </div>
           </telerik:RadPageView>
           <telerik:RadPageView ID="RadPageView2" runat="server">
               <table cellpadding="0" cellspacing="5">
                   <tr>
                       <td align="right" valign="middle">
                           Message
                       </td>
                       <td valign="middle">
                           <telerik:RadEditor ID="editorMessage" runat="server" Skin="Office2007" EnableResize="false"
                               OnClientLoad="EditorOnClientLoad">
                           </telerik:RadEditor>
                       </td>
                   </tr>
               </table>
           </telerik:RadPageView>
       </telerik:RadMultiPage>
     
       <%--TEST SCENARIO 2--%>
       <telerik:RadSplitter ID="rs1" runat="server" Width="800px">
           <telerik:RadPane ID="rp1" runat="server">
               <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Office2007" EnableResize="false"
                   OnClientLoad="Editor1OnClientLoad">
               </telerik:RadEditor>
           </telerik:RadPane>
       </telerik:RadSplitter>

    None of the above test scenarios fire the click handler of the RadEditor. Moreover, in the RadMultiPage scenario, Google Chrome shows an error when clicking the second tab:
    1. Uncaught TypeError: Cannot read property 'tagName' of null
      1. Telerik.Web.UI.Editor.Selection.getParentElementTelerik.Web.UI.WebResource.axd:11064
      2. a.RadEditor.getSelectedElementTelerik.Web.UI.WebResource.axd:11542
      3. a.RadEditor.getToolValueTelerik.Web.UI.WebResource.axd:11574
      4. Telerik.Web.UI.Editor.DefaultToolAdapter.setToolStateTelerik.Web.UI.WebResource.axd:8420
      5. Telerik.Web.UI.Editor.DefaultToolAdapter._onEditorSelectionChangeTelerik.Web.UI.WebResource.axd:8571
      6. Telerik.Web.UI.RadWebControl.raiseEventTelerik.Web.UI.WebResource.axd:779
      7. a.RadEditor.onParentNodeChangedTelerik.Web.UI.WebResource.axd:11530
      8. window.$telerik.window.TelerikCommonScripts.Telerik.Web.CommonScripts.repaintChildrenTelerik.Web.UI.WebResource.axd:96
      9. Telerik.Web.UI.RadPageView.showTelerik.Web.UI.WebResource.axd:3884
      10. Telerik.Web.UI.RadMultiPage._selectPageViewByIndexTelerik.Web.UI.WebResource.axd:3945
      11. Telerik.Web.UI.RadPageView._selectTelerik.Web.UI.WebResource.axd:3874
      12. Telerik.Web.UI.RadTab._selectPageViewTelerik.Web.UI.WebResource.axd:3040
      13. Telerik.Web.UI.RadTab.selectTelerik.Web.UI.WebResource.axd:3144
      14. Telerik.Web.UI.RadTab.clickTelerik.Web.UI.WebResource.axd:3092
      15. Telerik.Web.UI.RadTabStrip._clickTelerik.Web.UI.WebResource.axd:3556
      16. Telerik.Web.UI.EventMap._onDomEventTelerik.Web.UI.WebResource.axd:2489
      17. g

    As a note, we have just upgraded our RadControls from version 2011.2.915  (the click handler of the editor worked fine with this version) to the latest version.
    Please provide us with a solution to this problem.
    Thank you.
  2. Rumen
    Admin
    Rumen avatar
    13899 posts

    Posted 25 Jan 2012 Link to this post

    Hi,

    Thank you for reporting this bug.

    It was fixed and it will not exist in the next official build of RadControls for ASP.NET AJAX.

    The temporary solution is to put the following script on the page with RadEditor:

    <script type="text/javascript">
        (function () {
            var $ = $telerik.$,
          $T = Telerik.Web.UI;
     
            $.extend($T.RadEditor.prototype,
          {
              repaint: function () {
                  $T.RadEditor.callBaseMethod(this, "repaint");
                  //this.onParentNodeChanged();
                  this._fixMoreSizeIssues();
                  if (this.get_toolAdapter() instanceof $T.Editor.RibbonBarToolAdapter)
                      this.get_ribbonBar().repaint();
              }
          });
        })();
      </script>


    Best regards,
    Rumen
    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