Window refresh loading animation

[Mark]

Hi there,

 I have a number of Kendo Windows on my site.  In each case, when the content is first loaded from an MVC partial view, it shows a white screen until loaded.  And if then reloading the content of the window, it displays the existing content (from previous load) until the window is loaded.

How can I make it display a loading animation whilst loading for each of these cases.  Here is my code :-

 === WINDOW ====
@(Html.Kendo().Window()
    .Name("window")
    .Width(750)
    .Height(480)
    .Title("Sample Documents")
    .Visible(false)
    .Content("loading sample documents...")
    .Iframe(true)
    .Draggable()
    .Resizable()
    .Events(e => e
        .Open("windowOpen")
    )
)

=== JS REFRESH ===
contentURLString = '@Url.Action("GetSampleDocuments", "Site")?SampleID=' + SampleID
var win = $("#window").data("kendoWindow");
win.refresh({
    url: contentURLString
}).center().open();

 

Thanks, Mark

[Rosen]

Hello Mark,

There is no built-in loading animation for the window widget. However, you can achieve similar functionality yourself by using the kendo.ui.progress. You will need to manually show the loading when refreshing the content and use the refresh event to hide it. Similar to the following:

 

@(Html.Kendo().Window()

    .Name("window")

    .Events(events => events.Refresh("refresh"))
       /*..*/

)

 

<button id="refresh" onclick="refresh_content(); return false;">Refresh content</button>

 

<script>

 

    function refresh() {

        kendo.ui.progress($("#window"), false);

    }

 

    function refresh_content() {

        kendo.ui.progress($("#window"), true);

 

             //TODO: refresh the content of the window 

    }

 

</script>

 

Regards,
Rosen
Telerik

 

 

[Mark]

Worked perfectly, thanks!

Mark