RadEditor occupying 100% height of a container

8 posts, 0 answers
  1. Piotr Szmyd
    Piotr Szmyd avatar
    22 posts
    Member since:
    Jul 2007

    Posted 11 Mar 2008 Link to this post

    Hi,

    Is there any way to make RadEditor occupy 100% height of a RadSplitter pane and resize with it (or with the browser window)?

    I have RadSplitter (with 3 panes - header pane and footer pane with fixed height and middle pane with RadEditor) set to occupy 100% height/width of a browser window. I want RadEditor to stretch/shrink (fill 100% of the middle pane) when user resizes the window (or RadWindow in which the page is loaded).

    Currently, when I set RadEditor to 100% height, the content disappears - I can see only the toolbars.

    Could you please provide me any useful solution (and maybe some simple example) to this situation?

    Regards,
    Piotr



  2. George
    Admin
    George avatar
    298 posts

    Posted 13 Mar 2008 Link to this post

    Hi Piotr Szmyd,

    You can make the editor to run in toggle full-screen mode. Sample code snippet may be:

    <script>  
    function OnClientLoad(editor)  
    {  
       editor.ToggleScreenMode();  
    }  
    </script> 
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">  
    </telerik:RadEditor> 


    Sincerely yours,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 01 May 2008 Link to this post

    I would also like the Editor to resize as the container resizes.  Toggle full screen mode is not a solution for me as the editor is contained in a RadWindow with other controls.  I would like to maximize the RadWindow and have the editor resize as needed.  In this scenerio, my container does resize and the width of the editor changes but the editor's height does not change. 

    Thanks,
    Mark
  5. George
    Admin
    George avatar
    859 posts

    Posted 08 May 2008 Link to this post

    Hi Mark,

    You can easily achieve the desired behavior by using RadWindow's OnClientResize event to get the window's height and width and to set the editor's ones using the editor's setSize() function.

    I hope this helps.

    If you still experience problems achieving this functionality, please open a support ticket and send us your runnable project or a sample one (in which the problem can be observed) and we will do our best to provide a solution as soon as possible.

    Sincerely,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Charles Forsyth
    Charles Forsyth avatar
    47 posts
    Member since:
    Sep 2006

    Posted 03 Sep 2008 Link to this post

    I tried to get this to work but the ToggleScreenMode() method doesn't exist.

    I looked at the documentation here... 
    http://www.telerik.com/help/aspnet-ajax/editoroverview.html
    ... but it wasn't listed there that I could find.

    One thing I noticed was that the other methods listed there were using camelCase naming convention as opposed to PascalCase, so I tried it that way. It turns out toggleScreenMode() worked.

    Hope this helps someone else who stumbles upon this thread. 
  7. Diego
    Diego avatar
    11 posts
    Member since:
    Jun 2008

    Posted 17 Nov 2008 Link to this post

    I tried to use the setSize method but I'm having a problem.
    I open the window the first time and works fine. I close that window. open a new one and i get:
    "can't execute code from freed script".

    this is the code im using. it's run in the page of the radwindow:
     
    function addResizeEvent() 
           { 
                   
                  var oWnd = GetRadWindow(); 
                  oWnd.add_resize(function OnClientResize(source,args) 
                                             { 
                                               // Here the resize code... 
                                               var editor = $find("<%= Editor.ClientID %>"); 
                                               editor.setSize(100,100); // 100 for the sake of simplicity 
                                             }); 
           }     

    Thanks.
  8. Diego
    Diego avatar
    11 posts
    Member since:
    Jun 2008

    Posted 18 Nov 2008 Link to this post

    Ok,,, i have found a workaround.

    Using OnClientResize event in the parent page instead of add_resize.in the child.

    First we declare the resizing function in the child page (there is access to the editor and other window-size dependent controls)
    function resizeEditor(x,y) { 
      var editor = $find("<%= Editor.ClientID %>"); 
      editor.setSize(x, y); 
    }        
    We are going to call this function from the parent:
       function resizeEditor(sender, eventArgs) { 
     
               var bounds = sender.getWindowBounds(); 
               var h = bounds.height; //returns the current height of the RadWindow 
               var w = bounds.width; //returns the current width of the RadWindow 
               sender.get_contentFrame().contentWindow.resizeEditor(Math.max(w - 45, 0), Math.max(h - 105, 0)); 
           } 
      <telerik:RadWindow ID="Editor" ReloadOnShow="true"   Modal="true" Behaviors="Close,Move,Resize" 
                    VisibleStatusbar="false" OnClientResize="resizeEditor"   runat="server" Title="E-Mail Editor"

    And that's all folks... the problem that I'm facing now is to use the maximize even... for some reason the onresize is not called on maximize... and there's no "onmaximize" event (or at least i don't see it)

    Any idea?


  9. Ralf Thietz
    Ralf Thietz avatar
    9 posts
    Member since:
    Jul 2005

    Posted 20 Nov 2008 Link to this post

    Problem is when RadEditor is configured 100% height, the style of DIV and table containing the editor is set to height:100px. I use this workaround: 

     

            Sys.Application.add_load(  
                function() {  
                    $get("<%=RadEditor1.ClientID%>").style.height = "100%";  
                    $get("<%=RadEditor1.ClientID%>Wrapper").style.height = "100%";  
                }  
            ); 


    Works fine, as long as I don't specify a doctype.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017