New to Kendo UI for jQuery? Download free 30-day trial

Display a Loading Indicator over the Window

Environment

Product Progress Kendo UI Window for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I display a Kendo-UI-style loading indicator over the Window content area while (or before) a remote request is made?

Solution

You need to display the loading overlay over the Window element or some of its ancestors. This ensures that the overlay is removed automatically when the new content is loaded and rendered.

The following example demonstrates how to achieve the desired scenario.

    <div id="example">
        <button id="showOverlay">Show overlay</button>
        <p>Click on the Refresh button to remove the overlay.</p>
        <p>In real-world scenarios the loading overlay will be removed automatically when the new content is rendered
            (e.g. when loaded with Ajax).</p>

        <div id="window"></div>

        <script>
        // Window initialization code start
        // when Kendo UI using server wrappers, the initialization script will be generated automatically
        $(function() {
            $("#window").kendoWindow({
                title: "Kendo UI Window",
                actions: ["refresh"],
                content: {
                    template: "Now is #= (new Date()).toLocaleTimeString() #"
                },
                width: 300,
                height: 160
            });
        });
        $("#showOverlay").kendoButton();
        // initialization code end

        // example code start
        $(function() {
            var windowWidget = $("#window").data("kendoWindow");

            $("#showOverlay").click(function(){
                kendo.ui.progress(windowWidget.element, true);
            });
        });
        </script>
    </div>

See Also

In this article