How to show the Loader image like in gmail when loading Data into GridView?

Question

Could any one help how to show the loader image when the data is loading ?I did a sample one which is not a perfect one.Please suggest me the best way .I have a question can we use jquery or javascript?Here when i click the load the data has to load to GV in between this process the preloader has to be visible like in GMAIL. Like this Process Demo Picture

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Loader Image While Loading Data in GV.aspx.cs"
    Inherits="Loader_Image_While_Loading_Data_in_GV" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Loader Image While Loading Data in GV</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Image ID="load_img" runat="server" Height="70px" Width="70px" ImageUrl="~/Images/ajax-loader_green.gif"
                        Visible="false" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnload" runat="server" Text="Load" OnClick="btnload_Click" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="gv1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                        BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
                        <AlternatingRowStyle BackColor="PaleGoldenrod" />
                        <FooterStyle BackColor="Tan" />
                        <HeaderStyle BackColor="Tan" Font-Bold="True" />
                        <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                        <SortedAscendingCellStyle BackColor="#FAFAE7" />
                        <SortedAscendingHeaderStyle BackColor="#DAC09E" />
                        <SortedDescendingCellStyle BackColor="#E1DB9C" />
                        <SortedDescendingHeaderStyle BackColor="#C2A47B" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

In the Code behind i wrote like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AdventureWorksModel;

public partial class Loader_Image_While_Loading_Data_in_GV : System.Web.UI.Page
{
    AdventureWorksEntities awe = new AdventureWorksEntities();
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnload_Click(object sender, EventArgs e)
    {
        load_img.Visible = true;
        gv1.DataSource = awe.CountryRegionCurrencies.ToList();
        gv1.DataBind();
        load_img.Visible = false;
    }
}

Anwar Chandra · Accepted Answer · 2011-01-31 10:31:46Z

1

Loader image is usually used to notify user that some Ajax activities are running.

I would suggest you to wrap your GridView with UpdatePanel as follows:

<form id="form1" runat="server">
<!-- You must always add a ScriptManager control -->
<asp:ScriptManager ID="ScriptManager1" runat="server" />



<td>
    <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="btnLoad" eventname="Click" />
        </Triggers>
        <ContentTemplate>
           <asp:GridView ID="gv1" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</td>

</form>

Everything inside UpdatePanel's ContentTemplate will be updated when the UpdatePanel's Triggger is occured (in this case, when user click btnLoad button)

Now, you need to add UpdateProgress to inform user that the server side processing is still progressing.

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <!-- it doesn't have to be asp Image control -->
    <img src="Images/ajax-loader_green.gif" alt="" />
</asp:UpdateProgress>

you can put it anywhere.

example of usage, read this blog

answered Jan 31, 2011 at 10:31

Anwar Chandra

8,6699 gold badges47 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hemant Kumar Over a year ago

But i click for the next time automatically am getting the values from Cache.Can we do this using javascript or jquery?

Anwar Chandra Over a year ago

If it is cached on server, then it should be another question. Did you get your image loader yet?

Anwar Chandra Over a year ago

If you're getting output from Output cache, it's a server side problem. doing Ajax with jQuery or javascript will not resolve the issue.

Jovica · Accepted Answer · 2011-06-15 10:20:48Z

1

Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally): http://plugins.jquery.com/project/CenterImage

Demo site: http://www.demosites.somee.com/demos/centerimage.html

Usage: This plugin positions a loading image centrally over a specified html container (div, span...).

Currently available configuration settings:

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

Minimum configuration for initialization:

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

Call this, in order to remove the loading image (and the overlay)

$('.4th').CenterImage('remove');

edited Jun 15, 2011 at 10:20

user557219

answered Jun 15, 2011 at 9:40

Jovica

211 bronze badge

Collectives™ on Stack Overflow

How to show the Loader image like in gmail when loading Data into GridView?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related