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.

<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.

<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>

<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>