I want to show a loading indicator in my asp.net webpage while my gridview is being filled with data
This is part of my aspx page
<script type="text/javascript" src="Scripts/jsUpdateProgress.js"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div style="position: relative; top: 30%; text-align: center;">
<img src="Styles/images/loading.gif" style="vertical-align: middle" alt="Processing" />
Loading...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />
(My code is based on this sample weblogs.asp.net/blogs/guillermo/Code/modalExample.zip)
This is my button to call my method
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:Button ID="btMonth" runat="server" onclick="btMonth_Click" Text="Ver" />
</ContentTemplate>
</asp:UpdatePanel>
This is my c# code of my method btMonth_Click
protected void btMonth_Click(object sender, EventArgs e)
{
string query = "select * from table";
SqlDataSource1.SelectCommand = query;
gInd.DataSourceID = "SqlDataSource1";
}
As you can see while the "Loading" indicator appears I want to fill a GridView, but when I make click in my button the method btMonth_Click is invoked, the method is executed but my gridview doesn't get filled. If I remove the asp:UpdatePanel of my button my gridview is filled fine
Is there something I'm missing?
You need to place your GridVew inside of your UpdatePanel in order to be partial rendered
If for design reasons you cannot place your grid inside the first UpdatePanel, you can have several UpdatePanel
For more info: