Loading animation when waiting for ajax window to load?

[Michael Yereniuk]

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!

[Hans]

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!

[Dimo]

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

[Michael Yereniuk]

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);

        }

});

[Richard Wilde]

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>  

[Ryan]

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

[Dimo]

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

[Scott]

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;
   });

[Alex Gyoshev]

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