Using KendoUI to display a popup window, I've noticed that if I reuse an existing window by calling refresh it briefly displays the old content until the AJAX request pletes.

My code:

function clickHandler(evt) {
    evt.preventDefault();

    var dta=this.dataItem($(evt.currentTarget).closest("tr"));

    convertWindow.refresh({ type: "GET", url: "CallMeConvert?AppointmentId="+dta.AppointmentId});
    convertWindow.center();
    convertWindow.open();
    }

Is there any way to prevent this happening, or must I destroy and recreate the window every time?

Using KendoUI to display a popup window, I've noticed that if I reuse an existing window by calling refresh it briefly displays the old content until the AJAX request pletes.

My code:

function clickHandler(evt) {
    evt.preventDefault();

    var dta=this.dataItem($(evt.currentTarget).closest("tr"));

    convertWindow.refresh({ type: "GET", url: "CallMeConvert?AppointmentId="+dta.AppointmentId});
    convertWindow.center();
    convertWindow.open();
    }

Is there any way to prevent this happening, or must I destroy and recreate the window every time?

• javascript
• ajax
• kendo-ui

2 Answers 2

It was, in the end, quite simple. You just need to clear the HTML immediately before doing the reset, like so:

$("#convert-window").html("");
convertWindow.refresh({ type:"GET", url:url }).center().open();

Try opening the window not when you start the refresh but when it finishes. What you need to do is use the refresh event:

function clickHandler(evt) {
    evt.preventDefault();

    var dta=this.dataItem($(evt.currentTarget).closest("tr"));

    converWindow.bind("refresh", function() {
        convertWindow.center().open();
    });

    convertWindow.refresh({ type: "GET", url: "CallMeConvert?AppointmentId="+dta.AppointmentId});
}

NOTE You actually don't need to bind refresh event every time, you can define it during the Window initialization.

var convertWindow = $("#my_window").kendoWindow({
    ...
    refresh : function () {
        convertWindow.center().open();
    }
});