Issue with opening in the center with dynamic height/width

[Jeremy]

Well like everyone, I'm trying to get my window to open in the center the first time it's loaded. 

Initially, I was completely confused as to why the window wasn't opening int he center since I had copied the code exactly. 

function ShowKendoWindow(link) {

        var title = link.getAttribute("WindowCaption");

        var url = link.getAttribute("WindowURL");

        var win = $(".modal-window");

        if (!win.data("kendoWindow")) {

            // window not yet initialized

            win.kendoWindow({

                animation: {

                    open: {

                        effects: { fadeIn: {} },

                        duration: 200,

                        show: true

                    },

                    close: {

                        effects: { fadeOut: {} },

                        duration: 200,

                        hide: true

                    }

                },

                content: url,

                title: title,

                draggable: true,

                modal: true,

                resizable: false,

            }).data("kendoWindow").center().open();

        }

        else {

            // reopening window

            win.data("kendoWindow")

            .refresh(url) // request the URL via AJAX

            .title(title)          

            .center().open() // open the window;

        }

        event.preventDefault();

    }

    

So, what I realized is happening is that the window loads in the center while it's waiting for the content to load via ajax. Once it loads via ajax, it doesn't move the window to the center, it expands from the top left corner to fit the content of the page that it's loading.

Now what we've done( and the reason we aren't using a fixed height/width) is that we have have one function we add to the click so that we can load all kinds of different content in there and we don't have to worry about the window looking lost in a big open div or having scrolling content. 

So, my question, is there any way to get the window to load AFTER the content loads. Or is there some other way tot get it to center itself again after the content loads? This isn't a huge deal, but it's something we'd definitely like to fix.

I've attached some screen shots for you to see what is happening.

Thanks in advance for any help.

[Dimo]

Hello Jeremy,

In your case you case use the Window's refresh method to center the widget once its content is loaded:

window.kendoWindow({
    refresh: function() {this.center();}
});

Regards,
Dimo
the Telerik team

[Jeremy]

Worked like a charm. thank you sir.

Here's my code in case anyone else is looking to do the same.

function ShowKendoWindow(link) {

        var title = link.getAttribute("WindowCaption");

        var url = link.getAttribute("WindowURL");

        var win = $(".modal-window");

        if (!win.data("kendoWindow")) {

            // window not yet initialized

            win.kendoWindow({

                animation: {

                    open: {

                        effects: { fadeIn: {} },

                        duration: 200,

                        show: true

                    },

                    close: {

                        effects: { fadeOut: {} },

                        duration: 200,

                        hide: true

                    }

                },

                content: url,

                title: title,

                draggable: true,

                modal: true,

                resizable: false,

                refresh: function() {this.center();}

            }).data("kendoWindow").center().open();

            event.preventDefault();

        }

        else {

            // reopening window

            win.data("kendoWindow")

            .refresh(url) // request the URL via AJAX

            .title(title)          

            .center().open() // open the window;

        }

        event.preventDefault();

    }

[Majid]

In my case, though, I cannot initialize the window for the first time with a url, because I load dynamic content into the window using refresh method, and each time the content can have a different height. (I have not specified a fixed height for my window)
Also, when I put an alert inside either activate or refresh event handlers, I see the alert popping up just after the window caption (header) has been rendered, but before rendering the body and contents of the window.

function onRefresh()
{
alert('hi');
this.center();
}

Therefore the centering action does not happen after the dynamic content has been loaded. The very first time you open the window, it's caption shows centred, but not the whole window. Now, if you drag the window and manually center it, from that point on for the subsequent openings, it will open at the right place. 

Any suggestions?

[Dimo]

Hi Majid,

The refresh event of the Window should be fired after the load event of the Window's iframe. If this is not the case, you may be using an older Kendo UI version - try upgrading.

If iframe is not used (iframe:false setting or the Window content URL is in the same domain), then the refresh event is fired in the success handler of the $.ajax method, which fetches the new content.

All the best,
Dimo
the Telerik team

[Majid]

Hi Dimo.

Thank you for your quick response.
The version I'm using is "Kendo UI Complete v2012.2.723" which probably is your latest internal build.

I am not using iFrame and I load urls from the same domain into the window.

I know that the refresh method of kendo window exposes 4 parameters; url, data, type, and template. How can I intercept the success handler of the related $.ajax method? 
Moreover, does the success handler of $.ajax method necessarily fire after the rendering of window has been completed, or does it fire before that?

Thank you,
Majid

[Dimo]

Hello Majid,

When not using an iframe, the refresh event is fired from the success event handler of the $.ajax method. You can see this in the source code of the Window, in the _ajaxRequest method. There you will also see that the refresh event is fired after the Window content has been rendered.

        _ajaxRequest: function (options) {

// .......

            $.ajax(

// ..............

                success: proxy(function (data, textStatus) {
                    if (contentTemplate) {
                        data = template(contentTemplate)(data || {});
                    }

                    that.element.html(data);

                    that.trigger(REFRESH);
                }, that)
// ...............
        }

Please see the attached video, which demonstrates the Window behavior when using the code below.

HTML

<!-- Window HTML -->
<div id="window"></div>

<!-- open button -->
<span id="undo" style="display:none" class="k-group">Click here to open the window.</span>

JS

$(document).ready(function() {
    var window = $("#window"),
        undo = $("#undo")
                .bind("click", function() {
                    window.data("kendoWindow").open();
                    undo.hide();
                });

    var onClose = function() {
        undo.show();
    }

    if (!window.data("kendoWindow")) {
        window.kendoWindow({
            width: "615px",
            title: "Rams's Ten Principles of Good Design",
            content: "rtl.html",
            close: onClose,
            actions: ["refresh", "close"],
            refresh: function(){this.center();}
        });
    }

});

Ajax content

@{
 Layout = "";
 }

@{
    var d = DateTime.Now.ToLongTimeString();
    var s = DateTime.Now.Second;
}

@(d)

@{

if (DateTime.Now.Second % 2 == 0)
{
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
}

}

Regards,
Dimo
the Telerik team

[Majid]

Thank you so much Dimo. Very useful information.

Have a wonderful day,
Majid