Control the size of windows

[Johannes]

I am trying to control the size of my windows. On my development environment, I have quite a large screen, so when the window opens, it never has an issue with automatically sizing the window. However, with other people's screens, the ajax loaded content can make the window resize so that it is outside of the viewport. I want to make sure that this never happens. Here is the angle that I have taken to make this work... unsuccessfully:

I create the window with maxHeight: 80% and add the onWindowMaximize function to the maximize event.

 

function onWindowMaximize(e) {
    var window = $("#" + e.sender.wrapper.context.id).data("kendoWindow");//get window
    //restore to original size
    window.restore();
    window.unbind('maximize', onWindowMaximize)//unbind this method from maximise event
    window.setOptions({
        position:{
            top: window.wrapper.offset().top,
            left: window.wrapper.offset().left,
        },
        height: window.wrapper.height(),
        maxHeight: '100%'
    });
    window.maximize();//maximize window
}

 

The problem with this solution is that when I "restore" the window, it keeps the same width, but the height turns to 100px. I am happy to look into other options, but I really need to make sure that when they window loads, it is no more than 80% of the screen.

[Vessy]

Hi Johannes,

The maxHeight property accepts only integer values in pixels, this is why it defaults to 100px when a percent value is passed. In order to set max height depending on the window's wrapper size, you will need to calculate it manually  in pixels before setting it to the widget;

function onWindowMaximize(e) {
    var window = $("#" + e.sender.wrapper.context.id).data("kendoWindow");//get window
    //restore to original size
    window.restore();
    window.unbind('maximize', onWindowMaximize)//unbind this method from maximise event
    window.setOptions({
        position:{
            top: window.wrapper.offset().top,
            left: window.wrapper.offset().left,
        },
        height: window.wrapper.height(),
        maxHeight:  0.8 * $(window).height(); //e.g.
    });
    window.maximize(); //maximize window
}

Regards,
Vessy
Progress Telerik

[Johannes]

Thanks Vessy!

Had to make a small change as I had my Kendo Window as "window" and I wanted the maxHeight to be the width of the entire viewport.

but after that, works a treat!

[Vessy]

Hi,

You are welcome, Johannes - I am glad my suggestion helped you to achieve the target result.

Regards,
Vessy
Progress Telerik