Window refresh loading animation

3 posts, 1 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 18 Sep 2015 Link to this post

    Hi there,

     I have a number of Kendo Windows on my site.  In each case, when the content is first loaded from an MVC partial view, it shows a white screen until loaded.  And if then reloading the content of the window, it displays the existing content (from previous load) until the window is loaded.

    How can I make it display a loading animation whilst loading for each of these cases.  Here is my code :-

     === WINDOW ====
    @(Html.Kendo().Window()
        .Name("window")
        .Width(750)
        .Height(480)
        .Title("Sample Documents")
        .Visible(false)
        .Content("loading sample documents...")
        .Iframe(true)
        .Draggable()
        .Resizable()
        .Events(e => e
            .Open("windowOpen")
        )
    )

    === JS REFRESH ===
    contentURLString = '@Url.Action("GetSampleDocuments", "Site")?SampleID=' + SampleID
    var win = $("#window").data("kendoWindow");
    win.refresh({
        url: contentURLString
    }).center().open();

     

    Thanks, Mark

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 22 Sep 2015 Link to this post

    Hello Mark,

    There is no built-in loading animation for the window widget. However, you can achieve similar functionality yourself by using the kendo.ui.progress. You will need to manually show the loading when refreshing the content and use the refresh event to hide it. Similar to the following:

     

    @(Html.Kendo().Window()
        .Name("window")
        .Events(events => events.Refresh("refresh"))
           /*..*/
    )
     
    <button id="refresh" onclick="refresh_content(); return false;">Refresh content</button>
     
    <script>
     
        function refresh() {
            kendo.ui.progress($("#window"), false);
        }
     
        function refresh_content() {
            kendo.ui.progress($("#window"), true);
     
                 //TODO: refresh the content of the window 
        }
     
    </script>

     

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 22 Sep 2015 in reply to Rosen Link to this post

    Worked perfectly, thanks!

    Mark

Back to Top