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

Display Loading Indicator over Window

The example below demonstrates how to display a Kendo-UI-style loading indicator over the Window content area while (or before) a remote request is made.

The loading overlay must be displayed over the Window widget element or some of its ancestors. This ensures that the overlay is removed automatically when the new content is loaded and rendered.

    <div id="example">
        <button id="showOverlay" class="k-button">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>

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

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

                kendo.ui.progress(windowWidget.element, true);

See Also

For more runnable examples on the Kendo UI Window, browse the How To documentation folder.

In this article
Not finding the help you need? Improve this article