Introduction:
In this blog you will learn how to integrate Kendo progress bar widget in kendo window to display the spinner while loading the data in the window.
Kendo progress bar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<button id="showOverlay" class="k-button">Show Loader</button>
<button id="hideOverlay" class="k-button">Hide Loader</button>
<br>
<br>
<div id="window">
Hello
</div>
<script>
$(function() {
$("#window").kendoWindow({
title: "Kendo UI Window",
actions: ["refresh"],
width: 300,
height: 160
});
});
$(function() {
var windowWidget = $("#window").data("kendoWindow");
$("#showOverlay").click(function(){
kendo.ui.progress(windowWidget.element, true);
});
$("#hideOverlay").click(function(){
kendo.ui.progress(windowWidget.element, false);
});
});
</script>
</div>
</body>
</html>In the above code, you can see there are two buttons. The Show loader button is used to trigger the loader and hide loader button is used to hide the loader.
Show Loader:
Hide Loader:
Summary:
We have seen how to integrate the kendo progress control in kendo window using jQuery.
