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

• Download GridViewDemo.zip - 1.3 KB

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.