Hiding UpdatePanel during UpdateProgress

This was a very simple requirement to hide the currently updating controls. I first ran to the the forums and came across this. The trick was quite simple. When we depend control inside the updatePanel this technique fails. The idea is to wrap the update panel inside say another container like a div and set the control ID to that. The below script triggers the hiding of the control and kicks off the UpdateProgress.

    <script type="text/xml-script">

        <page xmlns:script="https://schemas.microsoft.com/xml-script/2005">

            <components>

                <control id="GridContent" visibilityMode="Collapse">

                    <bindings>

                        <binding dataContext="_PageRequestManager" dataPath="inPostBack" property="visible" transform="Invert" />

                    </bindings>

                </control>

            </components>

        </page>

    </script>

Atlas rules :)

For those of you guys who arent convinced yet, I have attached a hello world version to this.

HideUpdatingContents.zip

Comments

• Anonymous
  January 09, 2007
  Hi I found your article very useful. However I'm having problems with the using the same code in ASP.Net Ajax. Are you aware of any issues, or do you know how to make the same code work in the latest version on ASP.Net Ajax. Here is my code but when the button is clicked it does not hide the update panel. Markup: <div>    <div id="MainContent">        <asp:UpdatePanel ID="UpdatePanel1" runat="server">            <ContentTemplate>                This is the content!                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />            </ContentTemplate>        </asp:UpdatePanel>    </div>    <asp:UpdateProgress ID="UpdateProgress1" runat="server">        <ProgressTemplate>            Loading...        </ProgressTemplate>    </asp:UpdateProgress> </div> <script type="text/xml-script">    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">        <components>            <control id="MainContent" visibilityMode="Collapse">                <bindings>                    <binding dataContext="_PageRequestManager" dataPath="inPostBack" property="visible" transform="Invert" />                </bindings>            </control>        </components>    </page> </script> Code behind:   protected void Button1_Click(object sender, EventArgs e)   {      Thread.Sleep(5000);   } Thanks Denham

• Anonymous
  January 10, 2007
  Basically handling this can be done using the animationextendor in the latest bits if i am right.