RadEditor occupying 100% height of a container

[Piotr Szmyd]

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

[George]

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

[Mark Griebling]

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

[George]

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

[Charles Forsyth]

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. 

[Diego]

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.

[Diego]

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?

[Ralf Thietz]

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.