Problem with center window after autoSize

[Jan Mucha]

Hi, i have problem with center window after aotusize. I use window for show images. How can center window after resize?

My javascript code:

var previewWinInDemo;
        var imgHolder;
        function pageLoad() {
            //get references to the 2 RadWindows
            previewWinInDemo = $find("<%= PreviewWindowDetail.ClientID %>");
            //get a reference to the image tag in the preview window
            imgHolder = document.getElementById('<%= imageHolder.ClientID %>');
            //add onload event for the image in the preview window
            $addHandler(imgHolder, "load", sizePreviewWindow);
        }
        function sizePreviewWindow() {
            previewWinInDemo.autoSize(true);


        }
        function openWin(imageurl, img) {
            //previewWinInDemo.autoSize(true);
            imgHolder.src = img.src;
            imgHolder.focus();
            //show the window
            previewWinInDemo.show();
            previewWinInDemo.center();
        }

My aspx code:

<telerik:RadWindow ID="PreviewWindowDetail" Skin="Web20" runat="server" VisibleStatusbar="false"
    VisibleTitlebar="true" OffsetElementID="offsetElement" AutoSizeBehaviors="Width, Height"
    AutoSize="true" Behaviors="Close" KeepInScreenBounds="false" Title="Click to close"
    Modal="true" OnClientShow="CloseWidnowAfterModalClick" >
    <ContentTemplate>
        <div onclick="HideWindow();" style="background-color: silver;">
            <asp:Image runat="server" ID="imageHolder" alt="Image holder" Style="cursor: pointer;
                margin: 0px;" ToolTip="Click to close." AlternateText="" />
        </div>
    </ContentTemplate>
</telerik:RadWindow>

[Princy]

Hello Jan,

In order to center the window after resize attach event OnClientResizeEnd and call Center method.

Javascript:

function OnClientResizeEnd(sender)

       window.setTimeout(

          function()
            {

       sender.Center();

          }, 400);

           }


Thanks,
Princy.


[Jan Mucha]

Hi thanks you but function onclientresize is not called. I do not know why. I do not have javascript error.

<script type="text/javascript">
    //<![CDATA[

        var previewWinInDemo;
        var imgHolder;
        function pageLoad() {
            //get references to the 2 RadWindows
            previewWinInDemo = $find("<%= PreviewWindowDetail.ClientID %>");
            previewWinInDemo.add_resizeEnd(OnClientResizeEnd);
            //get a reference to the image tag in the preview window
            imgHolder = document.getElementById('<%= imageHolder.ClientID %>');
            //add onload event for the image in the preview window
            $addHandler(imgHolder, "load", sizePreviewWindow);
        }
        function sizePreviewWindow() {
            previewWinInDemo.autoSize(true);
            previewWinInDemo.add_resizeEnd(OnClientResizeEnd);
        }
        function openWin(imageurl, img) {
            //previewWinInDemo.autoSize(true);
            imgHolder.src = img.src;
            imgHolder.focus();
            //show the window
            previewWinInDemo.show();
            previewWinInDemo.center();
        }
        function HideWindow() {
            //previewWinInDemo.set_modal(false);
            previewWinInDemo.close();
        }

        function ShowWindowDemoLession() {
            $find("<%= DemoLessionWindowDetail.ClientID %>").show();
        }

        function OnClientResizeEnd(sender) {
            alert(15);
            window.setTimeout(
            function () {
                sender.Center();
            }, 400);
            alert(5);
        }
        //]]>
    </script>

<telerik:RadWindow ID="PreviewWindowDetail" Skin="Web20" runat="server" VisibleStatusbar="false"
            VisibleTitlebar="true" OffsetElementID="offsetElement" AutoSizeBehaviors="Width, Height"
            AutoSize="true" Behaviors="Close" KeepInScreenBounds="false" Title="Click to close"
            Modal="true" OnClientShow="CloseWidnowAfterModalClick" OnClientResizeEnd="OnClientResizeEnd"  >
            <ContentTemplate>
                <div onclick="HideWindow();" style="background-color: silver;">
                    <asp:Image runat="server" ID="imageHolder" alt="Image holder" Style="cursor: pointer;
                        margin: 0px;" ToolTip="Click to close." AlternateText="" />
                </div>
            </ContentTemplate>
        </telerik:RadWindow>

[Marin Bratanov]

Hi Jan,

The OnClientResizeEnd event is raised only after the user resizes the window. The OnClientAutoSizeEnd is the event fired after the autosize has finished.

What I would suggest, though, is to call the center() method immediately after the resizing and avoid the unnecessary event handlers:

function sizePreviewWindow()
{
    previewWinInDemo.autoSize(true);
    previewWinInDemo.center();
}

All the best,
Marin
the Telerik team

[Jan Mucha]

Thanks you but this solution not working. Resize working correctly but after resize center  not working. :(

[Marin Bratanov]

Hi Jan,

Please accept my apologies for the mistake. I was working with a wrong mock-up of your code. You can find attached my test page attached. Here is a video from my experiment: http://screencast.com/t/9GgACmGZIJj. I hope that this is the desired behavior.

Note that I have stripped down the unnecessary functions from the code you provided.

I hope my reply was helpful.

Regards,
Marin
the Telerik team

[Jan Mucha]

Hi, I'm probably pretty clear neposal seam problem. I need to open more files with different sizes. I edited your project and to simulate my problem. Please just add more files with different sizes in the images folder. My goal is always to open the image centered on screen. Thank you in advance.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <script type="text/javascript">
    //<![CDATA[

        var previewWinInDemo;
        var imgHolder;
        function pageLoad()
        {
            //get references to the 2 RadWindows
            previewWinInDemo = $find("<%= PreviewWindowDetail.ClientID %>");
            //get a reference to the image tag in the preview window
            imgHolder = document.getElementById('<%= imageHolder.ClientID %>');
            //add onload event for the image in the preview window
            $addHandler(imgHolder, "load", sizePreviewWindow);
        }

        function sizePreviewWindow()
        {
            previewWinInDemo.autoSize(true);
        }

        function OnClientAutoSizeEnd(oWnd, args) {
            alert('OnClientAutoSizeEnd');//is not called!!!!!!!!
            oWnd.center();
        }

        function openWin(imageurl)//, img)
        {
        //I altered this function as I do not know the way you call it
            imgHolder.src = imageurl//img.src;
            imgHolder.focus();
            //show the window
            previewWinInDemo.show();
          //  previewWinInDemo.center(); //The window opens centered by default, by the way
        }

        function HideWindow()
        {
            previewWinInDemo.close();
        }

        function CloseWidnowAfterModalClick(sender, args)
        {
            var overlay = $telerik.getElementByClassName(document, "TelerikModalOverlay");
            if (overlay != null) {
                overlay.onclick = function () {
                    sender.close();
                }
            }
        }
        //]]>
    </script>
    <telerik:RadWindow ID="PreviewWindowDetail" Skin="Web20" runat="server" VisibleStatusbar="false"
        VisibleTitlebar="true" OffsetElementID="offsetElement" AutoSizeBehaviors="Width, Height"
        AutoSize="true" Behaviors="Close" KeepInScreenBounds="false" Title="Click to close"
        Modal="true" OnClientShow="CloseWidnowAfterModalClick" OnClientAutoSizeEnd="OnClientAutoSizeEnd">
        <ContentTemplate>
            <div onclick="HideWindow();" style="background-color: silver;">
                <asp:Image runat="server" ID="imageHolder" alt="Image holder" Style="cursor: pointer;
                    margin: 0px;" ToolTip="Click to close." AlternateText="" />
            </div>
        </ContentTemplate>
    </telerik:RadWindow>
    <asp:Image ID="Img1" runat="server" ImageUrl="Images/1.png" OnClick="openWin('Images/1.png'); return false;" Width="170px" />
    <asp:Image ID="Image1" runat="server" ImageUrl="Images/2.png" OnClick="openWin('Images/2.png'); return false;" Width="170px" />
    <asp:Image ID="Image2" runat="server" ImageUrl="Images/3.png" OnClick="openWin('Images/3.png'); return false;" Width="170px" />
    </form>
</body>
</html>

[Marin Bratanov]

Hello Jan,

The code seems to work as expected on my end as you can see in the video from my experiment: http://screencast.com/t/sa1Z4jgQ7J9N. Please check the following points:

• Whether you are experiencing issues only under certain browsers and browser versions. If so under which?
• That you are using the latest version of our controls.
• That there are no JavaScript error on the page elsewhere since that would break the functionality.
• That you are using the exact page you sent me, since on my end it seems to be working fine

If the above does not help you resolve the issue I suggest that you open a support ticket and send us a fully runnable project that isolates this case along with detailed reproduction steps and perhaps a screen capture demonstrating the approach. This way we will be able to work directly with your code and provide a more to the point answer.

All the best,
Marin
the Telerik team

[Jan Mucha]

Hi after use latest version all working normally. Thank you

[Marian]

Hi to all,
I also have a problem with autosize. My scenario uses a single RadWindow with the form. After the user's activity I need to resize this window to ensure sufficient space for child radwindow. After closing of the child windows I need to autosize hostwindow to its the original size. Scenario works only if the child window Modal = "false". For Modal = "true" autosize does not work.
Any Idea?
-Marian

// Open Child RadWindow
function lbAddCustomer_ClientClicked(sender, eventArgs) {
    // ....
    ResizeHostWindow(400, 500);
    window.radopen("EditCustomer.aspx?GetInserted=True", "rwEditCustomer");
    return false;
}
// Resize host RadWindow to its original size
function rwEditCustomer_ClientClose(sender) {
     // ....
     ResizeHostWindow(0, 0);
}
// Resize RadWindow
function ResizeHostWindow(width, height) {
    var hostWindow = GetRadWindow();
    if (hostWindow != null) {
        if (width <= 0 || height <= 0) {
            hostWindow.autoSize();
        }
        else {
            width = Math.max(hostWindow.get_width(), width);
            height = Math.max(hostWindow.get_height(), height);
            hostWindow.setSize(width, height);
        }
        hostWindow.center();
    }
}

[Marin Bratanov]

Hi Marian,

This seems to work fine with me with the following code:
on the main page:

<telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="content.aspx" VisibleOnPageLoad="true">
    </telerik:RadWindow>

on the content page:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        <Windows>
            <telerik:RadWindow ID="rwEditCustomer" runat="server" OnClientClose="rwEditCustomer_ClientClose"
                Modal="true">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <asp:Button ID="Button1" Text="open second popup" OnClientClick="lbAddCustomer_ClientClicked(); return false;"
        runat="server" />
    <div style="width: 600px; height: 600px; background-color: Yellow;">
    </div>
    <script type="text/javascript">
        // Open Child RadWindow
        function lbAddCustomer_ClientClicked(sender, eventArgs)
        {
            // ....
            ResizeHostWindow(400, 500);
            window.radopen("EditCustomer.aspx?GetInserted=True", "rwEditCustomer");
            return false;
        }
        // Resize host RadWindow to its original size
        function rwEditCustomer_ClientClose(sender)
        {
            // ....
            ResizeHostWindow(0, 0);
        }
        // Resize RadWindow
        function ResizeHostWindow(width, height)
        {
            var hostWindow = GetRadWindow();
            if (hostWindow != null)
            {
                if (width <= 0 || height <= 0)
                {
                    hostWindow.autoSize();
                }
                else
                {
                    width = Math.max(hostWindow.get_width(), width);
                    height = Math.max(hostWindow.get_height(), height);
                    hostWindow.setSize(width, height);
                }
                hostWindow.center();
            }
        }

        function GetRadWindow()
        {
            var oWindow = null;
            if (window.radWindow) oWindow = window.radWindow;
            else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
            return oWindow;
        }
    </script>

You can also find attached a video from my test as a reference for the behavior on my end.

What I can suggest at this point is making sure there isn't a JavaScript error somewhere in your other code. Another thing you can try is adding a timeour around autoSize(), e.g.:

setTimeout(function ()
{
    hostWindow.autoSize();
}, 0);

and you can also try increasing this timeout if 0 does not help.

Kind regards,
Marin Bratanov
the Telerik team

[Marian]

Hello Marin,
thank you very much for your quick answer. I think that problem will be (as usually) in different behavior of browsers.
I have prepared more complex, but simple example where I want to show that is difference between Modal and Not Modal RadWindow in IE8 and IE9. Chrome works fine for my example, but IE not.
Thanks also for your recommendation about setTimeOut.
-Marian

<%-- MAIN PAGE --%>

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.UI.RadAjaxPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>RWResize Test</title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadSM" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAM" runat="server" />
        <telerik:RadWindowManager ID="RadWM" runat="server" Animation="None" CenterIfModal="true" AutoSize="true" VisibleStatusbar="false" ReloadOnShow="true" ShowContentDuringLoad="false">
            <Windows>
                <telerik:RadWindow ID="rwEditRequest" runat="server" Modal="true" VisibleOnPageLoad="true" NavigateUrl="Content.aspx" />
            </Windows>
        </telerik:RadWindowManager>
    </form>
</body>
</html>

<%-- CONTENT PAGE --%>

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.UI.RadAjaxPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>hostWindow Content</title>
    <script type="text/javascript">
        // Open Child RadWindow
        function lbAddCustomer_ClientClicked(sender, eventArgs) {
            ResizeHostWindow(300, 500);
            window.radopen("http://www.radola.sk/OStrankach", "rwAddCustomer");
            return false;
        }
        function lbAddMachine_ClientClicked(sender, eventArgs) {
            ResizeHostWindow(300, 500);
            window.radopen("http://www.radola.sk/OStrankach", "rwAddMachine");
            return false;
        }
        // Resize host RadWindow to its original size
        function rwAddCustomer_ClientClose(sender) {
            ResizeHostWindow(0, 0);
        }
        function rwAddMachine_ClientClose(sender) {
            ResizeHostWindow(0, 0);
        }
        // Resize RadWindow
        function ResizeHostWindow(width, height) {
            var hostWindow = GetRadWindow();
            if (hostWindow != null) {
                if (width <= 0 || height <= 0) {
                    setTimeout(function () {
                        hostWindow.autoSize();
                    }, 0);
                }
                else {
                    width = Math.max(hostWindow.get_width(), width);
                    height = Math.max(hostWindow.get_height(), height);
                    hostWindow.setSize(width, height);
                }
                hostWindow.center();
            }
        }
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow) oWindow = window.radWindow;
            else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
            return oWindow;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadSM" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAM" runat="server" />
        <telerik:RadWindowManager ID="RadWM" runat="server" Animation="None" CenterIfModal="true" AutoSize="true" VisibleStatusbar="false" ReloadOnShow="true" ShowContentDuringLoad="false">
            <Windows>
                <telerik:RadWindow ID="rwAddCustomer" runat="server" Modal="true" OnClientClose="rwAddCustomer_ClientClose"/>
                <telerik:RadWindow ID="rwAddMachine" runat="server" Modal="false" OnClientClose="rwAddMachine_ClientClose"/>
            </Windows>
        </telerik:RadWindowManager>
        <div>
            <table>
                <tr>
                    <td style="white-space:nowrap">
                        Click to open Modal Dialog
                    </td>
                    <td>
                        <telerik:RadButton ID="lbAddCustomer" runat="server" AutoPostBack="false" Text="Click" OnClientClicked="lbAddCustomer_ClientClicked" />
                    </td>
                </tr>
                <tr>
                    <td style="white-space:nowrap">
                        Click to open Modeless Dialog
                    </td>
                    <td>
                        <telerik:RadButton ID="lbAddMachine" runat="server" AutoPostBack="false" Text="Click" OnClientClicked="lbAddMachine_ClientClicked" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="font-size:x-small">
                        This RadWindow should be autosized after closing nested dialog.
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

[Marin Bratanov]

Hi Marian,

Thank you for the sample. Have you tried increasing the timeout as I suggested in my previous post? At this point my guess is that IE has not managed to hide the modal background and recalculate the dimensions at the point when autoSize() is called and trying to give it 10ms more worked on my end (a short video is attached). You can increase it further to provide more time for slower machines. Even 200ms would hardly be noticeable for the human being, while they are plenty of time for the machine.


Kind regards,
Marin Bratanov
the Telerik team

[Marian]

Hi Marin,
that's goal :-)
thank you very much for your assistance. Yes, I tried to set timemeout in range 0-30 ms without success.
Now I set 50 ms and IE works as well as Chrome.
thanks again
-Marian