Kendo UI window - prevent loading previous content

Question

I am using Kendo Window on my MVC project.

This is how I initiate the object from the View

@(Html.Kendo().Window()
    .Name("window")
    .Content("loading page..")
    .Iframe(true)
    .Draggable()
    .Visible(false)
    .Height(200)
    .Width(400)
    .Modal(true)
)

and this is how I call the window using javaScript where _url is dynamic

$('#window')
   .data("kendoWindow")
   .title("Add new category")
   .refresh({
       url: _url
   })
   .center()
   .open();

My problem is that whenever I open the window the second time it still displays the previous content until it finishes loading the current.

I tries to hide first the content using this:

$('#window')
     .kendoWindow({
         visible: false
     })
     .data("kendoWindow")
     .title("Add new category")
     .refresh({
         url: _url
     })
     .center()
     .open();

but the object is seems being destroyed when I try to close it.

Answer 1

Use this:

$('#window')
   .data("kendoWindow")
   .title("Add new category")
   .content("") //this little thing does magic 
   .refresh({
      url: _url
   })
   .center()
   .open();

I would however suggest you rearrange your calls:

 $('#window')
   .data("kendoWindow")
   .title("Add new category")
   //.content("") //this little thing does magic 
   .content("<img src='ajax-loader.gif' alt='Loading...'/>")
   .center()
   .open();
   .refresh({
      url: _url
   })

Using the second configuration and providing a valid loading image, the user will see your window and be informed that the content is being loaded. This is very helpful (not to mention user friendly) since the Kendo window makes an AJAX request when you use the refresh function.

Alternatively you could add an event on the window close event and set content("") inside the handler.

Answer 2

You might also want to add

.Events(e =>
{
    e.Refresh("onRefresh");
})

<script>
    function onRefresh() {
        this.center();
    }
<script>

to keep the window centered after the content is loaded as it is loaded asynchronously.

(if your content height is variable)