[Solved] ASP.Net: Display Progress Bar (Loader GIF) on Button Click in GridView Row

Hi makumbi,

Refer below sample.

HTML

<script type="text/javascript" src="../Scripts/Jquery-3.5.1.js"></script>
<script type="text/javascript" src="../Scripts/Jquery.datatables.min.js"></script>
<script type="text/javascript" src="../Scripts/datatable.fixedColumns.min.js"></script>
<link href="../Scripts/Jquery.datatables.min.css" rel="stylesheet" type="text/css" />
<link href="../Scripts/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $(".progress").each(function () {
            $(this).progressbar({
                value: parseInt($(this).find('.progress-label').text())
            });
        });
    });
</script>

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:TemplateField ItemStyle-Width="100">
            <ItemTemplate>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Link" EventName="Click" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:Button ID="Link" runat="server" Text="Download" OnClick="OnDownload" CssClass="buttonLink" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-Width="100">
            <ItemTemplate>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        <div class="modal">
                            <div class="center">
                                <img alt="" src="progress.gif" />
                            </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

Namespace

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{

    if (!this.IsPostBack)
    {

        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)),
                    new DataColumn("Name", typeof(string))});
        dt.Rows.Add(1, "John Hammond");
        dt.Rows.Add(2, "Mudassar Khan");
        dt.Rows.Add(3, "Suzanne Mathews");
        dt.Rows.Add(4, "Robert Schidner");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
protected void OnDownload(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String))})
        dt.Rows.Add(1, "John Hammond")
        dt.Rows.Add(2, "Mudassar Khan")
        dt.Rows.Add(3, "Suzanne Mathews")
        dt.Rows.Add(4, "Robert Schidner")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Protected Sub OnDownload(ByVal sender As Object, ByVal e As EventArgs)
    System.Threading.Thread.Sleep(2000)
End Sub

Screenshot