Change the Mouse Cursor on Ajax Updates with the AjaxManager or AjaxPanel

Environment

Product

Progress® Telerik® UI for ASP.NET AJAX AjaxManager

Progress® Telerik® UI for ASP.NET AJAX AjaxPanel

Description

How can I change the mouse cursor on an Ajax update with the Telerik UI for ASP.NET AjaxManager or AjaxPanel?

Solution

To achieve the desired behavior, use the client-side event of AjaxManager or AjaxPanel. The following snippet shows the events script you need.

JavaScript

<script type="text/javascript">
	        function OnRequestStart(sender, args) {
	            document.body.style.cursor = "wait";
	        }
	        function OnResponseEnd(sender, args) {
	            document.body.style.cursor = "default";
	        }
</script>

Alternatively, you can use additional CSS classes as demonstrated in the following example.

JavaScript

<script type="text/javascript">
	        function RequestStart(sender, args) {
	            document.body.className = document.body.className.replace("Normal", "Wait");
	        }
	        function ResponseEnd(sender, args) {
	            document.body.className = document.body.className.replace("Wait", "Normal");
</script>

CSS

<style type="text/css">
	        .Wait
	        {
	        }
	        .Normal
	        {
	        }
	        /* override input cursors with a more specific CSS selector */.Wait INPUT
	        {
	            cursor: wait;
	        }
	        .Normal INPUT
	        {
	            cursor: default;
	        }
	        /* override grid cursors with a more specific CSS selector */.Wait TABLE
	        {
	            cursor: wait;
	        }
	        .Normal TABLE
	        {
	            cursor: default;
	        }
</style>