How to show child radwindow on its parent radwindow manually ?

2 posts, 0 answers
  1. Henshi
    Henshi avatar
    2 posts
    Member since:
    Oct 2015

    Posted 06 Oct 2015 Link to this post

    Hi All,

    I am creating two radwindow dialogs: a parent and its child.
    Parent radwindow has size 1082x630

    Child radwindow has size 1500x900

    On parent radwindow dialog, when I click on button "Show Child Dialog", its child radwindow will be shown.

    The problem here is the size of child dialog larger than its parent. So, I want to resize the size of child dialog and show it in the center of its parent dialog.

    And here is my code in Javascript that I use for resizing child dialog manually. To center child dialog, I also use childRadWindow.left and childRadWindow.top . BUT, it does not work as my expected. The child dialog does not place in the center of its parent.

    Please reference my expected, actual images and my code to get the problem.

    My expected result: https://drive.google.com/file/d/0B7thkzS9kbhkY1ZMcW9LNGdCZ0E/view?usp=sharing

    Actual result: https://drive.google.com/file/d/0B7thkzS9kbhkLU9nLVA2LVU0TDg/view?usp=sharing 

    Here is my code to resize child dialog manually. I put it on child dialog *.aspx   

    <script type="text/javascript">
         $(document).ready(function () {
             resizeRWndDialog();
         });       
    </script>
    function resizeRWndDialog() {
        var radWindows = [];
        var radWindow = GetRadWindow();
        while (true) {
            if (radWindow != undefined && radWindow != null) {
                radWindows.push(radWindow._popupElement);
                radWindow = radWindow.BrowserWindow.GetRadWindow();
            } else {
                break;
            }
        }
        var numsOfRadWindow = radWindows.length - 1;
        if (numsOfRadWindow > 0) {
            for (var i = numsOfRadWindow; i > 0; i--) {
                var parentWindow = radWindows[i];
                var parentWidth = parentWindow.clientWidth;   //parentWidth =1082
                var parentHeight = parentWindow.clientHeight; //parentHeight = 630
     
                var chidWindow = radWindows[i - 1];
                var childWidth = chidWindow.clientWidth;    //childWidth = 1500
                var childHeight = chidWindow.clientHeight;  //childHeight = 900
     
                var rateMinWidth = 0,
                    rateMinHeight = 0,
                    rateMaxWidth = 0,
                    rateMaxHeight = 0;
     
                if (chidWindow.style.minWidth != "") {
                    rateMinWidth = parseInt(chidWindow.style.minWidth) / childWidth;
                }
     
                if (chidWindow.style.minHeight != "") {
                    rateMinHeight = parseInt(chidWindow.style.minHeight) / childHeight;
                }
     
                if (chidWindow.style.maxWidth != "") {
                    rateMaxWidth = parseInt(chidWindow.style.maxWidth) / childWidth;
                }
     
                if (chidWindow.style.maxHeight != "") {
                    rateMaxHeight = parseInt(chidWindow.style.maxHeight) / childHeight;
                }
     
                if ((parentWidth - 40) > 0 && childWidth >= parentWidth - 40) {
                    childWidth = parentWidth - 40;    //parentWidth = 1082, childWidth = 1042
                }
     
                if ((parentHeight - 80) > 0 && childHeight >= parentHeight - 80) {
                    childHeight = parentHeight - 80;    //parentHeight = 630, childHeight = 550
                }
     
                setSizeRWndDialog(chidWindow.getElementsByClassName("rwTable")[0], rateMinWidth * childWidth, rateMinHeight * childHeight, rateMaxWidth * childWidth, rateMaxHeight * childHeight, childWidth, childHeight);
                setSizeRWndDialog(chidWindow, rateMinWidth * childWidth, rateMinHeight * childHeight, rateMaxWidth * childWidth, rateMaxHeight * childHeight, childWidth, childHeight);
     
                chidWindow.left = Math.round((parentWidth - childWidth) / 2, 0) + "px";
                chidWindow.top = Math.round((parentHeight - childHeight) / 2, 0) + "px";
                chidWindow.focus();
                radWindows[i - 1] = chidWindow;
            }
        }
    }
     
    function setSizeRWndDialog(element, minWidth, minHeight, maxWidth, maxHeight, width, height) {
        if (minWidth != 0 && minHeight != 0) {
            element.style.minWidth = minWidth + "px";
            element.style.minHeight = minHeight + "px";
        }
     
        if (maxWidth != 0 && maxHeight != 0) {
            element.style.maxWidth = maxWidth + "px";
            element.style.maxHeight = maxHeight + "px";
        } else {
            element.style.maxWidth = width + "px";
            element.style.maxHeight = height + "px";
        }
     
        element.style.width = width + "px";
        element.style.height = height + "px";
    }

  2. Henshi
    Henshi avatar
    2 posts
    Member since:
    Oct 2015

    Posted 07 Oct 2015 Link to this post

    I solved the problem myself, guys. I just added one more line at the end of the resizeRWndDialog() as the snippet code below:

    function resizeRWndDialog() {
        //.........
        if (numsOfRadWindow > 0) {
            //...........
        }
        GetRadWindow().center(); // >> Just use this line
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top