Keep RadWindow in page center while scrolling the page

5 posts, 2 answers
  1. Roger Hynne
    Roger Hynne avatar
    7 posts
    Member since:
    Oct 2009

    Posted 16 Nov 2015 Link to this post

    Hello

     I want to keep the rad window in the center of the screen even when the user scrolls the page. Problem is that on a page with scroll when the user scrolls the page the window is not moving with the scroll.

    Here is my code

    script type="text/javascript">
            function mb_wysiwyg_ReloadParent_OpenRadWindow(url, reloadPageOnClose, width, height) {
                var wysiwyg_oWnd = GetRadWindowManager().open(url, null); // open window with the reuired parameters.
     
                var wysiwyg_WindowWidth = width;
                var wysiwyg_WindowHeight = height;
     
                if (window.screen.availHeight < 920)
                    wysiwyg_WindowHeight = window.screen.availHeight - 200;
     
                wysiwyg_oWnd.setSize(wysiwyg_WindowWidth, wysiwyg_WindowHeight);
     
                wysiwyg_oWnd.set_modal(true); // open window in center of screen.
                wysiwyg_oWnd.center();
                //wysiwyg_oWnd.maximize()
     
     
                // add the close event on window close.
                if (reloadPageOnClose) {
                    wysiwyg_oWnd.add_close(mb_wysiwyg_RefreshPageOnWindowClose);
                }
     
                return false;
            }
        </script>
     
     <telerik:RadScriptManager ID="mgr" runat="server"></telerik:RadScriptManager>
     
    <telerik:RadWindowManager ID="WinManager" runat="server"></telerik:RadWindowManager>
     
      <asp:button ID="Open" runat="server" Text="Open" OnClientClick="mb_wysiwyg_ReloadParent_OpenRadWindow('http://www.google.com',false,500,500); return false;" />
     

     

     

     

     

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 16 Nov 2015 Link to this post

    Hi,

    You can Pin the RadWindow as shown in Example 2 from this article: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/events/onclientshow.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Roger Hynne
    Roger Hynne avatar
    7 posts
    Member since:
    Oct 2009

    Posted 17 Nov 2015 Link to this post

    Hello Marin,

     I tried the example you gave but it didn't work

    Here I am sending my new java script

    function mb_wysiwyg_ReloadParent_OpenRadWindow(url, reloadPageOnClose, width, height) {
        var wysiwyg_oWnd = GetRadWindowManager().open(url, null); // open window with the reuired parameters.
     
        var wysiwyg_WindowWidth = width;
        var wysiwyg_WindowHeight = height;
     
        if (window.screen.availHeight < 920)
            wysiwyg_WindowHeight = window.screen.availHeight - 200;
     
        wysiwyg_oWnd.setSize(wysiwyg_WindowWidth, wysiwyg_WindowHeight);
     
        wysiwyg_oWnd.set_modal(true); // open window in center of screen.
        wysiwyg_oWnd.center();
        //wysiwyg_oWnd.togglePin();
        //wysiwyg_oWnd.maximize()
     
        // add the close event on window close.
        if (reloadPageOnClose) {
            wysiwyg_oWnd.add_close(mb_wysiwyg_RefreshPageOnWindowClose);
        }
     
        wysiwyg_oWnd.add_show(mb_wysiwyg_RadWindow_ClientShowHandler);
     
        return false;
    }
     
     
    function mb_wysiwyg_RefreshPageOnWindowClose() {
        document.location.href = document.URL;
    }
     
     
    function mb_wysiwyg_RadWindow_ClientShowHandler(sender, args) {
        alert('Window show handler!');
        if (!sender.isPinned()) {
            sender.togglePin();
        }
    }
     

     I am trying to bind a java script handler to be executed when showing a window. We are adding the RadWindowManager dynamically to the page and then using this java script to open the window.

    Just as a reminder, we want to keep the rad window in the center of the page even if the user scrolls the page. 

     

  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 17 Nov 2015 Link to this post

    Hi Roger

    The OnClientShow event fires as soon as the dialog is shown, i.e., as soon as you call the open() method. Thus, if you attach a handler at a later stage, it will only be called if you show the same dialog again.

    You should just add the togglePin() call right after showing the dialog, e.g.:

    var wysiwyg_oWnd = GetRadWindowManager().open(url, null); // open window with the reuired parameters.
     
    var wysiwyg_WindowWidth = width;
    var wysiwyg_WindowHeight = height;
     
    if (window.screen.availHeight < 920)
        wysiwyg_WindowHeight = window.screen.availHeight - 200;
     
    wysiwyg_oWnd.setSize(wysiwyg_WindowWidth, wysiwyg_WindowHeight);
     
    wysiwyg_oWnd.set_modal(true); // open window in center of screen.
    //set_modal(true) will center the dialog by default, so the center() call should not be needed
    //wysiwyg_oWnd.center();
    if (!wysiwyg_oWnd.isPinned()) {
        wysiwyg_oWnd.togglePin();
    }

    As an alternative, depending on how you use that, you can add the OnClientShow handler to the RadWindowManager so all RadWindows it opens will call it.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Roger Hynne
    Roger Hynne avatar
    7 posts
    Member since:
    Oct 2009

    Posted 18 Nov 2015 in reply to Marin Bratanov Link to this post

    Thanks for your solution. I also had the same thought and Fixed the issue in the way as you suggested.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017