get_textArea() bounds

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    12 posts
    Member since:
    May 2011

    Posted 23 May 2011 Link to this post

    i made this post in the asp.net 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;  
    }
  2. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 24 May 2011 Link to this post

    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();
                        textIframe.style.border = "1px solid red";
                        var textRect = $telerik.getBounds(textIframe);
                        alert("X: " + textRect.x + " Y: " + textRect.y);
                    }, 10);
                }
            });
        }
    </script>
    <div style="width: 100px;height: 100px">das</div>
    <table><tr><td>dasdasdas</td><td><telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
    </telerik:RadEditor></td></tr></table>


    Kind regards,
    Rumen
    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.

Back to Top