Loading animation when waiting for ajax window to load?

9 posts, 0 answers
  1. Michael Yereniuk
    Michael Yereniuk avatar
    10 posts
    Member since:
    May 2008

    Posted 03 Feb 2012 Link to this post

    I haven't played with this too much as my javascript skills aren't super great, but I am wondering if there is a way to show a loading animation (something like a spinning circle loading gif) in the kendo window that will be displayed when ajax is used to call the window contents. The reason I ask is because I am trying to load some telerik reports in popup windows, and there is always a good 5-10 second delay where the window is just white/blank before the report even initializes. It would really just be great for letting the user know that the window needs a few seconds to load, and just to be patient. Any official or unofficial solutions are welcomed!
  2. Hans
    Hans avatar
    1 posts
    Member since:
    Jan 2012

    Posted 07 Feb 2012 Link to this post

    I can't find a way to do it with the built-in parameters, functions and events, but it's fairly simple to produce loading behavior yourself:

    1. Setup some HTML for your re-usable window:
    <div id="kendoWindowHere"></div>
    2. Setup the Kendo UI window, hide by default:
    $('div#kendoWindowHere').kendoWindow({ visible: false, ... });
    2. Open the window with the loading gif showing:
    $('div#kendoWindowHere').html('<img src="/images/loading.gif" />');
    var kendoWindow = $('div#kendoWindowHere').data('kendoWindow');
    kendoWindow.toFront().center().open();
    3. start your asynchronous ajax call and supply a success callback that receives the content that should be shown in the window
    $.ajax({
        ...,
        success: function (data) {
            $('div#kendoWindowHere').html(data);
        }

    As you can see, the success callback overwrites the inner HTML of your Kendo Window so the loading gif is gone, and the page is showing.

    This is a very crude example and you should definetly change some stuff around, also based on your situation that I know little about. But the basic gist is, that you start showing the window with the loading image (and/or text) in it, and in your ajax success callback you remove the loading image and replace it with your content. I recommend fixing this code such that ideally, you can re-use the same window (unless you want to have multiple ones open at the same time), and that you don't destroy and recreate the loading gif content every time. Instead the div I used for the window could have 2 inner divs, one that you use to load the actual content, one with the loading gif, and you just switch which of those two is visible based on your state (waiting for content or done waiting).

    Besides that, this can be optimized quite a bit by storing references to the DOM elements involved (like such: var myWindow = $('div#myWindow').

    Good luck!
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Feb 2012 Link to this post

    Hi,

    In addition to what Hans has suggested, I can add that the Window provides the open, activate and refresh events, which can be used for the DOM manipulations, related to the animated loading image.

    Also, AJAX requests for the Window content can be executed via the Window API, they don't have to be totally custom.

    http://demos.kendoui.com/web/window/events.html

    http://www.kendoui.com/documentation/ui-widgets/window/events.aspx

    http://www.kendoui.com/documentation/ui-widgets/window/methods.aspx

    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!
  5. Michael Yereniuk
    Michael Yereniuk avatar
    10 posts
    Member since:
    May 2008

    Posted 08 Feb 2012 Link to this post

    I just wanted to give a big THANK YOU to both of you for your ideas! I got my kendo windows all working, mostly with the suggestions by Hans. I grabbed a custom loading gif from http://ajaxload.info/ and in the code below I centered the image in the dead center of the window. Here is my exact code for anyone else who needs this:

    var sContent = "./ViewReport.aspx?reportname=rptJobReport&id=" + this.select().data("id");
    var wndWindow = $("#wndWindow").data("kendoWindow");
     
    if (!wndWindow) {
        wndWindow = $("#wndWindow").kendoWindow({
            width: "700px",
            height: "500px",
            title: "Report Title Here",
            visible: false,
            modal: true,
            resizable: true,
            actions: ["Close"],
            animation: false
        }).data("kendoWindow");
    }
    else {
        wndWindow.title("Report Title Here");
        wndWindow.refresh(sContent);
    }
     
    $("#wndWindow").html('<div style="text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; display: block;"><div style="margin-left: -125px; position: absolute; top: -35px; left: 50%; width: 250px; height: 70px;"><img src="/Images/ajax-loader.gif" /></div></div>');
     
    wndWindow.toFront().center().open();
     
    $.ajax({ url: sContent,
            success: function (data)
            {
                $('#wndWindow').html(data);
            }
    });
  6. Richard Wilde
    Richard  Wilde avatar
    14 posts
    Member since:
    Jul 2009

    Posted 18 Dec 2012 Link to this post

    I know this is an old post but this is how I solved it using the onOpen event
    <div id="window"></div>
     
    <script>
       $(function() {
     
          var url = "/Campaign/PreSendingChecks/@Model.Campaign.Id/@Model.Id";
          var window = $("#window");
     
          function onOpen() {
             $('#window').html('<div style="text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; display: block;"><div style="margin-left: -125px; position: absolute; top: -35px; left: 50%; width: 250px; height: 70px;"><img src="/Content/CmsImages/images/ajax-loader.gif" /></div></div>');
          }
     
     
          $('#btPreSendCheck').click(function(e) {
             e.preventDefault();
     
             if (!window.data("kendoWindow")) {
                window.kendoWindow({
                   title: "Check your email for spam",
                   content: url,
                   width: '600px',
                   height: '600px',
                   open: onOpen
                });
             } else {
                window.data("kendoWindow").open();
                window.data("kendoWindow").refresh(url);
             }
             $("#window").data("kendoWindow").center();
          });
       });
    </script>  
  7. Ryan
    Ryan avatar
    3 posts
    Member since:
    Sep 2007

    Posted 19 Jan 2014 Link to this post

    Hi,

    Is there any way to accomplish this (display ajax progress while the content is loading) when the window is defined as iframe?

    I tried it, but no animation progress is shown (I assume because the iframe actually replaces the initial content as soon as the refresh takes place.

    Thank you
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Jan 2014 Link to this post

    Hi Ryan,

    You can use the Window's open and refresh events to show and hide the native Kendo UI loading indicator over the Window's content container. This container is the element, from which the widget is created.

    http://docs.kendoui.com/api/web/window#events-open

    http://docs.kendoui.com/api/web/window#events-refresh

    http://docs.kendoui.com/api/web/ui#methods-progress


    function onOpen(e) {
       kendo.ui.progress(e.sender.element, true);
    }
     
    function onRefresh(e) {
       kendo.ui.progress(e.sender.element, false);
    }


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Scott
    Scott avatar
    1 posts
    Member since:
    Dec 2015

    Posted 15 Feb in reply to Dimo Link to this post

    Hi there, i am trying to follow Dimo's advice and the kendo window never shows any wait cursor...what am i missing?

     @(Html.Kendo().Window().Name("CopyCheck")
          .Title("Copyright Checks")
          .Content("<p>Loading...</p>")
          .Visible(false)
          .Modal(false)
          .Draggable(true)
          .Width(1000)
          .Height(800)
          .Scrollable(true)
          .Resizable()
          .Iframe(true)
          .Events(e => e.Open("OnOpen").Refresh("OnRefresh"))
    )

       function OnOpen(e) {
          var wnd = $("#CopyCheck").data("kendoWindow");
          kendo.ui.progress( wnd.element, true);
       }
     
       function OnRefresh(e) {
          var wnd = $("#CopyCheck").data("kendoWindow");
          kendo.ui.progress( wnd.element, false);
       }

       $("#check").click(function ()
       {
          var wnd = $("#CopyCheck").data("kendoWindow");
          wnd.title("Copyright Checking for '@Model.oEditedKw.KeywordText' ");
          wnd.open();
          wnd.refresh({
             url: "/Keywords/CopyCheckPopup?KwID=@Model.oEditedKw.KeywordID",
          });
          wnd.center()
          return false;
       });

  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Feb Link to this post

    Hello Scott,

    The window should be already visible prior to the first open, in order for the progress call to work. You can either call the progress method in a timeout, just after the open event, or use the activate event. See this Dojo snippet for an illustration of the first approach.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready