To show ProgressBar onclick of Button inside GridView

Question

I have a GridView in which the last Column has a Button which loads data. Doing that takes like 2 Minutes.So, I need the user to know that some functions are going on in backend not that the screen is frozen So,I need to show a ProgressBar on click of that button inside the GridView How to do that??

Answer 1

I was searching for this for a while finally found it ,

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            <ContentTemplate>
                                <asp:GridView ID="Gridview" OnRowDataBound="Gridview_RowDataBound" OnRowCommand="Gridview_RowCommand" runat="server" Style="text-align: center" ShowFooter="true" Width="99%"
                                    AutoGenerateColumns="false">
                                    <Columns>


                                        <asp:TemplateField HeaderText="Total Customers" HeaderStyle-BackColor="#99CCCC">
                                            <ItemTemplate>

                                                <asp:Button ID="btnCombine" CssClass="btn-primary btn" Text="Combine"
                                                    Font-Bold="true"
                                                    CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="More"
                                                    Style="padding-top: 1%; padding-bottom: 1%; margin-top: 1px; margin-bottom: 1px" runat="server" />

                                            </ItemTemplate>
                                        </asp:TemplateField>



                                    </Columns>

                                    <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
                                    <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
                                    <RowStyle BackColor="White" ForeColor="#003399" />
                                    <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                                    <SortedAscendingCellStyle BackColor="#EDF6F6" />
                                    <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
                                    <SortedDescendingCellStyle BackColor="#D6DFDF" />
                                    <SortedDescendingHeaderStyle BackColor="#002876" />
                                </asp:GridView>
                            </ContentTemplate>
                        </asp:UpdatePanel>

                        <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                            <ProgressTemplate>
                                <img src="images/progress_bar.gif" style="max-width: 250px" />
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnAddi" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>

just name the same ID of the button u use in controlID of the AsyncPostBackTrigger and AssociatedUpdatePanelID same name u put the GridView