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

4 posts, 0 answers
  1. Rich
    Rich avatar
    80 posts
    Member since:
    Jul 2012

    Posted 27 Mar 2013 Link to this post

    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!
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 29 Mar 2013 Link to this post

    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!
  3. Matthew
    Matthew avatar
    14 posts
    Member since:
    Oct 2018

    Posted 17 Jun 2019 in reply to Dimo Link to this post

    The dojo no longer exists. Is there still a example of how to accomplish this?
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 17 Jun 2019 Link to this post

    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.
Back to Top