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

Issue with opening in the center with dynamic height/width

7 Answers 1024 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 29 Feb 2012, 01:38 AM
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.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 Feb 2012, 10:44 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeremy
Top achievements
Rank 1
answered on 29 Feb 2012, 05:01 PM
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();
    }
0
Majid
Top achievements
Rank 1
answered on 13 Sep 2012, 02:18 PM
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?
0
Dimo
Telerik team
answered on 13 Sep 2012, 02:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Majid
Top achievements
Rank 1
answered on 13 Sep 2012, 05:13 PM
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
0
Dimo
Telerik team
answered on 14 Sep 2012, 12:26 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Majid
Top achievements
Rank 1
answered on 14 Sep 2012, 02:08 PM
Thank you so much Dimo. Very useful information.

Have a wonderful day,
Majid 
Tags
Window
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jeremy
Top achievements
Rank 1
Majid
Top achievements
Rank 1
Share this question
or