How to detect page down/end in radeditor

6 posts, 1 answers
  1. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 02 Mar 2011 Link to this post

    Hi,

    I want to detect programmably the event of page down button pressed, as well as the end of page is reached in RadEditor. What are the events raised for both case? Thanks.

    York
  2. Rumen
    Admin
    Rumen avatar
    13847 posts

    Posted 08 Mar 2011 Link to this post

    Hi York,

    Here is a basic example on how to implement the solution in the following forum: How can I detect if a scrollbar inside a DIV is at the bottom of the track?

    <telerik:RadEditor ID="RadEditor1" ContentAreaMode="Div" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            editor.attachEventHandler("onscroll", function (e) {
                var editorDocumentBody = editor.get_document().body;
                var iHeight = editorDocumentBody.scrollHeight;
     
                if (editorDocumentBody.scrollTop + editorDocumentBody.offsetHeight == iHeight) {
                    alert("bottom reached");
                    editor.undo(1);
                }
            });
        }
    </script>

    You can further enhanced it using the information in the following articles:
    http://msdn.microsoft.com/en-us/library/ms534618%28v=vs.85%29.aspx
    https://developer.mozilla.org/en/DOM/element.scrollTop
    http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21829918.html
    http://forums.asp.net/t/1655517.aspx/1?iframe+scroll+detect

    Kind regards,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 08 Mar 2011 Link to this post

    Thanks a lot, Rumen. I try your code, but it does not work. The rededitor pane is fine. I set a stop point inside ClientLoad, but when scrolled, it never stops there. It seems the function never get invoked. Here is my code, 
    <body>
        <script type="text/javascript" language="javascript">
            function ResizeEditor() {
                var pane = $find("<%=RadPane1.ClientID %>");
                var editor = $find("<%=RadEditor1.ClientID %>");
                var newHeight = pane.get_height();
                //19 pixels less to avoid getting a horizontal scrollbar, the vertical is unavoidable
                //unless we set overflow:hidden to the wrapper div, but that might not be desireble
                //the wrapper itself is necessary only for the removal of the scrollbars
                var newWidth = pane.get_width() - 19;
                editor.setSize(newWidth, newHeight);
            }
      
            function ClientLoad(editor, args) {
                editor.attachEventHandler("onscroll", function (e) {
                    var editorDocumentBody = editor.get_document().body;
                    var iHeight = editorDocumentBody.scrollHeight;
      
                    if (editorDocumentBody.scrollTop + editorDocumentBody.offsetHeight == iHeight) {
                        alert("RadEditor has reached its bottom.");
                        editor.undo(1);
                    }
                });
            }
    </script>
      
       <form id="form1" runat="server" style="height: 100%">
           <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
           <div>
           <telerik:RadSplitter ID="RadSplitter1" runat="server" BorderStyle="Solid" BorderColor="Black" Orientation="Horizontal" 
                        Width="100%" Height="100%" OnClientResized="ResizeEditor" >
               <telerik:RadPane ID="RadPane1" Runat="server" BackColor="Blue" Height="100%" OnClientResized="ResizeEditor" >
                    <telerik:RadEditor ID="RadEditor1" runat="server" Height="100%" Width="100%" ContentAreaMode="Div"  OnClientLoad="ClientLoad" EnableResize="true" 
                            AutoResizeHeight="false" BorderStyle="Solid" BorderColor="#66FF66" BackColor="Yellow" ForeColor="#FF3300"></telerik:RadEditor>
               </telerik:RadPane>
           </telerik:RadSplitter>
           </div>
        </form>
    </body>
    What is the problem?
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4568 posts

    Posted 11 Mar 2011 Link to this post

    Hello York,

    Please note that there are no predefined events for such occasions as they are custom user scenarios. Therefore you need to create JavaScript functions to detect if your conditions are met. I have modified your code to produce alerts when the bottom of the content is reached and when the page down key is depressed.
    Please note the comments in the code. They also concern a previous ticket of yours (the resizing of an Editor in a Pane). See the example page I have attached.


    Best wishes,
    Marin
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 12 Mar 2011 Link to this post

    Hi Marin, 

    The modified code is still not working. The problem seems that OnClientLoad() is  never called when radeditor is loaded. I try to put OnClientLoad() under RadSplitter, as follow:
    function OnClientLoad(args) {
         var pane = $find("<%=RadPane1.ClientID %>");
         var editor = $find("<%=RadEditor1.ClientID %>");
     
         editor.attachEventHandler("onscroll", function (e) {
             var editorDocumentBody = editor.get_document().body;
             var iHeight = editorDocumentBody.scrollHeight;
     
             if (editorDocumentBody.scrollTop + editorDocumentBody.offsetHeight == iHeight) {
                 alert("RadEditor has reached its bottom.");
                 //editor.undo(1);
             }
         });
     }
     
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server" BorderStyle="Solid" BorderColor="Black" Orientation="Horizontal"
                 Width="100%" Height="100%" OnClientResized="ResizeEditor" OnClientLoad="OnClientLoad">
        <telerik:RadPane ID="RadPane1" Runat="server" BackColor="Blue" Height="100%" >
             <telerik:RadEditor ID="RadEditor1" runat="server" Height="100%" Width="100%" ContentAreaMode="Div"  OnClientLoad="ClientLoad" EnableResize="true"
                     AutoResizeHeight="false" BorderStyle="Solid" BorderColor="#66FF66" BackColor="Yellow" ForeColor="#FF3300"></telerik:RadEditor>
        </telerik:RadPane>
    </telerik:RadSplitter>
    This time OnClientLoad() is called, but page down button is still not detected. It seems that the event handler is not set correctly. 

    Regard, 

    York
  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4568 posts

    Posted 14 Mar 2011 Link to this post

    Hello York,

    You are trying to set properties to the Editor when the Splitter is first loaded, which does not guarantee that the Editor is already loaded, therefore the handler might not be attached.
    In the code you provided there is no handler for the detection of a key, therefore you cannot expect to have the alert pop up when the given key is pressed.
    Please note that in the Editor declaration you have set  OnClientLoad="ClientLoad" which would not call the OnClientLoad() function.

    I am attaching a slightly modified page that illustrates that the splitter might (or might not) be loaded before the editor (two simple alert() functions are used).

    Nevertheless, in my case the hadlers are attached correctly and are working. Here is a video illustrating the implementation of your code - attaching the handlers via the OnCliendLoaded event of the Splitter: http://screencast.com/t/uMPDi9TM

    If you are still experiencing trouble could you please send us a working project displaying the issue so that we can investigate it further?


    Kind regards,
    Marin
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top