Solved

updatepanel

Posted on 2009-04-13
5
340 Views
Last Modified: 2012-05-06
i have a page that is written in asp.net. Every time when the user refresh the screen or choose different dataset, i want to basically have a loading image in the center of the screen pops up. and during that loading time, the user can't do anything else. the code i have now only display the image on top of of the page . so how do i get it to be in the center so the user can know that the page is reloading with new data. thank you in advance.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>                                              

            <asp:UpdateProgress ID="UpdateProgress1" runat="server">

                <ProgressTemplate>

                    &nbsp;<img src="images/LoadingProgressBar.gif" alt="Loading Image" />

                </ProgressTemplate>

            </asp:UpdateProgress>

            <asp:Table ID="Table1" runat="server" Width="100%" BorderColor="red" CellPadding="0" CellSpacing="5" BackColor="white">

                <asp:TableRow>                                                          

                     <asp:TableCell VerticalAlign="top" ID="radstrip2" ColumnSpan="2" Width="100%" BackColor="white" Height="100%" >                

                        <asp:DropDownList ID="ddlStores" AutoPostBack="true" runat="server" Visible="false"></asp:DropDownList>                                        

                    </asp:TableCell>

                </asp:TableRow>                                   

            </asp:Table>                   

        </ContentTemplate>            

    </asp:UpdatePanel>

Open in new window

0
Comment
Question by:StewSupport
  • 2
  • 2
5 Comments
 
LVL 20

Expert Comment

by:informaniac
Comment Utility
<img src="images/LoadingProgressBar.gif" alt="Loading Image" style="top:150px;" />
0
 

Author Comment

by:StewSupport
Comment Utility
that does nothing.
0
 
LVL 16

Accepted Solution

by:
burakiewicz earned 500 total points
Comment Utility
try this as your updateprogress. place this outside of your update panel
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
 

<ProgressTemplate>

                <asp:Panel ID="pnlLoading" runat="server" Width="100%" Height="100%" CssClass="popupBg" style=" position:absolute; top:0px; left:0px; text-align:center; vertical-align:middle;">

                    <table Width="100%" Height="100%" style="border:1px solid black; padding:5px 5px 5px 5px;">

                        <tr>

                            <td>

                                <table  style="height:200px; width:200px; background-color:White;">

                                    <tr>

                                        <td>

                                            <img src="images/LoadingProgressBar.gif" alt="Loading Image" />

                                        </td>

                                    </tr>

                                </table >

                            </td>

                        </tr>

                    </table>

                </asp:Panel>

            </ProgressTemplate>

</asp:UpdateProgress 

Open in new window

0
 
LVL 16

Assisted Solution

by:burakiewicz
burakiewicz earned 500 total points
Comment Utility
you will also need to add this style for the transparent background to work
<style type="text/css">
    .popupBg
       {
               background-color:Gray;
               filter:alpha(opacity=70);      
               opacity:0.7;
        }
    </style>
0
 

Author Closing Comment

by:StewSupport
Comment Utility
you are the man.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now