[Solved] How to exit full screen mode

[Steve Y]

Hi,

I have implemented two buttons on the toolbar. A save & close and a cancel. The editor is in a tabstrip which is in a grid. The editor starts when the grid is put into edit mode. The buttons save the edited html to a database and exit the grid's edit mode or cancel edit mode. All this works fine.

If a user toggles full screen mode, everything works as expected i.e. the screen can be toggled back and forth. If a user clicks the save or cancel buttons while not in full screen mode, the grid exits editmode and the screen paints correctly. However, when a user is in full-screen mode and they click save or cancel, the grid exits edit mode as expected but the screen is left in a weird semi-full screen state (i.e. the grid now takes up full width and other items are partially on screen and partially off-screen but there are no scroll bars.

So. My questions are:

1. In the short term, how can I exit full screen mode programatically when either save or cancel are clicked.

2. Shouldn't the editor automatically exit full screen mode when it's finished?

Thanks, Steve

[Rumen]

Hi Steve,

You can achieve your goal by attaching to the OnClientCommandExecuting event and checking whether the editor is placed in FullScreen mode and store it in a global bool variable. After that in the OnClientSubmit event of RadEditor check whether the editor is placed in full screen mode using the global variable value and set it in normal mode by executing editor.fire("ToggleScreenMode"); when submitting the content, e.g.

 <script type="text/javascript">
 var fullscreen;

 function OnClientCommandExecuting(editor, args)
 {
   var commandName = args.get_commandName();
   if (commandName == "ToggleScreenMode")
   {
         if (!editor.isFullScreen())
         {
            fullscreen = true;
         }
   }
 }

 function OnClientSubmit(editor, args)
 {
   if (fullscreen == true)
   {
       editor.fire("ToggleScreenMode");
   }
 }
 </script>
<telerik:RadEditor id="RadEditor1" Runat="server" OnClientCommandExecuting="OnClientCommandExecuting" OnClientSubmit="OnClientSubmit"></telerik:RadEditor>

Greetings,
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.

[Steve Y]

Thanks for the guidance Rumen. I've got it working perfectly.

I've simplified it down a little and just use the following javascript given the screen toggle state is returned to me using editor.isFullScreen() so I don't have to remember it myself.

function reFront_ClientSubmit(editor, args)
    {
        if (editor.isFullScreen() == true) editor.fire("ToggleScreenMode");
    }

I have a couple of observations.

1. Prior to the first screen mode toggle, editor.isFullScreen() returns undefined. Then on the first toggle is returns true as expected and if you then exit full screen mode it will return false. Shouldn't it return false instead of undefined?

2. When I click on my save or cancel button, the ClientSubmit function is called twice. Do you know why this is?

Finally. Perhaps this should be a standard option on editor close. To return the screen to the state it was at the start of the editing session?

Thanks for your help,
Steve

[Rumen]

Hi Steve,

Straight to the points:

1. I was able to reproduce the undefined issue and reported it to our developers. We will try to fix it for one of the next hotfixes.
2. I was not able to reproduce the second problem and for your convenience I have attached a video demonstrating my test.

Best wishes,
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.

[Rumen]

This is quick follow-up!

Our lead developer explained me that the first issue is not a bug but it is by design.

The if (editor.isFullScreen()) statement returns either true or false/undefined as a value.

Sincerely,
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.