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>