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

RadEditor occupying 100% height of a container

7 Answers 542 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Piotr Szmyd
Top achievements
Rank 1
Piotr Szmyd asked on 11 Mar 2008, 12:50 PM
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



7 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 13 Mar 2008, 12:56 PM
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
0
Mark Griebling
Top achievements
Rank 1
answered on 01 May 2008, 05:19 PM
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
0
George
Telerik team
answered on 08 May 2008, 07:40 AM
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
0
Charles Forsyth
Top achievements
Rank 2
answered on 03 Sep 2008, 07:25 AM
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. 
0
Diego
Top achievements
Rank 1
answered on 17 Nov 2008, 03:21 PM
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.
0
Diego
Top achievements
Rank 1
answered on 18 Nov 2008, 05:03 PM
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?


0
Ralf Thietz
Top achievements
Rank 1
answered on 20 Nov 2008, 01:52 PM
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.

Tags
Editor
Asked by
Piotr Szmyd
Top achievements
Rank 1
Answers by
George
Telerik team
Mark Griebling
Top achievements
Rank 1
George
Telerik team
Charles Forsyth
Top achievements
Rank 2
Diego
Top achievements
Rank 1
Ralf Thietz
Top achievements
Rank 1
Share this question
or