Changing cursor over grid during AJAX callback

2 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 12 Feb 2007 Link to this post


    r.a.d.controls version

    2006 Q4 SP1
    Web.UI version 2007.3.1425
    .NET version

    Visual Studio version

    programming language

    HTML, Javascript, CSS
    browser support

    all browsers supported by r.a.d.controls

    There are cases when the developer would prefer not to use loading panel or loading template but still indicate somehow the user that there is an AJAX request currently being processed. One way to have such indication is changing the mouse cursor to "hourglass". This can be achieved by using AJAX Manager's client events RequestStart and ResponseEnd.

    The most straightforward way can be to set = "wait". However, this setting might be overridden by the grid skinning mechanism. Therefore, additional CSS classes are used. The classes are empty by default but are overridden with specific selectors in order to change the cursor for all elements rendered in the grid.  On RequestStart the cursor is set to "wait". On ResponseEnd the class is replaced by an empty one, so the default settings are applied back.

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

    Styles are applied on the div, that contains the grid.

        <script type="text/javascript"
         function RequestStart(sender, args)             
               var div = document.getElementById("<%=div1.ClientID%>");                  
               div.className = "Wait"
              = "wait"
         function ResponseEnd(sender, args)              
               var div = document.getElementById("<%=div1.ClientID%>");                  
               div.className = "Normal"
              = "default";             

    AJAX Manager's client event are used:
                <radA:RadAjaxManager ID="RadAjaxManager1" runat="server"
                        <radA:AjaxSetting AjaxControlID="RadGrid1"
                                <radA:AjaxUpdatedControl ControlID="RadGrid1"></radA:AjaxUpdatedControl> 
                    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" /> 

    The grid here is used just for illustrating purpose. The technique shown is applicable for much wider range of cases.
  • Yavor
    Yavor avatar
    11 posts

    Posted 10 Mar 2008 Link to this post


    Here is how to achieve the described functionality with RadControls for ASP.NET AJAX.

    Instead of the RadGrid wrapper element, any HTML element can be used to set the "wait" CSS class to.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
            if (IsPostBack)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    .wait *
        cursor:wait !important;
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
    function showHourGlass(sender, args)
        Sys.UI.DomElement.addCssClass($get("<%= RadGrid1.ClientID %>"), "wait");
    function hideHourGlass(sender, args)
        Sys.UI.DomElement.removeCssClass($get("<%= RadGrid1.ClientID %>"), "wait");
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ClientEvents OnRequestStart="showHourGlass" OnResponseEnd="hideHourGlass" />
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            <MasterTableView CommandItemDisplay="Top" />
    <asp:XmlDataSource ID="RadGridDataSource" runat="server">
    <node ID="1" Name="Name 1" Description="Description 1" />
    <node ID="2" Name="Name 2" Description="Description 2" />
    <node ID="3" Name="Name 3" Description="Description 3" />
    <node ID="4" Name="Name 4" Description="Description 4" />

    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  • Back to Top