ASP.NET

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

Introduction

This article is to show you how to Fix GridView's Header and Footer in a simple code with CSS and JavaScript.

Background

Understand CSS and JavaScript

Using the code

  1. Use the below 2 Css Classes for GridView Header and footer
    .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));}
  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 Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
     Handles Me.Load
        Dim dt As New DataTable
        dt.Columns.Add("C1")
        dt.Columns.Add("C2")
        Dim drRow As DataRow
        For i As Integer = 0 To 10
            drRow = dt.NewRow
            drRow(0) = "C1" & i
            drRow(1) = "C2" & i
            dt.Rows.Add(drRow)
        Next
        Me.gvDemo.DataSource = dt
        Me.gvDemo.DataBind()
    End Sub
  5. Run the Page, you will see that the Header and Footer is fixed when you scrolling.

Download Source Code

10/25/2007 3:12:00 AM Category GridView

People who read this, also read...


Back