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

[Rich]

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!

[Dimo]

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

[Matthew]

The dojo no longer exists. Is there still a example of how to accomplish this?

[Dimo]

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