Microsoft Dot Net Master: How to Fixed GridView's Header and Footer when scrolling?

Friday, May 20, 2011

How to Fixed GridView's Header and Footer when scrolling?

1: Use the below Css Classes for GridView Header and footer
<style type="text/css">
        .GVFixedHeader { font-weight:bold; background-color: Green; position:relative; top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
        .GVFixedFooter { font-weight:bold; background-color: Green; position:relative; bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));}
    </style>

2: Use the below JavaScript to compute Footer's Position
<script language="javascript" type="text/javascript">
        function getScrollBottom(p_oElem)
        {
            return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
        }
    </script>

3: Create GridView inside a Panle, Set Panle's property ScrollBars to "Auto", Gridview's HeaderStyle to "GVFixedHeader" and FooterStyle to "GVFixedFooter".

<asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="150px" Width="400">
    <asp:GridView ShowFooter="True" runat="server" Width="96%" ID="gvDemo" AutoGenerateColumns="False">
    <HeaderStyle CssClass="GVFixedHeader" />
    <FooterStyle CssClass="GVFixedFooter" />
        <Columns>
            <asp:TemplateField HeaderText="C1">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C1 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C2">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C2 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
   </asp:Panel>

4: Code Behide: In the Page_Load function we Bind the data source to GridView.

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt=new DataTable();
        dt.Columns.Add("C1");
        dt.Columns.Add("C2");
        DataRow drRow;
        for(int i=0;i<=10;i++)
        {
             drRow = dt.NewRow();
            drRow[0] = "C1" + i;
            drRow[1] = "C2" + i;
            dt.Rows.Add(drRow);
        }
        gvDemo.DataSource=dt;
        gvDemo.DataBind();

    }

5: Run the Page, you will see that the Header and Footer is fixed when you scrolling.

6: Default.aspx page

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

<!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>GridViewDemo</title>
    <style type="text/css">
        .GVFixedHeader { font-weight:bold; background-color: Green; position:relative; top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
        .GVFixedFooter { font-weight:bold; background-color: Green; position:relative; bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));}
    </style>
    <script language="javascript" type="text/javascript">
        function getScrollBottom(p_oElem)
        {
            return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="150px" Width="400">
    <asp:GridView ShowFooter="True" runat="server" Width="96%" ID="gvDemo" AutoGenerateColumns="False">
    <HeaderStyle CssClass="GVFixedHeader" />
    <FooterStyle CssClass="GVFixedFooter" />
        <Columns>
            <asp:TemplateField HeaderText="C1">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C1 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C2">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C2 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
   </asp:Panel>
    </form>
</body>
</html>

7: Default.aspx.cs page

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt=new DataTable();
        dt.Columns.Add("C1");
        dt.Columns.Add("C2");
        DataRow drRow;
        for(int i=0;i<=10;i++)
        {
             drRow = dt.NewRow();
            drRow[0] = "C1" + i;
            drRow[1] = "C2" + i;
            dt.Rows.Add(drRow);
        }
        gvDemo.DataSource=dt;
        gvDemo.DataBind();

    }
}