This is a migrated thread and some comments may be shown as answers.

How to show child radwindow on its parent radwindow manually ?

1 Answer 66 Views
Window
This is a migrated thread and some comments may be shown as answers.
Henshi
Top achievements
Rank 1
Henshi asked on 07 Oct 2015, 03:18 AM

Hi All,

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

Child has size 1500x900

On parent dialog, when I click on button "Show Child Dialog", its child 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 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 *.   

<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";
}

1 Answer, 1 is accepted

Sort by
0
Henshi
Top achievements
Rank 1
answered on 07 Oct 2015, 03:19 PM

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
}

Tags
Window
Asked by
Henshi
Top achievements
Rank 1
Answers by
Henshi
Top achievements
Rank 1
Share this question
or