Problem with center window after autoSize

14 posts, 0 answers
  1. Jan Mucha
    Jan Mucha avatar
    25 posts
    Member since:
    Aug 2012

    Posted 31 May 2011 Link to this post

    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>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Jun 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jan Mucha
    Jan Mucha avatar
    25 posts
    Member since:
    Aug 2012

    Posted 01 Jun 2011 Link to this post

    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>

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Jan Mucha
    Jan Mucha avatar
    25 posts
    Member since:
    Aug 2012

    Posted 01 Jun 2011 Link to this post

    Thanks you but this solution not working. Resize working correctly but after resize center  not working. :(
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Jan Mucha
    Jan Mucha avatar
    25 posts
    Member since:
    Aug 2012

    Posted 02 Jun 2011 Link to this post

    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">
    <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>
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 03 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Jan Mucha
    Jan Mucha avatar
    25 posts
    Member since:
    Aug 2012

    Posted 07 Jun 2011 Link to this post

    Hi after use latest version all working normally. Thank you
  11. Marian
    Marian avatar
    49 posts
    Member since:
    Sep 2008

    Posted 15 May 2013 Link to this post

    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();
        }
    }
  12. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 15 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Marian
    Marian avatar
    49 posts
    Member since:
    Sep 2008

    Posted 15 May 2013 Link to this post

    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">
     
    <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">
     
    <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>
  14. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 17 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  15. Marian
    Marian avatar
    49 posts
    Member since:
    Sep 2008

    Posted 17 May 2013 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017