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.

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here