locked
Update Progress RRS feed

  • Question

  • User1051314974 posted

    Hi

    I have  an updateprogress which is affiliated with an updatepanel on the page.

    The updatepanel is smal and page is big, what I want to do is display the updateprogress on the page but only on the top of the updatepanel area of the page.

    Currently my update progress covers the whole page.

    <asp:UpdateProgress ID="uprgApplicantPool" AssociatedUpdatePanelID="upnlApplicantPool" runat="server">
                <ProgressTemplate>
                    <div style="background-color: Gray; filter: alpha(opacity=60); opacity: 0.60; width: 100%; top: 0px; left: 0px; ; height: 100%;">
                    </div>
                    <div style="margin: auto; font-family: Trebuchet MS; filter: alpha(opacity=100); opacity: 1; font-size: small; vertical-align: middle; top: 45%; ; right: 45%; color: #275721; text-align: center; background-color: White; height: 100px;">
                        <table style="background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
                            <tr>
                                <td style="text-align: inherit;">
                                    <img src="../../App_Image/Saving.gif" alt="Please wait....." /></td>
                                <td style="text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold;">Please wait...</span></td>
                            </tr>
                        </table>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

    Any suggestion ?

    Thanks,

    maulin. 

    Wednesday, February 5, 2014 5:16 AM

Answers

  • User1734617369 posted

    Hi,

    You could use the UpdatePanelAnimationExtender instead to achieve the effect that you want, like in this example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication2.WebForm2" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #upnlApplicantPool {
                ;
            }
        </style>
        <script type="text/javascript">
    
            function onUpdating() {
                // get the divImage
                var panelProg = $get('divImage');
                // set it to visible
                panelProg.style.display = '';            
            }
    
            function onUpdated() {
                // get the divImage
                var panelProg = $get('divImage');
                // set it to invisible
                panelProg.style.display = 'none';
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="upnlApplicantPool" runat="server">
                <ContentTemplate>
                    <div id="main" style="background-color: lightgray; height: 400px;">
                        Joy!
                        <asp:Button runat="server" ID="B" OnClick="B_OnClick"/>
                    </div>                
                   <div id="divImage" style="z-index: 100; background-color: Gray; filter: alpha(opacity=60); ; top: 0; left: 0; opacity: 0.60; width: 100%; height: 100%; display: none;">
                    
                    <div style="margin: auto; font-family: Trebuchet MS; filter: alpha(opacity=100); opacity: 1; font-size: small; vertical-align: middle; ; top: 45%; color: #275721; text-align: center; background-color: White; height: 100px; width: 200px">
                        <table style="background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
                            <tr>
                                <td style="text-align: inherit;">
                                    <img src="../../App_Image/Saving.gif" alt="Please wait....." /></td>
                                <td style="text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold;">Please wait...</span></td>
                            </tr>
                        </table>
                    </div>
                   </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="upnlApplicantPool" runat="server">
            <Animations>
                <OnUpdating>
                   <Parallel duration="0">
                        <ScriptAction Script="onUpdating();" />
                        <EnableAction AnimationTarget="btnInvoke" Enabled="false" />                   
                    </Parallel>
                </OnUpdating>
                <OnUpdated>
                    <Parallel duration="0">
                        <ScriptAction Script="onUpdated();" />
                        <EnableAction AnimationTarget="btnInvoke" Enabled="true" />
                    </Parallel>
                </OnUpdated>
            </Animations>
            </asp:UpdatePanelAnimationExtender>        
        </form>
    </body>
    </html>

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 5, 2014 7:23 AM

All replies

  • User1734617369 posted

    Hi,

    You could use the UpdatePanelAnimationExtender instead to achieve the effect that you want, like in this example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication2.WebForm2" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #upnlApplicantPool {
                ;
            }
        </style>
        <script type="text/javascript">
    
            function onUpdating() {
                // get the divImage
                var panelProg = $get('divImage');
                // set it to visible
                panelProg.style.display = '';            
            }
    
            function onUpdated() {
                // get the divImage
                var panelProg = $get('divImage');
                // set it to invisible
                panelProg.style.display = 'none';
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="upnlApplicantPool" runat="server">
                <ContentTemplate>
                    <div id="main" style="background-color: lightgray; height: 400px;">
                        Joy!
                        <asp:Button runat="server" ID="B" OnClick="B_OnClick"/>
                    </div>                
                   <div id="divImage" style="z-index: 100; background-color: Gray; filter: alpha(opacity=60); ; top: 0; left: 0; opacity: 0.60; width: 100%; height: 100%; display: none;">
                    
                    <div style="margin: auto; font-family: Trebuchet MS; filter: alpha(opacity=100); opacity: 1; font-size: small; vertical-align: middle; ; top: 45%; color: #275721; text-align: center; background-color: White; height: 100px; width: 200px">
                        <table style="background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
                            <tr>
                                <td style="text-align: inherit;">
                                    <img src="../../App_Image/Saving.gif" alt="Please wait....." /></td>
                                <td style="text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold;">Please wait...</span></td>
                            </tr>
                        </table>
                    </div>
                   </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="upnlApplicantPool" runat="server">
            <Animations>
                <OnUpdating>
                   <Parallel duration="0">
                        <ScriptAction Script="onUpdating();" />
                        <EnableAction AnimationTarget="btnInvoke" Enabled="false" />                   
                    </Parallel>
                </OnUpdating>
                <OnUpdated>
                    <Parallel duration="0">
                        <ScriptAction Script="onUpdated();" />
                        <EnableAction AnimationTarget="btnInvoke" Enabled="true" />
                    </Parallel>
                </OnUpdated>
            </Animations>
            </asp:UpdatePanelAnimationExtender>        
        </form>
    </body>
    </html>

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 5, 2014 7:23 AM
  • User1051314974 posted

    Hi Valuja,

    Thanks very much, this is exactly what I was looking for.

    Regards,

    Maulin.

    Wednesday, February 5, 2014 7:35 AM