Setting a max on AutoResizeHeight

5 posts, 0 answers
  1. Connor
    Connor avatar
    5 posts
    Member since:
    Jun 2009

    Posted 04 Jun 2009 Link to this post

    I have the Editor on a page that has room for the Editor to grow.  But if it gets to big it ends up messing with my masterpage.
    So I was wondering if there was a work around to make the Editor AutoResizeHeight, but stop after it gets so big?
  2. Connor
    Connor avatar
    5 posts
    Member since:
    Jun 2009

    Posted 05 Jun 2009 Link to this post

    Well since no one has responded, I ended up figuring how to do it.

    This will handle multiple Edit boxes on a screen.  it does not use the AutoResizeHeight, I put in my own code for that.  

    It will grow with some white space below your text and contract as you delete stuff.  The max that you set it will stop growing and turn on the scroll bar.

    used Jquery on line 69, if you find a javascript way to do that without Jquery then you do not need to include Jquery.
    And if you do come up with the javascript, plz post. The less stuff to include the more likely people forget to add stuff.

    Thanks

    1  
    2 //*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_ 
    3 //HOW TO USE THIS JAVASCRIPT FILE 
    4 //  1. You must also have the Jquery js included 
    5 //  2. You must add this line some where on the page 
    6 //      <span id="max" style="visibility:hidden;">30</span> 
    7 //  3. add attachResizeEvents to the Editor's OnClientLoad or just copy this and put it in the editor Declerarion 
    8 //      OnClientLoad="attachResizeEvents" 
    9 // 
    10 //  If you have all of that then this should run on chrome, firfox, and ie.
    11 // 
    12 //*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_  
    13      
    14      
    15     //the array that keeps track of all the information for the editors 
    16     // format for each element in the array {'id':'test1, 'initialHeight':n, 'editorHeight':n, 'difHeight':n} 
    17     var editorArray = []; 
    18  
    19     //MAX SIZE THAT YOU WANT: Always rows * 17  
    20     // 17 is the number of pixel 
    21     var max = 50 * 17; //17 pixels per line 
    22  
    23     //the function actually called to do the resizeing 
    24     //@arg editor: the current editor to resize 
    25     //@arg index: the index of the editor in the array stuct 
    26     function resizeContentArea(editor, index) { 
    27         var initialHeight = editorArray[index].initialHeight; 
    28         var editorHeight = editorArray[index].editorHeight; 
    29         var difHeight = editorArray[index].difHeight; 
    30          
    31         var oDoc = editor.get_document(); 
    32          
    33         //figure out if we are running in internet Explorer 
    34         var ie = document.all ? true : false
    35          
    36         //var targetHeight = oDoc.documentElement.scrollHeight; 
    37         var targetHeight = ie ? oDoc.body.scrollHeight : oDoc.documentElement.scrollHeight; 
    38          
    39  
    40         //if initail height is -1 this is the first time through, 
    41         //so we need to get the info bro 
    42         if (initialHeight == -1) { 
    43  
    44             initialHeight = parseInt(editor.get_textArea().style.height.replace(/px,*\)*/g, "")); 
    45  
    46             editorHeight = parseInt(editor.get_element().style.height.replace(/px,*\)*/g, "")); 
    47              
    48             difHeight = editorHeight - initialHeight; 
    49         } 
    50  
    51  
    52         if ((targetHeight + difHeight) > initialHeight && (targetHeight + difHeight) < max) { 
    53          
    54             editor.setSize(editor.get_element().style.width.replace(/px,*\)*/g, ""), parseInt( targetHeight + difHeight) ); //FireFox bug, TD does not decrease height 
    55  
    56  
    57         } 
    58          
    59          
    60         //Put everything back into the data structure 
    61         editorArray[index].initialHeight = initialHeight; 
    62         editorArray[index].editorHeight = editorHeight; 
    63         editorArray[index].difHeight = difHeight; 
    64     } 
    65  
    66     function attachResizeEvents(editor, args) { 
    67  
    68         editor.allowTransparency = true
    69         var tempMax = parseInt($("#max").text()); 
    70         if (tempMax) { max = tempMax * 17;} 
    71          
    72         //call it at the begining to make sure everything is in order 
    73          resizeContentArea(editor, getEditorArrayIndex(editor)); 
    74          
    75         //attach the functions to key up 
    76          editor.attachEventHandler("onkeyup"function() { resizeContentArea(editor, getEditorArrayIndex(editor)); }); 
    77      } 
    78  
    79  
    80      //gets the index of the current Editor or puts it in if not already 
    81     //@arg editor: editor to find 
    82      function getEditorArrayIndex(editor) { 
    83       
    84         //get the ID for current editor 
    85          var id = editor.get_id(); 
    86           
    87          //See if it is already in our array of editors 
    88          for (i in editorArray) { 
    89              if (editorArray[i].id = id) { 
    90                  return i; 
    91              } 
    92  
    93          } 
    94          //if it gets here then it is not in the array 
    95          var len = editorArray.length; 
    96          editorArray[len] = { 'id': id, 'initialHeight': -1, 'editorHeight': 0, 'difHeight': 0 } 
    97          return len; 
    98  
    99      } 

  3. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 08 Jun 2009 Link to this post

    Hi Connor,

    I am glad that you implemented a solution for your scenario. I updated your Telerik points for sharing your code with our community.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. Chris Miller
    Chris Miller avatar
    13 posts
    Member since:
    Jun 2006

    Posted 16 May 2011 Link to this post

    Is this now possible with the latest version of radEditor? I love the auto-expand but don't want the editor to expand past say around 600px tall. 

    Thanks,

  5. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 18 May 2011 Link to this post

    Hello Nik,

    The requested feature is not available in the latest version of RadEditor for ASP.NET AJAX, but you can use the Connor's solution to implement it.

    All the best,
    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