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

Window refresh loading animation

2 Answers 197 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 18 Sep 2015, 11:02 AM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 22 Sep 2015, 08:44 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 22 Sep 2015, 02:16 PM

Worked perfectly, thanks!

Mark

Tags
Window
Asked by
Mark
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Mark
Top achievements
Rank 1
Share this question
or