locked
Hide updatepanel content while processing? RRS feed

  • Question

  • User-631798055 posted

    I've got an updatepanel with a gridview in it. I've also got an updateprogress to show a "loading" message while the gridview populates, as I have a large number of records in the gridview. I've got the updateprogress control above the gridview, so that when the updatepanel updates, it moves the header of the gridview down to make room for the updateprogress control. This isn't really ideal in my situation. My other option is to put the updateprogress control after the updatepanel, so that it displays at the bottom of the list of items in the gridview. This is no good though because  if the user isn't scrolled to the bottom of the window, they won't see the "loading ..." notice.

     Ideally,  I'd like to have the gridview (i.e. the contents of the update panel) be hidden completely while the "loading ..." notice (ie. the contents of the update panel) is being displayed. However, I cannot figure out a way to hide the updatepanel contents during an update? Any ideas out there?

     

     

    Monday, May 7, 2007 2:05 PM

Answers

  • User-1087479560 posted

    Hi,

    According to the client life cycle, you can hide the panel when it starts postback, and make it visble again when response is processed.

    For instance:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </ContentTemplate>
            
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    Updating...
                </ProgressTemplate>
            </asp:UpdateProgress>
        
        </div>
        
            
                    <script type="text/javascript">
        
        var c = new Sys.UI.Control($get("UpdatePanel1"));
        
        function beginRequestHandler(sender, args)
        {            
            c.set_visible(false); 
        }
        
        function endRequestHandler(sender, args)
        {
            c.set_visible(true); 
        }
        
        function pageLoad()
        {
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);               
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }
        
        </script>
        </form>
        
    
    </body>
    </html>
    
      
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
        }
    }
    

     

    Hope this helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 9, 2007 2:37 AM

All replies

  • User336673788 posted

    hello,

    i haven't play with the updateprogress control yet, but here is my idea ... put the updateprogress inside a panel or div. Set the position = absolute; set the position of X and Y. once your gridview bound all the data, you can set style.display=none to the div or panel. This way the updateprocess will stay on top and will go away after you hide it. =)

    Monday, May 7, 2007 8:00 PM
  • User-1087479560 posted

    Hi,

    According to the client life cycle, you can hide the panel when it starts postback, and make it visble again when response is processed.

    For instance:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </ContentTemplate>
            
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    Updating...
                </ProgressTemplate>
            </asp:UpdateProgress>
        
        </div>
        
            
                    <script type="text/javascript">
        
        var c = new Sys.UI.Control($get("UpdatePanel1"));
        
        function beginRequestHandler(sender, args)
        {            
            c.set_visible(false); 
        }
        
        function endRequestHandler(sender, args)
        {
            c.set_visible(true); 
        }
        
        function pageLoad()
        {
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);               
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }
        
        </script>
        </form>
        
    
    </body>
    </html>
    
      
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
        }
    }
    

     

    Hope this helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 9, 2007 2:37 AM
  • User-863904018 posted

    Hi,

    m using javascript for the same. UpdateProgress control does its job and sideby i have added javascript onclientclick event of button which hides the upadatepanel.

    <script language="javascript" type="text/javascript">

    function HideGrid(id)

    {

    id = document.getElementById(id);

    if (!(id == null)) { id.style.visibility="hidden";

    }

    }

    </script>

    <asp:UpdatePanel runat="server" ID="UpdatePresentations" RenderMode="inline" UpdateMode="Conditional">

    <ContentTemplate>

    <asp:UpdateProgress runat="Server" ID="UpdateProgress" AssociatedUpdatePanelID="UpdatePresentations"

    DynamicLayout="true" DisplayAfter="0">

    <ProgressTemplate>

    <img src='' alt="Loading" /> Loading...

    </ProgressTemplate>

    </asp:UpdateProgress>

    <div id="divGrid" runat="server" style="display: inline">

    // my content which i want to update and hide while updating

    </div>

    <Triggers>

    //

    </Triggers>

    </asp:UpdatePanel>

    Friday, June 29, 2007 10:00 AM