5 Answers, 1 is accepted
0
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?
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
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,
What is the problem?
<
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
>
0
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
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:
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
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
>
Regard,
York
0
Accepted
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
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
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!