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

How to detect page down/end in radeditor

5 Answers 87 Views
Editor
This is a migrated thread and some comments may be shown as answers.
york
Top achievements
Rank 1
york asked on 02 Mar 2011, 11:42 PM
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

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 08 Mar 2011, 09:35 AM
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!
0
york
Top achievements
Rank 1
answered on 09 Mar 2011, 05:56 AM
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?
0
Marin Bratanov
Telerik team
answered on 11 Mar 2011, 04:17 PM
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!
0
york
Top achievements
Rank 1
answered on 12 Mar 2011, 11:41 PM
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
0
Accepted
Marin Bratanov
Telerik team
answered on 14 Mar 2011, 01:05 PM
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!
Tags
Editor
Asked by
york
Top achievements
Rank 1
Answers by
Rumen
Telerik team
york
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or