Contact Sales: +1-888-365-2779
Community & Support
Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Ajax > "gray out" page when displaying loading panel

Not answered "gray out" page when displaying loading panel

Feed from this thread
  • Posted on May 30, 2007 (permalink)

    Requirements

    RadControls version

    RadAjax 1.7.1.0

    .NET version

    2.0

    Visual Studio version

    2005

    programming language

    C#

    browser support

    all browsers supported by RadControls


     
    PROJECT DESCRIPTION
    This project explains how to  "Gray Out" the page on displaying the loading panel or when an Ajax Request starts. Here I'm using the javascript funtion to perform the task while ajax request occurs.

    Javascript funtion:
    <script language ="javascript" type ="text/javascript" >    
        function onRequestStart(sender, arguments)      
         {     
         alert( 'AJAX request has just started.');     
         grayOut(true, "")      
         }     
         function onResponseEnd(sender, arguments)     
        {     
          alert( 'Callback request is completed. Response is processed.');     
          grayOut(false, "")      
        }     
        
        function grayOut(vis, options)      
         {     
         var optionsoptionsoptions = options || {};       
         var zindex = options.zindex || 50;      
         var opacity = options.opacity || 70;     
         var opaque = (opacity / 100);    
         //Setting the color     
         var bgcolor = options.bgcolor || '#000000';      
         var dark=document.getElementById('darkenScreenObject');     
         if (!dark)      
         {     
         // The dark layer doesn't exist, it's never been created.  So we'll       
         // create it here and apply some basic styles.        
         var tbody = document.getElementsByTagName("body")[0];     
         var tnode = document.createElement('div');                
         tnode.style.position='absolute';     
         tnode.style.top='0px';     
         tnode.style.left='0px';        
         tnode.style.overflow='hidden';     
         tnode.style.display='none';     
         tnode.id='darkenScreenObject';     
         tbody.appendChild(tnode);                                 
         dark=document.getElementById('darkenScreenObject');       
         }       
        
        if (vis)     
         {      
          var pageWidth='100%';      
          var pageHeight='100%';      
         dark.style.opacity=opaque;      
         dark.style.MozOpacity=opaque;            
         dark.style.filter='alpha(opacity='+opacity+')';      
         dark.style.zIndex=zindex;     
         dark.style.backgroundColor=bgcolor;      
         dark.style.widthpageWidth;       
         dark.style.heightpageHeight;      
         dark.style.display='block';       
           }     
         else     
         {        
          dark.style.display='none';      
         }     
     }     
        </script> 

    ASPX:
    <radA:RadAjaxManager ID="RadAjaxManager1" runat="server">  
                <ClientEvents OnRequestStart="onRequestStart" OnResponseEnd = "onResponseEnd"  />    
                  
     
                <AjaxSettings> 
                  
                    <radA:AjaxSetting AjaxControlID="Button1">  
                        <UpdatedControls> 
                            <radA:AjaxUpdatedControl ControlID="Button1" LoadingPanelID="AjaxLoadingPanel1" /> 
                        </UpdatedControls> 
                    </radA:AjaxSetting> 
                </AjaxSettings> 
            </radA:RadAjaxManager> 
            <radA:AjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px" Width="75px">  
                <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" /> 
            </radA:AjaxLoadingPanel> 
            <asp:Button ID="Button1" runat="server" Text="Ajaxify" Height="35px" Width="240px" /> 

    Reply

  • Steve Steve admin's avatar

    Posted on May 30, 2007 (permalink)

    Hi Shinu,

    We believe that simpler approach is shown in this KB article that does not require so much hacks and settings to be applied and we think that this is the better approach in terms of flexibility and easy set up. We still think that this is an excellent source for the devs, who want to have full access to the "gray out" process and appreciate your involvement. We have transformed your post in forum post and updated your Telerik points as a token of gratitude.

    Regards,
    Steve
    the Telerik team

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

    Reply

  • Posted on Aug 5, 2011 (permalink)

    Hi,
     Can you please update the link to the KB article?

    Thanks,
    Dan

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Ajax > "gray out" page when displaying loading panel