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

Not possible to show loading animation in window that is refreshed with iframe=true??

3 Answers 100 Views
Window
This is a migrated thread and some comments may be shown as answers.
Rich
Top achievements
Rank 1
Rich asked on 27 Mar 2013, 03:53 PM
Hi, 

all attempts seem to indicate that it is not possible to show a loading animation in a window while iframe content is being loaded with a refresh call.

The time from when the window opens until the time the iframe content is loading the window appears blank. Setting the content of the window or the html of the window element does not work as at the time refresh is called that content is immediately wiped from the window with the iframe. So we have a scenario where the window content is blank while the content inside the iframe is being loaded. 

Am i missing something? Is there some way to not change the content of the window UNTIL the iframe content is loaded? Using refresh does not work as the iframe is displayed immediately rather than once the content inside the iframe has loaded.

Thanks!

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 Mar 2013, 01:27 PM
Hello Rich,

You can append a loading mask as a sibling of the iframe and remove it in the Window's refresh event. The following example shows how to use native Kendo UI styling for that.

http://jsfiddle.net/dimodi/8tzgc/

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
Matthew
Top achievements
Rank 1
Veteran
answered on 17 Jun 2019, 02:02 PM
The dojo no longer exists. Is there still a example of how to accomplish this?
0
Dimo
Telerik team
answered on 17 Jun 2019, 03:58 PM
Hello Matthew,

Yes, here is how to do it:

<div id="window"></div>
 
<script>
  $(function(){
    $("#window").kendoWindow({
        content: "http://www.hemingwayapp.com/",
        iframe: true,
        width: 800,
        height: 400,
        refresh: function(e) {
            kendo.ui.progress($("#window"), false);
        }
      });
      kendo.ui.progress($("#window"), true);
  });
</script>


The kendo.ui.progress method is documented at:

https://docs.telerik.com/kendo-ui/api/javascript/ui/ui/methods/progress

The loading overlay is shown unconditionally immediately after Window initialization. Then, it is removed when the page inside the iframe loads.

Regards,
Dimo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
Rich
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Matthew
Top achievements
Rank 1
Veteran
Share this question
or