[Solved] Editor dialogs larger than enclosing RadWindow

[Andy]

When I use a RadEditor inside a RadWindow, then clicking the 'W3C' button (for example) opens a modal dialog window inside the RadWindow. When the enclosing RadWindow is fairly small (low resolution monitor), the W3C dialog window dimensions are larger than those of the enclosing RadWindow. The dialog window cannot then be closed because its top bar is outside the visible area of the RadWindow. Maximising the enclosing RadWindow does not bring the dialog window back into view, the top bar of the dialog window remains 'off-screen'.

Is there any way to force modal dialogs inside rad-windows to always open with dimensions that fit inside that RadWindow? I have tried using 'KeepInScreenBounds' but it does not work, as it seems to keep within the browser window, rather than the enclosing frame.

[Rumen]

Hi Andy,

Please, find attached a sample example which demonstrates how to use the autoSize() method of RadWindow to achieve your scenario.

Regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy]

Hi Rumen,

Many thanks for that. It was very useful but not quite what I was looking for, as I did not want the RadWindow to re-size. I wanted the dialog to re-size instead.

Just for your interest, I have used your example to produce this code, which does what I was looking for. This code re-sizes the dialog to 80% of the RadWindow and opens it in the centre of the RadWindow, leaving the dimensions of the radwindow unaltered. It also allows the dialog to be re-sized.

            //When a dialog opens.
            function OnClientCommandExecuted()
            {
               //Get a reference to the dialog.
               var wnd = Telerik.Web.UI.RadWindowController.get_activeWindow();

               //Get reference to parent RadWindow and its bounds.
               var parentWnd = GetRadWindow();
               var bounds = parentWnd.getWindowBounds();

               //Calculate the dimensions of the dialog, to be 80% of the size of the parent RadWindow.
               var dHeight = bounds.height * 0.80;
               var dWidth = bounds.height * 0.80;

               //Re-size the dialog and position it in the centre of the parent RadWindow.

               wnd.moveTo($(window).scrollLeft() + (bounds.width - dWidth) / 2, $(window).scrollTop() + (bounds.height - dHeight) / 2);
               wnd.set_width(dWidth);
               wnd.set_height(dHeight);

               //Allow the dialog to be resized, moved or closed.
               wnd.set_behaviors(
                    Telerik.Web.UI.WindowBehaviors.Resize +
                    Telerik.Web.UI.WindowBehaviors.Move +
                    Telerik.Web.UI.WindowBehaviors.Close
               );
            }

Many thanks again for your help,

Andy

[Andy]

I am having some problems with this code that I just posted, please can you help.

1) I am using EditorToolbarMode of 'PageTop' and, when the editor gets the focus for the first time, the toolbar switches on OK with the correct dimensions.
2) I then select W3C and the dialog appears correctly.
3) I close the dialog.
4) Then select ABC on the toolbar.
5) The toolbar then gets re-sized to be 80% of the enclosing RadWindow.

It seems that the 'OnClientCommandExecuted' event sometimes fires when the editor toolbar switches on or gets the focus.

Is there any way to prevent this script from running on the toolbar, so that only the dialogs get re-sized?

Andy

[Andy]

I resolved this problem myself as follows:

//When a dialog opens.

function OnClientCommandExecuted(editor, args){

if (args.get_commandName() !== 'AjaxSpellCheck'){

//Get a reference to the dialog.

var wnd = Telerik.Web.UI.RadWindowController.get_activeWindow();

//Get reference to parent RadWindow and its bounds.

var parentWnd = GetRadWindow();

var bounds = parentWnd.getWindowBounds();

//Calculate the dimensions of the dialog, to be 80% of the size of the parent RadWindow.

var dHeight = bounds.height * 0.60;

var dWidth = bounds.height * 0.80;

//Re-size the dialog and position it in the centre of the parent RadWindow.

wnd.moveTo($(window).scrollLeft() + (bounds.width - dWidth) / 2, $(window).scrollTop() + (bounds.height - dHeight) / 2);

wnd.set_width(dWidth);

wnd.set_height(dHeight);

//Allow the dialog to be resized, moved or closed.

wnd.set_behaviors(

Telerik.Web.UI.WindowBehaviors.Resize +

Telerik.Web.UI.WindowBehaviors.Move +

Telerik.Web.UI.WindowBehaviors.Close

);

}

}

[Andy]

No. It is still not working!

It seems that 'var wnd = Telerik.Web.UI.RadWindowController.get_activeWindow()' sometimes holds a pointer to the wrong window object. It returns the toolbar window, instead of the dialog window. This seems to happen when a dialog is opened/closed and then another dialog is opened closed, e.g. W3C followed by Track Changes. The problem is worse in Firefox.

Andy

[Rumen]

Hello Andy,

Thank you for the provided details and sample source.

Yes, we were able to reproduce the problem, but it is an expected behavior in this scenario.

By design. when you open the window the focus is returned back to the toolbar. For that reason the active RadWindow becomes this that holds the toolbar.

To fix the problem get a reference to the dialog and check whether it is actually the toolbar window as it is shown below:

//When a dialog opens.
function OnClientCommandExecuted(editor, args){
   if (args.get_commandName() !== 'AjaxSpellCheck'){

       //TELERIK Get a reference to the dialog and check whether it is actually the toolbar window
       var toolbarWin = editor.get_toolAdapter().get_window();
       var wnd = Telerik.Web.UI.RadWindowController.get_activeWindow();
       if(wnd === toolbarWin) return;

       //Get reference to parent RadWindow and its bounds.
       var parentWnd = GetRadWindow();
       var bounds = parentWnd.getWindowBounds();

       //Calculate the dimensions of the dialog, to be 80% of the size of the parent RadWindow.
       var dHeight = bounds.height * 0.60;
       var dWidth = bounds.height * 0.80;

       //Re-size the dialog and position it in the centre of the parent RadWindow.
       wnd.moveTo($telerik.$(window).scrollLeft() + (bounds.width - dWidth) / 2, $telerik.$(window).scrollTop() + (bounds.height - dHeight) / 2);
       wnd.set_width(dWidth);
       wnd.set_height(dHeight);
       //Allow the dialog to be resized, moved or closed.
       wnd.set_behaviors(
            Telerik.Web.UI.WindowBehaviors.Resize +
            Telerik.Web.UI.WindowBehaviors.Move +
            Telerik.Web.UI.WindowBehaviors.Close
       );
   }
}

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.