You must Sign In to post a response.
  • Category: ASP.NET

    How to disable the progress bar after downloading the data into excel using C#

    i want to hide progress bar after downloading the data into excel.

    In run mode as follows

    i have gridview data from database. i have one Button Export to excel when i click that button gridview data is downloading to excel.

    for downloading gridview data to excel code as follows

    protected void btnExport_Click(object sender, EventArgs e)

    {
    System.Threading.Thread.Sleep(3000);

    string script = "$(document).ready(function () { $('[id*=btnExport]').click(); });";
    ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);

    Response.ClearContent();
    Response.Buffer = true;
    Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", "Employee.xls"));

    Response.ContentType = "application/ms-excel";
    System.IO.StringWriter sw = new System.IO.StringWriter();
    HtmlTextWriter htw = new HtmlTextWriter(sw);

    gvEmpdetails.AllowPaging = false;
    BindGrid();

    //Applying stlye to gridview header cells
    for (int i = 0; i < gvEmpdetails.HeaderRow.Cells.Count; i++)
    {
    gvEmpdetails.HeaderRow.Cells[i].Style.Add("background-color", "#df5015");
    }
    gvEmpdetails.RenderControl(htw);
    Response.Write(sw.ToString());
    Response.End();

    }

    Source code as follows

    <pre lang="HTML"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>

    <style type="text/css">
    .modal
    {
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
    }
    .loading
    {
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
    }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    function ShowProgress() {
    setTimeout(function () {
    var modal = $('<div />');
    modal.addClass("modal");
    $('body').append(modal);
    var loading = $(".loading");
    loading.show();
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css({ top: top, left: left });
    }, 200);
    }
    $('form').live("submit", function () {
    ShowProgress();
    });
    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div align ="Center">

    <asp:Label ID="label" Text = "Proof of conecpt" Font-Bold ="True" forecolor ="Blue" runat ="server"></asp:Label>
    </div>
    <asp:GridView ID="gvEmpdetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
    <AlternatingRowStyle BackColor="White" />
    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
    <SortedAscendingCellStyle BackColor="#FDF5AC" />
    <SortedAscendingHeaderStyle BackColor="#4D0000" />
    <SortedDescendingCellStyle BackColor="#FCF6C0" />
    <SortedDescendingHeaderStyle BackColor="#820000" />
    </asp:GridView>

    <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
    </div>

    <div>
    <asp:Button ID="btnExport" runat="server" Text="Export to Excel" OnClick="btnExport_Click" />
    </div>
    </form>
    </body>
    </html>

    When i click the Exporttoexcel progress bar displaying after that data is displaying into excel.

    Then i close the excel. and in the background progress bar is running.

    i want to hide that progress bar.

    for that how can do.
  • #765783
    Hi,

    As I seen your code you want to hide the Div tag, you can do it in several ways like in client side and server side, i will share you how to hide it in client side.


    <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
    </div>


    this is your loading part design, in your div you are using class, if you want to hide based on class then use below code


    $( ".loading" ).hide();


    but the problem with hiding using class name is whenever you use the same class name all the div tags are hided, so to over come the above problem you have to declare the id of the div with name "divloading" and hide the div using that id.


    $( "#divloading" ).hide();


    Use the above code wherever you want...
    Hope this will helpful to you...

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #765808
    If you are using 'Response' object to download excel then user should have a download prompt and on click on save button download prompt has progress bar itself, why you want to use other progress bar ?
    progress bar is acceptable for uploading but for downloading I don't think it is useful.
    still if you want to show then here are some good links to help you
    http://forums.asp.net/post/4111996.aspx
    http://forums.asp.net/t/1631863.aspx?How+do+I+show+progress+bar+when+have+Response+End+
    http://stackoverflow.com/questions/5465115/how-to-stop-progress-indicator-after-downloading-a-pdf

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]


  • Sign In to post your comments