ASP.NET: Show Google Like Loading on GridView

ASPX Markup

<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>

Code Behind

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();
}

ASP.NET

Search This Blog

Wednesday, September 1, 2010

Show Google Like Loading on GridView

No comments:

Post a Comment