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

get_textArea() bounds

1 Answer 29 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Andrew asked on 23 May 2011, 08:40 PM
i made this post in the forum and that might have been the wrong place so i'm adding it here too....

I'm trying to enable drag and drop from RadTreeView to RadEditor following the demo, but i also need to be able to insert text in HTML view. When i call $telerik.getBounds() on the return of editor.get_textArea(), the .x and .y are incorrect, something like 0,1. I am checking prior to this that they are indeed in html mode. This works fine for the alternative in design view and get_contentAreaElement(). Is there a way to get the bounds of the textArea, or just the entire control when in HTML view? ( i dont care if they are over the text box or the entire radEditor).

version 2011 q1 sp2
visual studio 2010 premium/c#
IE9 in standard and compatibility mode, IE8, firefox all do the same thing

function isMouseOverEditorCodeView(editor, events) {  
var textFrame= editor.get_textArea(); 
var textRect= $telerik.getBounds(textFrame); 
var mouseX = events.clientX;
var mouseY = events.clientY; 
if (mouseX < (textRect.x + textRect.width) && mouseX > textRect.x &&  
    mouseY < (textRect.y + xtRect.height) && mouseY > textRect.y) {  
return true;  
return false;  

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 24 May 2011, 03:41 PM
Hello Andrew,

The textarea element in HTML mode is placed in an IFRAME element, which is another iframe different from the editable iframe element in Design mode. The coordinates of the textarea in the iframe are 0, 0 and for this reason the $telerik.getBounds methods returns these bounds. What you can do is to get the bounds of the iframe in HTML mode using the code below and the editor._getTextIframe() method:

Copy Code
<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.add_modeChange(function (sender, args) {
            var mode = editor.get_mode();
            if (mode == "2") {
                setTimeout(function () {
                    var textIframe = editor._getTextIframe();
           = "1px solid red";
                    var textRect = $telerik.getBounds(textIframe);
                    alert("X: " + textRect.x + " Y: " + textRect.y);
                }, 10);
<div style="width: 100px;height: 100px">das</div>
<table><tr><td>dasdasdas</td><td><telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">

Kind regards,
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question