How To Show Google Like Loading on GridView

santosh March 05, 2008

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleLikeLoading.aspx.cs"
    Inherits="GoogleLikeLoading" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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">

    <script type="text/javascript" language="javascript">
        function onUpdating() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // get the gridview element
            var gridView = $get('<%= this.grd.ClientID %>');
            // make it visible
            updateProgressDiv.style.display = '';
            // get the bounds of both the gridview and the progress div
            var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
            var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
            var x;
            var y;
            // do the math to figure out where to position the element
            // center of gridview
            x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
            y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
            // set the progress element to this position
            Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);

        }

        function onUpdated() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // make it invisible
            updateProgressDiv.style.display = 'none';

        }

    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="updatePanel" runat="server">
            <ContentTemplate>
                <asp:GridView ID="grd" runat="server" OnPageIndexChanging="grd_PageIndexChanging"
                    AllowPaging="true" PageSize="10">
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
        <cc1:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
            TargetControlID="updatePanel">
            <Animations>
                <OnUpdating>
                    <Parallel duration="0">
    <%-- place the update progress div over the gridview control --%>
                <ScriptAction Script="onUpdating();" />
                </Parallel>
                </OnUpdating>
                <OnUpdated>
                    <Parallel duration="0">
            <%--find the update progress div and place it over the gridview control--%>
                    <ScriptAction Script="onUpdated();" />
                    </Parallel>
                </OnUpdated>
            </Animations>
        </cc1:UpdatePanelAnimationExtender>
        <div id="updateProgressDiv" style="background-color: #CF4342; display: none; position: absolute;">
            <span style="color: #fff; margin: 3px">Loading ... </span>
        </div>
    </div>
    </form>
</body>
</html>

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

public partial class GoogleLikeLoading : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Session["ds"] != null)
            {
                grd.DataSource = Session["ds"] as DataTable;
                grd.DataBind();

            }
            else
            {
                grd.DataSource = CreateDataTable();
                grd.DataBind();

            }

        }


    }


    public DataTable CreateDataTable()
    {

        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Id", typeof(string)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        DataRow dr;
        for (int i = 0; i <= 100; i++)
        {

            dr = dt.NewRow();
            dr[0] = i.ToString();
            dr[1] = "Test" + i.ToString();
            dt.Rows.Add(dr);

        }
        Session["ds"] = dt;
        return dt;

    }
    protected void grd_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        //Remove this on Application server
        System.Threading.Thread.Sleep(3000);
        grd.PageIndex = e.NewPageIndex;
        grd.DataSource = Session["ds"] as DataTable;
        grd.DataBind();
    }
}

Reactions

Post a Comment

0 Comments