locked
How to show updateProgess with postback trigger on button inside grideview RRS feed

  • Question

  • User2103449440 posted

    I am trying to create files on server on button click and same time i am downloading those files on client machine while the process is sucessfull but while the process is going on I am not able to show updateProgess or loader on the screen. I have kept the updatePanel with updateProgess on master page and in the content page there's a gridview with a linkbutton in the header which generates files and download it. The only problem i am facing is i am not to show progess bar is there any way i could do it.

    This is my master page:

    <div class="container-fluid" id="body">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server">
                </asp:ContentPlaceHolder>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="menuBar" />
                <asp:AsyncPostBackTrigger ControlID="MenuCategories" />
            </Triggers>
        </asp:UpdatePanel>
    
        <asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
            <ProgressTemplate>
                <div class="ui-widget-overlay">
                    <div id="dvLoading">
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>

    And this is my content page:

    <div>
            <cc1:TabContainer ID="TabContainer3" runat="server" ActiveTabIndex="0" AutoPostBack="true" CssClass="AspTabContainer">
            <cc1:TabPanel ID="TabPanel6" runat="server" HeaderText="Transaction">
                <ContentTemplate>
                    <div id="Div1" runat="server" style="width:2000px">
                        <asp:GridView ID="GridView1" runat="server"
                            AutoGenerateColumns="False"
                            AllowSorting="False" AllowPaging="false" PageSize="7"
                            CssClass="table table-responsive table-bordered table-hover AspGridview">
                            <PagerStyle CssClass="pagination" />
                            <Columns>
                                <asp:TemplateField HeaderText="Select Code">
                                    <HeaderTemplate>
                                        <asp:CheckBox ID="SelectAllCode" runat="server" OnCheckedChanged="SelectAllCode_CheckedChanged" AutoPostBack="true" />
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="SelectCode" runat="server" OnCheckedChanged="SelectCode_CheckedChanged" AutoPostBack="true" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Actions">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="LnkViewButton" runat="server" Font-Underline="true" Enabled="false" OnClick="LnkViewButton_Click" CssClass="editbutton">View</asp:LinkButton>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Actions" HeaderStyle-Width="120px">
                                    <HeaderTemplate>
                                        <asp:LinkButton ID="LnkGenerateAllButton" BackColor="#ffffff" ForeColor="#000000" runat="server" Font-Underline="true"
                                            Enabled="false" OnClick="LnkGenerateAllButton_Click" CssClass="editbutton">Generate All</asp:LinkButton>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:LinkButton ID="LnkGenerateButton" runat="server" Font-Underline="true" Enabled="false"
                                            OnClick="LnkGenerateButton_Click" CssClass="editbutton">Generate</asp:LinkButton>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="CHARGE_CODE" SortExpression="CHARGE_CODE" HeaderText="Charge Code"></asp:BoundField>
                                <asp:BoundField DataField="PRO_CLIENT_FLAG" SortExpression="PRO_CLIENT_FLAG" HeaderText="Pro Client Flag"></asp:BoundField>
                                <asp:BoundField DataField="CHARGE_NAME" SortExpression="CHARGE_NAME" HeaderText="Charge Name"></asp:BoundField>
                                <asp:BoundField DataField="DEPT_NAME" SortExpression="Dept_NAME" HeaderText="Department Name"></asp:BoundField>
                                <asp:BoundField DataField="PROCESSED_BY" SortExpression="PROCESSED_BY" HeaderText="Processed By"></asp:BoundField>
                                <asp:BoundField DataField="PROCESSED_DATE" SortExpression="PROCESSED_DATE" HeaderText="Processed Date"></asp:BoundField>
                            </Columns>
                            <HeaderStyle BackColor="#0089d0" ForeColor="White" HorizontalAlign="Left" />
                            <PagerStyle BackColor="#0089d0" Font-Bold="true" ForeColor="White" />
                            <EmptyDataTemplate>No Record Found</EmptyDataTemplate>
                            <EditRowStyle BackColor="#c0e6fa" />
                        </asp:GridView>
                    </div>
                </ContentTemplate>
            </cc1:TabPanel>
        </cc1:TabContainer>
    
    </div>

    Code behind (Content Page):

    LinkButton lnkheader = (LinkButton)GrdChargeCodeProcessing.HeaderRow.FindControl("LnkGenerateAllButton");
    ScriptManager.GetCurrent(this).RegisterPostBackControl(lnkheader);

    Thankyou for your help.

    Wednesday, August 2, 2017 7:10 AM

All replies

  • User-1509636757 posted

    UpdateProgress is intended for Async postback. A PostbackTrigger will post back the page like a normal button would. So, I believe that is the expected behavior that you are facing.

    Alternatively, you can code in client side to explicitly show UpdateProgress when any button set as PostbackTrigger is clicked. Here is a working example:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .up {
                ;
                z-index: 999;
                height: 100%;
                width: 100%;
                top: 0;
                background-color: Black;
                filter: alpha(opacity=60);
                opacity: 0.6;
                -moz-opacity: 0.8;
                color: white;
                font-size: 20px;
            }
        </style>
        <script type="text/javascript">
            function showProgress() {
                var updateProgress = $get("<%= UpdateProgress.ClientID %>");
                updateProgress.style.display = "block";
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel runat="server" ID="updatepanel1">
                <ContentTemplate>
                    <div>
                        <asp:FileUpload ID="uploadfiles1" runat="server" />
                        <asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="btnUpload_Click" OnClientClick="showProgress()" /><br />
                        <asp:Label ID="lblMsg" runat="server" />
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:PostBackTrigger ControlID="btnUpload" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
                <ProgressTemplate>
                    <div class="up">
                        <div style="z-index: 1000;">
                            Please wait.. file is being uploaded...
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </form>
    </body>
    </html>
    {
        public partial class WebForm261 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                
            }
    
            protected void btnUpload_Click(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(3000); //-- putting a sleep for demonstration
                string fileName = System.IO.Path.GetFileName(uploadfiles1.FileName);
                uploadfiles1.SaveAs(Server.MapPath("~/Pictures/") + fileName);
                lblMsg.Text = "File Uploaded Successfully";
            }
        }
    }


    Wednesday, August 2, 2017 8:45 AM