Client event after maximise/resize

[Matt Cowen]

Is there a way of catching the client side event of "maximized" i.e. running code after a window is maximised or resized for that matter?

Thanks
M

[Shinu]

Hi Matt,

You could attach OnClientCommand to RadWindow and check for CommandName in event handler as shown below.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    <Windows>
        <telerik:RadWindow runat="server" InitialBehavior="None" OnClientCommand="OnClientCommand" NavigateUrl="" VisibleOnPageLoad="True">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

JavaScript:

<script type="text/javascript">
function OnClientCommand(sender, eventArgs)
{
    if(eventArgs.get_commandName()=='Minimize')
    {
        alert('Minimize');
    }
    else if(eventArgs.get_commandName()=='Maximize')
    {
        alert('Maximize');
    }
    else if(eventArgs.get_commandName()=='Restore')
    {
        alert('Restore');
    }
}
</script>

-Shinu.

[Matt Cowen]

Thanks but after the window is restored. All that the code you show does is fire as the window is maximising or resizing.

The problem i have is that maximising the window doesn't make the width and height the size of the viewable screen. I've fixed that with this.

if (eventArgs.get_commandName().toLowerCase() == "maximize") {
                var oWnd = IsUrlOpen(sender._navigateUrl);
                var myWidth = 0, myHeight = 0;
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                }
                oWnd.setSize(myWidth, myHeight);

            }

But on restore the window is restored to the size of the viewable area and not the original size (700 by 550 in my case). I've tried this...

else if (eventArgs.get_commandName().toLowerCase() == "restore") {

//openWindow(sender._navigateUrl);

var oWnd = IsUrlOpen(sender._navigateUrl);

var iWidth = 700;

var iHeight = 550;

oWnd.moveTo(10, 10);

oWnd.setSize(iWidth, iHeight);

}

..but it doesn't have any effect. I am trying to run some code after it has restored in order to resize it to 700 by 550.

Any ideas?

[Fiko]

Hello Matt,

When the RadWindow is maximized, calling the moveTo and setSize functions do not affect the RadWindow object. This behavior is by design and cannot be changed. In your case you could cancel the default Maximize command and resize the window object by using its setSize() function.

if (eventArgs.get_commandName().toLowerCase() == "maximize")
{

    ...............

    eventArgs.set_cancel(true);
    oWnd.moveTo(-10, 0);
    oWnd.setSize(myWidth, myHeight); // this will be applied now
    ..............

Note that in this case the RadWindow will be in non maximized state and double clicking on the title bar will trigger the Maximize command every time, not the Restore one. This being said that if you need to restore the previous state of the window you need to implement a custom code for that.

I hope this helps.

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

[Matt Cowen]

I've ended up using setTimeout in my "restore" conditional and called a procedure that uses moveTo and setSize(700, 550).

Thanks for the pointers.
M